diff --git a/src/visits/ShortUrlVisitsHeader.tsx b/src/visits/ShortUrlVisitsHeader.tsx index 82f2d19b..96046d9f 100644 --- a/src/visits/ShortUrlVisitsHeader.tsx +++ b/src/visits/ShortUrlVisitsHeader.tsx @@ -35,7 +35,7 @@ export const ShortUrlVisitsHeader = ({ shortUrlDetail, shortUrlVisits, goBack }:
Created: {renderDate()}
-
+
{`${title ? 'Title' : 'Long URL'}: `} {loading && Loading...} {!loading && {title ?? longLink}} diff --git a/test/utils/NavPills.test.tsx b/test/utils/NavPills.test.tsx index b06d1524..63f45f9f 100644 --- a/test/utils/NavPills.test.tsx +++ b/test/utils/NavPills.test.tsx @@ -1,20 +1,28 @@ -import { shallow } from 'enzyme'; -import { Card, Nav } from 'reactstrap'; +/* eslint-disable no-console */ +import { render, screen } from '@testing-library/react'; +import { MemoryRouter } from 'react-router-dom'; import { NavPillItem, NavPills } from '../../src/utils/NavPills'; describe('', () => { + let originalError: typeof console.error; + + beforeEach(() => { + originalError = console.error; + console.error = () => {}; // Suppress errors logged during this test + }); + afterEach(() => { + console.error = originalError; + }); + it.each([ ['Foo'], [Hi!], [[, Hi!]], ])('throws error when any of the children is not a NavPillItem', (children) => { expect.assertions(1); - - try { - shallow({children}); - } catch (e: any) { - expect(e.message).toEqual('Only NavPillItem children are allowed inside NavPills.'); - } + expect(() => render({children})).toThrow( + 'Only NavPillItem children are allowed inside NavPills.', + ); }); it.each([ @@ -22,20 +30,27 @@ describe('', () => { [true], [false], ])('renders provided items', (fill) => { - const wrapper = shallow( - - 1 - 2 - 3 - , + const { container } = render( + + + 1 + 2 + 3 + + , ); - const card = wrapper.find(Card); - const nav = wrapper.find(Nav); - expect(card).toHaveLength(1); - expect(card.prop('body')).toEqual(true); - expect(nav).toHaveLength(1); - expect(nav.prop('pills')).toEqual(true); - expect(nav.prop('fill')).toEqual(!!fill); + const links = screen.getAllByRole('link'); + expect(links).toHaveLength(3); + links.forEach((link, index) => { + expect(link).toHaveTextContent(`${index + 1}`); + expect(link).toHaveAttribute('href', `/${index + 1}`); + }); + + if (fill) { + expect(container.querySelector('.nav')).toHaveClass('nav-fill'); + } else { + expect(container.querySelector('.nav')).not.toHaveClass('nav-fill'); + } }); }); diff --git a/test/visits/ShortUrlVisitsHeader.test.tsx b/test/visits/ShortUrlVisitsHeader.test.tsx index ba814ebd..3f2b0fd2 100644 --- a/test/visits/ShortUrlVisitsHeader.test.tsx +++ b/test/visits/ShortUrlVisitsHeader.test.tsx @@ -1,20 +1,19 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { ExternalLink } from 'react-external-link'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { Mock } from 'ts-mockery'; +import { formatDistance, parseISO } from 'date-fns'; import { ShortUrlVisitsHeader } from '../../src/visits/ShortUrlVisitsHeader'; import { ShortUrlDetail } from '../../src/short-urls/reducers/shortUrlDetail'; import { ShortUrlVisits } from '../../src/visits/reducers/shortUrlVisits'; -import { Time } from '../../src/utils/Time'; describe('', () => { - let wrapper: ShallowWrapper; - const dateCreated = '2018-01-01T10:00:00+01:00'; + const dateCreated = '2018-01-01T10:00:00+00:00'; const longUrl = 'https://foo.bar/bar/foo'; const shortUrlVisits = Mock.of({ visits: [{}, {}, {}], }); const goBack = jest.fn(); - const createWrapper = (title?: string | null) => { + const setUp = (title?: string | null) => { const shortUrlDetail = Mock.of({ shortUrl: { shortUrl: 'https://doma.in/abc123', @@ -24,32 +23,32 @@ describe('', () => { }, loading: false, }); - - wrapper = shallow( - , - ); - - return wrapper; + return { + user: userEvent.setup(), + ...render( + , + ), + }; }; - beforeEach(() => createWrapper()); - afterEach(() => wrapper.unmount()); + it('shows when the URL was created', async () => { + const { user } = setUp(); + const dateElement = screen.getByText(`${formatDistance(new Date(), parseISO(dateCreated))} ago`); - it('shows when the URL was created', () => { - const time = wrapper.find(Time).first(); - - expect(time.prop('date')).toEqual(dateCreated); + expect(dateElement).toBeInTheDocument(); + expect(screen.queryByRole('tooltip')).not.toBeInTheDocument(); + await user.hover(dateElement); + await waitFor(() => expect(screen.getByRole('tooltip')).toHaveTextContent('2018-01-01 10:00')); }); it.each([ - [null, longUrl], - [undefined, longUrl], - ['My cool title', 'My cool title'], + [null, `Long URL: ${longUrl}`], + [undefined, `Long URL: ${longUrl}`], + ['My cool title', 'Title: My cool title'], ])('shows the long URL and title', (title, expectedContent) => { - const wrapper = createWrapper(title); - const longUrlLink = wrapper.find(ExternalLink).last(); + const { container } = setUp(title); - expect(longUrlLink.prop('href')).toEqual(longUrl); - expect(longUrlLink.prop('children')).toEqual(expectedContent); + expect(container.querySelector('.long-url-container')).toHaveTextContent(expectedContent); + expect(screen.getByRole('link', { name: title ?? longUrl })).toHaveAttribute('href', longUrl); }); }); diff --git a/test/visits/TagVisitsHeader.test.tsx b/test/visits/TagVisitsHeader.test.tsx index a48984e9..c9921eb3 100644 --- a/test/visits/TagVisitsHeader.test.tsx +++ b/test/visits/TagVisitsHeader.test.tsx @@ -1,35 +1,27 @@ -import { shallow, ShallowWrapper } from 'enzyme'; +import { render, screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; -import { Tag } from '../../src/tags/helpers/Tag'; import { TagVisitsHeader } from '../../src/visits/TagVisitsHeader'; import { TagVisits } from '../../src/visits/reducers/tagVisits'; import { ColorGenerator } from '../../src/utils/services/ColorGenerator'; describe('', () => { - let wrapper: ShallowWrapper; const tagVisits = Mock.of({ tag: 'foo', - visits: [{}, {}, {}], + visits: [{}, {}, {}, {}], }); const goBack = jest.fn(); - - beforeEach(() => { - wrapper = shallow( - ()} />, - ); - }); - afterEach(() => wrapper.unmount()); + const colorGenerator = Mock.of({ isColorLightForKey: () => false, getColorForKey: () => 'red' }); + const setUp = () => render(); it('shows expected visits', () => { - expect(wrapper.prop('visits')).toEqual(tagVisits.visits); + const { container } = setUp(); + + expect(screen.getAllByText('Visits for')).toHaveLength(2); + expect(container.querySelector('.badge:not(.tag)')).toHaveTextContent(`Visits: ${tagVisits.visits.length}`); }); it('shows title for tag', () => { - const title = shallow(wrapper.prop('title')); - const tag = title.find(Tag).first(); - - expect(tag.prop('text')).toEqual(tagVisits.tag); - - title.unmount(); + const { container } = setUp(); + expect(container.querySelector('.badge.tag')).toHaveTextContent(tagVisits.tag); }); });