Merge pull request #679 from acelaya-forks/feature/testing-lib

Feature/testing lib

src/short-urls/ShortUrlForm.tsx

@@ -118,7 +118,7 @@ export const ShortUrlForm = (
   const showBehaviorCard = showCrawlableControl || showForwardQueryControl;
 
   return (
-    <form className="short-url-form" onSubmit={submit}>
+    <form name="shortUrlForm" className="short-url-form" onSubmit={submit}>
       {isBasicMode && basicComponents}
       {!isBasicMode && (
         <>

test/short-urls/ShortUrlForm.test.tsx

@@ -1,67 +1,67 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { UserEvent } from '@testing-library/user-event/dist/types/setup';
 import { formatISO } from 'date-fns';
-import { identity } from 'ramda';
 import { Mock } from 'ts-mockery';
-import { Input } from 'reactstrap';
 import { ShortUrlForm as createShortUrlForm, Mode } from '../../src/short-urls/ShortUrlForm';
-import { DateInput } from '../../src/utils/DateInput';
-import { ShortUrlData } from '../../src/short-urls/data';
 import { ReachableServer, SelectedServer } from '../../src/servers/data';
-import { SimpleCard } from '../../src/utils/SimpleCard';
 import { parseDate } from '../../src/utils/helpers/date';
 import { OptionalString } from '../../src/utils/utils';
 
 describe('<ShortUrlForm />', () => {
-  let wrapper: ShallowWrapper;
-  const TagsSelector = () => null;
-  const DomainSelector = () => null;
   const createShortUrl = jest.fn(async () => Promise.resolve());
-  const createWrapper = (selectedServer: SelectedServer = null, mode: Mode = 'create', title?: OptionalString) => {
-    const ShortUrlForm = createShortUrlForm(TagsSelector, DomainSelector);
-
-    wrapper = shallow(
+  const ShortUrlForm = createShortUrlForm(() => <span>TagsSelector</span>, () => <span>DomainSelector</span>);
+  const setUp = (selectedServer: SelectedServer = null, mode: Mode = 'create', title?: OptionalString) => ({
+    user: userEvent.setup(),
+    ...render(
       <ShortUrlForm
         selectedServer={selectedServer}
         mode={mode}
         saving={false}
-        initialState={Mock.of<ShortUrlData>({ validateUrl: true, findIfExists: false, title })}
+        initialState={{ validateUrl: true, findIfExists: false, title, longUrl: '' }}
         onSave={createShortUrl}
       />,
-    );
+    ),
+  });
 
-    return wrapper;
-  };
-
-  afterEach(() => wrapper.unmount());
   afterEach(jest.clearAllMocks);
 
-  it('saves short URL with data set in form controls', () => {
-    const wrapper = createWrapper();
+  it.each([
+    [
+      async (user: UserEvent) => {
+        await user.type(screen.getByPlaceholderText('Custom slug'), 'my-slug');
+      },
+      { customSlug: 'my-slug' },
+    ],
+    [
+      async (user: UserEvent) => {
+        await user.type(screen.getByPlaceholderText('Short code length'), '15');
+      },
+      { shortCodeLength: '15' },
+    ],
+  ])('saves short URL with data set in form controls', async (extraFields, extraExpectedValues) => {
+    const { user } = setUp();
     const validSince = parseDate('2017-01-01', 'yyyy-MM-dd');
     const validUntil = parseDate('2017-01-06', 'yyyy-MM-dd');
 
-    wrapper.find(Input).first().simulate('change', { target: { value: 'https://long-domain.com/foo/bar' } });
-    wrapper.find('TagsSelector').simulate('change', ['tag_foo', 'tag_bar']);
-    wrapper.find('#customSlug').simulate('change', { target: { value: 'my-slug' } });
-    wrapper.find(DomainSelector).simulate('change', 'example.com');
-    wrapper.find('#maxVisits').simulate('change', { target: { value: '20' } });
-    wrapper.find('#shortCodeLength').simulate('change', { target: { value: 15 } });
-    wrapper.find(DateInput).at(0).simulate('change', validSince);
-    wrapper.find(DateInput).at(1).simulate('change', validUntil);
-    wrapper.find('form').simulate('submit', { preventDefault: identity });
+    await user.type(screen.getByPlaceholderText('URL to be shortened'), 'https://long-domain.com/foo/bar');
+    await user.type(screen.getByPlaceholderText('Title'), 'the title');
+    await user.type(screen.getByPlaceholderText('Maximum number of visits allowed'), '20');
+    await user.type(screen.getByPlaceholderText('Enabled since...'), '2017-01-01');
+    await user.type(screen.getByPlaceholderText('Enabled until...'), '2017-01-06');
+    await extraFields(user);
 
-    expect(createShortUrl).toHaveBeenCalledTimes(1);
+    expect(createShortUrl).not.toHaveBeenCalled();
+    await user.click(screen.getByRole('button', { name: 'Save' }));
     expect(createShortUrl).toHaveBeenCalledWith({
       longUrl: 'https://long-domain.com/foo/bar',
-      tags: ['tag_foo', 'tag_bar'],
-      customSlug: 'my-slug',
-      domain: 'example.com',
+      title: 'the title',
       validSince: formatISO(validSince),
       validUntil: formatISO(validUntil),
       maxVisits: 20,
       findIfExists: false,
-      shortCodeLength: 15,
       validateUrl: true,
+      ...extraExpectedValues,
     });
   });
 
@@ -71,29 +71,30 @@ describe('<ShortUrlForm />', () => {
   ])(
     'renders expected amount of cards based on server capabilities and mode',
     (mode, expectedAmountOfCards) => {
-      const wrapper = createWrapper(null, mode);
-      const cards = wrapper.find(SimpleCard);
+      setUp(null, mode);
+      const cards = screen.queryAllByRole('heading');
 
       expect(cards).toHaveLength(expectedAmountOfCards);
     },
   );
 
   it.each([
-    [null, 'new title', 'new title'],
-    [undefined, 'new title', 'new title'],
-    ['', 'new title', 'new title'],
-    [null, '', undefined],
-    [null, null, undefined],
-    ['', '', undefined],
-    [undefined, undefined, undefined],
-    ['old title', null, null],
-    ['old title', undefined, null],
-    ['old title', '', null],
-  ])('sends expected title based on original and new values', (originalTitle, newTitle, expectedSentTitle) => {
-    const wrapper = createWrapper(Mock.of<ReachableServer>({ version: '2.6.0' }), 'create', originalTitle);
+    [null, true, 'new title'],
+    [undefined, true, 'new title'],
+    ['', true, 'new title'],
+    [null, false, undefined],
+    ['', false, undefined],
+    ['old title', false, null],
+  ])('sends expected title based on original and new values', async (originalTitle, withNewTitle, expectedSentTitle) => {
+    const { user } = setUp(Mock.of<ReachableServer>({ version: '2.6.0' }), 'create', originalTitle);
 
-    wrapper.find('#title').simulate('change', { target: { value: newTitle } });
-    wrapper.find('form').simulate('submit', { preventDefault: identity });
+    await user.type(screen.getByPlaceholderText('URL to be shortened'), 'https://long-domain.com/foo/bar');
+    if (withNewTitle) {
+      await user.type(screen.getByPlaceholderText('Title'), 'new title');
+    } else {
+      await user.clear(screen.getByPlaceholderText('Title'));
+    }
+    await user.click(screen.getByRole('button', { name: 'Save' }));
 
     expect(createShortUrl).toHaveBeenCalledWith(expect.objectContaining({
       title: expectedSentTitle,

test/short-urls/ShortUrlsTable.test.tsx

@@ -1,71 +1,68 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Mock } from 'ts-mockery';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ShortUrlsTable as shortUrlsTableCreator } from '../../src/short-urls/ShortUrlsTable';
 import { ShortUrlsList } from '../../src/short-urls/reducers/shortUrlsList';
 import { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { ShortUrlsOrderableFields, SHORT_URLS_ORDERABLE_FIELDS } from '../../src/short-urls/data';
 
 describe('<ShortUrlsTable />', () => {
-  let wrapper: ShallowWrapper;
   const shortUrlsList = Mock.all<ShortUrlsList>();
   const orderByColumn = jest.fn();
-  const ShortUrlsRow = () => null;
-  const ShortUrlsTable = shortUrlsTableCreator(ShortUrlsRow);
-
-  const createWrapper = (server: SelectedServer = null) => {
-    wrapper = shallow(
+  const ShortUrlsTable = shortUrlsTableCreator(() => <span>ShortUrlsRow</span>);
+  const setUp = (server: SelectedServer = null) => ({
+    user: userEvent.setup(),
+    ...render(
       <ShortUrlsTable shortUrlsList={shortUrlsList} selectedServer={server} orderByColumn={() => orderByColumn} />,
-    );
-
-    return wrapper;
-  };
-
-  beforeEach(() => createWrapper());
-  afterEach(jest.resetAllMocks);
-  afterEach(() => wrapper?.unmount());
-
-  it('should render inner table by default', () => {
-    expect(wrapper.find('table')).toHaveLength(1);
+    ),
   });
 
-  it('should render table header by default', () => {
-    expect(wrapper.find('table').find('thead')).toHaveLength(1);
+  afterEach(jest.resetAllMocks);
+
+  it('should render inner table by default', () => {
+    setUp();
+    expect(screen.getByRole('table')).toBeInTheDocument();
+  });
+
+  it('should render row groups by default', () => {
+    setUp();
+    expect(screen.getAllByRole('rowgroup')).toHaveLength(2);
   });
 
   it('should render 6 table header cells by default', () => {
-    expect(wrapper.find('table').find('thead').find('tr').find('th')).toHaveLength(6);
+    setUp();
+    expect(screen.getAllByRole('columnheader')).toHaveLength(6);
   });
 
-  it('should render 6 table header cells without order by icon by default', () => {
-    const thElements = wrapper.find('table').find('thead').find('tr').find('th');
-
-    thElements.forEach((thElement) => {
-      expect(thElement.find(FontAwesomeIcon)).toHaveLength(0);
-    });
+  it('should render table header cells without "order by" icon by default', () => {
+    setUp();
+    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
   });
 
   it('should render table header cells with conditional order by icon', () => {
-    const getThElementForSortableField = (orderableField: string) => wrapper.find('table')
-      .find('thead')
-      .find('tr')
-      .find('th')
-      .filterWhere((e) => e.text().includes(SHORT_URLS_ORDERABLE_FIELDS[orderableField as ShortUrlsOrderableFields]));
+    setUp();
+
+    const getThElementForSortableField = (orderableField: string) => screen.getAllByRole('columnheader').find(
+      ({ innerHTML }) => innerHTML.includes(SHORT_URLS_ORDERABLE_FIELDS[orderableField as ShortUrlsOrderableFields]),
+    );
     const sortableFields = Object.keys(SHORT_URLS_ORDERABLE_FIELDS).filter((sortableField) => sortableField !== 'title');
 
-    expect.assertions(sortableFields.length);
+    expect.assertions(sortableFields.length * 2);
     sortableFields.forEach((sortableField) => {
-      getThElementForSortableField(sortableField).simulate('click');
+      const element = getThElementForSortableField(sortableField);
+
+      expect(element).toBeDefined();
+      element && fireEvent.click(element);
       expect(orderByColumn).toHaveBeenCalled();
     });
   });
 
   it('should render composed title column', () => {
-    const wrapper = createWrapper(Mock.of<ReachableServer>({ version: '2.0.0' }));
-    const composedColumn = wrapper.find('table').find('th').at(2);
-    const text = composedColumn.text();
+    setUp(Mock.of<ReachableServer>({ version: '2.0.0' }));
 
-    expect(text).toContain('Title');
-    expect(text).toContain('Long URL');
+    const { innerHTML } = screen.getAllByRole('columnheader')[2];
+
+    expect(innerHTML).toContain('Title');
+    expect(innerHTML).toContain('Long URL');
   });
 });