test: add tests

Author: navinkarkera

src/library-authoring/data/api.mocks.ts

@@ -17,6 +17,10 @@ export const mockGetContentLibraryV2List = {
   applyMock: () => jest.spyOn(api, 'getContentLibraryV2List').mockResolvedValue(
     camelCaseObject(contentLibrariesListV2),
   ),
+  applyMockNoPagination: () => jest.spyOn(api, 'getContentLibraryV2List').mockResolvedValue(
+    camelCaseObject(contentLibrariesListV2.results),
+  ),
+  applyMockNoPaginationEmpty: () => jest.spyOn(api, 'getContentLibraryV2List').mockResolvedValue([] as api.ContentLibrary[]),
   applyMockError: () => jest.spyOn(api, 'getContentLibraryV2List').mockRejectedValue(
     createAxiosError({ code: 500, message: 'Internal Error.', path: api.getContentLibraryV2ListApiUrl() }),
   ),

src/library-authoring/data/api.ts

@@ -409,7 +409,7 @@ export async function getContentLibraryV2List(
 ): Promise<LibrariesV2Response>;
 export async function getContentLibraryV2List(
   customParams: GetLibrariesV2CustomParams
-): Promise<LibrariesV2Response>;
+): Promise<LibrariesV2Response | ContentLibrary[]>;
 export async function getContentLibraryV2List(
   customParams: GetLibrariesV2CustomParams,
 ): Promise<LibrariesV2Response | ContentLibrary[]> {

src/library-authoring/library-filters/LibraryDropdownFilter.test.tsx

@@ -0,0 +1,128 @@
+import { mockContentLibrary, mockGetContentLibraryV2List } from '@src/library-authoring/data/api.mocks';
+import {
+  initializeMocks, render, screen, waitFor,
+} from '@src/testUtils';
+import { userEvent } from '@testing-library/user-event';
+import { LibraryDropdownFilter } from './LibraryDropdownFilter';
+
+mockContentLibrary.applyMock();
+
+const mockSetValue = jest.fn();
+let mockValue: string[] = [];
+jest.mock('@src/library-authoring/common/context/LibraryContext', () => ({
+  useLibraryContext: () => ({
+    selectedLibraries: mockValue,
+    setSelectedLibraries: mockSetValue,
+  }),
+}));
+
+const renderComponent = () => render(<LibraryDropdownFilter />);
+
+describe('LibraryDropdownFilter', () => {
+  beforeEach(() => {
+    initializeMocks();
+    mockValue = [];
+  });
+
+  it('should render the loading status', async () => {
+    const user = userEvent.setup();
+    mockGetContentLibraryV2List.applyMockLoading();
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button', { name: 'All libraries' });
+    expect(dropdownTrigger).toBeInTheDocument();
+    await user.click(dropdownTrigger);
+
+    expect(await screen.findByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('should render the empty list', async () => {
+    const user = userEvent.setup();
+    mockGetContentLibraryV2List.applyMockNoPaginationEmpty();
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button', { name: 'All libraries' });
+    expect(dropdownTrigger).toBeInTheDocument();
+    await user.click(dropdownTrigger);
+
+    expect(await screen.findByText('No libraries found!')).toBeInTheDocument();
+  });
+
+  it('should render LibraryDropdownFilter with dropdown options', async () => {
+    const user = userEvent.setup();
+    mockGetContentLibraryV2List.applyMockNoPagination();
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button', { name: 'All libraries' });
+    expect(dropdownTrigger).toBeInTheDocument();
+    await user.click(dropdownTrigger);
+
+    const item = await screen.findByRole('checkbox', { name: 'Test Library 1' });
+    expect(item).toBeInTheDocument();
+    await user.click(item);
+    const passedFunction = mockSetValue.mock.calls[0][0];
+    expect(passedFunction([])).toEqual(['lib:SampleTaxonomyOrg1:TL1']);
+  });
+
+  it('toggle selected value', async () => {
+    const user = userEvent.setup();
+    mockGetContentLibraryV2List.applyMockNoPagination();
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button', { name: 'All libraries' });
+    await user.click(dropdownTrigger);
+
+    const item = await screen.findByRole('checkbox', { name: 'Test Library 1' });
+    await user.click(item);
+    const passedFunction = mockSetValue.mock.calls[0][0];
+    // Should remove it from list if already selected, i.e., it means user unselected it.
+    expect(passedFunction([
+      'lib:SampleTaxonomyOrg1:TL1',
+      'lib:SampleTaxonomyOrg1:TL2',
+    ])).toEqual(['lib:SampleTaxonomyOrg1:TL2']);
+  });
+
+  it('should update label to library if one is selected', async () => {
+    mockGetContentLibraryV2List.applyMockNoPagination();
+    mockValue = ['lib:SampleTaxonomyOrg1:TL1'];
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button', { name: 'Test Library 1' });
+    expect(dropdownTrigger).toBeInTheDocument();
+  });
+
+  it('should update label to n libraries if more than one is selected', async () => {
+    mockGetContentLibraryV2List.applyMockNoPagination();
+    mockValue = ['lib:SampleTaxonomyOrg1:TL1', 'lib:SampleTaxonomyOrg1:AL1'];
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button', { name: '2 Libraries' });
+    expect(dropdownTrigger).toBeInTheDocument();
+  });
+
+  it('should filter list by search', async () => {
+    const user = userEvent.setup();
+    const mockApi = mockGetContentLibraryV2List.applyMockNoPagination();
+    renderComponent();
+
+    const dropdownTrigger = await screen.findByRole('button', { name: 'All libraries' });
+    expect(dropdownTrigger).toBeInTheDocument();
+    await user.click(dropdownTrigger);
+
+    const searchInput = await screen.findByPlaceholderText('Search Library Name');
+    await user.type(searchInput, 'Test Library');
+
+    await waitFor(() => expect(mockApi).toHaveBeenLastCalledWith({
+      pagination: false,
+      search: 'Test Library',
+    }), { timeout: 600 });
+
+    const clearBtn = await screen.findByRole('button', { name: 'clear search' });
+    await user.click(clearBtn);
+
+    await waitFor(() => expect(mockApi).toHaveBeenLastCalledWith({
+      pagination: false,
+      search: '',
+    }), { timeout: 600 });
+  });
+});

src/library-authoring/library-filters/LibraryDropdownFilter.tsx

@@ -35,7 +35,7 @@ const LibraryItems = ({ isPending, data, onChange }: LibraryItemsProps) => {
       className="m-0 p-0"
       style={{ 'max-height': '25vh' }}
     >
-      {data?.map((library) => (
+      {data.map((library) => (
         <Dropdown.Item
           key={library.id}
           as={Form.Checkbox}
@@ -87,6 +87,7 @@ export const LibraryDropdownFilter = () => {
 
   return (
     <Dropdown
+      id="library-filter-dropdown"
       as={ButtonGroup}
       autoClose="outside"
     >
@@ -99,6 +100,7 @@ export const LibraryDropdownFilter = () => {
         )}
       >
         <Dropdown.Toggle
+          id="library-filter-dropdown-toggle"
           iconBefore={Newsstand}
           className="text-overflow text-primary-500 p-2 px-4 mr-2"
         >