Merge pull request #669 from acelaya-forks/feature/rtl

Feature/rtl

src/visits/ShortUrlVisitsHeader.tsx

@@ -35,7 +35,7 @@ export const ShortUrlVisitsHeader = ({ shortUrlDetail, shortUrlVisits, goBack }:
     <VisitsHeader title={visitsStatsTitle} goBack={goBack} visits={visits} shortUrl={shortUrl}>
       <hr />
       <div>Created: {renderDate()}</div>
-      <div>
+      <div className="long-url-container">
         {`${title ? 'Title' : 'Long URL'}: `}
         {loading && <small>Loading...</small>}
         {!loading && <ExternalLink href={longLink}>{title ?? longLink}</ExternalLink>}

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('<NavPills />', () => {
+  let originalError: typeof console.error;
+
+  beforeEach(() => {
+    originalError = console.error;
+    console.error = () => {}; // Suppress errors logged during this test
+  });
+  afterEach(() => {
+    console.error = originalError;
+  });
+
   it.each([
     ['Foo'],
     [<span key="1">Hi!</span>],
     [[<NavPillItem key="1" to="" />, <span key="2">Hi!</span>]],
   ])('throws error when any of the children is not a NavPillItem', (children) => {
     expect.assertions(1);
-
-    try {
-      shallow(<NavPills>{children}</NavPills>);
-    } catch (e: any) {
-      expect(e.message).toEqual('Only NavPillItem children are allowed inside NavPills.');
-    }
+    expect(() => render(<NavPills>{children}</NavPills>)).toThrow(
+      'Only NavPillItem children are allowed inside NavPills.',
+    );
   });
 
   it.each([
@@ -22,20 +30,27 @@ describe('<NavPills />', () => {
     [true],
     [false],
   ])('renders provided items', (fill) => {
-    const wrapper = shallow(
-      <NavPills fill={fill}>
-        <NavPillItem to="1">1</NavPillItem>
-        <NavPillItem to="2">2</NavPillItem>
-        <NavPillItem to="3">3</NavPillItem>
-      </NavPills>,
+    const { container } = render(
+      <MemoryRouter>
+        <NavPills fill={fill}>
+          <NavPillItem to="1">1</NavPillItem>
+          <NavPillItem to="2">2</NavPillItem>
+          <NavPillItem to="3">3</NavPillItem>
+        </NavPills>
+      </MemoryRouter>,
     );
-    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');
+    }
   });
 });

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('<ShortUrlVisitsHeader />', () => {
-  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<ShortUrlVisits>({
     visits: [{}, {}, {}],
   });
   const goBack = jest.fn();
-  const createWrapper = (title?: string | null) => {
+  const setUp = (title?: string | null) => {
     const shortUrlDetail = Mock.of<ShortUrlDetail>({
       shortUrl: {
         shortUrl: 'https://doma.in/abc123',
@@ -24,32 +23,32 @@ describe('<ShortUrlVisitsHeader />', () => {
       },
       loading: false,
     });
-
-    wrapper = shallow(
-      <ShortUrlVisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={goBack} />,
-    );
-
-    return wrapper;
+    return {
+      user: userEvent.setup(),
+      ...render(
+        <ShortUrlVisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={goBack} />,
+      ),
+    };
   };
 
-  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);
   });
 });

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('<TagVisitsHeader />', () => {
-  let wrapper: ShallowWrapper;
   const tagVisits = Mock.of<TagVisits>({
     tag: 'foo',
-    visits: [{}, {}, {}],
+    visits: [{}, {}, {}, {}],
   });
   const goBack = jest.fn();
-
-  beforeEach(() => {
-    wrapper = shallow(
-      <TagVisitsHeader tagVisits={tagVisits} goBack={goBack} colorGenerator={Mock.all<ColorGenerator>()} />,
-    );
-  });
-  afterEach(() => wrapper.unmount());
+  const colorGenerator = Mock.of<ColorGenerator>({ isColorLightForKey: () => false, getColorForKey: () => 'red' });
+  const setUp = () => render(<TagVisitsHeader tagVisits={tagVisits} goBack={goBack} colorGenerator={colorGenerator} />);
 
   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);
   });
 });