forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-05-28 16:16:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added tests covering visits table with potential bots

Browse Source
This commit is contained in:
Alejandro Celaya
2021-06-13 11:38:13 +02:00
parent db0c43dcdd
commit a30376344e
2 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/visits/VisitsTable.tsx
View File

@@ -19,7 +19,7 @@ import { SelectedServer } from '../servers/data';
import { NormalizedOrphanVisit, NormalizedVisit } from './types'; import { NormalizedOrphanVisit, NormalizedVisit } from './types';
import './VisitsTable.scss'; import './VisitsTable.scss';
interface VisitsTableProps { export interface VisitsTableProps {
visits: NormalizedVisit[]; visits: NormalizedVisit[];
selectedVisits?: NormalizedVisit[]; selectedVisits?: NormalizedVisit[];
setSelectedVisits: (visits: NormalizedVisit[]) => void; setSelectedVisits: (visits: NormalizedVisit[]) => void;
@@ -75,11 +75,10 @@ const VisitsTable = ({
const [ order, setOrder ] = useState<Order>({ field: undefined, dir: undefined }); const [ order, setOrder ] = useState<Order>({ field: undefined, dir: undefined });
const resultSet = useMemo(() => calculateVisits(visits, searchTerm, order), [ searchTerm, order ]); const resultSet = useMemo(() => calculateVisits(visits, searchTerm, order), [ searchTerm, order ]);
const isFirstLoad = useRef(true); const isFirstLoad = useRef(true);
const supportsBots = supportsBotVisits(selectedServer);
const [ page, setPage ] = useState(1); const [ page, setPage ] = useState(1);
const end = page * PAGE_SIZE; const end = page * PAGE_SIZE;
const start = end - PAGE_SIZE; const start = end - PAGE_SIZE;
const supportsBots = supportsBotVisits(selectedServer);
const fullSizeColSpan = 7 + Number(supportsBots) + Number(isOrphanVisits); const fullSizeColSpan = 7 + Number(supportsBots) + Number(isOrphanVisits);
const orderByColumn = (field: OrderableFields) => const orderByColumn = (field: OrderableFields) =>

43
test/visits/VisitsTable.test.tsx
View File

@@ -1,45 +1,52 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { shallow, ShallowWrapper } from 'enzyme';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import VisitsTable from '../../src/visits/VisitsTable'; import VisitsTable, { VisitsTableProps } from '../../src/visits/VisitsTable';
import { rangeOf } from '../../src/utils/utils'; import { rangeOf } from '../../src/utils/utils';
import SimplePaginator from '../../src/common/SimplePaginator'; import SimplePaginator from '../../src/common/SimplePaginator';
import SearchField from '../../src/utils/SearchField'; import SearchField from '../../src/utils/SearchField';
import { NormalizedVisit } from '../../src/visits/types'; import { NormalizedVisit } from '../../src/visits/types';
import { SelectedServer } from '../../src/servers/data'; import { ReachableServer, SelectedServer } from '../../src/servers/data';
import { SemVer } from '../../src/utils/helpers/version';
describe('<VisitsTable />', () => { describe('<VisitsTable />', () => {
const matchMedia = () => Mock.of<MediaQueryList>({ matches: false }); const matchMedia = () => Mock.of<MediaQueryList>({ matches: false });
const setSelectedVisits = jest.fn(); const setSelectedVisits = jest.fn();
let wrapper: ShallowWrapper; let wrapper: ShallowWrapper;
const createWrapper = (visits: NormalizedVisit[], selectedVisits: NormalizedVisit[] = [], isOrphanVisits = false) => { const wrapperFactory = (props: Partial<VisitsTableProps> = {}) => {
wrapper = shallow( wrapper = shallow(
<VisitsTable <VisitsTable
visits={visits} visits={[]}
selectedVisits={selectedVisits}
setSelectedVisits={setSelectedVisits}
matchMedia={matchMedia}
isOrphanVisits={isOrphanVisits}
selectedServer={Mock.all<SelectedServer>()} selectedServer={Mock.all<SelectedServer>()}
{...props}
matchMedia={matchMedia}
setSelectedVisits={setSelectedVisits}
/>, />,
); );
return wrapper; return wrapper;
}; };
const createWrapper = (visits: NormalizedVisit[], selectedVisits: NormalizedVisit[] = []) => wrapperFactory(
{ visits, selectedVisits },
);
const createOrphanVisitsWrapper = (isOrphanVisits: boolean) => wrapperFactory({ isOrphanVisits });
const createServerVersionWrapper = (version: SemVer) => wrapperFactory({
selectedServer: Mock.of<ReachableServer>({ printableVersion: version, version }),
});
afterEach(jest.resetAllMocks); afterEach(jest.resetAllMocks);
afterEach(() => wrapper?.unmount()); afterEach(() => wrapper?.unmount());
it('renders columns as expected', () => { it.each([
const wrapper = createWrapper([]); [ '2.6.0' as SemVer, [ 'Date', 'Country', 'City', 'Browser', 'OS', 'Referrer' ]],
[ '2.7.0' as SemVer, [ 'fa-robot', 'Date', 'Country', 'City', 'Browser', 'OS', 'Referrer' ]],
])('renders columns as expected', (version, expectedColumns) => {
const wrapper = createServerVersionWrapper(version);
const th = wrapper.find('thead').find('th'); const th = wrapper.find('thead').find('th');
expect(th).toHaveLength(7); expect(th).toHaveLength(expectedColumns.length + 1);
expect(th.at(1).text()).toContain('Date'); expectedColumns.forEach((column, index) => {
expect(th.at(2).text()).toContain('Country'); expect(th.at(index + 1).html()).toContain(column);
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', () => { it('shows warning when no visits are found', () => {
@@ -142,7 +149,7 @@ describe('<VisitsTable />', () => {
[ true, 8 ], [ true, 8 ],
[ false, 7 ], [ false, 7 ],
])('displays proper amount of columns for orphan and non-orphan visits', (isOrphanVisits, expectedCols) => { ])('displays proper amount of columns for orphan and non-orphan visits', (isOrphanVisits, expectedCols) => {
const wrapper = createWrapper([], [], isOrphanVisits); const wrapper = createOrphanVisitsWrapper(isOrphanVisits);
const rowsWithColspan = wrapper.find('[colSpan]'); const rowsWithColspan = wrapper.find('[colSpan]');
const cols = wrapper.find('th'); const cols = wrapper.find('th');