Merge pull request #651 from acelaya-forks/featue/rtl-more

Migrated DeleteServerButton to react testing library

test/servers/DeleteServerButton.test.tsx

@@ -1,29 +1,39 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { ReactNode } from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import deleteServerButtonConstruct from '../../src/servers/DeleteServerButton';
 import { ServerWithId } from '../../src/servers/data';
 
 describe('<DeleteServerButton />', () => {
-  let wrapper: ShallowWrapper;
-  const DeleteServerModal = () => null;
-
-  beforeEach(() => {
-    const DeleteServerButton = deleteServerButtonConstruct(DeleteServerModal);
-
-    wrapper = shallow(<DeleteServerButton server={Mock.all<ServerWithId>()} className="button" />);
-  });
-  afterEach(() => wrapper.unmount());
-
-  it('renders a button and a modal', () => {
-    expect(wrapper.find('.button')).toHaveLength(1);
-    expect(wrapper.find(DeleteServerModal)).toHaveLength(1);
+  const DeleteServerButton = deleteServerButtonConstruct(
+    ({ isOpen }) => <>DeleteServerModal {isOpen ? '[Open]' : '[Closed]'}</>,
+  );
+  const setUp = (children?: ReactNode) => ({
+    user: userEvent.setup(),
+    ...render(
+      <DeleteServerButton server={Mock.all<ServerWithId>()} textClassName="button">{children}</DeleteServerButton>,
+    ),
   });
 
-  it('displays modal when button is clicked', () => {
-    const btn = wrapper.find('.button');
+  it.each([
+    ['Foo bar'],
+    ['baz'],
+    ['something'],
+    [undefined],
+  ])('renders expected content', (children) => {
+    const { container } = setUp(children);
+    expect(container.firstChild).toBeTruthy();
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-    expect(wrapper.find(DeleteServerModal).prop('isOpen')).toEqual(false);
-    btn.simulate('click');
-    expect(wrapper.find(DeleteServerModal).prop('isOpen')).toEqual(true);
+  it('displays modal when button is clicked', async () => {
+    const { user, container } = setUp();
+
+    expect(screen.getByText(/DeleteServerModal/)).toHaveTextContent(/Closed/);
+    expect(screen.getByText(/DeleteServerModal/)).not.toHaveTextContent(/Open/);
+    container.firstElementChild && await user.click(container.firstElementChild);
+
+    await waitFor(() => expect(screen.getByText(/DeleteServerModal/)).toHaveTextContent(/Open/));
   });
 });

test/servers/__snapshots__/DeleteServerButton.test.tsx.snap

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DeleteServerButton /> renders expected content 1`] = `
+<span>
+  <span
+    class="button"
+  >
+    Foo bar
+  </span>
+</span>
+`;
+
+exports[`<DeleteServerButton /> renders expected content 2`] = `
+<span>
+  <span
+    class="button"
+  >
+    baz
+  </span>
+</span>
+`;
+
+exports[`<DeleteServerButton /> renders expected content 3`] = `
+<span>
+  <span
+    class="button"
+  >
+    something
+  </span>
+</span>
+`;
+
+exports[`<DeleteServerButton /> renders expected content 4`] = `
+<span>
+  <svg
+    aria-hidden="true"
+    class="svg-inline--fa fa-circle-minus fa-fw "
+    data-icon="circle-minus"
+    data-prefix="fas"
+    focusable="false"
+    role="img"
+    viewBox="0 0 512 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM168 232C154.7 232 144 242.7 144 256C144 269.3 154.7 280 168 280H344C357.3 280 368 269.3 368 256C368 242.7 357.3 232 344 232H168z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    class="button"
+  >
+    Remove this server
+  </span>
+</span>
+`;