diff --git a/app/javascript/packages/document-capture/components/in-person-location-post-office-search-step.spec.tsx b/app/javascript/packages/document-capture/components/in-person-location-post-office-search-step.spec.tsx index 8f829b95576..436d0e48d43 100644 --- a/app/javascript/packages/document-capture/components/in-person-location-post-office-search-step.spec.tsx +++ b/app/javascript/packages/document-capture/components/in-person-location-post-office-search-step.spec.tsx @@ -1,9 +1,12 @@ import { render } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import { I18n } from '@18f/identity-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'; @@ -23,6 +26,31 @@ const DEFAULT_RESPONSE = [ }, ]; +const MULTI_LOCATION_RESPONSE = [ + { + address: '100 Main St E, Bronwood, Georgia, 39826', + location: { + latitude: 31.831686000000005, + longitude: -84.363768, + }, + street_address: '100 Main St E', + city: 'Bronwood', + state: 'GA', + zip_code: '39826', + }, + { + address: '200 Main St E, Bronwood, Georgia, 39826', + location: { + latitude: 32.831686000000005, + longitude: -83.363768, + }, + street_address: '200 Main St E', + city: 'Bronwood', + state: 'GA', + zip_code: '39826', + }, +]; + const DEFAULT_PROPS = { toPreviousStep() {}, onChange() {}, @@ -31,6 +59,12 @@ const DEFAULT_PROPS = { }; describe('InPersonLocationStep', () => { + const wrapper: ComponentType = ({ children }) => ( + + new Map() }}>{children} + + ); + let server: SetupServerApi; before(() => { @@ -56,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( - new Map() }}> - - - - , + , + { wrapper }, ); await userEvent.type( @@ -87,11 +118,8 @@ describe('InPersonLocationStep', () => { it('allows search by address when enabled', async () => { const { findAllByText, findByText, findByLabelText, queryAllByText } = render( - new Map() }}> - - - - , + , + { wrapper }, ); const results = queryAllByText('in_person_proofing.body.location.location_button'); @@ -109,13 +137,9 @@ describe('InPersonLocationStep', () => { }); it('validates input and shows inline error', async () => { - const { findByText } = render( - new Map() }}> - - - - , - ); + const { findByText } = render(, { + wrapper, + }); await userEvent.click( await findByText('in_person_proofing.body.location.po_search.search_button'), @@ -126,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( - new Map() }}> - - - - , + , + { wrapper }, ); await userEvent.type( @@ -157,11 +178,8 @@ describe('InPersonLocationStep', () => { it('clicking search again after first results do not clear results', async () => { const { findAllByText, findByText, findByLabelText } = render( - new Map() }}> - - - - , + , + { wrapper }, ); await userEvent.type( @@ -176,6 +194,77 @@ describe('InPersonLocationStep', () => { ); await findAllByText('in_person_proofing.body.location.location_button'); }); + + it('displays correct pluralization for a single location result', async () => { + const { findByLabelText, findByText } = render( + + + , + { wrapper }, + ); + await userEvent.type( + await findByLabelText('in_person_proofing.body.location.po_search.address_search_label'), + '800 main', + ); + 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 findByText('one location result'); + }); + + it('displays correct pluralization for multiple location results', async () => { + server.resetHandlers(); + server.use( + rest.post(ADDRESS_SEARCH_URL, (_req, res, ctx) => res(ctx.json(DEFAULT_RESPONSE))), + rest.post(LOCATIONS_URL, (_req, res, ctx) => res(ctx.json(MULTI_LOCATION_RESPONSE))), + ); + + const { findByLabelText, findByText } = render( + + + , + { wrapper }, + ); + await userEvent.type( + await findByLabelText('in_person_proofing.body.location.po_search.address_search_label'), + '800 main', + ); + 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 findByText( + `more than one result: ${MULTI_LOCATION_RESPONSE.length} ${MULTI_LOCATION_RESPONSE[0].address}`, + ); + }); }); context('subsequent network failures clear results', () => { @@ -188,11 +277,8 @@ describe('InPersonLocationStep', () => { it('subsequent failure clears previous results', async () => { const { findAllByText, findByText, findByLabelText, queryAllByText } = render( - new Map() }}> - - - - , + , + { wrapper }, ); await userEvent.type( diff --git a/config/locales/in_person_proofing/en.yml b/config/locales/in_person_proofing/en.yml index 55da2755c4d..5415fe09af8 100644 --- a/config/locales/in_person_proofing/en.yml +++ b/config/locales/in_person_proofing/en.yml @@ -57,8 +57,10 @@ en: ID to try and verify your identity online again. po_search_about: If you are having trouble adding your ID, you may be able to verify your identity in person at a local United States Post Office. - results_description: There are %{count} participating Post Offices within 50 - miles of %{address}. + 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}. results_instructions: Select a Post Office location below, or search again using a different address. For facility accessibility, use the contact information listed for the Post Office location. diff --git a/config/locales/in_person_proofing/es.yml b/config/locales/in_person_proofing/es.yml index e8af6dbb9a7..713c97d3060 100644 --- a/config/locales/in_person_proofing/es.yml +++ b/config/locales/in_person_proofing/es.yml @@ -63,8 +63,11 @@ es: po_search_about: Si tiene problemas para añadir su documento de identidad, es posible que pueda verificar su identidad en persona en una oficina de correos local de los Estados Unidos. - results_description: Hay %{count} de oficinas de correos participantes en un - radio de 50 millas de la %{address}. + results_description: + one: Hay 1 oficina de correos participante en un radio de 50 millas de la + %{address}. + other: Hay %{count} de oficinas de correos participantes en un radio de 50 + millas de la %{address}. results_instructions: Seleccione una ubicación de la Oficina de Correos a continuación, o busque de nuevo utilizando una dirección diferente. Para la accesibilidad de las instalaciones, utilice la información diff --git a/config/locales/in_person_proofing/fr.yml b/config/locales/in_person_proofing/fr.yml index cf3ed7f3d23..7b253b87ed9 100644 --- a/config/locales/in_person_proofing/fr.yml +++ b/config/locales/in_person_proofing/fr.yml @@ -64,8 +64,11 @@ fr: po_search_about: Si vous avez des difficultés à ajouter votre pièce d’identité, vous pouvez vérifier votre identité en personne dans un bureau de poste américain proche. - results_description: Il y a %{count} de bureaux de poste participants dans un - rayon de 50 miles autour de %{address}. + results_description: + one: Il y a 1 bureau de poste participant dans un rayon de 50 miles autour de + %{address}. + other: Il y a %{count} de bureaux de poste participants dans un rayon de 50 + miles autour de %{address}. results_instructions: Sélectionnez un emplacement de bureau de poste ci-dessous, ou effectuez une nouvelle recherche en utilisant une autre adresse. Pour l’accessibilité des installations, utilisez les informations de