Skip to content

LG-10302: Change Address Search i18n lib #9109

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 2 commits into from
Aug 29, 2023
Merged

LG-10302: Change Address Search i18n lib #9109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
afc9737
changelog: Internal, In-Person Proofing, Change Address Search i18n lib
allthesignals Aug 28, 2023
29137ea
Update tests and include long-form address search
allthesignals Aug 29, 2023
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
3 changes: 1 addition & 2 deletions app/javascript/packages/address-search/components/address-search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useState } from 'react';
import { Alert, PageHeading } from '@18f/identity-components';
import { useI18n } from '@18f/identity-react-i18n';
import { t } from '@18f/identity-i18n';
import InPersonLocations from './in-person-locations';
import AddressInput from './address-input';
import type { LocationQuery, FormattedLocation } from '../types';
Expand All @@ -19,7 +19,6 @@ function AddressSearch({
null,
);
const [isLoadingLocations, setLoadingLocations] = useState<boolean>(false);
const { t } = useI18n();

return (
<>
Expand Down
3 changes: 1 addition & 2 deletions app/javascript/packages/address-search/components/in-person-locations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useI18n } from '@18f/identity-react-i18n';
import { t } from '@18f/identity-i18n';
import LocationCollection from './location-collection';
import LocationCollectionItem from './location-collection-item';

Expand All @@ -21,7 +21,6 @@ interface InPersonLocationsProps {
}

function InPersonLocations({ locations, onSelect, address }: InPersonLocationsProps) {
const { t } = useI18n();
const isPilot = locations?.some((l) => l.isPilot);

if (locations?.length === 0) {
Expand Down
3 changes: 1 addition & 2 deletions app/javascript/packages/address-search/components/location-collection-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { SpinnerButton } from '@18f/identity-spinner-button';
import { useI18n } from '@18f/identity-react-i18n';
import { t } from '@18f/identity-i18n';

interface LocationCollectionItemProps {
distance?: string;
Expand All @@ -24,7 +24,6 @@ function LocationCollectionItem({
sundayHours,
weekdayHours,
}: LocationCollectionItemProps) {
const { t } = useI18n();
const numericDistance = distance?.split(' ')[0];

return (
Expand Down
2 changes: 1 addition & 1 deletion app/javascript/packages/address-search/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@18f/identity-address-search",
"version": "1.0.5",
"version": "2.0.0",
Copy link
Contributor

@aduth aduth Aug 29, 2023

Choose a reason for hiding this comment

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

Is this change expected here? I suppose it shouldn't matter much if it's already in main via #9103.

Copy link
Contributor Author

@allthesignals allthesignals Aug 29, 2023

Choose a reason for hiding this comment

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

@aduth Weird, I don't know why it appears in the diff. It's not expected because we already merged it. Maybe I branched off #9103 or something.

"type": "module",
"private": false,
"files": [
Expand Down
177 changes: 78 additions & 99 deletions ...capture/components/in-person-location-full-address-entry-post-office-search-step.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { I18n } from '@18f/identity-i18n';
import { i18n } from '@18f/identity-i18n';
import { setupServer } from 'msw/node';
import type { SetupServer } from 'msw/node';
import { rest } from 'msw';
import { SWRConfig } from 'swr';
import { I18nContext } from '@18f/identity-react-i18n';
import { usePropertyValue } from '@18f/identity-test-helpers';
import { ComponentType } from 'react';
import { InPersonContext } from '../context';
import InPersonLocationFullAddressEntryPostOfficeSearchStep from './in-person-location-full-address-entry-post-office-search-step';
Expand Down Expand Up @@ -243,21 +243,16 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => {
await findAllByText('in_person_proofing.body.location.location_button');
});

it('displays correct pluralization for a single location result', async () => {
const { findByLabelText, findByText } = render(
<I18nContext.Provider
value={
new I18n({
strings: {
'in_person_proofing.body.location.po_search.results_description': {
one: 'There is one participating Post Office within 50 miles of %{address}.',
other:
'There are %{count} participating Post Offices within 50 miles of %{address}.',
},
},
})
}
>
context('pluralized and singularized translations are set', () => {
usePropertyValue(i18n, 'strings', {
'in_person_proofing.body.location.po_search.results_description': {
one: 'There is one participating Post Office within 50 miles of %{address}.',
other: 'There are %{count} participating Post Offices within 50 miles of %{address}.',
},
});
Comment on lines -248 to +252
Copy link
Contributor Author

@allthesignals allthesignals Aug 29, 2023

Choose a reason for hiding this comment

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

Because we aren't using the Provider to set the translation values, we instead override the locale data in the i18n global using usePropertyValue test helper, which resets the original values later.


it('displays correct pluralization for a single location result', async () => {
const { findByLabelText, findByText } = render(
<InPersonContext.Provider
value={{
inPersonOutageMessageEnabled: false,
Expand All @@ -267,58 +262,43 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => {
}}
>
<InPersonLocationFullAddressEntryPostOfficeSearchStep {...DEFAULT_PROPS} />,
</InPersonContext.Provider>
,
</I18nContext.Provider>,
{ wrapper },
);
await userEvent.type(
await findByLabelText('in_person_proofing.body.location.po_search.address_label'),
'222 Merchandise Mart Plaza',
);
await userEvent.type(
await findByLabelText('in_person_proofing.body.location.po_search.city_label'),
'Endeavor',
);
await userEvent.selectOptions(
await findByLabelText('in_person_proofing.body.location.po_search.state_label'),
'DE',
);
await userEvent.type(
await findByLabelText('in_person_proofing.body.location.po_search.zipcode_label'),
'19701',
);
await userEvent.click(
await findByText('in_person_proofing.body.location.po_search.search_button'),
);
await userEvent.click(
await findByText('in_person_proofing.body.location.po_search.search_button'),
);
</InPersonContext.Provider>,
{ wrapper },
);
await userEvent.type(
await findByLabelText('in_person_proofing.body.location.po_search.address_label'),
'222 Merchandise Mart Plaza',
);
await userEvent.type(
await findByLabelText('in_person_proofing.body.location.po_search.city_label'),
'Endeavor',
);
await userEvent.selectOptions(
await findByLabelText('in_person_proofing.body.location.po_search.state_label'),
'DE',
);
await userEvent.type(
await findByLabelText('in_person_proofing.body.location.po_search.zipcode_label'),
'19701',
);
await userEvent.click(
await findByText('in_person_proofing.body.location.po_search.search_button'),
);
await userEvent.click(
await findByText('in_person_proofing.body.location.po_search.search_button'),
);

const addressQuery = '222 Merchandise Mart Plaza, Endeavor, DE 19701';
const searchResultAlert = await findByText(
`There is one participating Post Office within 50 miles of ${addressQuery}.`,
);
expect(searchResultAlert).to.exist();
});
const addressQuery = '222 Merchandise Mart Plaza, Endeavor, DE 19701';
const searchResultAlert = await findByText(
`There is one participating Post Office within 50 miles of ${addressQuery}.`,
);
expect(searchResultAlert).to.exist();
});

it('displays correct pluralization for multiple location results', async () => {
server.resetHandlers();
server.use(rest.post(LOCATIONS_URL, (_req, res, ctx) => res(ctx.json(USPS_RESPONSE))));
const { findByLabelText, findByText } = render(
<I18nContext.Provider
value={
new I18n({
strings: {
'in_person_proofing.body.location.po_search.results_description': {
one: 'There is one participating Post Office within 50 miles of %{address}.',
other:
'There are %{count} participating Post Offices within 50 miles of %{address}.',
},
},
})
}
>
it('displays correct pluralization for multiple location results', async () => {
server.resetHandlers();
server.use(rest.post(LOCATIONS_URL, (_req, res, ctx) => res(ctx.json(USPS_RESPONSE))));
const { findByLabelText, findByText } = render(
<InPersonContext.Provider
value={{
inPersonOutageMessageEnabled: false,
Expand All @@ -328,40 +308,39 @@ describe('InPersonLocationFullAddressEntryPostOfficeSearchStep', () => {
}}
>
<InPersonLocationFullAddressEntryPostOfficeSearchStep {...DEFAULT_PROPS} />,
</InPersonContext.Provider>
,
</I18nContext.Provider>,
{ wrapper },
);
</InPersonContext.Provider>,
{ wrapper },
);

await userEvent.type(
await findByLabelText('in_person_proofing.body.location.po_search.address_label'),
'222 Merchandise Mart Plaza',
);
await userEvent.type(
await findByLabelText('in_person_proofing.body.location.po_search.city_label'),
'Endeavor',
);
await userEvent.selectOptions(
await findByLabelText('in_person_proofing.body.location.po_search.state_label'),
'DE',
);
await userEvent.type(
await findByLabelText('in_person_proofing.body.location.po_search.zipcode_label'),
'19701',
);
await userEvent.click(
await findByText('in_person_proofing.body.location.po_search.search_button'),
);
await userEvent.click(
await findByText('in_person_proofing.body.location.po_search.search_button'),
);
await userEvent.type(
await findByLabelText('in_person_proofing.body.location.po_search.address_label'),
'222 Merchandise Mart Plaza',
);
await userEvent.type(
await findByLabelText('in_person_proofing.body.location.po_search.city_label'),
'Endeavor',
);
await userEvent.selectOptions(
await findByLabelText('in_person_proofing.body.location.po_search.state_label'),
'DE',
);
await userEvent.type(
await findByLabelText('in_person_proofing.body.location.po_search.zipcode_label'),
'19701',
);
await userEvent.click(
await findByText('in_person_proofing.body.location.po_search.search_button'),
);
await userEvent.click(
await findByText('in_person_proofing.body.location.po_search.search_button'),
);

const addressQuery = '222 Merchandise Mart Plaza, Endeavor, DE 19701';
const searchResultAlert = await findByText(
`There are ${USPS_RESPONSE.length} participating Post Offices within 50 miles of ${addressQuery}.`,
);
expect(searchResultAlert).to.exist();
const addressQuery = '222 Merchandise Mart Plaza, Endeavor, DE 19701';
const searchResultAlert = await findByText(
`There are ${USPS_RESPONSE.length} participating Post Offices within 50 miles of ${addressQuery}.`,
);
expect(searchResultAlert).to.exist();
});
});

it('allows user to select a location', async () => {
Expand Down
3 changes: 1 addition & 2 deletions ...ment-capture/components/in-person-location-full-address-entry-post-office-search-step.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState, useEffect, useCallback, useRef, useContext } from 'react';
import { useI18n } from '@18f/identity-react-i18n';
import { t } from '@18f/identity-i18n';
import { Alert, PageHeading } from '@18f/identity-components';
import { request } from '@18f/identity-request';
import { forceRedirect } from '@18f/identity-url';
Expand All @@ -18,7 +18,6 @@ function InPersonLocationFullAddressEntryPostOfficeSearchStep({
registerField,
}) {
const { inPersonURL } = useContext(InPersonContext);
const { t } = useI18n();
const [inProgress, setInProgress] = useState<boolean>(false);
const [isLoadingLocations, setLoadingLocations] = useState<boolean>(false);
const [autoSubmit, setAutoSubmit] = useState<boolean>(false);
Expand Down
Loading