mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated VisitsStats test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-07-17 10:24:34 +02:00
parent d627de8e83
commit 1ffd71e81f
2 changed files with 49 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/visits/VisitsStats.tsx
View file

@ -139,7 +139,7 @@ export const VisitsStats: FC<VisitsStatsProps> = ({
} }
if (isEmpty(visits)) { if (isEmpty(visits)) {
return <Message>There are no visits matching current filter :(</Message>; return <Message>There are no visits matching current filter</Message>;
} }
return ( return (

115
test/visits/VisitsStats.test.tsx
View file

@ -1,29 +1,24 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { screen } from '@testing-library/react';
import { Progress } from 'reactstrap';
import { sum } from 'ramda';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { Route } from 'react-router-dom'; import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { VisitsStats } from '../../src/visits/VisitsStats'; import { VisitsStats } from '../../src/visits/VisitsStats';
import { Message } from '../../src/utils/Message';
import { Visit, VisitsInfo } from '../../src/visits/types'; import { Visit, VisitsInfo } from '../../src/visits/types';
import { LineChartCard } from '../../src/visits/charts/LineChartCard';
import { VisitsTable } from '../../src/visits/VisitsTable';
import { Result } from '../../src/utils/Result';
import { Settings } from '../../src/settings/reducers/settings'; import { Settings } from '../../src/settings/reducers/settings';
import { SelectedServer } from '../../src/servers/data'; import { SelectedServer } from '../../src/servers/data';
import { SortableBarChartCard } from '../../src/visits/charts/SortableBarChartCard'; import { renderWithEvents } from '../__helpers__/setUpTest';
import { DoughnutChartCard } from '../../src/visits/charts/DoughnutChartCard'; import { rangeOf } from '../../src/utils/utils';
import { ExportBtn } from '../../src/utils/ExportBtn';
describe('<VisitsStats />', () => { describe('<VisitsStats />', () => {
const visits = [Mock.all<Visit>(), Mock.all<Visit>(), Mock.all<Visit>()]; const visits = rangeOf(3, () => Mock.of<Visit>({ date: '2020-01-01' }));
let wrapper: ShallowWrapper;
const getVisitsMock = jest.fn(); const getVisitsMock = jest.fn();
const exportCsv = jest.fn(); const exportCsv = jest.fn();
const setUp = (visitsInfo: Partial<VisitsInfo>, activeRoute = '/by-time') => {
const history = createMemoryHistory();
history.push(activeRoute);
const createComponent = (visitsInfo: Partial<VisitsInfo>) => { return renderWithEvents(
wrapper = shallow( <Router location={history.location} navigator={history}>
<VisitsStats <VisitsStats
getVisits={getVisitsMock} getVisits={getVisitsMock}
visitsInfo={Mock.of<VisitsInfo>(visitsInfo)} visitsInfo={Mock.of<VisitsInfo>(visitsInfo)}
@ -31,86 +26,58 @@ describe('<VisitsStats />', () => {
settings={Mock.all<Settings>()} settings={Mock.all<Settings>()}
exportCsv={exportCsv} exportCsv={exportCsv}
selectedServer={Mock.all<SelectedServer>()} selectedServer={Mock.all<SelectedServer>()}
/>, />
</Router>,
); );
return wrapper;
}; };
afterEach(() => wrapper?.unmount());
it('renders a preloader when visits are loading', () => { it('renders a preloader when visits are loading', () => {
const wrapper = createComponent({ loading: true, visits: [] }); setUp({ loading: true, visits: [] });
const loadingMessage = wrapper.find(Message);
const progress = wrapper.find(Progress);
expect(loadingMessage).toHaveLength(1); expect(screen.getByText('Loading...')).toBeInTheDocument();
expect(loadingMessage.html()).toContain('Loading...'); expect(screen.queryByText(/^This is going to take a while/)).not.toBeInTheDocument();
expect(progress).toHaveLength(0);
}); });
it('renders a warning and progress bar when loading large amounts of visits', () => { it('renders a warning and progress bar when loading large amounts of visits', () => {
const wrapper = createComponent({ loading: true, loadingLarge: true, visits: [], progress: 25 }); setUp({ loading: true, loadingLarge: true, visits: [], progress: 25 });
const loadingMessage = wrapper.find(Message);
const progress = wrapper.find(Progress);
expect(loadingMessage).toHaveLength(1); expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
expect(loadingMessage.html()).toContain('This is going to take a while... :S'); expect(screen.getByText(/^This is going to take a while/)).toBeInTheDocument();
expect(progress).toHaveLength(1); expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '25');
expect(progress.prop('value')).toEqual(25);
}); });
it('renders an error message when visits could not be loaded', () => { it('renders an error message when visits could not be loaded', () => {
const wrapper = createComponent({ loading: false, error: true, visits: [] }); setUp({ loading: false, error: true, visits: [] });
const errorMessage = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error'); expect(screen.getByText('An error occurred while loading visits :(')).toBeInTheDocument();
expect(errorMessage).toHaveLength(1);
expect(errorMessage.html()).toContain('An error occurred while loading visits :(');
}); });
it('renders a message when visits are loaded but the list is empty', () => { it('renders a message when visits are loaded but the list is empty', () => {
const wrapper = createComponent({ loading: false, error: false, visits: [] }); setUp({ loading: false, error: false, visits: [] });
const message = wrapper.find(Message); expect(screen.getByText('There are no visits matching current filter')).toBeInTheDocument();
expect(message).toHaveLength(1);
expect(message.html()).toContain('There are no visits matching current filter :(');
}); });
it('renders expected amount of charts', () => { it.each([
const wrapper = createComponent({ loading: false, error: false, visits }); ['/by-time', 2],
const total = sum(wrapper.find(Route).map((element) => { ['/by-context', 4],
const ElementComponents = () => element.prop('element'); ['/by-location', 3],
// @ts-expect-error Wrapped element ['/list', 1],
const wrappedElement = shallow(<ElementComponents />); ])('renders expected amount of charts', (route, expectedCharts) => {
const { container } = setUp({ loading: false, error: false, visits }, route);
const charts = wrappedElement.find(DoughnutChartCard); expect(container.querySelectorAll('.card')).toHaveLength(expectedCharts);
const sortableCharts = wrappedElement.find(SortableBarChartCard);
const lineChart = wrappedElement.find(LineChartCard);
const table = wrappedElement.find(VisitsTable);
return charts.length + sortableCharts.length + lineChart.length + table.length;
}));
expect(total).toEqual(7);
}); });
it('holds the map button content generator on cities chart extraHeaderContent', () => { it('holds the map button on cities chart header', () => {
const wrapper = createComponent({ loading: false, error: false, visits }); setUp({ loading: false, error: false, visits }, '/by-location');
const ElementComponent = () => wrapper.find(Route).findWhere((element) => element.prop('path') === 'by-location') expect(
.prop('element'); screen.getAllByRole('img', { hidden: true }).some((icon) => icon.classList.contains('fa-map-location-dot')),
const citiesChart = shallow(<ElementComponent />).find(SortableBarChartCard).find('[title="Cities"]'); ).toEqual(true);
const extraHeaderContent = citiesChart.prop('extraHeaderContent');
expect(extraHeaderContent).toHaveLength(1);
expect(typeof extraHeaderContent).toEqual('function');
}); });
it('exports CSV when export btn is clicked', () => { it('exports CSV when export btn is clicked', async () => {
const wrapper = createComponent({ visits }); const { user } = setUp({ visits });
const exportBtn = wrapper.find(ExportBtn).last();
expect(exportBtn).toHaveLength(1); expect(exportCsv).not.toHaveBeenCalled();
exportBtn.simulate('click'); await user.click(screen.getByRole('button', { name: /Export/ }));
expect(exportCsv).toHaveBeenCalled(); expect(exportCsv).toHaveBeenCalled();
}); });
}); });