-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Migrate paginator * Add comment * Remove unused import * Migrate tab-bar
- Loading branch information
Showing
4 changed files
with
104 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,99 +1,106 @@ | ||
| import React from 'react' | ||
| import { mount } from 'enzyme' | ||
| import { render, screen } from '@testing-library/react' | ||
| import userEvent from '@testing-library/user-event' | ||
| import { Paginator } from '../../../src/' | ||
|
|
||
| test('Previous button renders unless value is min', () => { | ||
| const wrapper = mount(<Paginator value={5} min={1} max={10} />) | ||
| expect(wrapper.find('.prev').exists()).toBe(true) | ||
| wrapper.setProps({ value: 1 }) | ||
| expect(wrapper.find('.prev').exists()).toBe(false) | ||
| test('Previous control renders unless value is min', () => { | ||
| const { rerender } = render(<Paginator value={5} min={1} max={10} />) | ||
| expect(screen.getByRole('link', { name: /previous page/i })).toBeInTheDocument() | ||
| rerender(<Paginator value={1} min={1} max={10} />) | ||
| expect(screen.queryByRole('link', { name: /previous page/i })).not.toBeInTheDocument() | ||
| }) | ||
|
|
||
| test('Next button renders unless value is max', () => { | ||
| const wrapper = mount(<Paginator value={5} min={1} max={10} />) | ||
| expect(wrapper.find('.next').exists()).toBe(true) | ||
| wrapper.setProps({ value: 10 }) | ||
| expect(wrapper.find('.next').exists()).toBe(false) | ||
| test('Next control renders unless value is max', () => { | ||
| const { rerender } = render(<Paginator value={5} min={1} max={10} />) | ||
| expect(screen.getByRole('link', { name: /next page/i })).toBeInTheDocument() | ||
| rerender(<Paginator value={10} min={1} max={10} />) | ||
| expect(screen.queryByRole('link', { name: /next page/i })).not.toBeInTheDocument() | ||
| }) | ||
|
|
||
| test('Button with current value is marked as active', () => { | ||
| const wrapper = mount(<Paginator value={5} min={1} max={10} />) | ||
| expect(wrapper.find('.active').text()).toBe('5') | ||
| test('Control with current value is marked as active', () => { | ||
| render(<Paginator value={5} min={1} max={10} />) | ||
| expect(screen.getByText(5).parentElement).toHaveClass('active') | ||
| }) | ||
|
|
||
| test('Button click sets value', () => { | ||
| test('Control click sets value', async () => { | ||
| const onChange = jest.fn() | ||
| const wrapper = mount( | ||
| const user = userEvent.setup() | ||
|
|
||
| render( | ||
| <Paginator value={5} min={1} max={10} onChange={onChange} /> | ||
| ) | ||
| wrapper.find('li > a').at(2).simulate('click') | ||
| await user.click(screen.getAllByRole('link').at(2)) | ||
| expect(onChange).toHaveBeenCalledWith(4) | ||
| }) | ||
|
|
||
| test('Previous button decrements value', () => { | ||
| test('Previous control decrements value', async () => { | ||
| const onChange = jest.fn() | ||
| const wrapper = mount( | ||
| <Paginator value={5} min={1} max={10} onChange={onChange} /> | ||
| const user = userEvent.setup() | ||
| const currentValue = 5 | ||
| render( | ||
| <Paginator value={currentValue} min={1} max={10} onChange={onChange} /> | ||
| ) | ||
| wrapper.find('li > a').first().simulate('click') | ||
| expect(onChange).toHaveBeenCalledWith(4) | ||
| await user.click(screen.getByRole('link', { name: /previous page/i })) | ||
| expect(onChange).toHaveBeenCalledWith(currentValue - 1) | ||
| }) | ||
|
|
||
| test('Next button increments value', () => { | ||
| test('Next control increments value', async () => { | ||
| const onChange = jest.fn() | ||
| const wrapper = mount( | ||
| <Paginator value={5} min={1} max={10} onChange={onChange} /> | ||
| const user = userEvent.setup() | ||
| const currentValue = 5 | ||
| render( | ||
| <Paginator value={currentValue} min={1} max={10} onChange={onChange} /> | ||
| ) | ||
| wrapper.find('li > a').last().simulate('click') | ||
| expect(onChange).toHaveBeenCalledWith(6) | ||
| await user.click(screen.getByRole('link', { name: /next page/i })) | ||
| expect(onChange).toHaveBeenCalledWith(currentValue + 1) | ||
| }) | ||
|
|
||
| test('Min button sets value to min', () => { | ||
| test('Min control sets value to min', async () => { | ||
| const onChange = jest.fn() | ||
| const wrapper = mount( | ||
| const user = userEvent.setup() | ||
| render( | ||
| <Paginator value={5} min={1} max={10} onChange={onChange} /> | ||
| ) | ||
| wrapper.find('li > a').at(1).simulate('click') | ||
| await user.click(screen.getByRole('link', { name: /page 1$/ })) | ||
| expect(onChange).toHaveBeenCalledWith(1) | ||
| }) | ||
|
|
||
| test('Max button sets value to max', () => { | ||
| test('Max control sets value to max', async () => { | ||
| const onChange = jest.fn() | ||
| const wrapper = mount( | ||
| const user = userEvent.setup() | ||
| render( | ||
| <Paginator value={5} min={1} max={10} onChange={onChange} /> | ||
| ) | ||
| wrapper.find('li > a').at(5).simulate('click') | ||
| await user.click(screen.getByRole('link', { name: /page 10$/ })) | ||
| expect(onChange).toHaveBeenCalledWith(10) | ||
| }) | ||
|
|
||
| test('Current page is indicated via aria-current', () => { | ||
| const wrapper = mount(<Paginator value={5} min={1} max={10} />) | ||
| expect(wrapper.find('.active > a').prop('aria-current')).toBe('page') | ||
| expect(wrapper.find('a').not('.active').first().prop('aria-current')).toBe( | ||
| false | ||
| ) | ||
| render(<Paginator value={5} min={1} max={10} />) | ||
| expect(screen.getByText(5)).toHaveAttribute('aria-current', 'page') | ||
| expect(screen.getByText(1)).toHaveAttribute('aria-current', 'false') | ||
| }) | ||
|
|
||
| test('Destination is indicated via aria-label', () => { | ||
| const wrapper = mount(<Paginator value={5} min={1} max={10} />) | ||
| expect(wrapper.find('.active > a').prop('aria-label')).toBe('Go to page 5') | ||
| render(<Paginator value={5} min={1} max={10} />) | ||
| expect(screen.getByLabelText('Go to page 5')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| test('Page button is triggered via click or enter', () => { | ||
| test('Page control is triggered via click or enter', async () => { | ||
| const onChange = jest.fn() | ||
| const wrapper = mount( | ||
| const user = userEvent.setup() | ||
| render( | ||
| <Paginator value={5} min={1} max={10} onChange={onChange} /> | ||
| ) | ||
| const link = wrapper.find('li > a').at(2) | ||
| link.simulate('click') | ||
| link.simulate('keypress', { keyCode: 13 }) | ||
|
|
||
| expect(onChange).toHaveBeenCalledTimes(2) | ||
| await user.click(screen.getByLabelText('Go to page 1')) | ||
| await user.keyboard('{Enter}') | ||
| expect(onChange).toHaveBeenNthCalledWith(1, 1) | ||
| expect(onChange).toHaveBeenNthCalledWith(2, 1) | ||
| }) | ||
|
|
||
| test('Can accept custom delimiter', () => { | ||
| const wrapper = mount( | ||
| render( | ||
| <Paginator value={1} min={1} max={10} delimiter="foo" /> | ||
| ) | ||
| expect(wrapper.find('.delimiter').contains('foo')).toBe(true) | ||
| expect(screen.getByText('foo')).toBeInTheDocument() | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters