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

Migrated ManageDomains test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-05-09 19:23:35 +02:00
parent fb0adf74f3
commit b1d51a4103
1 changed files with 36 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
test/domains/ManageDomains.test.tsx
View file

@ -1,108 +1,70 @@
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 { DomainsList } from '../../src/domains/reducers/domainsList'; import { DomainsList } from '../../src/domains/reducers/domainsList';
import { ManageDomains } from '../../src/domains/ManageDomains'; import { ManageDomains } from '../../src/domains/ManageDomains';
import Message from '../../src/utils/Message';
import { Result } from '../../src/utils/Result';
import SearchField from '../../src/utils/SearchField';
import { ProblemDetailsError, ShlinkDomain } from '../../src/api/types'; import { ProblemDetailsError, ShlinkDomain } from '../../src/api/types';
import { ShlinkApiError } from '../../src/api/ShlinkApiError';
import { DomainRow } from '../../src/domains/DomainRow';
import { SelectedServer } from '../../src/servers/data'; import { SelectedServer } from '../../src/servers/data';
describe('<ManageDomains />', () => { describe('<ManageDomains />', () => {
const listDomains = jest.fn(); const listDomains = jest.fn();
const filterDomains = jest.fn(); const filterDomains = jest.fn();
let wrapper: ShallowWrapper; const setUp = (domainsList: DomainsList) => render(
const createWrapper = (domainsList: DomainsList) => { <ManageDomains
wrapper = shallow( listDomains={listDomains}
<ManageDomains filterDomains={filterDomains}
listDomains={listDomains} editDomainRedirects={jest.fn()}
filterDomains={filterDomains} checkDomainHealth={jest.fn()}
editDomainRedirects={jest.fn()} domainsList={domainsList}
checkDomainHealth={jest.fn()} selectedServer={Mock.all<SelectedServer>()}
domainsList={domainsList} />,
selectedServer={Mock.all<SelectedServer>()} );
/>,
);
return wrapper;
};
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('shows loading message while domains are loading', () => { it('shows loading message while domains are loading', () => {
const wrapper = createWrapper(Mock.of<DomainsList>({ loading: true, filteredDomains: [] })); setUp(Mock.of<DomainsList>({ loading: true, filteredDomains: [] }));
const message = wrapper.find(Message);
const searchField = wrapper.find(SearchField);
const result = wrapper.find(Result);
const apiError = wrapper.find(ShlinkApiError);
expect(message).toHaveLength(1); expect(screen.getByText('Loading...')).toBeInTheDocument();
expect(message.prop('loading')).toEqual(true); expect(screen.queryByText('Error loading domains :(')).not.toBeInTheDocument();
expect(searchField).toHaveLength(0);
expect(result).toHaveLength(0);
expect(apiError).toHaveLength(0);
}); });
it('shows error result when domains loading fails', () => { it.each([
const errorData = Mock.of<ProblemDetailsError>(); [undefined, 'Error loading domains :('],
const wrapper = createWrapper(Mock.of<DomainsList>( [Mock.of<ProblemDetailsError>(), 'Error loading domains :('],
{ loading: false, error: true, errorData, filteredDomains: [] }, [Mock.of<ProblemDetailsError>({ detail: 'Foo error!!' }), 'Foo error!!'],
)); ])('shows error result when domains loading fails', (errorData, expectedErrorMessage) => {
const message = wrapper.find(Message); setUp(Mock.of<DomainsList>({ loading: false, error: true, errorData, filteredDomains: [] }));
const searchField = wrapper.find(SearchField);
const result = wrapper.find(Result);
const apiError = wrapper.find(ShlinkApiError);
expect(result).toHaveLength(1); expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
expect(result.prop('type')).toEqual('error'); expect(screen.getByText(expectedErrorMessage)).toBeInTheDocument();
expect(apiError).toHaveLength(1);
expect(apiError.prop('errorData')).toEqual(errorData);
expect(searchField).toHaveLength(1);
expect(message).toHaveLength(0);
}); });
it('filters domains when SearchField changes', () => { it('filters domains when SearchField changes', async () => {
const wrapper = createWrapper(Mock.of<DomainsList>({ loading: false, error: false, filteredDomains: [] })); setUp(Mock.of<DomainsList>({ loading: false, error: false, filteredDomains: [] }));
const searchField = wrapper.find(SearchField);
expect(filterDomains).not.toHaveBeenCalled(); expect(filterDomains).not.toHaveBeenCalled();
searchField.simulate('change'); fireEvent.change(screen.getByPlaceholderText('Search...'), { target: { value: 'Foo' } });
expect(filterDomains).toHaveBeenCalledTimes(1); await waitFor(() => expect(filterDomains).toHaveBeenCalledTimes(1));
}); });
it('shows expected headers', () => { it('shows expected headers and one row when list of domains is empty', () => {
const wrapper = createWrapper(Mock.of<DomainsList>({ loading: false, error: false, filteredDomains: [] })); setUp(Mock.of<DomainsList>({ loading: false, error: false, filteredDomains: [] }));
const headerCells = wrapper.find('th');
expect(headerCells).toHaveLength(7); expect(screen.getAllByRole('columnheader')).toHaveLength(7);
expect(screen.getByText('No results found')).toBeInTheDocument();
}); });
it('one row when list of domains is empty', () => { it('has many rows if multiple domains are provided', () => {
const wrapper = createWrapper(Mock.of<DomainsList>({ loading: false, error: false, filteredDomains: [] }));
const tableBody = wrapper.find('tbody');
const regularRows = tableBody.find('tr');
const domainRows = tableBody.find(DomainRow);
expect(regularRows).toHaveLength(1);
expect(regularRows.html()).toContain('No results found');
expect(domainRows).toHaveLength(0);
});
it('as many DomainRows as domains are provided', () => {
const filteredDomains = [ const filteredDomains = [
Mock.of<ShlinkDomain>({ domain: 'foo' }), Mock.of<ShlinkDomain>({ domain: 'foo' }),
Mock.of<ShlinkDomain>({ domain: 'bar' }), Mock.of<ShlinkDomain>({ domain: 'bar' }),
Mock.of<ShlinkDomain>({ domain: 'baz' }), Mock.of<ShlinkDomain>({ domain: 'baz' }),
]; ];
const wrapper = createWrapper(Mock.of<DomainsList>({ loading: false, error: false, filteredDomains })); setUp(Mock.of<DomainsList>({ loading: false, error: false, filteredDomains }));
const tableBody = wrapper.find('tbody');
const regularRows = tableBody.find('tr');
const domainRows = tableBody.find(DomainRow);
expect(regularRows).toHaveLength(0); expect(screen.getAllByRole('row')).toHaveLength(filteredDomains.length + 1);
expect(domainRows).toHaveLength(filteredDomains.length); expect(screen.getByText('foo')).toBeInTheDocument();
expect(screen.getByText('bar')).toBeInTheDocument();
expect(screen.getByText('baz')).toBeInTheDocument();
}); });
}); });