Skip to content

Commit

Permalink
[NOREF] Address CI test failures on userEvent implementation (#977)
Browse files Browse the repository at this point in the history 
* Address CI test failures on userEvent implementation

* Adjusted how a few tests implement userEvent

* Adjusted how I initialized userEvent
  • Loading branch information
@patrickseguraoddball
patrickseguraoddball authored Feb 26, 2024
1 parent 5135085 commit c26fe73
Show file tree
Hide file tree
Showing 5 changed files with 173 additions and 140 deletions.
76 changes: 42 additions & 34 deletions src/views/Feedback/ReportAProblem/index.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react';
import { MemoryRouter, Route } from 'react-router-dom';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { act, render } from '@testing-library/react';
import CreateReportAProblem from 'gql/apolloGQL/Feedback/CreateReportAProblem';
import { ReportAProblemSection, ReportAProblemSeverity } from 'gql/gen/graphql';

import VerboseMockedProvider from 'utils/testing/MockedProvider';
import setup from 'utils/testing/setup';

import ReportAProblem from '.';

Expand Down Expand Up @@ -38,42 +38,50 @@ window.scrollTo = vi.fn;

describe('Report a problem form', () => {
it('submits the "Report a problem" form successfully', async () => {
const { findByText, getByRole, getByTestId } = render(
<MemoryRouter initialEntries={['/report-a-problem']}>
<Route path="/report-a-problem">
<VerboseMockedProvider mocks={mocks} addTypename={false}>
<ReportAProblem />
</VerboseMockedProvider>
</Route>
</MemoryRouter>
);
await act(async () => {
const { findByText, getByRole, getByTestId, user } = setup(
<MemoryRouter initialEntries={['/report-a-problem']}>
<Route path="/report-a-problem">
<VerboseMockedProvider mocks={mocks} addTypename={false}>
<ReportAProblem />
</VerboseMockedProvider>
</Route>
</MemoryRouter>
);

// Fill out form
userEvent.click(
getByTestId('report-a-problem-allow-anon-submission-false')
);
userEvent.click(getByTestId('report-a-problem-allow-contact-true'));
userEvent.click(getByTestId('report-a-problem-section-OTHER'));
userEvent.type(
getByTestId('report-a-problem-section-other'),
'Other section'
);
userEvent.type(
getByTestId('report-a-problem-section-what-doing'),
'Nothing much'
);
userEvent.type(
getByTestId('report-a-problem-section-what-went-wrong'),
'Everything'
);
userEvent.click(getByTestId('report-a-problem-severity-DELAYED_TASK'));
// Fill out form
await user.click(
getByTestId('report-a-problem-allow-anon-submission-false')
);

await user.click(getByTestId('report-a-problem-allow-contact-true'));

await user.click(getByTestId('report-a-problem-section-OTHER'));

await user.type(
getByTestId('report-a-problem-section-other'),
'Other section'
);

await user.type(
getByTestId('report-a-problem-section-what-doing'),
'Nothing much'
);

await user.type(
getByTestId('report-a-problem-section-what-went-wrong'),
'Everything'
);

await user.click(getByTestId('report-a-problem-severity-DELAYED_TASK'));

const submitButton = getByRole('button', { name: 'Send report' });
const submitButton = getByRole('button', { name: 'Send report' });

userEvent.click(submitButton);
await user.click(submitButton);

// Submit success
findByText('Thank you for your feedback');
// Submit success
findByText('Thank you for your feedback');
});
});

it('matches snapshot', async () => {
Expand Down
66 changes: 39 additions & 27 deletions src/views/Feedback/SendFeedback/index.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React from 'react';
import { MemoryRouter, Route } from 'react-router-dom';
import { MockedProvider } from '@apollo/client/testing';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { act, render } from '@testing-library/react';
import CreateSendFeedback from 'gql/apolloGQL/Feedback/CreateSendFeedback';
import { EaseOfUse, MintUses, SatisfactionLevel } from 'gql/gen/graphql';

import setup from 'utils/testing/setup';

import SendFeedback from '.';

const mocks = [
Expand Down Expand Up @@ -37,36 +38,47 @@ const mocks = [

describe('Send feedback form', () => {
it('submits the "Send feedback" form successfully', async () => {
const { findByText, getByRole, getByTestId, getByText } = render(
<MemoryRouter initialEntries={['send-feedback']}>
<Route path="send-feedback">
<MockedProvider mocks={mocks} addTypename={false}>
<SendFeedback />
</MockedProvider>
</Route>
</MemoryRouter>
);
await act(async () => {
const { findByText, getByRole, getByTestId, getByText, user } = setup(
<MemoryRouter initialEntries={['send-feedback']}>
<Route path="send-feedback">
<MockedProvider mocks={mocks} addTypename={false}>
<SendFeedback />
</MockedProvider>
</Route>
</MemoryRouter>
);

// Fill out form
userEvent.click(getByTestId('send-feedback-allow-anon-submission-false'));
userEvent.click(getByTestId('send-feedback-allow-contact-true'));
userEvent.type(getByTestId('send-feedback-cms-role'), 'Architect');
// Fill out form

userEvent.click(getByText('To edit Model Plans'));
userEvent.click(getByTestId('send-feedback-ease-of-use-UNSURE'));
userEvent.type(
getByTestId('send-feedback-ease-of-use-other'),
'Effortless'
);
userEvent.click(getByTestId('send-feedback-how-satisfied-NEUTRAL'));
userEvent.type(getByTestId('send-feedback-how-can-we-improve'), 'Alot');
await user.click(
getByTestId('send-feedback-allow-anon-submission-false')
);

await user.click(getByTestId('send-feedback-allow-contact-true'));

await user.type(getByTestId('send-feedback-cms-role'), 'Architect');

await user.click(getByText('To edit Model Plans'));

await user.click(getByTestId('send-feedback-ease-of-use-UNSURE'));

await user.type(
getByTestId('send-feedback-ease-of-use-other'),
'Effortless'
);

await user.click(getByTestId('send-feedback-how-satisfied-NEUTRAL'));

await user.type(getByTestId('send-feedback-how-can-we-improve'), 'Alot');

const submitButton = getByRole('button', { name: 'Send feedback' });
const submitButton = getByRole('button', { name: 'Send feedback' });

userEvent.click(submitButton);
await user.click(submitButton);

// Submit success
findByText('Thank you for your feedback');
// Submit success
findByText('Thank you for your feedback');
});
});

it('matches snapshot', async () => {
Expand Down
72 changes: 37 additions & 35 deletions src/views/ModelPlan/TaskList/ITSolutions/SolutionImplementation/index.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React from 'react';
import { MemoryRouter, Route } from 'react-router-dom';
import { MockedProvider } from '@apollo/client/testing';
import { render, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { act, render, waitFor } from '@testing-library/react';

import {
needQuestionAndAnswerMock,
Expand All @@ -16,6 +15,7 @@ import {
OperationalSolutionKey,
OpSolutionStatus
} from 'types/graphql-global-types';
import setup from 'utils/testing/setup';

import SolutionImplmentation from '.';

Expand Down Expand Up @@ -71,44 +71,46 @@ const mocks = [

describe('Operational Solutions NeedQuestionAndAnswer', () => {
it('renders correctly', async () => {
const { getByText, getAllByTestId, getByRole } = render(
<MemoryRouter
initialEntries={[
{
pathname: `/models/${modelID}/task-list/it-solutions/${operationalNeedID}/solution-implementation-details`
}
]}
>
<MockedProvider mocks={mocks} addTypename={false}>
<Route path="/models/:modelID/task-list/it-solutions/:operationalNeedID/solution-implementation-details">
<MessageProvider>
<SolutionImplmentation />
</MessageProvider>
</Route>
</MockedProvider>
</MemoryRouter>
);
await act(async () => {
const { getByText, getAllByTestId, getByRole, user } = setup(
<MemoryRouter
initialEntries={[
{
pathname: `/models/${modelID}/task-list/it-solutions/${operationalNeedID}/solution-implementation-details`
}
]}
>
<MockedProvider mocks={mocks} addTypename={false}>
<Route path="/models/:modelID/task-list/it-solutions/:operationalNeedID/solution-implementation-details">
<MessageProvider>
<SolutionImplmentation />
</MessageProvider>
</Route>
</MockedProvider>
</MemoryRouter>
);

await waitFor(() => {
expect(
getByText('Research, Measurement, Assessment, Design, and Analysis')
).toBeInTheDocument();
});
await waitFor(() => {
expect(
getByText('Research, Measurement, Assessment, Design, and Analysis')
).toBeInTheDocument();
});

const datePicker = getAllByTestId('date-picker-external-input')[0];
userEvent.type(datePicker, '12/10/2030');
const datePicker = getAllByTestId('date-picker-external-input')[0];
await user.type(datePicker, '12/10/2030');

await waitFor(() => {
expect(datePicker).toHaveValue('12/10/2030');
});
await waitFor(() => {
expect(datePicker).toHaveValue('12/10/2030');
});

const atRisk = getByRole('radio', { name: 'At risk' });
const backlog = getByRole('radio', { name: 'Backlog' });
userEvent.click(backlog);
const atRisk = getByRole('radio', { name: 'At risk' });
const backlog = getByRole('radio', { name: 'Backlog' });
await user.click(backlog);

await waitFor(() => {
expect(atRisk).not.toBeChecked();
expect(backlog).toBeChecked();
await waitFor(() => {
expect(atRisk).not.toBeChecked();
expect(backlog).toBeChecked();
});
});
});

Expand Down
48 changes: 27 additions & 21 deletions src/views/ModelPlan/TaskList/PrepareForClearance/Checklist/index.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React from 'react';
import { MemoryRouter, Route } from 'react-router-dom';
import { MockedProvider } from '@apollo/client/testing';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { act, render, screen, waitFor } from '@testing-library/react';

import GetClearanceStatuses from 'queries/PrepareForClearance/GetClearanceStatuses';
import {
PrepareForClearanceStatus,
TaskStatus
} from 'types/graphql-global-types';
import setup from 'utils/testing/setup';

import PrepareForClearanceCheckList, {
initialPrepareForClearanceValues,
Expand Down Expand Up @@ -46,28 +46,34 @@ const clearanceMock = [

describe('Prepare for clearance checklist', () => {
it('renders without errors and unchecks an item', async () => {
render(
<MemoryRouter
initialEntries={[`/models/${modelID}/task-list/prepare-for-clearance`]}
>
<MockedProvider mocks={clearanceMock} addTypename={false}>
<Route path="/models/:modelID/task-list/prepare-for-clearance">
<PrepareForClearanceCheckList modelID={modelID} />
</Route>
</MockedProvider>
</MemoryRouter>
);
await act(async () => {
const { user } = setup(
<MemoryRouter
initialEntries={[
`/models/${modelID}/task-list/prepare-for-clearance`
]}
>
<MockedProvider mocks={clearanceMock} addTypename={false}>
<Route path="/models/:modelID/task-list/prepare-for-clearance">
<PrepareForClearanceCheckList modelID={modelID} />
</Route>
</MockedProvider>
</MemoryRouter>
);

await waitFor(() => {
expect(screen.getByTestId('prepare-for-clearance-basics')).toBeChecked();
});
await waitFor(() => {
expect(
screen.getByTestId('prepare-for-clearance-basics')
).toBeChecked();
});

userEvent.click(screen.getByTestId('prepare-for-clearance-basics'));
await user.click(screen.getByTestId('prepare-for-clearance-basics'));

await waitFor(() => {
expect(
screen.getByTestId('prepare-for-clearance-basics')
).not.toBeChecked();
await waitFor(() => {
expect(
screen.getByTestId('prepare-for-clearance-basics')
).not.toBeChecked();
});
});
});

Expand Down
Loading

0 comments on commit c26fe73

Please sign in to comment.