LibraryAuthoringPage.test.tsx

import { getConfig } from '@edx/frontend-platform';
import fetchMock from 'fetch-mock-jest';
import { Helmet } from 'react-helmet';
import {
  fireEvent,
  initializeMocks,
  render,
  screen,
  waitFor,
  within,
} from '@src/testUtils';
import studioHomeMock from '@src/studio-home/__mocks__/studioHomeMock';
import { mockGetMigrationStatus } from '@src/data/api.mocks';
import mockEmptyResult from '@src/search-modal/__mocks__/empty-search-result.json';
import { mockContentSearchConfig } from '@src/search-manager/data/api.mock';
import { getStudioHomeApiUrl } from '@src/studio-home/data/api';

import mockResult from './__mocks__/library-search.json';
import {
  mockContentLibrary,
  mockGetCollectionMetadata,
  mockGetContainerMetadata,
  mockGetLibraryTeam,
  mockXBlockFields,
} from './data/api.mocks';
import { LibraryLayout } from '.';
import { getLibraryCollectionsApiUrl, getLibraryContainersApiUrl } from './data/api';

let axiosMock;
let mockShowToast;

mockGetCollectionMetadata.applyMock();
mockGetContainerMetadata.applyMock();
mockContentSearchConfig.applyMock();
mockContentLibrary.applyMock();
mockGetLibraryTeam.applyMock();
mockXBlockFields.applyMock();
mockGetMigrationStatus.applyMock();

const searchEndpoint = 'http://mock.meilisearch.local/multi-search';

/**
 * Returns 0 components from the search query.
 */
const returnEmptyResult = (_url, req) => {
  const requestData = JSON.parse(req.body?.toString() ?? '');
  const query = requestData?.queries[0]?.q ?? '';
  // 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;
  // 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 };
  });
  return mockEmptyResult;
};

const path = '/library/:libraryId/*';
const libraryTitle = mockContentLibrary.libraryData.title;

describe('<LibraryAuthoringPage />', () => {
  beforeAll(() => {
    jest.useFakeTimers();
  });

  beforeEach(async () => {
    const mocks = initializeMocks();
    axiosMock = mocks.axiosMock;
    mockShowToast = mocks.mockShowToast;
    axiosMock.onGet(getStudioHomeApiUrl()).reply(200, studioHomeMock);

    // The Meilisearch client-side API uses fetch, not Axios.
    fetchMock.mockReset();
    fetchMock.post(searchEndpoint, (_url, req) => {
      const requestData = JSON.parse((req.body ?? '') as string);
      const query = requestData?.queries[0]?.q ?? '';
      // We have to replace the query (search keywords) in the mock results with the actual query,
      // because otherwise Instantsearch will update the UI and change the query,
      // leading to unexpected results in the test cases.
      const newMockResult = { ...mockResult };
      newMockResult.results[0].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
      newMockResult.results[0]?.hits.forEach((hit) => {
        hit._formatted = { ...hit };
      });
      return newMockResult;
    });
  });

  afterAll(() => {
    jest.useRealTimers();
  });

  const renderLibraryPage = async () => {
    render(<LibraryLayout />, { path, params: { libraryId: mockContentLibrary.libraryId } });

    // Ensure the search endpoint is called:
    // Call 1: To fetch searchable/filterable/sortable library data
    await waitFor(() => {
      expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post');
    });
  };

  it('shows the spinner before the query is complete', () => {
    // This mock will never return data about the library (it loads forever):
    const libraryId = mockContentLibrary.libraryIdThatNeverLoads;
    render(<LibraryLayout />, { path, params: { libraryId } });
    const spinner = screen.getByRole('status');
    expect(spinner.textContent).toEqual('Loading...');
  });

  it('shows an error component if no library returned', async () => {
    // This mock will simulate a 404 error:
    const libraryId = mockContentLibrary.library404;
    render(<LibraryLayout />, { path, params: { libraryId } });
    expect(await screen.findByTestId('notFoundAlert')).toBeInTheDocument();
  });

  it('shows library data', async () => {
    await renderLibraryPage();

    expect(await screen.findByText('Content library')).toBeInTheDocument();
    expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();

    const browserTabTitle = Helmet.peek().title.join('');
    const siteName = getConfig().SITE_NAME;
    expect(browserTabTitle).toEqual(`${libraryTitle} | ${siteName}`);

    expect(screen.queryByText('You have not added any content to this library yet.')).not.toBeInTheDocument();

    expect(screen.getAllByText('Recently Modified').length).toEqual(1);
    expect((await screen.findAllByText('Introduction to Testing'))[0]).toBeInTheDocument();

    // Search box should not have focus on page load
    const searchBox = screen.getByRole('searchbox');
    expect(searchBox).not.toHaveFocus();

    // Navigate to the components tab
    fireEvent.click(screen.getByRole('tab', { name: 'Components' }));
    // "Recently Modified" default sort shown
    expect(screen.getAllByText('Recently Modified').length).toEqual(1);

    // Navigate to the collections tab
    fireEvent.click(screen.getByRole('tab', { name: 'Collections' }));
    // "Recently Modified" default sort shown
    expect(screen.getAllByText('Recently Modified').length).toEqual(1);
    expect(screen.queryByText('There are 10 components in this library')).not.toBeInTheDocument();
    expect((await screen.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(screen.getByRole('tab', { name: 'All Content' }));
    expect(screen.getAllByText('Recently Modified').length).toEqual(1);
  });

  it('shows a library without components and collections', async () => {
    fetchMock.post(searchEndpoint, returnEmptyResult, { overwriteRoutes: true });
    await renderLibraryPage();

    expect(await screen.findByText('Content library')).toBeInTheDocument();
    expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();

    fireEvent.click(screen.getByRole('tab', { name: 'Collections' }));
    expect(await screen.findByText('You have not added any collections to this library yet.')).toBeInTheDocument();

    // Open Create collection modal
    const addCollectionButton = screen.getByRole('button', { name: /add collection/i });
    fireEvent.click(addCollectionButton);
    const collectionModalHeading = await screen.findByRole('heading', { name: /new collection/i });
    expect(collectionModalHeading).toBeInTheDocument();

    // Click on Cancel button
    const cancelButton = screen.getByRole('button', { name: /cancel/i });
    fireEvent.click(cancelButton);
    expect(collectionModalHeading).not.toBeInTheDocument();

    fireEvent.click(screen.getByRole('tab', { name: 'All Content' }));
    expect(await screen.findByText('You have not added any content to this library yet.')).toBeInTheDocument();

    const addComponentButton = screen.getByRole('button', { name: /add component/i });
    fireEvent.click(addComponentButton);
    expect(screen.getByText(/add content/i)).toBeInTheDocument();
  });

  it('shows the new content button', async () => {
    await renderLibraryPage();

    expect(await screen.findByRole('heading')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /new/i })).toBeInTheDocument();
    expect(screen.queryByText('Read Only')).not.toBeInTheDocument();
  });

  it('shows an empty read-only library, without a "create component" button', async () => {
    // Use a library mock that is read-only:
    const libraryId = mockContentLibrary.libraryIdReadOnly;
    // Update search mock so it returns no results:
    fetchMock.post(searchEndpoint, returnEmptyResult, { overwriteRoutes: true });
    render(<LibraryLayout />, { path, params: { libraryId } });
    await waitFor(() => {
      expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post');
    });

    expect(await screen.findByText('Content library')).toBeInTheDocument();
    expect(screen.getByText('You have not added any content to this library yet.')).toBeInTheDocument();
    expect(screen.queryByRole('button', { name: /add component/i })).not.toBeInTheDocument();
    expect(screen.getByText('Read Only')).toBeInTheDocument();
  });

  it('show a library without search results', async () => {
    // Update search mock so it returns no results:
    fetchMock.post(searchEndpoint, returnEmptyResult, { overwriteRoutes: true });
    await renderLibraryPage();

    expect(await screen.findByText('Content library')).toBeInTheDocument();
    expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();

    await waitFor(() => {
      expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post');
    });

    fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'noresults' } });

    // Ensure the search endpoint is called again, only once more since the recently modified call
    // should not be impacted by the search
    await waitFor(() => {
      expect(fetchMock).toHaveFetchedTimes(2, searchEndpoint, 'post');
    });

    expect(await screen.findByText('No matching components found in this library.')).toBeInTheDocument();

    // Navigate to the components tab
    const componentsTab = screen.getByRole('tab', { name: 'Components' });
    fireEvent.click(componentsTab);
    expect(componentsTab).toHaveAttribute('aria-selected', 'true');
    expect(await screen.findByText('No matching components found in this library.')).toBeInTheDocument();

    // Navigate to the collections tab
    const collectionsTab = screen.getByRole('tab', { name: 'Collections' });
    fireEvent.click(collectionsTab);
    expect(collectionsTab).toHaveAttribute('aria-selected', 'true');
    expect(await screen.findByText('No matching collections found in this library.')).toBeInTheDocument();

    // Navigate to the units tab
    const unitsTab = screen.getByRole('tab', { name: 'Units' });
    fireEvent.click(unitsTab);
    expect(unitsTab).toHaveAttribute('aria-selected', 'true');
    expect(await screen.findByText('No matching components found in this library.')).toBeInTheDocument();

    // Navigate to the subsections tab
    const subsectionsTab = screen.getByRole('tab', { name: 'Subsections' });
    fireEvent.click(subsectionsTab);
    expect(subsectionsTab).toHaveAttribute('aria-selected', 'true');
    expect(await screen.findByText('No matching components found in this library.')).toBeInTheDocument();

    // Navigate to the subsections tab
    const sectionsTab = screen.getByRole('tab', { name: 'Sections' });
    fireEvent.click(sectionsTab);
    expect(sectionsTab).toHaveAttribute('aria-selected', 'true');
    expect(await screen.findByText('No matching components 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(screen.getByRole('tab', { name: 'All Content' }));
  });

  it('should open and close new content sidebar', async () => {
    await renderLibraryPage();

    expect(await screen.findByRole('heading')).toBeInTheDocument();
    expect(screen.queryByText(/add content/i)).not.toBeInTheDocument();

    const newButton = screen.getByRole('button', { name: /new/i });
    fireEvent.click(newButton);

    expect(screen.getByText(/add content/i)).toBeInTheDocument();

    const closeButton = screen.getByRole('button', { name: /close/i });
    fireEvent.click(closeButton);

    expect(screen.queryByText(/add content/i)).not.toBeInTheDocument();
  });

  it('should open Library Info by default', async () => {
    await renderLibraryPage();

    expect(await screen.findByText('Content library')).toBeInTheDocument();
    expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
    expect((await screen.findAllByText(libraryTitle))[1]).toBeInTheDocument();

    expect(screen.getByText('Draft')).toBeInTheDocument();
    expect(screen.getByText('(Never Published)')).toBeInTheDocument();
    // Draft saved on date:
    expect(screen.getByText('July 22, 2024')).toBeInTheDocument();

    expect(screen.getByText(mockContentLibrary.libraryData.org)).toBeInTheDocument();
    // Updated:
    expect(screen.getByText('July 20, 2024')).toBeInTheDocument();
    // Created:
    expect(screen.getByText('June 26, 2024')).toBeInTheDocument();
  });

  it('should close and open Library Info', async () => {
    await renderLibraryPage();

    expect(await screen.findByText('Content library')).toBeInTheDocument();
    expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
    expect((await screen.findAllByText(libraryTitle))[1]).toBeInTheDocument();

    // Open by default; close the library info sidebar
    const closeButton = screen.getByRole('button', { name: /close/i });
    fireEvent.click(closeButton);
    expect(screen.queryByText('Draft')).not.toBeInTheDocument();
    expect(screen.queryByText('(Never Published)')).not.toBeInTheDocument();

    // Open library info sidebar with 'Library info' button
    const libraryInfoButton = screen.getByRole('button', { name: /library info/i });
    fireEvent.click(libraryInfoButton);
    expect(screen.getByText('Draft')).toBeInTheDocument();
    expect(screen.getByText('(Never Published)')).toBeInTheDocument();

    // Close library info sidebar with 'Library info' button
    fireEvent.click(libraryInfoButton);
    expect(screen.queryByText('Draft')).not.toBeInTheDocument();
    expect(screen.queryByText('(Never Published)')).not.toBeInTheDocument();
  });

  it('should show Library Team button in Library Info that opens the Library Team modal', async () => {
    await renderLibraryPage();
    const manageAccess = await screen.findByRole('button', { name: /Manage Access/i });

    expect(manageAccess).not.toBeDisabled();
    fireEvent.click(manageAccess);

    expect(await screen.findByRole('heading', { name: 'Library Team' })).toBeInTheDocument();
  });

  it('should not show "Library Team" button in Library Info to users who cannot edit the library', async () => {
    const libraryId = mockContentLibrary.libraryIdReadOnly;
    render(<LibraryLayout />, { path, params: { libraryId } });

    const manageAccess = screen.queryByRole('button', { name: /Library Team/i });
    expect(manageAccess).not.toBeInTheDocument();
  });

  it('sorts library components', async () => {
    await renderLibraryPage();

    expect(await screen.findByTitle('Sort search results')).toBeInTheDocument();

    const testSortOption = async (optionText, sortBy, isDefault) => {
      // Open the drop-down menu
      fireEvent.click(screen.getByTitle('Sort search results'));

      // Click the option with the given text
      // Since the sort drop-down also shows the selected sort
      // option in its toggle button, we need to make sure we're
      // clicking on the last one found.
      const options = screen.getAllByText(optionText);
      expect(options.length).toBeGreaterThan(0);
      fireEvent.click(options[options.length - 1]);

      let bodyText;
      // Did the search happen with the expected sort option?
      if (Array.isArray(sortBy)) {
        bodyText = `"sort":[${sortBy.map(item => `"${item}"`).join(',')}]`;
      } else {
        bodyText = sortBy ? `"sort":["${sortBy}"]` : '"sort":[]';
      }
      await waitFor(() => {
        expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
          body: expect.stringContaining(bodyText),
          method: 'POST',
          headers: expect.anything(),
        });
      });

      // Is the sort option stored in the query string?
      // Note: we can't easily check this at the moment with <MemoryRouter>
      // const searchText = isDefault ? '' : `?sort=${encodeURIComponent(sortBy)}`;
      // expect(window.location.href).toEqual(searchText);

      // Is the selected sort option shown in the toggle button (if not default)
      // as well as in the drop-down menu?
      expect(screen.getAllByText(optionText).length).toEqual(isDefault ? 1 : 2);
    };

    await testSortOption('Title, A-Z', 'display_name:asc', false);
    await testSortOption('Title, Z-A', 'display_name:desc', false);
    await testSortOption('Newest', 'created:desc', false);
    await testSortOption('Oldest', 'created:asc', false);

    // Sorting by Recently Published also sorts unpublished components by recently modified
    await testSortOption('Recently Published', ['last_published:desc', 'modified:desc'], false);

    // Re-selecting the previous sort option resets sort to default "Recently Modified"
    await testSortOption('Recently Published', 'modified:desc', true);
    expect(screen.getAllByText('Recently Modified').length).toEqual(2);

    // Enter a keyword into the search box
    const searchBox = screen.getByRole('searchbox');
    fireEvent.change(searchBox, { target: { value: 'words to find' } });

    // Default sort option changes to "Most Relevant"
    expect((await screen.findAllByText('Most Relevant')).length).toEqual(2);
    await waitFor(() => {
      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
        body: expect.stringContaining('"sort":[]'),
        method: 'POST',
        headers: expect.anything(),
      });
    });
  }, 10000);

  it('should open, close and re-open the component sidebar', async () => {
    const mockResult0 = { ...mockResult }.results[0].hits[0];
    const displayName = 'Introduction to Testing';
    expect(mockResult0.display_name).toStrictEqual(displayName);
    await renderLibraryPage();

    fireEvent.click((await screen.findAllByText(displayName))[0]);

    const sidebar = screen.getByTestId('library-sidebar');

    const { getByRole, getByText } = within(sidebar);

    await waitFor(() => expect(getByText(displayName)).toBeInTheDocument());

    const closeButton = getByRole('button', { name: /close/i });
    fireEvent.click(closeButton);

    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());

    fireEvent.click((await screen.findAllByText(displayName))[0]);

    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).toBeInTheDocument());
  });

  it('should open component sidebar, showing manage tab on clicking add to collection menu item - component', async () => {
    const mockResult0 = { ...mockResult }.results[0].hits[0];
    const displayName = 'Introduction to Testing';
    expect(mockResult0.display_name).toStrictEqual(displayName);
    await renderLibraryPage();

    await waitFor(() => expect(screen.getAllByTestId('component-card-menu-toggle').length).toBeGreaterThan(0));

    // Open menu
    fireEvent.click((await screen.findAllByTestId('component-card-menu-toggle'))[0]);
    // Click add to collection
    fireEvent.click(screen.getByRole('button', { name: 'Add to collection' }));

    const sidebar = screen.getByTestId('library-sidebar');

    const { getByRole, findByText } = within(sidebar);

    expect(await findByText(displayName)).toBeInTheDocument();
    jest.advanceTimersByTime(300);
    expect(getByRole('tab', { selected: true })).toHaveTextContent('Manage');
    const closeButton = getByRole('button', { name: /close/i });
    fireEvent.click(closeButton);

    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
  });

  it('should open component sidebar, showing manage tab on clicking add to collection menu item - unit', async () => {
    const displayName = 'Test Unit';
    await renderLibraryPage();

    await waitFor(() => expect(screen.getAllByTestId('container-card-menu-toggle').length).toBeGreaterThan(0));

    // Open menu
    fireEvent.click((await screen.findAllByTestId('container-card-menu-toggle'))[0]);
    // Click add to collection
    fireEvent.click(screen.getByRole('button', { name: 'Add to collection' }));

    const sidebar = screen.getByTestId('library-sidebar');

    const { getByRole, findByText } = within(sidebar);

    expect(await findByText(displayName)).toBeInTheDocument();
    jest.advanceTimersByTime(300);
    expect(getByRole('tab', { selected: true })).toHaveTextContent('Manage');
    const closeButton = getByRole('button', { name: /close/i });
    fireEvent.click(closeButton);

    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
  });

  it('should open and close the collection sidebar', async () => {
    await renderLibraryPage();

    // Click on the first collection
    fireEvent.click(await screen.findByText('Collection 1'));

    const sidebar = screen.getByTestId('library-sidebar');

    const { getByRole, getByText } = within(sidebar);

    // The mock data for the sidebar has a title of "Test Collection"
    await waitFor(() => expect(getByText('Test Collection')).toBeInTheDocument());

    const closeButton = getByRole('button', { name: /close/i });
    fireEvent.click(closeButton);

    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
  });

  it('should open and close the unit sidebar', async () => {
    await renderLibraryPage();

    // Click on the first unit
    fireEvent.click(await screen.findByText('Test Unit'));

    const sidebar = screen.getByTestId('library-sidebar');

    const { getByRole, getByText } = within(sidebar);

    // The mock data for the sidebar has a title of "Test Unit"
    await waitFor(() => expect(getByText('Test Unit')).toBeInTheDocument());

    const closeButton = getByRole('button', { name: /close/i });
    fireEvent.click(closeButton);

    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
  });

  it('should preserve the tab while switching from a component to a collection', async () => {
    await renderLibraryPage();

    // Click on the first collection
    fireEvent.click(await screen.findByText('Collection 1'));

    // Click on the Details tab
    fireEvent.click(screen.getByRole('tab', { name: 'Details' }));

    // Change to a component
    fireEvent.click((await screen.findAllByText('Introduction to Testing'))[0]);

    // Check that the Details tab is still selected
    expect(screen.getByRole('tab', { name: 'Details' })).toHaveAttribute('aria-selected', 'true');

    // Click on the Previews tab
    fireEvent.click(screen.getByRole('tab', { name: 'Preview' }));

    // Switch back to the collection
    fireEvent.click(await screen.findByText('Collection 1'));

    // The Details (default) tab should be selected because the collection does not have a Preview tab
    expect(screen.getByRole('tab', { name: 'Details' })).toHaveAttribute('aria-selected', 'true');
  });

  const problemTypes = {
    'Multiple Choice': 'choiceresponse',
    Checkboxes: 'multiplechoiceresponse',
    'Numerical Input': 'numericalresponse',
    Dropdown: 'optionresponse',
    'Text Input': 'stringresponse',
  };

  it.each(Object.keys(problemTypes))('can filter by capa problem type (%s)', async (submenuText) => {
    await renderLibraryPage();

    // Ensure the search endpoint is called
    await waitFor(() => {
      expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post');
    });
    const filterButton = screen.getByRole('button', { name: /type/i });
    fireEvent.click(filterButton);

    const problemFilterCheckbox = screen.getByRole('checkbox', { name: /problem/i });
    const problemFilterMenuItem = problemFilterCheckbox.parentElement; // div.pgn__menu-item
    const showProbTypesSubmenuBtn = problemFilterMenuItem!.querySelector(
      'button[aria-label="Open problem types filters"]',
    );
    expect(showProbTypesSubmenuBtn).not.toBeNull();
    fireEvent.click(showProbTypesSubmenuBtn!);

    const submenu = screen.getByText(submenuText);
    expect(submenu).toBeInTheDocument();
    fireEvent.click(submenu);

    await waitFor(() => {
      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
        body: expect.stringContaining(`content.problem_types = ${problemTypes[submenuText]}`),
        method: 'POST',
        headers: expect.anything(),
      });
    });

    fireEvent.click(submenu);
    await waitFor(() => {
      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
        body: expect.not.stringContaining(`content.problem_types = ${problemTypes[submenuText]}`),
        method: 'POST',
        headers: expect.anything(),
      });
    });
  });

  it('can filter by block type', async () => {
    await renderLibraryPage();

    // Ensure the search endpoint is called
    await waitFor(() => {
      expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post');
    });
    const filterButton = screen.getByRole('button', { name: /type/i });
    fireEvent.click(filterButton);

    // Validate click on Problem type
    const problemMenu = screen.getAllByText('Problem')[0];
    expect(problemMenu).toBeInTheDocument();
    fireEvent.click(problemMenu);
    await waitFor(() => {
      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
        body: expect.stringContaining('block_type = problem'),
        method: 'POST',
        headers: expect.anything(),
      });
    });

    fireEvent.click(problemMenu);
    await waitFor(() => {
      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
        body: expect.not.stringContaining('block_type = problem'),
        method: 'POST',
        headers: expect.anything(),
      });
    });

    // Validate clear filters
    fireEvent.click(problemMenu);

    const clearFitlersButton = screen.getByText('Clear Filters');
    fireEvent.click(clearFitlersButton);
    await waitFor(() => {
      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
        body: expect.not.stringContaining('block_type = problem'),
        method: 'POST',
        headers: expect.anything(),
      });
    });
  });

  it('has an empty type filter when there are no results', async () => {
    fetchMock.post(searchEndpoint, returnEmptyResult, { overwriteRoutes: true });
    await renderLibraryPage();

    const filterButton = screen.getByRole('button', { name: /type/i });
    fireEvent.click(filterButton);

    expect(screen.getByText(/no matching components/i)).toBeInTheDocument();
  });

  it('should create a collection', async () => {
    await renderLibraryPage();
    const title = 'This is a Test';
    const description = 'This is the description of the Test';
    const url = getLibraryCollectionsApiUrl(mockContentLibrary.libraryId);
    axiosMock.onPost(url).reply(200, {
      id: '1',
      slug: 'this-is-a-test',
      title,
      description,
    });

    expect(await screen.findByRole('heading')).toBeInTheDocument();
    expect(screen.queryByText(/add content/i)).not.toBeInTheDocument();

    // Open Add content sidebar
    const newButton = screen.getByRole('button', { name: /new/i });
    fireEvent.click(newButton);
    expect(screen.getByText(/add content/i)).toBeInTheDocument();

    // Open New collection Modal
    const sidebar = screen.getByTestId('library-sidebar');
    const newCollectionButton = within(sidebar).getAllByRole('button', { name: /collection/i })[0];
    fireEvent.click(newCollectionButton);
    const collectionModalHeading = await screen.findByRole('heading', { name: /new collection/i });
    expect(collectionModalHeading).toBeInTheDocument();

    // Click on Cancel button
    const cancelButton = screen.getByRole('button', { name: /cancel/i });
    fireEvent.click(cancelButton);
    expect(collectionModalHeading).not.toBeInTheDocument();

    // Open new collection modal again and create a collection
    fireEvent.click(newCollectionButton);
    const createButton = screen.getByRole('button', { name: /create/i });
    const nameField = screen.getByRole('textbox', { name: /name your collection/i });
    const descriptionField = screen.getByRole('textbox', { name: /add a description \(optional\)/i });

    fireEvent.change(nameField, { target: { value: title } });
    fireEvent.change(descriptionField, { target: { value: description } });
    fireEvent.click(createButton);

    // Check success toast
    await waitFor(() => expect(axiosMock.history.post.length).toBe(1));
    expect(axiosMock.history.post[0].url).toBe(url);
    expect(axiosMock.history.post[0].data).toContain(`"title":"${title}"`);
    expect(axiosMock.history.post[0].data).toContain(`"description":"${description}"`);
    expect(mockShowToast).toHaveBeenCalledWith('Collection created successfully');
  });

  it('should show validations in create collection', async () => {
    await renderLibraryPage();

    const title = 'This is a Test';
    const description = 'This is the description of the Test';
    const url = getLibraryCollectionsApiUrl(mockContentLibrary.libraryId);
    axiosMock.onPost(url).reply(200, {
      id: '1',
      slug: 'this-is-a-test',
      title,
      description,
    });

    expect(await screen.findByRole('heading')).toBeInTheDocument();
    expect(screen.queryByText(/add content/i)).not.toBeInTheDocument();

    // Open Add content sidebar
    const newButton = screen.getByRole('button', { name: /new/i });
    fireEvent.click(newButton);
    expect(screen.getByText(/add content/i)).toBeInTheDocument();

    // Open New collection Modal
    const sidebar = screen.getByTestId('library-sidebar');
    const newCollectionButton = within(sidebar).getAllByRole('button', { name: /collection/i })[0];
    fireEvent.click(newCollectionButton);
    const collectionModalHeading = await screen.findByRole('heading', { name: /new collection/i });
    expect(collectionModalHeading).toBeInTheDocument();

    const nameField = screen.getByRole('textbox', { name: /name your collection/i });
    fireEvent.focus(nameField);
    fireEvent.blur(nameField);

    // Click on create with an empty name
    const createButton = screen.getByRole('button', { name: /create/i });
    fireEvent.click(createButton);

    expect(await screen.findByText(/collection name is required/i)).toBeInTheDocument();
  });

  it('should show error on create collection', async () => {
    await renderLibraryPage();
    const title = 'This is a Test';
    const description = 'This is the description of the Test';
    const url = getLibraryCollectionsApiUrl(mockContentLibrary.libraryId);
    axiosMock.onPost(url).reply(500);

    expect(await screen.findByRole('heading')).toBeInTheDocument();
    expect(screen.queryByText(/add content/i)).not.toBeInTheDocument();

    // Open Add content sidebar
    const newButton = screen.getByRole('button', { name: /new/i });
    fireEvent.click(newButton);
    expect(screen.getByText(/add content/i)).toBeInTheDocument();

    // Open New collection Modal
    const sidebar = screen.getByTestId('library-sidebar');
    const newCollectionButton = within(sidebar).getAllByRole('button', { name: /collection/i })[0];
    fireEvent.click(newCollectionButton);
    const collectionModalHeading = await screen.findByRole('heading', { name: /new collection/i });
    expect(collectionModalHeading).toBeInTheDocument();

    // Create a normal collection
    const createButton = screen.getByRole('button', { name: /create/i });
    const nameField = screen.getByRole('textbox', { name: /name your collection/i });
    const descriptionField = screen.getByRole('textbox', { name: /add a description \(optional\)/i });

    fireEvent.change(nameField, { target: { value: title } });
    fireEvent.change(descriptionField, { target: { value: description } });
    fireEvent.click(createButton);

    // Check error toast
    await waitFor(() => expect(axiosMock.history.post.length).toBe(1));
    expect(mockShowToast).toHaveBeenCalledWith('There is an error when creating the library collection');
  });

  test.each([
    {
      label: 'should create a unit',
      containerType: 'unit',
    },
    {
      label: 'should create a section',
      containerType: 'section',
    },
    {
      label: 'should create a subsection',
      containerType: 'subsection',
    },
  ])('$label', async ({ containerType }) => {
    await renderLibraryPage();
    const title = `This is a Test ${containerType}`;
    const url = getLibraryContainersApiUrl(mockContentLibrary.libraryId);
    axiosMock.onPost(url).reply(200, {
      id: `lct:org:libId:${containerType}:1`,
      slug: 'this-is-a-test',
      title,
    });

    expect(await screen.findByRole('heading')).toBeInTheDocument();
    expect(screen.queryByText(/add content/i)).not.toBeInTheDocument();

    // Open Add content sidebar
    const newButton = screen.getByRole('button', { name: /new/i });
    fireEvent.click(newButton);
    expect(screen.getByText(/add content/i)).toBeInTheDocument();

    // Open New container Modal
    const sidebar = screen.getByTestId('library-sidebar');
    const newContainerButton = within(sidebar).getAllByRole('button', { name: new RegExp(containerType, 'i') })[0];
    fireEvent.click(newContainerButton);
    const containerModalHeading = await screen.findByRole('heading', { name: new RegExp(`new ${containerType}`, 'i') });
    expect(containerModalHeading).toBeInTheDocument();

    // Click on Cancel button
    const cancelButton = screen.getByRole('button', { name: /cancel/i });
    fireEvent.click(cancelButton);
    expect(containerModalHeading).not.toBeInTheDocument();

    // Open new container modal again and create a container
    fireEvent.click(newContainerButton);
    const createButton = screen.getByRole('button', { name: /create/i });
    const nameField = screen.getByRole('textbox', { name: new RegExp(`name your ${containerType}`, 'i') });

    fireEvent.change(nameField, { target: { value: title } });
    fireEvent.click(createButton);

    // Check success
    await waitFor(() => expect(axiosMock.history.post.length).toBe(1));

    expect(axiosMock.history.post[0].url).toBe(url);
    expect(axiosMock.history.post[0].data).toContain(`"display_name":"${title}"`);
    expect(axiosMock.history.post[0].data).toContain(`"container_type":"${containerType}"`);
    expect(mockShowToast).toHaveBeenCalledWith(
      expect.stringMatching(new RegExp(`${containerType} created successfully`, 'i')),
    );
  });

  test.each([
    {
      label: 'should show validations in create unit',
      containerType: 'unit',
    },
    {
      label: 'should show validations in create section',
      containerType: 'section',
    },
    {
      label: 'should show validations in create subsection',
      containerType: 'subsection',
    },
  ])('$label', async ({ containerType }) => {
    await renderLibraryPage();

    const title = `This is a Test ${containerType}`;
    const url = getLibraryContainersApiUrl(mockContentLibrary.libraryId);
    axiosMock.onPost(url).reply(200, {
      id: '1',
      slug: 'this-is-a-test',
      title,
    });

    expect(await screen.findByRole('heading')).toBeInTheDocument();
    expect(screen.queryByText(/add content/i)).not.toBeInTheDocument();

    // Open Add content sidebar
    const newButton = screen.getByRole('button', { name: /new/i });
    fireEvent.click(newButton);
    expect(screen.getByText(/add content/i)).toBeInTheDocument();

    // Open New container Modal
    const sidebar = screen.getByTestId('library-sidebar');
    const newContainerButton = within(sidebar).getAllByRole('button', { name: new RegExp(containerType, 'i') })[0];
    fireEvent.click(newContainerButton);
    const containerModalHeading = await screen.findByRole('heading', { name: new RegExp(`new ${containerType}`, 'i') });
    expect(containerModalHeading).toBeInTheDocument();

    const nameField = screen.getByRole('textbox', { name: new RegExp(`name your ${containerType}`, 'i') });
    fireEvent.focus(nameField);
    fireEvent.blur(nameField);

    // Click on create with an empty name
    const createButton = screen.getByRole('button', { name: /create/i });
    fireEvent.click(createButton);

    expect(await screen.findByText(new RegExp(`${containerType} name is required`, 'i'))).toBeInTheDocument();
  });

  test.each([
    {
      label: 'should show error on create unit',
      containerType: 'unit',
    },
    {
      label: 'should show error on create section',
      containerType: 'section',
    },
    {
      label: 'should show error on create subsection',
      containerType: 'subsection',
    },
  ])('$label', async ({ containerType }) => {
    await renderLibraryPage();
    const displayName = `This is a Test ${containerType}`;
    const url = getLibraryContainersApiUrl(mockContentLibrary.libraryId);
    axiosMock.onPost(url).reply(500);

    expect(await screen.findByRole('heading')).toBeInTheDocument();
    expect(screen.queryByText(/add content/i)).not.toBeInTheDocument();

    // Open Add content sidebar
    const newButton = screen.getByRole('button', { name: /new/i });
    fireEvent.click(newButton);
    expect(screen.getByText(/add content/i)).toBeInTheDocument();

    // Open New container Modal
    const sidebar = screen.getByTestId('library-sidebar');
    const newContainerButton = within(sidebar).getAllByRole('button', { name: new RegExp(containerType, 'i') })[0];
    fireEvent.click(newContainerButton);
    const containerModalHeading = await screen.findByRole('heading', { name: new RegExp(`new ${containerType}`, 'i') });
    expect(containerModalHeading).toBeInTheDocument();

    // Create a container
    const createButton = screen.getByRole('button', { name: /create/i });
    const nameField = screen.getByRole('textbox', { name: new RegExp(`name your ${containerType}`, 'i') });

    fireEvent.change(nameField, { target: { value: displayName } });
    fireEvent.click(createButton);

    // Check error toast
    await waitFor(() => expect(axiosMock.history.post.length).toBe(1));
    expect(mockShowToast).toHaveBeenCalledWith(
      expect.stringMatching(new RegExp(`There is an error when creating the library ${containerType}`, 'i')),
    );
  });

  it('shows a single block when usageKey query param is set', async () => {
    render(<LibraryLayout />, {
      path,
      routerProps: {
        initialEntries: [
          `/library/${mockContentLibrary.libraryId}/components?usageKey=${mockXBlockFields.usageKeyHtml}`,
        ],
      },
    });
    await waitFor(() => {
      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
        body: expect.stringContaining(mockXBlockFields.usageKeyHtml),
        headers: expect.anything(),
        method: 'POST',
      });
    });
    expect(screen.queryByPlaceholderText('Displaying single block, clear filters to search')).toBeInTheDocument();
    const { displayName } = mockXBlockFields.dataHtml;
    const sidebar = screen.getByTestId('library-sidebar');

    const { getByText } = within(sidebar);

    // should display the component with passed param: usageKey in the sidebar
    expect(getByText(displayName)).toBeInTheDocument();
    // clear usageKey filter
    const clearFitlersButton = screen.getByRole('button', { name: /clear filters/i });
    fireEvent.click(clearFitlersButton);
    await waitFor(() => {
      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
        body: expect.not.stringContaining(mockXBlockFields.usageKeyHtml),
        method: 'POST',
        headers: expect.anything(),
      });
    });
  });

  it('filters by publish status', async () => {
    await renderLibraryPage();

    // Open the publish status filter dropdown
    const filterButton = screen.getByRole('button', { name: /publish status/i });
    fireEvent.click(filterButton);

    // Test each publish status filter option
    const publishedCheckbox = screen.getByRole('checkbox', { name: /^published \d+$/i });
    const modifiedCheckbox = screen.getByRole('checkbox', { name: /^modified since publish \d+$/i });
    const neverPublishedCheckbox = screen.getByRole('checkbox', { name: /^never published \d+$/i });

    // Verify initial state - no clear filters button
    expect(screen.queryByRole('button', { name: /clear filters/i })).not.toBeInTheDocument();

    // Test Published filter
    fireEvent.click(publishedCheckbox);

    // Wait for both the API call and the UI update
    await waitFor(() => {
      // Check that the API was called with the correct filter
      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
        body: expect.stringContaining('"publish_status = published"'),
        method: 'POST',
        headers: expect.anything(),
      });
    });

    // Wait for the clear filters button to appear
    await waitFor(() => {
      const clearFiltersButton = screen.getByText('Clear Filters');
      expect(clearFiltersButton).toBeInTheDocument();
    });

    // Test Modified filter
    fireEvent.click(modifiedCheckbox);
    await waitFor(() => {
      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
        body: expect.stringContaining('"publish_status = modified"'),
        method: 'POST',
        headers: expect.anything(),
      });
    });

    // Test Never Published filter
    fireEvent.click(neverPublishedCheckbox);
    await waitFor(() => {
      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
        body: expect.stringContaining('"publish_status = never"'),
        method: 'POST',
        headers: expect.anything(),
      });
    });

    // Test clearing filters
    const clearFiltersButton = screen.getByText('Clear Filters');
    fireEvent.click(clearFiltersButton);
    await waitFor(() => {
      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
        body: expect.stringContaining('"filter":[[],'), // Empty filter array
        method: 'POST',
        headers: expect.anything(),
      });
    });
  });

  it('Disables Type filter on Collections and Units tab', async () => {
    await renderLibraryPage();

    expect(await screen.findByText('Content library')).toBeInTheDocument();
    expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
    expect((await screen.findAllByText('Introduction to Testing'))[0]).toBeInTheDocument();
    expect((await screen.findAllByText('Collection 1'))[0]).toBeInTheDocument();

    // Filter by Text block type
    fireEvent.click(screen.getByRole('button', { name: /type/i }));
    fireEvent.click(screen.getByRole('checkbox', { name: /text/i }));
    // Escape to close the Types filter drop-down and re-enable the tabs
    fireEvent.keyDown(screen.getByRole('button', { name: /type/i }), { key: 'Escape' });

    // Navigate to the collections tab
    fireEvent.click(await screen.findByRole('tab', { name: 'Collections' }));
    expect((await screen.findAllByText('Collection 1'))[0]).toBeInTheDocument();
    // No Types filter shown
    expect(screen.queryByRole('button', { name: /type/i })).not.toBeInTheDocument();

    // Navigate to the units tab
    fireEvent.click(await screen.findByRole('tab', { name: 'Units' }));
    expect((await screen.findAllByText('Test Unit'))[0]).toBeInTheDocument();
    // No Types filter shown
    expect(screen.queryByRole('button', { name: /type/i })).not.toBeInTheDocument();

    // Navigate to the components tab
    fireEvent.click(screen.getByRole('tab', { name: 'Components' }));
    // Text components should be shown
    expect((await screen.findAllByText('Introduction to Testing'))[0]).toBeInTheDocument();
    // Types filter is shown
    expect(screen.getByRole('button', { name: /type/i })).toBeInTheDocument();
  });

  it('Shows an error if libraries V2 is disabled', async () => {
    axiosMock.onGet(getStudioHomeApiUrl()).reply(200, {
      ...studioHomeMock,
      libraries_v2_enabled: false,
    });

    render(<LibraryLayout />, { path, params: { libraryId: mockContentLibrary.libraryId } });
    expect(await screen.findByRole('alert')).toHaveTextContent(
      'This page cannot be shown: Libraries v2 are disabled.',
    );
  });

  it('Should show success in migration legacy libraries', async () => {
    render(<LibraryLayout />, {
      path,
      routerProps: {
        initialEntries: [
          `/library/${mockContentLibrary.libraryId}?migration_task=${mockGetMigrationStatus.migrationId}`,
        ],
      },
    });

    await waitFor(() =>
      expect(mockShowToast).toHaveBeenCalledWith('The migration of legacy libraries has been completed successfully.')
    );
  });

  it('Should show fail in migration legacy libraries', async () => {
    render(<LibraryLayout />, {
      path,
      routerProps: {
        initialEntries: [
          `/library/${mockContentLibrary.libraryId}?migration_task=${mockGetMigrationStatus.migrationIdFailed}`,
        ],
      },
    });

    await waitFor(() => expect(mockShowToast).toHaveBeenCalledWith('Legacy libraries migration have failed'));
  });

  it('Should show fail multiple legacy libraries in a migration', async () => {
    render(<LibraryLayout />, {
      path,
      routerProps: {
        initialEntries: [
          `/library/${mockContentLibrary.libraryId}?migration_task=${mockGetMigrationStatus.migrationIdMultiple}`,
        ],
      },
    });

    await waitFor(() => expect(mockShowToast).toHaveBeenCalledWith('Multiple legacy libraries have failed'));
  });

  it('Should show fail one legacy library in a migration', async () => {
    render(<LibraryLayout />, {
      path,
      routerProps: {
        initialEntries: [
          `/library/${mockContentLibrary.libraryId}?migration_task=${mockGetMigrationStatus.migrationIdOneLibrary}`,
        ],
      },
    });

    await waitFor(() =>
      expect(mockShowToast).toHaveBeenCalledWith('The legacy library with this key has failed: legacy-lib-1')
    );
  });
});