Improved ShortUrlsRow test covering new status icon

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('<ShortUrlsRow />', () => {
     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('<ShortUrlsRow />', () => {
     },
   };
   const ShortUrlsRow = createShortUrlsRow(() => <span>ShortUrlsRowMenu</span>, colorGeneratorMock, useTimeoutToggle);
-  const setUp = (title?: OptionalString, tags: string[] = []) => renderWithEvents(
+  const setUp = (
+    { title, tags = [], meta = {} }: { title?: OptionalString; tags?: string[]; meta?: ShortUrlMeta } = {},
+  ) => renderWithEvents(
     <table>
       <tbody>
-        <ShortUrlsRow selectedServer={server} shortUrl={{ ...shortUrl, title, tags }} onTagClick={() => null} />
+        <ShortUrlsRow
+          selectedServer={server}
+          shortUrl={{ ...shortUrl, title, tags, meta: { ...shortUrl.meta, ...meta } }}
+          onTagClick={() => null}
+        />
       </tbody>
     </table>,
   );
 
   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('<ShortUrlsRow />', () => {
     ['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('<ShortUrlsRow />', () => {
     [[], ['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('<ShortUrlsRow />', () => {
     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();
+  });
 });