diff --git a/src/short-urls/helpers/ShortUrlStatus.tsx b/src/short-urls/helpers/ShortUrlStatus.tsx index 11372206..7fcc2a6d 100644 --- a/src/short-urls/helpers/ShortUrlStatus.tsx +++ b/src/short-urls/helpers/ShortUrlStatus.tsx @@ -75,12 +75,8 @@ export const ShortUrlStatus: FC = ({ shortUrl }) => { return ( <> - - + + tooltipRef.current) as any} placement="bottom"> {description} diff --git a/test/short-urls/helpers/ShortUrlsRow.test.tsx b/test/short-urls/helpers/ShortUrlsRow.test.tsx index 98b4cfdd..35e2a858 100644 --- a/test/short-urls/helpers/ShortUrlsRow.test.tsx +++ b/test/short-urls/helpers/ShortUrlsRow.test.tsx @@ -1,11 +1,12 @@ import { screen } from '@testing-library/react'; +import { last } from 'ramda'; import { Mock } from 'ts-mockery'; -import { formatISO } from 'date-fns'; +import { addDays, formatISO, subDays } from 'date-fns'; import { ShortUrlsRow as createShortUrlsRow } from '../../../src/short-urls/helpers/ShortUrlsRow'; import { TimeoutToggle } from '../../../src/utils/helpers/hooks'; -import { ShortUrl } from '../../../src/short-urls/data'; +import { ShortUrl, ShortUrlMeta } from '../../../src/short-urls/data'; import { ReachableServer } from '../../../src/servers/data'; -import { parseDate } from '../../../src/utils/helpers/date'; +import { parseDate, now } from '../../../src/utils/helpers/date'; import { renderWithEvents } from '../../__helpers__/setUpTest'; import { OptionalString } from '../../../src/utils/utils'; import { colorGeneratorMock } from '../../utils/services/__mocks__/ColorGenerator.mock'; @@ -21,6 +22,11 @@ describe('', () => { dateCreated: formatISO(parseDate('2018-05-23 18:30:41', 'yyyy-MM-dd HH:mm:ss')), tags: [], visitsCount: 45, + visitsSummary: { + total: 45, + nonBots: 40, + bots: 5, + }, domain: null, meta: { validSince: null, @@ -29,20 +35,26 @@ describe('', () => { }, }; const ShortUrlsRow = createShortUrlsRow(() => ShortUrlsRowMenu, colorGeneratorMock, useTimeoutToggle); - const setUp = (title?: OptionalString, tags: string[] = []) => renderWithEvents( + const setUp = ( + { title, tags = [], meta = {} }: { title?: OptionalString; tags?: string[]; meta?: ShortUrlMeta } = {}, + ) => renderWithEvents( - null} /> + null} + />
, ); it.each([ - [null, 6], - [undefined, 6], - ['The title', 7], + [null, 7], + [undefined, 7], + ['The title', 8], ])('renders expected amount of columns', (title, expectedAmount) => { - setUp(title); + setUp({ title }); expect(screen.getAllByRole('cell')).toHaveLength(expectedAmount); }); @@ -67,7 +79,7 @@ describe('', () => { ['My super cool title', 'My super cool title'], [undefined, shortUrl.longUrl], ])('renders title when short URL has it', (title, expectedContent) => { - setUp(title); + setUp({ title }); const titleSharedCol = screen.getAllByRole('cell')[2]; @@ -79,7 +91,7 @@ describe('', () => { [[], ['No tags']], [['nodejs', 'reactjs'], ['nodejs', 'reactjs']], ])('renders list of tags in fourth row', (tags, expectedContents) => { - setUp(undefined, tags); + setUp({ tags }); const cell = screen.getAllByRole('cell')[3]; expectedContents.forEach((content) => expect(cell).toHaveTextContent(content)); @@ -94,7 +106,31 @@ describe('', () => { const { user } = setUp(); expect(timeoutToggle).not.toHaveBeenCalled(); - await user.click(screen.getByRole('img', { hidden: true })); + await user.click(screen.getAllByRole('img', { hidden: true })[0]); expect(timeoutToggle).toHaveBeenCalledTimes(1); }); + + it.each([ + [{ validUntil: formatISO(subDays(now(), 1)) }, ['fa-calendar-xmark', 'text-danger']], + [{ validSince: formatISO(addDays(now(), 1)) }, ['fa-calendar-xmark', 'text-warning']], + [{ maxVisits: 45 }, ['fa-link-slash', 'text-danger']], + [{ maxVisits: 45, validSince: formatISO(addDays(now(), 1)) }, ['fa-link-slash', 'text-danger']], + [ + { validSince: formatISO(addDays(now(), 1)), validUntil: formatISO(subDays(now(), 1)) }, + ['fa-calendar-xmark', 'text-danger'], + ], + [ + { validSince: formatISO(subDays(now(), 1)), validUntil: formatISO(addDays(now(), 1)) }, + ['fa-check', 'text-primary'], + ], + [{ maxVisits: 500 }, ['fa-check', 'text-primary']], + [{}, ['fa-check', 'text-primary']], + ])('displays expected status icon', (meta, expectedIconClasses) => { + setUp({ meta }); + const statusIcon = last(screen.getAllByRole('img', { hidden: true })); + + expect(statusIcon).toBeInTheDocument(); + expectedIconClasses.forEach((expectedClass) => expect(statusIcon).toHaveClass(expectedClass)); + expect(statusIcon).toMatchSnapshot(); + }); }); diff --git a/test/short-urls/helpers/__snapshots__/ShortUrlsRow.test.tsx.snap b/test/short-urls/helpers/__snapshots__/ShortUrlsRow.test.tsx.snap new file mode 100644 index 00000000..dc4ad5a9 --- /dev/null +++ b/test/short-urls/helpers/__snapshots__/ShortUrlsRow.test.tsx.snap @@ -0,0 +1,145 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` displays expected status icon 1`] = ` + +`; + +exports[` displays expected status icon 2`] = ` + +`; + +exports[` displays expected status icon 3`] = ` + +`; + +exports[` displays expected status icon 4`] = ` + +`; + +exports[` displays expected status icon 5`] = ` + +`; + +exports[` displays expected status icon 6`] = ` + +`; + +exports[` displays expected status icon 7`] = ` + +`; + +exports[` displays expected status icon 8`] = ` + +`;