test: search and migration filter

Author: navinkarkera

src/studio-home/factories/mockApiResponses.tsx

@@ -103,6 +103,15 @@ export const generateGetStudioHomeLibrariesApiResponse = () => ({
       migratedToCollectionKey: 'imported-content',
       migratedToCollectionTitle: 'Imported content',
     },
+    {
+      displayName: 'MBA 1',
+      libraryKey: 'library-v1:MBA+1234',
+      url: '/library/library-v1:MBA+1234',
+      org: 'Cambridge',
+      number: '1234',
+      canEdit: true,
+      isMigrated: false,
+    },
   ],
 });
 

src/studio-home/tabs-section/TabsSection.test.tsx

@@ -12,6 +12,7 @@ import {
   fireEvent,
   screen,
   act,
+  within,
 } from '@src/testUtils';
 import messages from '../messages';
 import tabMessages from './messages';
@@ -269,7 +270,7 @@ describe('<TabsSection />', () => {
     beforeEach(async () => {
       await axiosMock.onGet(courseApiLinkV2).reply(200, generateGetStudioCoursesApiResponseV2());
     });
-    it('should switch to Legacy Libraries tab and render specific v1 library details', async () => {
+    it('should switch to Legacy Libraries tab and render - search and filter should work as expected', async () => {
       await axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
       await axiosMock.onGet(libraryApiLink).reply(200, generateGetStudioHomeLibrariesApiResponse());
       render();
@@ -280,12 +281,57 @@ describe('<TabsSection />', () => {
       await user.click(librariesTab);
 
       expect(librariesTab).toHaveClass('active');
+      const panel = await screen.findByRole('tabpanel', { hidden: false });
 
       expect(await screen.findByText(studioHomeMock.libraries[0].displayName)).toBeVisible();
 
       expect(
         await screen.findByText(`${studioHomeMock.libraries[0].org} / ${studioHomeMock.libraries[0].number}`),
       ).toBeVisible();
+
+      // Migration info should be displayed
+      const migratedContent = generateGetStudioHomeLibrariesApiResponse().libraries[1];
+      expect(await screen.findByText(migratedContent.displayName)).toBeVisible();
+      const newTitleElement = await screen.findAllByText(migratedContent.migratedToTitle!);
+      expect(newTitleElement[0]).toBeVisible();
+      expect(newTitleElement[0]).toHaveAttribute('href', `/library/${migratedContent.migratedToKey}`);
+      expect(newTitleElement[1]).toHaveAttribute(
+        'href',
+        `/library/${migratedContent.migratedToKey}/collection/${migratedContent.migratedToCollectionKey}`,
+      );
+
+      // Check total count display
+      expect(await within(panel).findByText('Showing 3 of 3')).toBeInTheDocument();
+
+      // Test search functionality
+      const searchField = await within(panel).findByPlaceholderText('Search');
+
+      fireEvent.change(searchField, { target: { value: 'Legacy' } });
+      // Should only show 1 result i.e. migratedContent.displayName
+      expect(await within(panel).findByText('Showing 1 of 3')).toBeInTheDocument();
+      expect(await within(panel).findByText(migratedContent.displayName)).toBeVisible();
+      // Should not show other items.
+      expect(within(panel).queryByText(
+        generateGetStudioHomeLibrariesApiResponse().libraries[0].displayName,
+      )).not.toBeInTheDocument();
+      // reset search
+      fireEvent.change(searchField, { target: { value: '' } });
+
+      // Test migration filter
+      const filter = await within(panel).findByRole('button', { name: 'Any Migration Status' });
+      await user.click(filter);
+      const migratedOption = await within(panel).findByRole('checkbox', { name: 'Migrated' });
+      // This should uncheck Migrated option as all options are selected by default
+      await user.click(migratedOption);
+      // Should only show 2 result i.e. unmigrated libraries
+      expect(await within(panel).findByText('Showing 2 of 3')).toBeInTheDocument();
+      const unmigratedOption = await within(panel).findByRole('checkbox', { name: 'Unmigrated' });
+      // Un-checking both options should reset the state to both checked.
+      await user.click(unmigratedOption);
+      expect(migratedOption).toBeChecked();
+      expect(unmigratedOption).toBeChecked();
+      // Should only show all 3 results
+      expect(await within(panel).findByText('Showing 3 of 3')).toBeInTheDocument();
     });
 
     it('should switch to Libraries tab and render specific v2 library details', async () => {
@@ -331,17 +377,6 @@ describe('<TabsSection />', () => {
       expect(
         await screen.findByText(`${studioHomeMock.libraries[0].org} / ${studioHomeMock.libraries[0].number}`),
       ).toBeVisible();
-
-      // Migration info should be displayed
-      const migratedContent = generateGetStudioHomeLibrariesApiResponse().libraries[1];
-      expect(await screen.findByText(migratedContent.displayName)).toBeVisible();
-      const newTitleElement = await screen.findAllByText(migratedContent.migratedToTitle!);
-      expect(newTitleElement[0]).toBeVisible();
-      expect(newTitleElement[0]).toHaveAttribute('href', `/library/${migratedContent.migratedToKey}`);
-      expect(newTitleElement[1]).toHaveAttribute(
-        'href',
-        `/library/${migratedContent.migratedToKey}/collection/${migratedContent.migratedToCollectionKey}`,
-      );
     });
 
     it('should switch to Libraries tab and render specific v2 library details ("v2 only" mode)', async () => {
@@ -402,10 +437,11 @@ describe('<TabsSection />', () => {
       await axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
       await axiosMock.onGet(libraryApiLink).reply(404);
       render();
+      const user = userEvent.setup();
       await executeThunk(fetchStudioHomeData(), store.dispatch);
 
       const librariesTab = await screen.findByText(tabMessages.legacyLibrariesTabTitle.defaultMessage);
-      fireEvent.click(librariesTab);
+      await user.click(librariesTab);
 
       expect(librariesTab).toHaveClass('active');
 

src/studio-home/tabs-section/libraries-tab/index.tsx

@@ -15,7 +15,7 @@ import SearchFilterWidget from '../../../search-manager/SearchFilterWidget';
 
 function findInValues<T extends {}>(arr: T[] | undefined, value: string) {
   return arr?.filter(o => Object.entries(o).some(entry => String(entry[1]).toLowerCase().includes(
-    String(value).toLowerCase().trim()
+    String(value).toLowerCase().trim(),
   )));
 }
 
@@ -76,7 +76,7 @@ const MigrationFilter = ({ filters, setFilters }: MigrationFilterProps) => {
     <SearchFilterWidget
       appliedFilters={appliedFilters}
       label={label}
-      clearFilter={() => setFilters(BaseFilterState)}  // On clear select both migrated and unmigrated options.
+      clearFilter={() => setFilters(BaseFilterState)} // On clear select both migrated and unmigrated options.
       icon={FilterList}
       skipLabelUpdate
     >
@@ -119,15 +119,17 @@ const LibrariesTab = () => {
   }
 
   if (isError) {
-    <AlertMessage
-      variant="danger"
-      description={(
-        <Row className="m-0 align-items-center">
-          <Icon src={Error} className="text-danger-500 mr-1" />
-          <span>{intl.formatMessage(messages.librariesTabErrorMessage)}</span>
-        </Row>
-      )}
-    />
+    return (
+      <AlertMessage
+        variant="danger"
+        description={(
+          <Row className="m-0 align-items-center">
+            <Icon src={Error} className="text-danger-500 mr-1" />
+            <span>{intl.formatMessage(messages.librariesTabErrorMessage)}</span>
+          </Row>
+        )}
+      />
+    );
   }
 
   return (
@@ -157,19 +159,19 @@ const LibrariesTab = () => {
         {currentPageData?.map(({
           displayName, org, number, url, isMigrated, migratedToKey, migratedToTitle, migratedToCollectionKey,
         }) => (
-            <CardItem
-              key={`${org}+${number}`}
-              isLibraries
-              displayName={displayName}
-              org={org}
-              number={number}
-              url={url}
-              isMigrated={isMigrated}
-              migratedToKey={migratedToKey}
-              migratedToTitle={migratedToTitle}
-              migratedToCollectionKey={migratedToCollectionKey}
-            />
-          ))}
+          <CardItem
+            key={`${org}+${number}`}
+            isLibraries
+            displayName={displayName}
+            org={org}
+            number={number}
+            url={url}
+            isMigrated={isMigrated}
+            migratedToKey={migratedToKey}
+            migratedToTitle={migratedToTitle}
+            migratedToCollectionKey={migratedToCollectionKey}
+          />
+        ))}
         {
           totalPages > 1
             && (
@@ -184,7 +186,7 @@ const LibrariesTab = () => {
         }
       </div>
     </>
-  )
+  );
 };
 
 export default LibrariesTab;