Migrated ShortUrlForm test to react testing library

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(() => <span>TagsSelector</span>, () => <span>DomainSelector</span>);
-    const ShortUrlForm = createShortUrlForm(TagsSelector, DomainSelector);
+  const setUp = (selectedServer: SelectedServer = null, mode: Mode = 'create', title?: OptionalString) => ({
-
+    user: userEvent.setup(),
-    wrapper = shallow(
+    ...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', () => {
+  it.each([
-    const wrapper = createWrapper();
+    [
+      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' } });
+    await user.type(screen.getByPlaceholderText('URL to be shortened'), 'https://long-domain.com/foo/bar');
-    wrapper.find('TagsSelector').simulate('change', ['tag_foo', 'tag_bar']);
+    await user.type(screen.getByPlaceholderText('Title'), 'the title');
-    wrapper.find('#customSlug').simulate('change', { target: { value: 'my-slug' } });
+    await user.type(screen.getByPlaceholderText('Maximum number of visits allowed'), '20');
-    wrapper.find(DomainSelector).simulate('change', 'example.com');
+    await user.type(screen.getByPlaceholderText('Enabled since...'), '2017-01-01');
-    wrapper.find('#maxVisits').simulate('change', { target: { value: '20' } });
+    await user.type(screen.getByPlaceholderText('Enabled until...'), '2017-01-06');
-    wrapper.find('#shortCodeLength').simulate('change', { target: { value: 15 } });
+    await extraFields(user);
-    wrapper.find(DateInput).at(0).simulate('change', validSince);
-    wrapper.find(DateInput).at(1).simulate('change', validUntil);
-    wrapper.find('form').simulate('submit', { preventDefault: identity });
 
-    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'],
+      title: 'the title',
-      customSlug: 'my-slug',
-      domain: 'example.com',
       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);
+      setUp(null, mode);
-      const cards = wrapper.find(SimpleCard);
+      const cards = screen.queryAllByRole('heading');
 
       expect(cards).toHaveLength(expectedAmountOfCards);
     },
   );
 
   it.each([
-    [null, 'new title', 'new title'],
+    [null, true, 'new title'],
-    [undefined, 'new title', 'new title'],
+    [undefined, true, 'new title'],
-    ['', 'new title', 'new title'],
+    ['', true, 'new title'],
-    [null, '', undefined],
+    [null, false, undefined],
-    [null, null, undefined],
+    ['', false, undefined],
-    ['', '', undefined],
+    ['old title', false, null],
-    [undefined, undefined, undefined],
+  ])('sends expected title based on original and new values', async (originalTitle, withNewTitle, expectedSentTitle) => {
-    ['old title', null, null],
+    const { user } = setUp(Mock.of<ReachableServer>({ version: '2.6.0' }), 'create', originalTitle);
-    ['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);
 
-    wrapper.find('#title').simulate('change', { target: { value: newTitle } });
+    await user.type(screen.getByPlaceholderText('URL to be shortened'), 'https://long-domain.com/foo/bar');
-    wrapper.find('form').simulate('submit', { preventDefault: identity });
+    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,