mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 17:57:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated DomainsSelector test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-05-09 19:03:19 +02:00
parent 0b16300a70
commit fb0adf74f3
2 changed files with 39 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/domains/DomainSelector.tsx
View file

@ -40,6 +40,7 @@ export const DomainSelector = ({ listDomains, value, domainsList, onChange }: Do
outline outline
type="button" type="button"
className="domains-dropdown__back-btn" className="domains-dropdown__back-btn"
aria-label="Back to domains list"
onClick={pipe(unselectDomain, hideInput)} onClick={pipe(unselectDomain, hideInput)}
> >
<FontAwesomeIcon icon={faUndo} /> <FontAwesomeIcon icon={faUndo} />

71
test/domains/DomainSelector.test.tsx
View file

@ -1,13 +1,10 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { DropdownItem, InputGroup } from 'reactstrap';
import { DomainSelector } from '../../src/domains/DomainSelector'; import { DomainSelector } from '../../src/domains/DomainSelector';
import { DomainsList } from '../../src/domains/reducers/domainsList'; import { DomainsList } from '../../src/domains/reducers/domainsList';
import { ShlinkDomain } from '../../src/api/types'; import { ShlinkDomain } from '../../src/api/types';
import { DropdownBtn } from '../../src/utils/DropdownBtn';
describe('<DomainSelector />', () => { describe('<DomainSelector />', () => {
let wrapper: ShallowWrapper;
const domainsList = Mock.of<DomainsList>({ const domainsList = Mock.of<DomainsList>({
domains: [ domains: [
Mock.of<ShlinkDomain>({ domain: 'default.com', isDefault: true }), Mock.of<ShlinkDomain>({ domain: 'default.com', isDefault: true }),
@ -15,51 +12,59 @@ describe('<DomainSelector />', () => {
Mock.of<ShlinkDomain>({ domain: 'bar.com' }), Mock.of<ShlinkDomain>({ domain: 'bar.com' }),
], ],
}); });
const createWrapper = (value = '') => { const setUp = (value = '') => render(
wrapper = shallow( <DomainSelector value={value} domainsList={domainsList} listDomains={jest.fn()} onChange={jest.fn()} />,
<DomainSelector value={value} domainsList={domainsList} listDomains={jest.fn()} onChange={jest.fn()} />, );
);
return wrapper;
};
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
afterEach(() => wrapper.unmount());
it.each([ it.each([
['', 'Domain', 'domains-dropdown__toggle-btn'], ['', 'Domain', 'domains-dropdown__toggle-btn'],
['my-domain.com', 'Domain: my-domain.com', 'domains-dropdown__toggle-btn--active'], ['my-domain.com', 'Domain: my-domain.com', 'domains-dropdown__toggle-btn--active'],
])('shows dropdown by default', (value, expectedText, expectedClassName) => { ])('shows dropdown by default', async (value, expectedText, expectedClassName) => {
const wrapper = createWrapper(value); setUp(value);
const input = wrapper.find(InputGroup);
const dropdown = wrapper.find(DropdownBtn);
expect(input).toHaveLength(0); const btn = screen.getByRole('button', { name: expectedText });
expect(dropdown).toHaveLength(1);
expect(dropdown.find(DropdownItem)).toHaveLength(5); expect(screen.queryByPlaceholderText('Domain')).not.toBeInTheDocument();
expect(dropdown.prop('text')).toEqual(expectedText); expect(btn).toHaveAttribute(
expect(dropdown.prop('className')).toEqual(expectedClassName); 'class',
`dropdown-btn__toggle btn-block ${expectedClassName} dropdown-toggle btn btn-primary`,
);
fireEvent.click(btn);
await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument());
expect(screen.getAllByRole('menuitem')).toHaveLength(4);
}); });
it('allows toggling between dropdown and input', () => { it('allows toggling between dropdown and input', async () => {
const wrapper = createWrapper(); setUp();
wrapper.find(DropdownItem).last().simulate('click'); expect(screen.queryByPlaceholderText('Domain')).not.toBeInTheDocument();
expect(wrapper.find(InputGroup)).toHaveLength(1); expect(screen.getByRole('button', { name: 'Domain' })).toBeInTheDocument();
expect(wrapper.find(DropdownBtn)).toHaveLength(0);
wrapper.find('.domains-dropdown__back-btn').simulate('click'); fireEvent.click(screen.getByRole('button', { name: 'Domain' }));
expect(wrapper.find(InputGroup)).toHaveLength(0); fireEvent.click(await screen.findByText('New domain'));
expect(wrapper.find(DropdownBtn)).toHaveLength(1);
expect(screen.getByPlaceholderText('Domain')).toBeInTheDocument();
expect(screen.queryByRole('button', { name: 'Domain' })).not.toBeInTheDocument();
fireEvent.click(screen.getByRole('button', { name: 'Back to domains list' }));
expect(screen.queryByPlaceholderText('Domain')).not.toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Domain' })).toBeInTheDocument();
}); });
it.each([ it.each([
[0, 'default.com<span class="float-end text-muted">default</span>'], [0, 'default.comdefault'],
[1, 'foo.com'], [1, 'foo.com'],
[2, 'bar.com'], [2, 'bar.com'],
])('shows expected content on every item', (index, expectedContent) => { ])('shows expected content on every item', async (index, expectedContent) => {
const item = createWrapper().find(DropdownItem).at(index); setUp();
expect(item.html()).toContain(expectedContent); fireEvent.click(screen.getByRole('button', { name: 'Domain' }));
const items = await screen.findAllByRole('menuitem');
expect(items[index]).toHaveTextContent(expectedContent);
}); });
}); });