test: Tests added for new added/deleted states on sync modal

Author: ChrisChV

src/container-comparison/CompareContainersWidget.test.tsx

@@ -87,6 +87,48 @@ describe('CompareContainersWidget', () => {
     expect(await screen.findByRole('button', { name: 'subsection block 0' })).toBeInTheDocument();
   });
 
+  test('should show removed container diff state', async () => {
+    // mocks title
+    axiosMock.onGet(getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId)).reply(200, { publishedDisplayName: 'Test Title' });
+    axiosMock.onGet(
+      getLibraryContainerApiUrl('lct:org1:Demo_course_generated:subsection:subsection-0'),
+    ).reply(200, { publishedDisplayName: 'subsection block 0' });
+
+    const user = userEvent.setup();
+    render(<CompareContainersWidget
+      upstreamBlockId={mockGetContainerMetadata.sectionId}
+      downstreamBlockId={mockGetCourseContainerChildren.sectionId}
+    />);
+    expect((await screen.findAllByText('Test Title')).length).toEqual(2);
+    // left i.e. before side block
+    const block = await screen.findByText('subsection block 00');
+    await user.click(block);
+
+    const removedRows = await screen.findAllByText('This unit was removed');
+    await user.click(removedRows[0]);
+
+    expect(await screen.findByText('This unit has been removed')).toBeInTheDocument();
+  });
+
+  test('should show new added container diff state', async () => {
+    // mocks title
+    axiosMock.onGet(getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId)).reply(200, { publishedDisplayName: 'Test Title' });
+    axiosMock.onGet(
+      getLibraryContainerApiUrl('lct:org1:Demo_course_generated:subsection:subsection-0'),
+    ).reply(200, { publishedDisplayName: 'subsection block 0' });
+
+    const user = userEvent.setup();
+    render(<CompareContainersWidget
+      upstreamBlockId={mockGetContainerMetadata.sectionId}
+      downstreamBlockId="block-v1:UNIX+UX1+2025_T3+type@section+block@0-new"
+    />);
+    const blocks = await screen.findAllByText('This subsection will be added in the new version');
+    await user.click(blocks[0]);
+
+    screen.logTestingPlaygroundURL();
+    expect(await screen.findByText(/this subsection is new/i)).toBeInTheDocument();
+  });
+
   test('should show alert if the only change is a single text component with local overrides', async () => {
     const url = getLibraryContainerApiUrl(mockGetContainerMetadata.sectionId);
     axiosMock.onGet(url).reply(200, { publishedDisplayName: 'Test Title' });

src/container-comparison/data/api.mock.ts

@@ -8,7 +8,7 @@ import * as unitApi from '@src/course-unit/data/api';
  * This mock returns a fixed response for the given container ID.
  */
 export async function mockGetCourseContainerChildren(containerId: string): Promise<CourseContainerChildrenData> {
-  const numChildren: number = 3;
+  let numChildren: number = 3;
   let blockType: string;
   let displayName: string;
   let upstreamReadyToSyncChildrenInfo: UpstreamReadyToSyncChildrenInfo[] = [];
@@ -61,8 +61,9 @@ export async function mockGetCourseContainerChildren(containerId: string): Promi
     case mockGetCourseContainerChildren.subsectionIdLoading:
       return new Promise(() => { });
     default:
-      blockType = 'unit';
-      displayName = 'subsection block 00';
+      blockType = 'section';
+      displayName = 'section block 00';
+      numChildren = 0;
       break;
   }
   const children = Array(numChildren).fill(mockGetCourseContainerChildren.childTemplate).map((child, idx) => (