test: add test for collections card

Author: navinkarkera

src/library-authoring/LibraryAuthoringPage.test.tsx

@@ -27,9 +27,12 @@ const returnEmptyResult = (_url, req) => {
   // We have to replace the query (search keywords) in the mock results with the actual query,
   // because otherwise we may have an inconsistent state that causes more queries and unexpected results.
   mockEmptyResult.results[0].query = query;
+  mockEmptyResult.results[2].query = query;
   // And fake the required '_formatted' fields; it contains the highlighting <mark>...</mark> around matched words
   // eslint-disable-next-line no-underscore-dangle, no-param-reassign
   mockEmptyResult.results[0]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
+  // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+  mockEmptyResult.results[2]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
   return mockEmptyResult;
 };
 
@@ -47,10 +50,14 @@ const returnLowNumberResults = (_url, req) => {
   newMockResult.results[0].query = query;
   // Limit number of results to just 2
   newMockResult.results[0].hits = mockResult.results[0]?.hits.slice(0, 2);
+  newMockResult.results[2].hits = mockResult.results[2]?.hits.slice(0, 2);
   newMockResult.results[0].estimatedTotalHits = 2;
+  newMockResult.results[2].estimatedTotalHits = 2;
   // And fake the required '_formatted' fields; it contains the highlighting <mark>...</mark> around matched words
   // eslint-disable-next-line no-underscore-dangle, no-param-reassign
   newMockResult.results[0]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
+  // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+  newMockResult.results[2]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
   return newMockResult;
 };
 
@@ -132,42 +139,46 @@ describe('<LibraryAuthoringPage />', () => {
 
     // "Recently Modified" header + sort shown
     expect(getAllByText('Recently Modified').length).toEqual(2);
-    expect(getByText('Collections (0)')).toBeInTheDocument();
+    expect(getByText('Collections (6)')).toBeInTheDocument();
     expect(getByText('Components (10)')).toBeInTheDocument();
     expect((await findAllByText('Introduction to Testing'))[0]).toBeInTheDocument();
 
     // Navigate to the components tab
     fireEvent.click(getByRole('tab', { name: 'Components' }));
     // "Recently Modified" default sort shown
     expect(getAllByText('Recently Modified').length).toEqual(1);
-    expect(queryByText('Collections (0)')).not.toBeInTheDocument();
+    expect(queryByText('Collections (6)')).not.toBeInTheDocument();
     expect(queryByText('Components (10)')).not.toBeInTheDocument();
 
     // Navigate to the collections tab
     fireEvent.click(getByRole('tab', { name: 'Collections' }));
     // "Recently Modified" default sort shown
     expect(getAllByText('Recently Modified').length).toEqual(1);
-    expect(queryByText('Collections (0)')).not.toBeInTheDocument();
+    expect(queryByText('Collections (6)')).not.toBeInTheDocument();
     expect(queryByText('Components (10)')).not.toBeInTheDocument();
     expect(queryByText('There are 10 components in this library')).not.toBeInTheDocument();
-    expect(getByText('Coming soon!')).toBeInTheDocument();
+    expect((await findAllByText('Collection 1'))[0]).toBeInTheDocument();
 
     // Go back to Home tab
     // This step is necessary to avoid the url change leak to other tests
     fireEvent.click(getByRole('tab', { name: 'Home' }));
     // "Recently Modified" header + sort shown
     expect(getAllByText('Recently Modified').length).toEqual(2);
-    expect(getByText('Collections (0)')).toBeInTheDocument();
+    expect(getByText('Collections (6)')).toBeInTheDocument();
     expect(getByText('Components (10)')).toBeInTheDocument();
   });
 
-  it('shows a library without components', async () => {
+  it('shows a library without components and collections', async () => {
     fetchMock.post(searchEndpoint, returnEmptyResult, { overwriteRoutes: true });
     const doc = await renderLibraryPage();
 
     expect(await doc.findByText('Content library')).toBeInTheDocument();
     expect((await doc.findAllByText(libraryTitle))[0]).toBeInTheDocument();
 
+    fireEvent.click(doc.getByRole('tab', { name: 'Collections' }));
+    expect(doc.getByText('You have not added any collection to this library yet.')).toBeInTheDocument();
+
+    fireEvent.click(doc.getByRole('tab', { name: 'Home' }));
     expect(doc.getByText('You have not added any content to this library yet.')).toBeInTheDocument();
   });
 
@@ -214,6 +225,14 @@ describe('<LibraryAuthoringPage />', () => {
     // Navigate to the components tab
     fireEvent.click(doc.getByRole('tab', { name: 'Components' }));
     expect(doc.getByText('No matching components found in this library.')).toBeInTheDocument();
+
+    // Navigate to the collections tab
+    fireEvent.click(doc.getByRole('tab', { name: 'Collections' }));
+    expect(getByText('No matching collections found in this library.')).toBeInTheDocument();
+
+    // Go back to Home tab
+    // This step is necessary to avoid the url change leak to other tests
+    fireEvent.click(doc.getByRole('tab', { name: 'Home' }));
   });
 
   it('should open and close new content sidebar', async () => {
@@ -277,28 +296,37 @@ describe('<LibraryAuthoringPage />', () => {
     expect(doc.queryByText('(Never Published)')).not.toBeInTheDocument();
   });
 
-  it('show the "View All" button when viewing library with many components', async () => {
+  it('show the "View All" button when viewing library with many components and collections', async () => {
     const doc = await renderLibraryPage();
 
     expect(doc.getByText('Content library')).toBeInTheDocument();
     expect((await doc.findAllByText(libraryTitle))[0]).toBeInTheDocument();
 
     // "Recently Modified" header + sort shown
     await waitFor(() => { expect(doc.getAllByText('Recently Modified').length).toEqual(2); });
-    expect(doc.getByText('Collections (0)')).toBeInTheDocument();
+    expect(doc.getByText('Collections (6)')).toBeInTheDocument();
     expect(doc.getByText('Components (10)')).toBeInTheDocument();
     expect(doc.getAllByText('Introduction to Testing')[0]).toBeInTheDocument();
     expect(doc.queryByText('You have not added any content to this library yet.')).not.toBeInTheDocument();
 
-    // There should only be one "View All" button, since the Components count
+    // There should be two "View All" button, since the Components and Collections count
     // are above the preview limit (4)
-    expect(doc.getByText('View All')).toBeInTheDocument();
+    expect(doc.getAllByText('View All').length).toEqual(2);
 
-    // Clicking on "View All" button should navigate to the Components tab
-    fireEvent.click(doc.getByText('View All'));
+    // Clicking on first "View All" button should navigate to the Collections tab
+    fireEvent.click(doc.getAllByText('View All')[0]);
+    // "Recently Modified" default sort shown
+    expect(doc.getAllByText('Recently Modified').length).toEqual(1);
+    expect(doc.queryByText('Collections (6)')).not.toBeInTheDocument();
+    expect(doc.queryByText('Components (10)')).not.toBeInTheDocument();
+    expect(doc.getByText('Collection 1')).toBeInTheDocument();
+
+    fireEvent.click(doc.getByRole('tab', { name: 'Home' }));
+    // Clicking on second "View All" button should navigate to the Components tab
+    fireEvent.click(doc.getAllByText('View All')[1]);
     // "Recently Modified" default sort shown
     expect(doc.getAllByText('Recently Modified').length).toEqual(1);
-    expect(doc.queryByText('Collections (0)')).not.toBeInTheDocument();
+    expect(doc.queryByText('Collections (6)')).not.toBeInTheDocument();
     expect(doc.queryByText('Components (10)')).not.toBeInTheDocument();
     expect(doc.getAllByText('Introduction to Testing')[0]).toBeInTheDocument();
 
@@ -307,7 +335,7 @@ describe('<LibraryAuthoringPage />', () => {
     fireEvent.click(doc.getByRole('tab', { name: 'Home' }));
     // "Recently Modified" header + sort shown
     expect(doc.getAllByText('Recently Modified').length).toEqual(2);
-    expect(doc.getByText('Collections (0)')).toBeInTheDocument();
+    expect(doc.getByText('Collections (6)')).toBeInTheDocument();
     expect(doc.getByText('Components (10)')).toBeInTheDocument();
   });
 
@@ -320,7 +348,7 @@ describe('<LibraryAuthoringPage />', () => {
 
     // "Recently Modified" header + sort shown
     await waitFor(() => { expect(doc.getAllByText('Recently Modified').length).toEqual(2); });
-    expect(doc.getByText('Collections (0)')).toBeInTheDocument();
+    expect(doc.getByText('Collections (2)')).toBeInTheDocument();
     expect(doc.getByText('Components (2)')).toBeInTheDocument();
     expect(doc.getAllByText('Introduction to Testing')[0]).toBeInTheDocument();
     expect(doc.queryByText('You have not added any content to this library yet.')).not.toBeInTheDocument();

src/library-authoring/components/CollectionCard.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { render } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import type { Store } from 'redux';
+
+import { ToastProvider } from '../../generic/toast-context';
+import { type CollectionHit } from '../../search-manager';
+import initializeStore from '../../store';
+import CollectionCard from './CollectionCard';
+
+let store: Store;
+let axiosMock: MockAdapter;
+
+const CollectionHitSample: CollectionHit = {
+  id: '1',
+  type: 'collection',
+  contextKey: 'lb:org1:Demo_Course',
+  org: 'org1',
+  breadcrumbs: [{ displayName: 'Demo Lib' }],
+  displayName: 'Collection Display Name',
+  description: 'Collection description',
+  formatted: {
+    displayName: 'Collection Display Formated Name',
+    description: 'Collection description',
+  },
+  created: 1722434322294,
+  modified: 1722434322294,
+  accessId: 1,
+  tags: {},
+};
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <ToastProvider>
+        <CollectionCard
+          collectionHit={CollectionHitSample}
+        />
+      </ToastProvider>
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<CollectionCard />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    axiosMock.restore();
+  });
+
+  it('should render the card with title and description', () => {
+    const { getByText } = render(<RootWrapper />);
+
+    expect(getByText('Collection Display Formated Name')).toBeInTheDocument();
+    expect(getByText('Collection description')).toBeInTheDocument();
+  });
+});

src/search-manager/data/api.ts

@@ -139,7 +139,7 @@ export interface CollectionHit {
    * - After that is the name and usage key of any parent Section/Subsection/Unit/etc.
    */
   breadcrumbs: Array<{ displayName: string }>;
-  // tags: ContentHitTags;
+  tags: ContentHitTags;
   /** Same fields with <mark>...</mark> highlights */
   created: number;
   modified: number;
@@ -193,6 +193,8 @@ export async function fetchSearchResults({
     totalHits: number,
     blockTypes: Record<string, number>,
     problemTypes: Record<string, number>,
+    collectionHits: CollectionHit[],
+    totalCollectionHits: number,
   }> {
   const queries: MultiSearchQuery[] = [];
 
@@ -274,12 +276,12 @@ export async function fetchSearchResults({
 
   const { results } = await client.multiSearch(({ queries }));
   return {
-    hits: results[0].hits.map(formatSearchHit),
+    hits: results[0].hits.map(formatSearchHit) as ContentHit[],
     totalHits: results[0].totalHits ?? results[0].estimatedTotalHits ?? results[0].hits.length,
     blockTypes: results[1].facetDistribution?.block_type ?? {},
     problemTypes: results[1].facetDistribution?.['content.problem_types'] ?? {},
     nextOffset: results[0].hits.length === limit || results[2].hits.length === limit ? offset + limit : undefined,
-    collectionHits: results[2].hits.map(formatSearchHit),
+    collectionHits: results[2].hits.map(formatSearchHit) as CollectionHit[],
     totalCollectionHits: results[2].totalHits ?? results[2].estimatedTotalHits ?? results[2].hits.length,
   };
 }

src/search-manager/index.ts

@@ -8,4 +8,4 @@ export { default as SearchSortWidget } from './SearchSortWidget';
 export { default as Stats } from './Stats';
 export { HIGHLIGHT_PRE_TAG, HIGHLIGHT_POST_TAG } from './data/api';
 
-export type { ContentHit } from './data/api';
+export type { CollectionHit, ContentHit } from './data/api';

src/search-modal/__mocks__/empty-search-result.json

@@ -22,6 +22,15 @@
           "block_type": {}
       },
       "facetStats": {}
+    },
+    {
+      "indexUid": "studio",
+      "hits": [],
+      "query": "noresult",
+      "processingTimeMs": 0,
+      "limit": 20,
+      "offset": 0,
+      "estimatedTotalHits": 0
     }
   ]
 }