diff --git a/test/servers/DeleteServerButton.test.tsx b/test/servers/DeleteServerButton.test.tsx
index 12e7cb68..f66e8a95 100644
--- a/test/servers/DeleteServerButton.test.tsx
+++ b/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('', () => {
- let wrapper: ShallowWrapper;
- const DeleteServerModal = () => null;
-
- beforeEach(() => {
- const DeleteServerButton = deleteServerButtonConstruct(DeleteServerModal);
-
- wrapper = shallow(()} 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(
+ ()} textClassName="button">{children},
+ ),
});
- 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/));
});
});
diff --git a/test/servers/__snapshots__/DeleteServerButton.test.tsx.snap b/test/servers/__snapshots__/DeleteServerButton.test.tsx.snap
new file mode 100644
index 00000000..380ccbc4
--- /dev/null
+++ b/test/servers/__snapshots__/DeleteServerButton.test.tsx.snap
@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` renders expected content 1`] = `
+
+
+ Foo bar
+
+
+`;
+
+exports[` renders expected content 2`] = `
+
+
+ baz
+
+
+`;
+
+exports[` renders expected content 3`] = `
+
+
+ something
+
+
+`;
+
+exports[` renders expected content 4`] = `
+
+
+
+ Remove this server
+
+
+`;