import { expect, test, it, jest, } from 'vitest'; import {render, fireEvent} from '@testing-library/react'; import {t} from '@/scripts/i18n'; import Pagination from '@/components/Pagination'; test('hide when total pages is invalid', () => { const {queryByText} = render( {}}/>, ); expect(queryByText(t('vendor.datatable.prev'))).not.toBeInTheDocument(); expect(queryByText(t('vendor.datatable.next'))).not.toBeInTheDocument(); }); describe('previous page', () => { it('enabled', () => { const mock = vi.fn(() => {}); const {getByText} = render( , ); fireEvent.click(getByText(t('vendor.datatable.prev'))); expect(mock).toBeCalledWith(2); }); it('disabled', () => { const mock = vi.fn(() => {}); const {getByText} = render( , ); fireEvent.click(getByText(t('vendor.datatable.prev'))); expect(mock).not.toBeCalled(); }); }); describe('next page', () => { it('enabled', () => { const mock = vi.fn(() => {}); const {getByText} = render( , ); fireEvent.click(getByText(t('vendor.datatable.next'))); expect(mock).toBeCalledWith(4); }); it('disabled', () => { const mock = vi.fn(() => {}); const {getByText} = render( , ); fireEvent.click(getByText(t('vendor.datatable.next'))); expect(mock).not.toBeCalled(); }); }); describe('middle pages', () => { it('pages count less than 8', () => { const mock = vi.fn(() => {}); const {getByText} = render( , ); fireEvent.click(getByText('1')); expect(mock).toBeCalledWith(1); fireEvent.click(getByText('2')); expect(mock).toBeCalledWith(2); fireEvent.click(getByText('3')); expect(mock).toBeCalledWith(3); fireEvent.click(getByText('4')); expect(mock).toBeCalledWith(4); fireEvent.click(getByText('5')); expect(mock).toBeCalledWith(5); fireEvent.click(getByText('6')); expect(mock).toBeCalledWith(6); fireEvent.click(getByText('7')); expect(mock).toBeCalledWith(7); }); describe('pages count greater than or equals to 8', () => { it('left edge', () => { const mock = vi.fn(() => {}); const {getByText, queryByText} = render( , ); fireEvent.click(getByText('1')); expect(mock).toBeCalledWith(1); expect(queryByText('1')).toBeInTheDocument(); expect(queryByText('2')).toBeInTheDocument(); expect(queryByText('3')).toBeInTheDocument(); expect(queryByText('...')).toBeInTheDocument(); expect(queryByText('10')).toBeInTheDocument(); fireEvent.click(getByText('2')); expect(mock).toBeCalledWith(2); expect(queryByText('1')).toBeInTheDocument(); expect(queryByText('2')).toBeInTheDocument(); expect(queryByText('3')).toBeInTheDocument(); expect(queryByText('...')).toBeInTheDocument(); expect(queryByText('10')).toBeInTheDocument(); }); it('right edge', () => { const mock = vi.fn(() => {}); const {getByText, queryByText} = render( , ); fireEvent.click(getByText('10')); expect(mock).toBeCalledWith(10); expect(queryByText('1')).toBeInTheDocument(); expect(queryByText('...')).toBeInTheDocument(); expect(queryByText('8')).toBeInTheDocument(); expect(queryByText('9')).toBeInTheDocument(); expect(queryByText('10')).toBeInTheDocument(); fireEvent.click(getByText('9')); expect(mock).toBeCalledWith(9); expect(queryByText('1')).toBeInTheDocument(); expect(queryByText('...')).toBeInTheDocument(); expect(queryByText('8')).toBeInTheDocument(); expect(queryByText('9')).toBeInTheDocument(); expect(queryByText('10')).toBeInTheDocument(); }); it('middle', () => { const mock = vi.fn(() => {}); const {getByText, queryByText, queryAllByText} = render( , ); expect(queryByText('1')).toBeInTheDocument(); expect(queryAllByText('...')).toHaveLength(2); expect(queryByText('3')).toBeInTheDocument(); expect(queryByText('4')).toBeInTheDocument(); expect(queryByText('5')).toBeInTheDocument(); expect(queryByText('10')).toBeInTheDocument(); fireEvent.click(getByText('5')); expect(mock).toBeCalledWith(5); fireEvent.click(getByText('1')); expect(mock).toBeCalledWith(1); fireEvent.click(getByText('10')); expect(mock).toBeCalledWith(10); }); }); });