Skip to content

Commit

Permalink
Add tests for Pagination (#16)
Browse files Browse the repository at this point in the history
  • Loading branch information
ODORA0 authored Oct 28, 2024
1 parent 9ce5d8a commit fa2b1c8
Showing 1 changed file with 163 additions and 0 deletions.
163 changes: 163 additions & 0 deletions src/components/pagination/pagination.component.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ContentPackagesBuilderPagination } from './pagination.component';
import { useLayoutType } from '@openmrs/esm-framework';
import { usePaginationInfo } from './usePaginationInfo';
import { Pagination } from '@carbon/react';

jest.mock('@openmrs/esm-framework', () => ({
useLayoutType: jest.fn(),
}));

jest.mock('./usePaginationInfo', () => ({
usePaginationInfo: jest.fn(),
}));

jest.mock('@carbon/react', () => ({
Pagination: jest.fn((props) => (
<div role="navigation" aria-label="Pagination" data-testid="mock-pagination">
<button
onClick={() => props.onChange({ page: props.page + 1, pageSize: props.pageSize })}
aria-label="Next page"
type="button"
>
Next
</button>
<select
data-testid="page-size-select"
value={props.pageSize}
onChange={(e) => props.onChange({ page: 1, pageSize: Number(e.target.value) })}
aria-label="Items per page"
>
{props.pageSizes.map((size) => (
<option key={size} value={size}>
{size} items per page
</option>
))}
</select>
<input
type="number"
data-testid="page-input"
value={props.page}
onChange={(e) => {
const newPage = Number(e.target.value);
if (newPage > 0 && newPage <= Math.ceil(props.totalItems / props.pageSize)) {
props.onChange({ page: newPage, pageSize: props.pageSize });
}
}}
aria-label="Current page number"
min={1}
max={Math.ceil(props.totalItems / props.pageSize)}
/>
</div>
)),
}));

jest.mock('./pagination.scss', () => ({
tablet: 'tablet-class',
desktop: 'desktop-class',
pagination: 'pagination-class',
}));

describe('ContentPackagesBuilderPagination', () => {
const mockLayoutType = useLayoutType as jest.Mock;
const mockPaginationInfo = usePaginationInfo as jest.Mock;

const defaultProps = {
currentItems: 10,
totalItems: 100,
pageNumber: 1,
pageSize: 10,
onPageNumberChange: jest.fn(),
};

beforeEach(() => {
mockLayoutType.mockReset();
mockPaginationInfo.mockReset();
mockLayoutType.mockReturnValue('desktop');
mockPaginationInfo.mockReturnValue({
itemsDisplayed: '1-10 of 100 items',
pageSizes: [10, 20, 30, 40, 50],
});
});

it('renders no content when there are no items', () => {
render(<ContentPackagesBuilderPagination {...defaultProps} totalItems={0} />);
const pagination = screen.queryByRole('navigation');
expect(pagination).not.toBeInTheDocument();
});

it('displays the correct items text', () => {
render(<ContentPackagesBuilderPagination {...defaultProps} />);
const itemsText = screen.getByText('1-10 of 100 items');
expect(itemsText).toBeInTheDocument();
});

it('applies desktop styles when on desktop layout', () => {
mockLayoutType.mockReturnValue('desktop');
render(<ContentPackagesBuilderPagination {...defaultProps} />);
const paginationWrapper = screen.getByTestId('mock-pagination').parentElement;
expect(paginationWrapper).toHaveClass('desktop-class');
});

it('applies tablet styles when on tablet layout', () => {
mockLayoutType.mockReturnValue('tablet');
render(<ContentPackagesBuilderPagination {...defaultProps} />);
const paginationWrapper = screen.getByTestId('mock-pagination').parentElement;
expect(paginationWrapper).toHaveClass('tablet-class');
});

it('handles next page navigation', async () => {
const user = userEvent.setup();
const onPageNumberChange = jest.fn();

render(<ContentPackagesBuilderPagination {...defaultProps} onPageNumberChange={onPageNumberChange} />);

const nextButton = screen.getByRole('button', { name: /next page/i });
await user.click(nextButton);

expect(onPageNumberChange).toHaveBeenCalledWith({ page: 2, pageSize: 10 });
});

it('handles page size changes', async () => {
const user = userEvent.setup();
const onPageNumberChange = jest.fn();

render(<ContentPackagesBuilderPagination {...defaultProps} onPageNumberChange={onPageNumberChange} />);

const pageSizeSelect = screen.getByRole('combobox', { name: /items per page/i });
await user.selectOptions(pageSizeSelect, '20');

expect(onPageNumberChange).toHaveBeenCalledWith({ page: 1, pageSize: 20 });
});

it('passes correct props to Pagination component', () => {
render(<ContentPackagesBuilderPagination {...defaultProps} />);

const pagination = screen.getByTestId('mock-pagination');
expect(pagination).toBeInTheDocument();

expect(Pagination).toHaveBeenCalledWith(
expect.objectContaining({
page: defaultProps.pageNumber,
pageSize: defaultProps.pageSize,
totalItems: defaultProps.totalItems,
pageSizes: [10, 20, 30, 40, 50],
onChange: expect.any(Function),
size: 'sm',
}),
expect.any(Object),
);
});

it('works without onPageNumberChange callback', () => {
const { rerender } = render(
<ContentPackagesBuilderPagination {...defaultProps} onPageNumberChange={undefined} />
);

expect(() => {
rerender(<ContentPackagesBuilderPagination {...defaultProps} onPageNumberChange={undefined} />);
}).not.toThrow();
});
});

0 comments on commit fa2b1c8

Please sign in to comment.