shlink-web-client/test/visits/VisitsTable.test.tsx

154 lines
5.8 KiB
TypeScript
Raw Normal View History

2020-09-05 09:49:18 +03:00
import { shallow, ShallowWrapper } from 'enzyme';
import { Mock } from 'ts-mockery';
2020-04-09 11:21:38 +03:00
import VisitsTable from '../../src/visits/VisitsTable';
import { rangeOf } from '../../src/utils/utils';
import SimplePaginator from '../../src/common/SimplePaginator';
import SearchField from '../../src/utils/SearchField';
2020-09-05 09:49:18 +03:00
import { NormalizedVisit } from '../../src/visits/types';
import { SelectedServer } from '../../src/servers/data';
2020-04-09 11:21:38 +03:00
describe('<VisitsTable />', () => {
2020-09-05 09:49:18 +03:00
const matchMedia = () => Mock.of<MediaQueryList>({ matches: false });
const setSelectedVisits = jest.fn();
2020-09-05 09:49:18 +03:00
let wrapper: ShallowWrapper;
2021-03-28 17:06:37 +03:00
const createWrapper = (visits: NormalizedVisit[], selectedVisits: NormalizedVisit[] = [], isOrphanVisits = false) => {
wrapper = shallow(
<VisitsTable
visits={visits}
selectedVisits={selectedVisits}
setSelectedVisits={setSelectedVisits}
matchMedia={matchMedia}
2021-03-28 17:06:37 +03:00
isOrphanVisits={isOrphanVisits}
selectedServer={Mock.all<SelectedServer>()}
2020-08-22 09:10:31 +03:00
/>,
);
2020-04-09 11:21:38 +03:00
return wrapper;
};
2020-09-05 09:49:18 +03:00
afterEach(jest.resetAllMocks);
afterEach(() => wrapper?.unmount());
2020-04-09 11:21:38 +03:00
it('renders columns as expected', () => {
const wrapper = createWrapper([]);
const th = wrapper.find('thead').find('th');
expect(th).toHaveLength(7);
expect(th.at(1).text()).toContain('Date');
expect(th.at(2).text()).toContain('Country');
expect(th.at(3).text()).toContain('City');
expect(th.at(4).text()).toContain('Browser');
expect(th.at(5).text()).toContain('OS');
expect(th.at(6).text()).toContain('Referrer');
});
it('shows warning when no visits are found', () => {
const wrapper = createWrapper([]);
const td = wrapper.find('tbody').find('td');
expect(td).toHaveLength(1);
expect(td.text()).toContain('No visits found with current filtering');
});
it.each([
[ 50, 3 ],
[ 21, 2 ],
[ 30, 2 ],
[ 60, 3 ],
[ 115, 6 ],
])('renders the expected amount of pages', (visitsCount, expectedAmountOfPages) => {
2020-09-05 09:49:18 +03:00
const wrapper = createWrapper(
rangeOf(visitsCount, () => Mock.of<NormalizedVisit>({ browser: '', date: '', referer: '' })),
);
2020-04-09 11:21:38 +03:00
const tr = wrapper.find('tbody').find('tr');
const paginator = wrapper.find(SimplePaginator);
expect(tr).toHaveLength(20);
expect(paginator.prop('pagesCount')).toEqual(expectedAmountOfPages);
});
it.each(
2020-08-22 09:10:31 +03:00
rangeOf(20, (value) => [ value ]),
2020-04-09 11:21:38 +03:00
)('does not render footer when there is only one page to render', (visitsCount) => {
2020-09-05 09:49:18 +03:00
const wrapper = createWrapper(
rangeOf(visitsCount, () => Mock.of<NormalizedVisit>({ browser: '', date: '', referer: '' })),
);
2020-04-09 11:21:38 +03:00
const tr = wrapper.find('tbody').find('tr');
const paginator = wrapper.find(SimplePaginator);
expect(tr).toHaveLength(visitsCount);
expect(paginator).toHaveLength(0);
});
it('selected rows are highlighted', () => {
2020-09-05 09:49:18 +03:00
const visits = rangeOf(10, () => Mock.of<NormalizedVisit>({ browser: '', date: '', referer: '' }));
const wrapper = createWrapper(
visits,
[ visits[1], visits[2] ],
);
2020-04-09 11:21:38 +03:00
expect(wrapper.find('.text-primary')).toHaveLength(3);
2021-02-19 22:18:02 +03:00
expect(wrapper.find('.table-active')).toHaveLength(2);
// Select one extra
wrapper.find('tr').at(5).simulate('click');
expect(setSelectedVisits).toHaveBeenCalledWith([ visits[1], visits[2], visits[4] ]);
// Deselect one
wrapper.find('tr').at(3).simulate('click');
expect(setSelectedVisits).toHaveBeenCalledWith([ visits[1] ]);
// Select all
wrapper.find('thead').find('th').at(0).simulate('click');
expect(setSelectedVisits).toHaveBeenCalledWith(visits);
2020-04-09 11:21:38 +03:00
});
it('orders visits when column is clicked', () => {
2020-09-05 09:49:18 +03:00
const wrapper = createWrapper(rangeOf(9, (index) => Mock.of<NormalizedVisit>({
browser: '',
2020-04-09 11:21:38 +03:00
date: `${9 - index}`,
referer: `${index}`,
country: `Country_${index}`,
2020-04-09 11:21:38 +03:00
})));
expect(wrapper.find('tbody').find('tr').at(0).find('td').at(2).text()).toContain('Country_1');
wrapper.find('thead').find('th').at(1).simulate('click'); // Date column ASC
expect(wrapper.find('tbody').find('tr').at(0).find('td').at(2).text()).toContain('Country_9');
wrapper.find('thead').find('th').at(6).simulate('click'); // Referer column - ASC
expect(wrapper.find('tbody').find('tr').at(0).find('td').at(2).text()).toContain('Country_1');
wrapper.find('thead').find('th').at(6).simulate('click'); // Referer column - DESC
expect(wrapper.find('tbody').find('tr').at(0).find('td').at(2).text()).toContain('Country_9');
wrapper.find('thead').find('th').at(6).simulate('click'); // Referer column - reset
expect(wrapper.find('tbody').find('tr').at(0).find('td').at(2).text()).toContain('Country_1');
});
it('filters list when writing in search box', () => {
const wrapper = createWrapper([
2020-09-05 09:49:18 +03:00
...rangeOf(7, () => Mock.of<NormalizedVisit>({ browser: 'aaa', date: 'aaa', referer: 'aaa' })),
...rangeOf(2, () => Mock.of<NormalizedVisit>({ browser: 'bbb', date: 'bbb', referer: 'bbb' })),
2020-04-09 11:21:38 +03:00
]);
const searchField = wrapper.find(SearchField);
expect(wrapper.find('tbody').find('tr')).toHaveLength(7 + 2);
searchField.simulate('change', 'aa');
expect(wrapper.find('tbody').find('tr')).toHaveLength(7);
searchField.simulate('change', 'bb');
expect(wrapper.find('tbody').find('tr')).toHaveLength(2);
searchField.simulate('change', '');
expect(wrapper.find('tbody').find('tr')).toHaveLength(7 + 2);
});
2021-03-28 17:06:37 +03:00
it.each([
[ true, 8 ],
[ false, 7 ],
])('displays proper amount of columns for orphan and non-orphan visits', (isOrphanVisits, expectedCols) => {
const wrapper = createWrapper([], [], isOrphanVisits);
const rowsWithColspan = wrapper.find('[colSpan]');
const cols = wrapper.find('th');
expect(cols).toHaveLength(expectedCols);
expect(rowsWithColspan).toHaveLength(2);
rowsWithColspan.forEach((row) => expect(row.prop('colSpan')).toEqual(expectedCols));
});
2020-04-09 11:21:38 +03:00
});