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)) {
return <Message>There are no visits matching current filter :(</Message>;
return <Message>There are no visits matching current filter</Message>;
}
return (

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

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