test: add unit tests for MultipleChoiceFilter, SearchFilter, SortDropdown, TableControlBar, and useQuerySettings hooks

Author: bra-i-am

src/authz-module/libraries-manager/components/MultipleChoiceFilter.test.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import {
+  render, screen, fireEvent,
+} from '@testing-library/react';
+import MultipleChoiceFilter from './MultipleChoiceFilter';
+
+describe('MultipleChoiceFilter', () => {
+  const mockSetFilter = jest.fn();
+
+  const defaultProps = {
+    Header: 'Test Filter',
+    filterChoices: [
+      { name: 'Option 1', number: 5, value: 'option1' },
+      { name: 'Option 2', number: 3, value: 'option2' },
+      { name: 'Option 3', number: 0, value: 'option3' },
+    ],
+    filterValue: [],
+    setFilter: mockSetFilter,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render dropdown with correct header', () => {
+    render(<MultipleChoiceFilter {...defaultProps} />);
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(screen.getByText('Test Filter')).toBeInTheDocument();
+  });
+
+  it('should render FilterList icon', () => {
+    render(<MultipleChoiceFilter {...defaultProps} />);
+
+    const button = screen.getByRole('button');
+    const icon = button.querySelector('svg');
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('should show all filter choices when dropdown is opened', () => {
+    render(<MultipleChoiceFilter {...defaultProps} />);
+
+    fireEvent.click(screen.getByRole('button'));
+
+    expect(screen.getByText('Option 1 (5)')).toBeInTheDocument();
+    expect(screen.getByText('Option 2 (3)')).toBeInTheDocument();
+    expect(screen.getByText('Option 3 (0)')).toBeInTheDocument();
+  });
+
+  it('should add value to filter when checkbox is checked', () => {
+    render(<MultipleChoiceFilter {...defaultProps} />);
+
+    fireEvent.click(screen.getByRole('button'));
+
+    const checkbox1 = screen.getByLabelText('Option 1');
+    fireEvent.click(checkbox1);
+
+    expect(mockSetFilter).toHaveBeenCalledWith(['option1']);
+  });
+
+  it('should remove value from filter when checkbox is unchecked', () => {
+    const propsWithSelectedValue = {
+      ...defaultProps,
+      filterValue: ['option1', 'option2'],
+    };
+
+    render(<MultipleChoiceFilter {...propsWithSelectedValue} />);
+
+    fireEvent.click(screen.getByRole('button'));
+
+    const checkbox1 = screen.getByLabelText('Option 1');
+    fireEvent.click(checkbox1);
+
+    expect(mockSetFilter).toHaveBeenCalledWith(['option2']);
+  });
+
+  it('should show checked checkboxes for pre-selected values', () => {
+    const propsWithSelectedValues = {
+      ...defaultProps,
+      filterValue: ['option1', 'option3'],
+    };
+
+    render(<MultipleChoiceFilter {...propsWithSelectedValues} />);
+
+    fireEvent.click(screen.getByRole('button'));
+
+    const checkbox1 = screen.getByLabelText('Option 1');
+    const checkbox2 = screen.getByLabelText('Option 2');
+    const checkbox3 = screen.getByLabelText('Option 3');
+
+    expect(checkbox1).toBeChecked();
+    expect(checkbox2).not.toBeChecked();
+    expect(checkbox3).toBeChecked();
+  });
+
+  it('should call setFilter with correct array when adding to existing selections', () => {
+    const propsWithExistingSelection = {
+      ...defaultProps,
+      filterValue: ['option2'],
+    };
+
+    render(<MultipleChoiceFilter {...propsWithExistingSelection} />);
+
+    fireEvent.click(screen.getByRole('button'));
+
+    const checkbox1 = screen.getByLabelText('Option 1');
+    fireEvent.click(checkbox1);
+
+    expect(mockSetFilter).toHaveBeenCalledWith(['option2', 'option1']);
+  });
+});

src/authz-module/libraries-manager/components/SearchFilter.test.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import {
+  render, screen, fireEvent,
+} from '@testing-library/react';
+import SearchFilter from './SearchFilter';
+
+describe('SearchFilter', () => {
+  const mockSetFilter = jest.fn();
+
+  const defaultProps = {
+    filterValue: '',
+    setFilter: mockSetFilter,
+    placeholder: 'Search placeholder',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render search input with correct placeholder', () => {
+    render(<SearchFilter {...defaultProps} />);
+
+    const input = screen.getByPlaceholderText('Search placeholder');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('type', 'text');
+  });
+
+  it('should display empty value when filterValue is undefined', () => {
+    const propsWithUndefined = { ...defaultProps, filterValue: undefined as any };
+    render(<SearchFilter {...propsWithUndefined} />);
+
+    const input = screen.getByPlaceholderText('Search placeholder');
+    expect(input).toHaveValue('');
+  });
+
+  it('should display filterValue if provided', () => {
+    const propsWithString = { ...defaultProps, filterValue: 'test search' };
+    render(<SearchFilter {...propsWithString} />);
+
+    const input = screen.getByPlaceholderText('Search placeholder');
+    expect(input).toHaveValue('test search');
+  });
+
+  it('should call setFilter with input value when typing', () => {
+    render(<SearchFilter {...defaultProps} />);
+
+    const input = screen.getByPlaceholderText('Search placeholder');
+    fireEvent.change(input, { target: { value: 'new search term' } });
+
+    expect(mockSetFilter).toHaveBeenCalledWith('new search term');
+  });
+
+  it('should call setFilter with undefined when input is cleared', () => {
+    const propsWithValue = { ...defaultProps, filterValue: 'existing value' as any };
+    render(<SearchFilter {...propsWithValue} />);
+
+    const input = screen.getByPlaceholderText('Search placeholder');
+    fireEvent.change(input, { target: { value: '' } });
+
+    expect(mockSetFilter).toHaveBeenCalledWith(undefined);
+  });
+
+  it('should handle multiple character input correctly', () => {
+    render(<SearchFilter {...defaultProps} />);
+
+    const input = screen.getByPlaceholderText('Search placeholder');
+
+    // Type multiple characters
+    fireEvent.change(input, { target: { value: 'a' } });
+    expect(mockSetFilter).toHaveBeenCalledWith('a');
+
+    fireEvent.change(input, { target: { value: 'ab' } });
+    expect(mockSetFilter).toHaveBeenCalledWith('ab');
+
+    fireEvent.change(input, { target: { value: 'abc' } });
+    expect(mockSetFilter).toHaveBeenCalledWith('abc');
+  });
+
+  it('should handle different placeholder text', () => {
+    const customPlaceholder = 'Enter search term here...';
+    render(<SearchFilter {...defaultProps} placeholder={customPlaceholder} />);
+
+    const input = screen.getByPlaceholderText(customPlaceholder);
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('placeholder', customPlaceholder);
+  });
+});

src/authz-module/libraries-manager/components/SortDropdown.test.tsx

@@ -0,0 +1,177 @@
+import {
+  render, screen, fireEvent, act,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { DataTableContext } from '@openedx/paragon';
+import SortDropdown from './SortDropdown';
+
+jest.mock('@edx/frontend-platform/i18n', () => jest.requireActual('@edx/frontend-platform/i18n'));
+
+describe('SortDropdown', () => {
+  const mockToggleSortBy = jest.fn();
+
+  const defaultDataTableState = {
+    sortBy: [],
+    filters: [],
+    pageSize: 10,
+    pageIndex: 0,
+  };
+
+  const mockDataTableContext = {
+    state: defaultDataTableState,
+    toggleSortBy: mockToggleSortBy,
+  };
+
+  const renderSortDropdown = (contextOverrides = {}) => {
+    const contextValue = {
+      ...mockDataTableContext,
+      ...contextOverrides,
+    };
+
+    return render(
+      <IntlProvider locale="en">
+        <DataTableContext.Provider value={contextValue}>
+          <SortDropdown />
+        </DataTableContext.Provider>
+      </IntlProvider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the sort dropdown with default label', () => {
+    renderSortDropdown();
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(screen.getByText('Sort')).toBeInTheDocument();
+  });
+
+  it('should render all sort options when dropdown is opened', () => {
+    renderSortDropdown();
+
+    const toggleButton = screen.getByRole('button');
+    fireEvent.click(toggleButton);
+
+    expect(screen.getByText('Name A-Z')).toBeInTheDocument();
+    expect(screen.getByText('Name Z-A')).toBeInTheDocument();
+    expect(screen.getByText('Newest')).toBeInTheDocument();
+    expect(screen.getByText('Oldest')).toBeInTheDocument();
+  });
+
+  it('should display current sort when a sort is active', () => {
+    const contextWithSort = {
+      state: {
+        ...defaultDataTableState,
+        sortBy: [{ id: 'username', desc: false }],
+      },
+    };
+
+    renderSortDropdown(contextWithSort);
+
+    expect(screen.getByText('Name A-Z')).toBeInTheDocument();
+  });
+
+  it('should display descending sort correctly', () => {
+    const contextWithSort = {
+      state: {
+        ...defaultDataTableState,
+        sortBy: [{ id: 'username', desc: true }],
+      },
+    };
+
+    renderSortDropdown(contextWithSort);
+
+    expect(screen.getByText('Name Z-A')).toBeInTheDocument();
+  });
+
+  it('should display newest sort correctly', () => {
+    const contextWithSort = {
+      state: {
+        ...defaultDataTableState,
+        sortBy: [{ id: 'createdAt', desc: true }],
+      },
+    };
+
+    renderSortDropdown(contextWithSort);
+
+    expect(screen.getByText('Newest')).toBeInTheDocument();
+  });
+
+  it('should display oldest sort correctly', () => {
+    const contextWithSort = {
+      state: {
+        ...defaultDataTableState,
+        sortBy: [{ id: 'createdAt', desc: false }],
+      },
+    };
+
+    renderSortDropdown(contextWithSort);
+
+    expect(screen.getByText('Oldest')).toBeInTheDocument();
+  });
+
+  it('should handle sort selection and call toggleSortBy', () => {
+    renderSortDropdown();
+
+    const toggleButton = screen.getByRole('button');
+    fireEvent.click(toggleButton);
+
+    const nameAZOption = screen.getByText('Name A-Z');
+
+    act(() => {
+      fireEvent.click(nameAZOption);
+    });
+
+    expect(mockToggleSortBy).toHaveBeenCalledWith('username', false);
+
+    const nameZAOption = screen.getByText('Name Z-A');
+
+    act(() => {
+      fireEvent.click(nameZAOption);
+    });
+
+    expect(mockToggleSortBy).toHaveBeenCalledWith('username', true);
+
+    const newestOption = screen.getByText('Newest');
+
+    act(() => {
+      fireEvent.click(newestOption);
+    });
+
+    expect(mockToggleSortBy).toHaveBeenCalledWith('createdAt', true);
+  });
+
+  it('should mark the active sort option as active', () => {
+    const contextWithSort = {
+      state: {
+        ...defaultDataTableState,
+        sortBy: [{ id: 'username', desc: false }],
+      },
+    };
+
+    renderSortDropdown(contextWithSort);
+
+    const toggleButton = screen.getByRole('button');
+    fireEvent.click(toggleButton);
+
+    // Get all elements with "Name A-Z" text and find the dropdown item
+    const nameAZOptions = screen.getAllByText('Name A-Z');
+    const dropdownItem = nameAZOptions.find(element => element.closest('.dropdown-item'));
+    expect(dropdownItem?.closest('.dropdown-item')).toHaveClass('active');
+  });
+
+  it('should handle undefined sortBy', () => {
+    const contextWithUndefinedSort = {
+      state: {
+        ...defaultDataTableState,
+        sortBy: undefined,
+      },
+    };
+
+    renderSortDropdown(contextWithUndefinedSort);
+
+    expect(screen.getByText('Sort')).toBeInTheDocument();
+  });
+});