Merge pull request #665 from acelaya-forks/feature/rtl-why-not

Feature/rtl why not

src/short-urls/CreateShortUrl.tsx

@@ -55,7 +55,6 @@ export const CreateShortUrl = (
         mode={basicMode ? 'create-basic' : 'create'}
         onSave={async (data: ShortUrlData) => {
           resetCreateShortUrl();
-
           return createShortUrl(data);
         }}
       />

test/settings/VisitsSettings.test.tsx

@@ -1,41 +1,35 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Mock } from 'ts-mockery';
 import { Settings } from '../../src/settings/reducers/settings';
 import { VisitsSettings } from '../../src/settings/VisitsSettings';
-import { SimpleCard } from '../../src/utils/SimpleCard';
-import { DateIntervalSelector } from '../../src/utils/dates/DateIntervalSelector';
-import { LabeledFormGroup } from '../../src/utils/forms/LabeledFormGroup';
 
 describe('<VisitsSettings />', () => {
-  let wrapper: ShallowWrapper;
   const setVisitsSettings = jest.fn();
-  const createWrapper = (settings: Partial<Settings> = {}) => {
+  const setUp = (settings: Partial<Settings> = {}) => ({
-    wrapper = shallow(<VisitsSettings settings={Mock.of<Settings>(settings)} setVisitsSettings={setVisitsSettings} />);
+    user: userEvent.setup(),
-
+    ...render(<VisitsSettings settings={Mock.of<Settings>(settings)} setVisitsSettings={setVisitsSettings} />),
-    return wrapper;
+  });
-  };
 
   afterEach(jest.clearAllMocks);
-  afterEach(() => wrapper?.unmount());
 
   it('renders expected components', () => {
-    const wrapper = createWrapper();
+    setUp();
 
-    expect(wrapper.find(SimpleCard).prop('title')).toEqual('Visits');
+    expect(screen.getByRole('heading')).toHaveTextContent('Visits');
-    expect(wrapper.find(LabeledFormGroup).prop('label')).toEqual('Default interval to load on visits sections:');
+    expect(screen.getByText('Default interval to load on visits sections:')).toBeInTheDocument();
-    expect(wrapper.find(DateIntervalSelector)).toHaveLength(1);
   });
 
   it.each([
-    [Mock.all<Settings>(), 'last30Days'],
+    [Mock.all<Settings>(), 'Last 30 days'],
-    [Mock.of<Settings>({ visits: {} }), 'last30Days'],
+    [Mock.of<Settings>({ visits: {} }), 'Last 30 days'],
     [
       Mock.of<Settings>({
         visits: {
           defaultInterval: 'last7Days',
         },
       }),
-      'last7Days',
+      'Last 7 days',
     ],
     [
       Mock.of<Settings>({
@@ -43,21 +37,23 @@ describe('<VisitsSettings />', () => {
           defaultInterval: 'today',
         },
       }),
-      'today',
+      'Today',
     ],
   ])('sets expected interval as active', (settings, expectedInterval) => {
-    const wrapper = createWrapper(settings);
+    setUp(settings);
-
+    expect(screen.getByRole('button')).toHaveTextContent(expectedInterval);
-    expect(wrapper.find(DateIntervalSelector).prop('active')).toEqual(expectedInterval);
   });
 
-  it('invokes setVisitsSettings when interval changes', () => {
+  it('invokes setVisitsSettings when interval changes', async () => {
-    const wrapper = createWrapper();
+    const { user } = setUp();
-    const selector = wrapper.find(DateIntervalSelector);
+    const selectOption = async (name: string) => {
+      await user.click(screen.getByRole('button'));
+      await user.click(screen.getByRole('menuitem', { name }));
+    };
 
-    selector.simulate('change', 'last7Days');
+    await selectOption('Last 7 days');
-    selector.simulate('change', 'last180Days');
+    await selectOption('Last 180 days');
-    selector.simulate('change', 'yesterday');
+    await selectOption('Yesterday');
 
     expect(setVisitsSettings).toHaveBeenCalledTimes(3);
     expect(setVisitsSettings).toHaveBeenNthCalledWith(1, { defaultInterval: 'last7Days' });

test/short-urls/CreateShortUrl.test.tsx

@@ -1,38 +1,30 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { CreateShortUrl as createShortUrlsCreator } from '../../src/short-urls/CreateShortUrl';
 import { ShortUrlCreation } from '../../src/short-urls/reducers/shortUrlCreation';
 import { Settings } from '../../src/settings/reducers/settings';
 
 describe('<CreateShortUrl />', () => {
-  let wrapper: ShallowWrapper;
+  const ShortUrlForm = () => <span>ShortUrlForm</span>;
-  const ShortUrlForm = () => null;
+  const CreateShortUrlResult = () => <span>CreateShortUrlResult</span>;
-  const CreateShortUrlResult = () => null;
   const shortUrlCreation = { validateUrls: true };
   const shortUrlCreationResult = Mock.all<ShortUrlCreation>();
   const createShortUrl = jest.fn(async () => Promise.resolve());
+  const CreateShortUrl = createShortUrlsCreator(ShortUrlForm, CreateShortUrlResult);
+  const setUp = () => render(
+    <CreateShortUrl
+      shortUrlCreationResult={shortUrlCreationResult}
+      createShortUrl={createShortUrl}
+      selectedServer={null}
+      resetCreateShortUrl={() => {}}
+      settings={Mock.of<Settings>({ shortUrlCreation })}
+    />,
+  );
 
-  beforeEach(() => {
+  it('renders computed initial state', () => {
-    const CreateShortUrl = createShortUrlsCreator(ShortUrlForm, CreateShortUrlResult);
+    setUp();
 
-    wrapper = shallow(
+    expect(screen.getByText('ShortUrlForm')).toBeInTheDocument();
-      <CreateShortUrl
+    expect(screen.getByText('CreateShortUrlResult')).toBeInTheDocument();
-        shortUrlCreationResult={shortUrlCreationResult}
-        createShortUrl={createShortUrl}
-        selectedServer={null}
-        resetCreateShortUrl={() => {}}
-        settings={Mock.of<Settings>({ shortUrlCreation })}
-      />,
-    );
-  });
-  afterEach(() => wrapper.unmount());
-  afterEach(jest.clearAllMocks);
-
-  it('renders a ShortUrlForm with a computed initial state', () => {
-    const form = wrapper.find(ShortUrlForm);
-    const result = wrapper.find(CreateShortUrlResult);
-
-    expect(form).toHaveLength(1);
-    expect(result).toHaveLength(1);
   });
 });