Skip to content

Refactor PO Search test suite to use wrapper option #7737

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
allthesignals merged 1 commit into from
Jan 31, 2023
Merged

Refactor PO Search test suite to use wrapper option #7737

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 25 additions & 43 deletions .../packages/document-capture/components/in-person-location-post-office-search-step.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { I18n } from '@18f/identity-i18n';
import { I18nContext } from '@18f/identity-react-i18n';
import { setupServer } from 'msw/node';
import { rest } from 'msw';
import type { SetupServerApi } from 'msw/node';
import { SWRConfig } from 'swr';
import { I18nContext } from '@18f/identity-react-i18n';
import { ComponentType } from 'react';
import { LOCATIONS_URL } from './in-person-location-step';
import { ADDRESS_SEARCH_URL } from './address-search';
import InPersonContext from '../context/in-person';
Expand Down Expand Up @@ -58,6 +59,12 @@ const DEFAULT_PROPS = {
};

describe('InPersonLocationStep', () => {
const wrapper: ComponentType = ({ children }) => (
<InPersonContext.Provider value={{ arcgisSearchEnabled: true }}>
Copy link
Contributor

@JackRyan1989 JackRyan1989 Jan 31, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is the ordering of the InPersonContext.Provider and the SWRConfig reversed in the wrapper as opposed to the original code?

Copy link
Contributor Author

@allthesignals allthesignals Jan 31, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oooh. Hmm. I don't know! I should've kept the original order, but I don't believe order hierarchy affects anything as far as context/providers go (unless there's some promise stuff going on). Unless you have some weird code that is sensitive to timing and re-renders and so on...

Copy link
Contributor Author

@allthesignals allthesignals Jan 31, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://stackoverflow.com/questions/69781010/order-of-react-context-providers 🤷

Copy link
Contributor

@JackRyan1989 JackRyan1989 Jan 31, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I don't think this is an issue here, but it seems like values could be overwritten:
"The Provider component accepts a value prop to be passed to consuming components that are descendants of this Provider. One Provider can be connected to many consumers. Providers can be nested to override values deeper within the tree." from React Docs.

<SWRConfig value={{ provider: () => new Map() }}>{children}</SWRConfig>
</InPersonContext.Provider>
);

let server: SetupServerApi;

before(() => {
Expand All @@ -83,11 +90,8 @@ describe('InPersonLocationStep', () => {

it('displays a 500 error if the request to the USPS API throws an error', async () => {
const { findByText, findByLabelText } = render(
<SWRConfig value={{ provider: () => new Map() }}>
<InPersonContext.Provider value={{ arcgisSearchEnabled: true }}>
<InPersonLocationPostOfficeSearchStep {...DEFAULT_PROPS} />
</InPersonContext.Provider>
</SWRConfig>,
<InPersonLocationPostOfficeSearchStep {...DEFAULT_PROPS} />,
{ wrapper },
);

await userEvent.type(
Expand All @@ -114,11 +118,8 @@ describe('InPersonLocationStep', () => {

it('allows search by address when enabled', async () => {
const { findAllByText, findByText, findByLabelText, queryAllByText } = render(
<SWRConfig value={{ provider: () => new Map() }}>
<InPersonContext.Provider value={{ arcgisSearchEnabled: true }}>
<InPersonLocationPostOfficeSearchStep {...DEFAULT_PROPS} />
</InPersonContext.Provider>
</SWRConfig>,
<InPersonLocationPostOfficeSearchStep {...DEFAULT_PROPS} />,
{ wrapper },
);

const results = queryAllByText('in_person_proofing.body.location.location_button');
Expand All @@ -136,13 +137,9 @@ describe('InPersonLocationStep', () => {
});

it('validates input and shows inline error', async () => {
const { findByText } = render(
<SWRConfig value={{ provider: () => new Map() }}>
<InPersonContext.Provider value={{ arcgisSearchEnabled: true }}>
<InPersonLocationPostOfficeSearchStep {...DEFAULT_PROPS} />
</InPersonContext.Provider>
</SWRConfig>,
);
const { findByText } = render(<InPersonLocationPostOfficeSearchStep {...DEFAULT_PROPS} />, {
wrapper,
});

await userEvent.click(
await findByText('in_person_proofing.body.location.po_search.search_button'),
Expand All @@ -153,11 +150,8 @@ describe('InPersonLocationStep', () => {

it('displays no post office results if a successful search is followed by an unsuccessful search', async () => {
const { findByText, findByLabelText, queryByRole } = render(
<SWRConfig value={{ provider: () => new Map() }}>
<InPersonContext.Provider value={{ arcgisSearchEnabled: true }}>
<InPersonLocationPostOfficeSearchStep {...DEFAULT_PROPS} />
</InPersonContext.Provider>
</SWRConfig>,
<InPersonLocationPostOfficeSearchStep {...DEFAULT_PROPS} />,
{ wrapper },
);

await userEvent.type(
Expand All @@ -184,11 +178,8 @@ describe('InPersonLocationStep', () => {

it('clicking search again after first results do not clear results', async () => {
const { findAllByText, findByText, findByLabelText } = render(
<SWRConfig value={{ provider: () => new Map() }}>
<InPersonContext.Provider value={{ arcgisSearchEnabled: true }}>
<InPersonLocationPostOfficeSearchStep {...DEFAULT_PROPS} />
</InPersonContext.Provider>
</SWRConfig>,
<InPersonLocationPostOfficeSearchStep {...DEFAULT_PROPS} />,
{ wrapper },
);

await userEvent.type(
Expand Down Expand Up @@ -219,12 +210,9 @@ describe('InPersonLocationStep', () => {
})
}
>
<SWRConfig value={{ provider: () => new Map() }}>
<InPersonContext.Provider value={{ arcgisSearchEnabled: true }}>
<InPersonLocationPostOfficeSearchStep {...DEFAULT_PROPS} />
</InPersonContext.Provider>
</SWRConfig>
<InPersonLocationPostOfficeSearchStep {...DEFAULT_PROPS} />
</I18nContext.Provider>,
{ wrapper },
);
await userEvent.type(
await findByLabelText('in_person_proofing.body.location.po_search.address_search_label'),
Expand Down Expand Up @@ -263,12 +251,9 @@ describe('InPersonLocationStep', () => {
})
}
>
<SWRConfig value={{ provider: () => new Map() }}>
<InPersonContext.Provider value={{ arcgisSearchEnabled: true }}>
<InPersonLocationPostOfficeSearchStep {...DEFAULT_PROPS} />
</InPersonContext.Provider>
</SWRConfig>
<InPersonLocationPostOfficeSearchStep {...DEFAULT_PROPS} />
</I18nContext.Provider>,
{ wrapper },
);
await userEvent.type(
await findByLabelText('in_person_proofing.body.location.po_search.address_search_label'),
Expand Down Expand Up @@ -297,11 +282,8 @@ describe('InPersonLocationStep', () => {

it('subsequent failure clears previous results', async () => {
const { findAllByText, findByText, findByLabelText, queryAllByText } = render(
<SWRConfig value={{ provider: () => new Map() }}>
<InPersonContext.Provider value={{ arcgisSearchEnabled: true }}>
<InPersonLocationPostOfficeSearchStep {...DEFAULT_PROPS} />
</InPersonContext.Provider>
</SWRConfig>,
<InPersonLocationPostOfficeSearchStep {...DEFAULT_PROPS} />,
{ wrapper },
);

await userEvent.type(
Expand Down