Skip to content

Commit

Permalink
🎨 [#429] Rewrite all React tests to testing-library
Browse files Browse the repository at this point in the history
  • Loading branch information
@sergei-maertens
sergei-maertens committed Nov 27, 2024
1 parent 2ef0fc3 commit 5d292de
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 207 deletions.
214 changes: 87 additions & 127 deletions src/components/ButtonsToolbar/test.spec.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import {render as renderTest, screen} from '@testing-library/react';
import {render, screen} from '@testing-library/react';
import messagesNL from 'i18n/compiled/nl.json';
import React from 'react';
import {createRoot} from 'react-dom/client';
import {act} from 'react-dom/test-utils';
import {IntlProvider} from 'react-intl';
import {MemoryRouter} from 'react-router-dom';

Expand All @@ -11,25 +9,6 @@ import {SUBMISSION_ALLOWED} from 'components/constants';

import ButtonsToolbar from './index';

let container = null;
let root = null;
beforeEach(() => {
// setup a DOM element as a render target
container = document.createElement('div');
document.body.appendChild(container);
root = createRoot(container);
});

afterEach(() => {
// cleanup on exiting
act(() => {
root.unmount();
container.remove();
root = null;
container = null;
});
});

const LITERALS = {
nextText: {value: '', resolved: 'Next step'},
saveText: {value: '', resolved: 'Save step'},
Expand All @@ -47,130 +26,111 @@ const Wrap = ({children}) => (
it('Last step of submittable form, button is present', () => {
const mockFunction = vi.fn();

act(() => {
root.render(
<Wrap>
<ButtonsToolbar
canSubmitStep={true}
canSubmitForm={SUBMISSION_ALLOWED.yes}
canSuspendForm={true}
isAuthenticated={false}
isLastStep={true}
isCheckingLogic={false}
loginRequired={false}
onFormSave={mockFunction}
onDestroySession={mockFunction}
previousPage="#"
/>
</Wrap>
);
});

const buttons = container.getElementsByClassName('openforms-toolbar__list-item');

expect(buttons.length).toEqual(4);
expect(buttons[0].textContent).toEqual('Previous step');
expect(buttons[1].textContent).toEqual('Save step');
expect(buttons[2].textContent).toEqual('Next step');
expect(buttons[3].textContent).toEqual('Afbreken');
render(
<Wrap>
<ButtonsToolbar
canSubmitStep={true}
canSubmitForm={SUBMISSION_ALLOWED.yes}
canSuspendForm={true}
isAuthenticated={false}
isLastStep={true}
isCheckingLogic={false}
loginRequired={false}
onFormSave={mockFunction}
onDestroySession={mockFunction}
previousPage="#"
/>
</Wrap>
);

expect(screen.getByRole('link', {name: 'Previous step'})).toBeVisible();
expect(screen.getByRole('button', {name: 'Save step'})).toBeVisible();
expect(screen.getByRole('button', {name: 'Next step'})).toBeVisible();
expect(screen.getByRole('button', {name: 'Afbreken'})).toBeVisible();
});

it('Last step of non-submittable form with overview, button is present', () => {
const mockFunction = vi.fn();

act(() => {
root.render(
<Wrap>
<ButtonsToolbar
canSubmitStep={true}
canSubmitForm={SUBMISSION_ALLOWED.noWithOverview}
canSuspendForm={true}
isAuthenticated={false}
isLastStep={true}
isCheckingLogic={false}
loginRequired={false}
previousPage="#"
onFormSave={mockFunction}
onDestroySession={mockFunction}
/>
</Wrap>
);
});

const buttons = container.getElementsByClassName('openforms-toolbar__list-item');

expect(buttons.length).toEqual(4);
expect(buttons[0].textContent).toEqual('Previous step');
expect(buttons[1].textContent).toEqual('Save step');
expect(buttons[2].textContent).toEqual('Next step');
expect(buttons[3].textContent).toEqual('Afbreken');
render(
<Wrap>
<ButtonsToolbar
canSubmitStep={true}
canSubmitForm={SUBMISSION_ALLOWED.noWithOverview}
canSuspendForm={true}
isAuthenticated={false}
isLastStep={true}
isCheckingLogic={false}
loginRequired={false}
previousPage="#"
onFormSave={mockFunction}
onDestroySession={mockFunction}
/>
</Wrap>
);

expect(screen.getByRole('link', {name: 'Previous step'})).toBeVisible();
expect(screen.getByRole('button', {name: 'Save step'})).toBeVisible();
expect(screen.getByRole('button', {name: 'Next step'})).toBeVisible();
expect(screen.getByRole('button', {name: 'Afbreken'})).toBeVisible();
});

it('Last step of non-submittable form without overview, button is NOT present', () => {
const mockFunction = vi.fn();

act(() => {
root.render(
<Wrap>
<ButtonsToolbar
canSubmitStep={true}
canSubmitForm={SUBMISSION_ALLOWED.noWithoutOverview}
canSuspendForm={true}
isAuthenticated={false}
isLastStep={true}
isCheckingLogic={false}
loginRequired={false}
previousPage="#"
onFormSave={mockFunction}
onDestroySession={mockFunction}
/>
</Wrap>
);
});

const buttons = container.getElementsByClassName('openforms-toolbar__list-item');

expect(buttons.length).toEqual(3);
expect(buttons[0].textContent).toEqual('Previous step');
expect(buttons[1].textContent).toEqual('Save step');
expect(buttons[2].textContent).toEqual('Afbreken');
render(
<Wrap>
<ButtonsToolbar
canSubmitStep={true}
canSubmitForm={SUBMISSION_ALLOWED.noWithoutOverview}
canSuspendForm={true}
isAuthenticated={false}
isLastStep={true}
isCheckingLogic={false}
loginRequired={false}
previousPage="#"
onFormSave={mockFunction}
onDestroySession={mockFunction}
/>
</Wrap>
);

expect(screen.getByRole('link', {name: 'Previous step'})).toBeVisible();
expect(screen.getByRole('button', {name: 'Save step'})).toBeVisible();
expect(screen.queryByRole('button', {name: 'Next step'})).not.toBeInTheDocument();
expect(screen.getByRole('button', {name: 'Afbreken'})).toBeVisible();
});

it('Non-last step of non-submittable form without overview, button IS present', () => {
const mockFunction = vi.fn();

act(() => {
root.render(
<Wrap>
<ButtonsToolbar
canSubmitStep={true}
canSubmitForm={SUBMISSION_ALLOWED.noWithoutOverview}
canSuspendForm={true}
isAuthenticated={false}
isLastStep={false}
isCheckingLogic={false}
loginRequired={false}
previousPage="#"
onFormSave={mockFunction}
onDestroySession={mockFunction}
/>
</Wrap>
);
});

const buttons = container.getElementsByClassName('openforms-toolbar__list-item');

expect(buttons.length).toEqual(4);
expect(buttons[0].textContent).toEqual('Previous step');
expect(buttons[1].textContent).toEqual('Save step');
expect(buttons[2].textContent).toEqual('Next step');
expect(buttons[3].textContent).toEqual('Afbreken');
render(
<Wrap>
<ButtonsToolbar
canSubmitStep={true}
canSubmitForm={SUBMISSION_ALLOWED.noWithoutOverview}
canSuspendForm={true}
isAuthenticated={false}
isLastStep={false}
isCheckingLogic={false}
loginRequired={false}
previousPage="#"
onFormSave={mockFunction}
onDestroySession={mockFunction}
/>
</Wrap>
);

expect(screen.getByRole('link', {name: 'Previous step'})).toBeVisible();
expect(screen.getByRole('button', {name: 'Save step'})).toBeVisible();
expect(screen.getByRole('button', {name: 'Next step'})).toBeVisible();
expect(screen.getByRole('button', {name: 'Afbreken'})).toBeVisible();
});

it('Suspending form allowed, button is present', () => {
const mockFunction = vi.fn();

renderTest(
render(
<Wrap>
<ButtonsToolbar
canSubmitStep={true}
Expand All @@ -193,7 +153,7 @@ it('Suspending form allowed, button is present', () => {
it('Suspending form not allowed, button is NOT present', () => {
const mockFunction = vi.fn();

renderTest(
render(
<Wrap>
<ButtonsToolbar
canSubmitStep={true}
Expand Down
81 changes: 28 additions & 53 deletions src/components/Summary/test.spec.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import {render as renderTest, screen} from '@testing-library/react';
import {render, screen} from '@testing-library/react';
import messagesNL from 'i18n/compiled/nl.json';
import React from 'react';
import {createRoot} from 'react-dom/client';
import {act} from 'react-dom/test-utils';
import {IntlProvider} from 'react-intl';
import {MemoryRouter} from 'react-router-dom';
import {useAsync} from 'react-use';
Expand Down Expand Up @@ -34,25 +32,6 @@ const SUBMISSION = {
vi.mock('react-use');
vi.mock('hooks/useRefreshSubmission');

let container = null;
let root = null;
beforeEach(() => {
// setup a DOM element as a render target
container = document.createElement('div');
document.body.appendChild(container);
root = createRoot(container);
});

afterEach(() => {
// cleanup on exiting
act(() => {
root.unmount();
container.remove();
root = null;
container = null;
});
});

const Wrap = ({children}) => (
<IntlProvider locale="nl" messages={messagesNL}>
<MemoryRouter>{children}</MemoryRouter>
Expand All @@ -70,21 +49,19 @@ it('Summary displays logout button if isAuthenticated is true', () => {
useAsync.mockReturnValue({loading: false, value: []});
useRefreshSubmission.mockReturnValue(submissionIsAuthenticated);

act(() => {
root.render(
<Wrap>
<SubmissionSummary
form={testForm}
submission={SUBMISSION}
onConfirm={onConfirm}
onDestroySession={onDestroySession}
onClearProcessingErrors={() => {}}
/>
</Wrap>
);
});

expect(container.textContent).toContain('Uitloggen');
render(
<Wrap>
<SubmissionSummary
form={testForm}
submission={SUBMISSION}
onConfirm={onConfirm}
onDestroySession={onDestroySession}
onClearProcessingErrors={() => {}}
/>
</Wrap>
);

expect(screen.getByRole('button', {name: 'Uitloggen'})).toBeVisible();
});

it('Summary does not display logout button if loginRequired is false', () => {
Expand All @@ -98,21 +75,19 @@ it('Summary does not display logout button if loginRequired is false', () => {
useAsync.mockReturnValue({loading: false, value: []});
useRefreshSubmission.mockReturnValue({...SUBMISSION, isAuthenticated: false});

act(() => {
root.render(
<Wrap>
<SubmissionSummary
form={formLoginRequired}
submission={SUBMISSION}
onConfirm={onConfirm}
onDestroySession={onDestroySession}
onClearProcessingErrors={() => {}}
/>
</Wrap>
);
});

expect(container.textContent).not.toContain('Uitloggen');
render(
<Wrap>
<SubmissionSummary
form={formLoginRequired}
submission={SUBMISSION}
onConfirm={onConfirm}
onDestroySession={onDestroySession}
onClearProcessingErrors={() => {}}
/>
</Wrap>
);

expect(screen.queryByRole('button', {name: 'Uitloggen'})).toBeNull();
});

it('Summary displays abort button if isAuthenticated is false', () => {
Expand All @@ -122,7 +97,7 @@ it('Summary displays abort button if isAuthenticated is false', () => {
useAsync.mockReturnValue({loading: false, value: []});
useRefreshSubmission.mockReturnValue({...SUBMISSION, isAuthenticated: false});

renderTest(
render(
<Wrap>
<SubmissionSummary
form={testForm}
Expand Down
Loading

0 comments on commit 5d292de

Please sign in to comment.