diff --git a/test/short-urls/helpers/ShortUrlsRow.test.tsx b/test/short-urls/helpers/ShortUrlsRow.test.tsx
index 8812f962..899b1797 100644
--- a/test/short-urls/helpers/ShortUrlsRow.test.tsx
+++ b/test/short-urls/helpers/ShortUrlsRow.test.tsx
@@ -1,35 +1,30 @@
-import { shallow, ShallowWrapper } from 'enzyme';
-import { assoc, toString } from 'ramda';
+import { screen } from '@testing-library/react';
import { Mock } from 'ts-mockery';
-import { ExternalLink } from 'react-external-link';
import { formatISO } from 'date-fns';
import { ShortUrlsRow as createShortUrlsRow } from '../../../src/short-urls/helpers/ShortUrlsRow';
-import { Tag } from '../../../src/tags/helpers/Tag';
import { ColorGenerator } from '../../../src/utils/services/ColorGenerator';
import { TimeoutToggle } from '../../../src/utils/helpers/hooks';
import { ShortUrl } from '../../../src/short-urls/data';
import { ReachableServer } from '../../../src/servers/data';
-import { CopyToClipboardIcon } from '../../../src/utils/CopyToClipboardIcon';
-import { Time } from '../../../src/utils/Time';
import { parseDate } from '../../../src/utils/helpers/date';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
+import { OptionalString } from '../../../src/utils/utils';
describe('', () => {
- let wrapper: ShallowWrapper;
- const mockFunction = () => null;
- const ShortUrlsRowMenu = mockFunction;
const timeoutToggle = jest.fn(() => true);
const useTimeoutToggle = jest.fn(() => [false, timeoutToggle]) as TimeoutToggle;
const colorGenerator = Mock.of({
- getColorForKey: jest.fn(),
+ getColorForKey: jest.fn(() => 'red'),
setColorForKey: jest.fn(),
+ isColorLightForKey: jest.fn(() => false),
});
const server = Mock.of({ url: 'https://doma.in' });
const shortUrl: ShortUrl = {
shortCode: 'abc123',
- shortUrl: 'http://doma.in/abc123',
- longUrl: 'http://foo.com/bar',
+ shortUrl: 'https://doma.in/abc123',
+ longUrl: 'https://foo.com/bar',
dateCreated: formatISO(parseDate('2018-05-23 18:30:41', 'yyyy-MM-dd HH:mm:ss')),
- tags: ['nodejs', 'reactjs'],
+ tags: [],
visitsCount: 45,
domain: null,
meta: {
@@ -38,99 +33,73 @@ describe('', () => {
maxVisits: null,
},
};
- const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, useTimeoutToggle);
- const createWrapper = (title?: string | null) => {
- wrapper = shallow(
- ,
- );
-
- return wrapper;
- };
-
- beforeEach(() => createWrapper());
- afterEach(() => wrapper.unmount());
+ const ShortUrlsRow = createShortUrlsRow(() => ShortUrlsRowMenu, colorGenerator, useTimeoutToggle);
+ const setUp = (title?: OptionalString, tags: string[] = []) => renderWithEvents(
+ ,
+ );
it.each([
[null, 6],
[undefined, 6],
['The title', 7],
])('renders expected amount of columns', (title, expectedAmount) => {
- const wrapper = createWrapper(title);
- const cols = wrapper.find('td');
-
- expect(cols).toHaveLength(expectedAmount);
+ setUp(title);
+ expect(screen.getAllByRole('cell')).toHaveLength(expectedAmount);
});
it('renders date in first column', () => {
- const col = wrapper.find('td').first();
- const date = col.find(Time);
-
- expect(date.html()).toContain('>2018-05-23 18:30');
+ setUp();
+ expect(screen.getAllByRole('cell')[0]).toHaveTextContent('2018-05-23 18:30');
});
- it('renders short URL in second row', () => {
- const col = wrapper.find('td').at(1);
- const link = col.find(ExternalLink);
+ it.each([
+ [1, shortUrl.shortUrl],
+ [2, shortUrl.longUrl],
+ ])('renders expected links on corresponding columns', (colIndex, expectedLink) => {
+ setUp();
- expect(link.prop('href')).toEqual(shortUrl.shortUrl);
+ const col = screen.getAllByRole('cell')[colIndex];
+ const link = col.querySelector('a');
+
+ expect(link).toHaveAttribute('href', expectedLink);
});
- it('renders long URL in third row', () => {
- const col = wrapper.find('td').at(2);
- const link = col.find(ExternalLink);
+ it.each([
+ ['My super cool title', 'My super cool title'],
+ [undefined, shortUrl.longUrl],
+ ])('renders title when short URL has it', (title, expectedContent) => {
+ setUp(title);
- expect(link.prop('href')).toEqual(shortUrl.longUrl);
+ const titleSharedCol = screen.getAllByRole('cell')[2];
+
+ expect(titleSharedCol.querySelector('a')).toHaveAttribute('href', shortUrl.longUrl);
+ expect(titleSharedCol).toHaveTextContent(expectedContent);
});
- it('renders title when short URL has it', () => {
- const wrapper = createWrapper('My super cool title');
- const cols = wrapper.find('td');
- const titleSharedCol = cols.at(2).find(ExternalLink);
- const dedicatedShortUrlCol = cols.at(3).find(ExternalLink);
+ it.each([
+ [[], ['No tags']],
+ [['nodejs', 'reactjs'], ['nodejs', 'reactjs']],
+ ])('renders list of tags in fourth row', (tags, expectedContents) => {
+ setUp(undefined, tags);
+ const cell = screen.getAllByRole('cell')[3];
- expect(titleSharedCol).toHaveLength(1);
- expect(dedicatedShortUrlCol).toHaveLength(1);
- expect(titleSharedCol.prop('href')).toEqual(shortUrl.longUrl);
- expect(dedicatedShortUrlCol.prop('href')).toEqual(shortUrl.longUrl);
- expect(titleSharedCol.html()).toContain('My super cool title');
- expect(dedicatedShortUrlCol.prop('children')).not.toBeDefined();
- });
-
- describe('renders list of tags in fourth row', () => {
- it('with tags', () => {
- const col = wrapper.find('td').at(3);
- const tags = col.find(Tag);
-
- expect(tags).toHaveLength(shortUrl.tags.length);
- shortUrl.tags.forEach((tagValue, index) => {
- const tag = tags.at(index);
-
- expect(tag.prop('text')).toEqual(tagValue);
- });
- });
-
- it('without tags', () => {
- wrapper.setProps({ shortUrl: assoc('tags', [], shortUrl) });
-
- const col = wrapper.find('td').at(3);
-
- expect(col.text()).toContain('No tags');
- });
+ expectedContents.forEach((content) => expect(cell).toHaveTextContent(content));
});
it('renders visits count in fifth row', () => {
- const col = wrapper.find('td').at(4);
-
- expect(col.html()).toContain(toString(shortUrl.visitsCount));
+ setUp();
+ expect(screen.getAllByRole('cell')[4]).toHaveTextContent(`${shortUrl.visitsCount}`);
});
- it('updates state when copied to clipboard', () => {
- const col = wrapper.find('td').at(1);
- const menu = col.find(CopyToClipboardIcon);
+ it('updates state when copied to clipboard', async () => {
+ const { user } = setUp();
- expect(menu).toHaveLength(1);
expect(timeoutToggle).not.toHaveBeenCalled();
- menu.simulate('copy');
+ await user.click(screen.getByRole('img', { hidden: true }));
expect(timeoutToggle).toHaveBeenCalledTimes(1);
});
});