Skip to content

Commit 27207e0

Browse files
authored
Fix lingui plural warning (canada-ca#293)
This commit started with fixing a warning about plurals not working when the app was loaded. Fixing that caused some breakage in the tests. Fixing that revealed that none of the funkyness that broke was needed in the first place so I'm ripping that out. The result is everything is much cleaner and there are no warnings to be found anywhere!
1 parent 1cad936 commit 27207e0

22 files changed

Lines changed: 125 additions & 204 deletions

frontend/src/__tests__/App.test.js

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,7 @@ import gql from 'graphql-tag'
77
import { UserStateProvider } from '../UserState'
88
import App from '../App'
99
import { I18nProvider } from '@lingui/react'
10-
import { i18n } from '@lingui/core'
11-
import { en } from 'make-plural/plurals'
12-
13-
i18n.loadLocaleData('en', { plurals: en })
14-
i18n.load('en', { en: {} })
15-
i18n.activate('en')
10+
import { setupI18n } from '@lingui/core'
1611

1712
const resolvers = {
1813
Query: {
@@ -69,7 +64,7 @@ describe('<App/>', () => {
6964
initialState={{ userName: null, jwt: null, tfa: null }}
7065
>
7166
<ThemeProvider theme={theme}>
72-
<I18nProvider i18n={i18n}>
67+
<I18nProvider i18n={setupI18n()}>
7368
<MemoryRouter initialEntries={['/']} initialIndex={0}>
7469
<MockedProvider resolvers={resolvers} mocks={mocks}>
7570
<App />
@@ -92,7 +87,7 @@ describe('<App/>', () => {
9287
initialState={{ userName: null, jwt: null, tfa: null }}
9388
>
9489
<ThemeProvider theme={theme}>
95-
<I18nProvider i18n={i18n}>
90+
<I18nProvider i18n={setupI18n()}>
9691
<MemoryRouter initialEntries={['/domains']} initialIndex={0}>
9792
<MockedProvider
9893
mocks={mocks}

frontend/src/__tests__/CreateUserPage.test.js

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,7 @@ import { MockedProvider } from '@apollo/react-testing'
66
import { CreateUserPage } from '../CreateUserPage'
77
import { CREATE_USER } from '../graphql/mutations'
88
import { I18nProvider } from '@lingui/react'
9-
import { i18n } from '@lingui/core'
10-
import { en } from 'make-plural/plurals'
11-
12-
i18n.loadLocaleData('en', { plurals: en })
13-
i18n.load('en', { en: {} })
14-
i18n.activate('en')
9+
import { setupI18n } from '@lingui/core'
1510

1611
const resolvers = {
1712
Query: {
@@ -42,7 +37,7 @@ describe('<CreateUserPage />', () => {
4237
it('displays an error message', async () => {
4338
const { container, queryByText } = render(
4439
<ThemeProvider theme={theme}>
45-
<I18nProvider i18n={i18n}>
40+
<I18nProvider i18n={setupI18n()}>
4641
<MemoryRouter initialEntries={['/']} initialIndex={0}>
4742
<MockedProvider mocks={mocks} resolvers={resolvers}>
4843
<CreateUserPage />
@@ -68,7 +63,7 @@ describe('<CreateUserPage />', () => {
6863
it('displays an error message', async () => {
6964
const { container, queryByText } = render(
7065
<ThemeProvider theme={theme}>
71-
<I18nProvider i18n={i18n}>
66+
<I18nProvider i18n={setupI18n()}>
7267
<MemoryRouter initialEntries={['/']} initialIndex={0}>
7368
<MockedProvider mocks={mocks} resolvers={resolvers}>
7469
<CreateUserPage />
@@ -97,7 +92,7 @@ describe('<CreateUserPage />', () => {
9792
it('displays an error message', async () => {
9893
const { container, queryByText } = render(
9994
<ThemeProvider theme={theme}>
100-
<I18nProvider i18n={i18n}>
95+
<I18nProvider i18n={setupI18n()}>
10196
<MemoryRouter initialEntries={['/']} initialIndex={0}>
10297
<MockedProvider mocks={mocks} resolvers={resolvers}>
10398
<CreateUserPage />

frontend/src/__tests__/DmarcReportPage.test.js

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,7 @@ import { MockedProvider } from '@apollo/react-testing'
66
import { DmarcReportPage } from '../DmarcReportPage'
77
import { QUERY_DMARC_REPORT } from '../graphql/queries'
88
import { I18nProvider } from '@lingui/react'
9-
import { i18n } from '@lingui/core'
10-
import { en } from 'make-plural/plurals'
11-
12-
i18n.loadLocaleData('en', { plurals: en })
13-
i18n.load('en', { en: {} })
14-
i18n.activate('en')
9+
import { setupI18n } from '@lingui/core'
1510

1611
describe('<DmarcReportPage />', () => {
1712
it('renders pass icons in sub-headers correctly', async () => {
@@ -65,7 +60,7 @@ describe('<DmarcReportPage />', () => {
6560

6661
const { getByRole } = render(
6762
<ThemeProvider theme={theme}>
68-
<I18nProvider i18n={i18n}>
63+
<I18nProvider i18n={setupI18n()}>
6964
<MemoryRouter initialEntries={['/']} initialIndex={0}>
7065
<MockedProvider mocks={mocks} addTypename={false}>
7166
<DmarcReportPage />
@@ -137,7 +132,7 @@ describe('<DmarcReportPage />', () => {
137132

138133
const { getByText, getByRole } = render(
139134
<ThemeProvider theme={theme}>
140-
<I18nProvider i18n={i18n}>
135+
<I18nProvider i18n={setupI18n()}>
141136
<MemoryRouter initialEntries={['/']} initialIndex={0}>
142137
<MockedProvider mocks={mocks} addTypename={false}>
143138
<DmarcReportPage />

frontend/src/__tests__/EmailField.test.js

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@ import { ThemeProvider, theme } from '@chakra-ui/core'
55
import { EmailField } from '../EmailField'
66
import { Formik } from 'formik'
77
import { I18nProvider } from '@lingui/react'
8-
import { i18n } from '@lingui/core'
9-
import { en } from 'make-plural/plurals'
10-
11-
i18n.loadLocaleData('en', { plurals: en })
12-
i18n.load('en', { en: {} })
13-
i18n.activate('en')
8+
import { setupI18n } from '@lingui/core'
149

1510
describe('<EmailField />', () => {
1611
describe('when validation fails', () => {
@@ -20,7 +15,7 @@ describe('<EmailField />', () => {
2015
})
2116

2217
const { getByTestId, getByText } = render(
23-
<I18nProvider i18n={i18n}>
18+
<I18nProvider i18n={setupI18n()}>
2419
<ThemeProvider theme={theme}>
2520
<Formik
2621
// return a sadness error for the password field

frontend/src/__tests__/Footer.test.js

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,15 @@ import { I18nProvider } from '@lingui/react'
33
import { ThemeProvider, theme } from '@chakra-ui/core'
44
import { Footer } from '../Footer'
55
import { render } from '@testing-library/react'
6-
import { i18n } from '@lingui/core'
7-
import { en } from 'make-plural/plurals'
8-
9-
i18n.loadLocaleData('en', { plurals: en })
10-
i18n.load('en', { en: {} })
11-
i18n.activate('en')
6+
import { setupI18n } from '@lingui/core'
127

138
describe('<Footer />', () => {
149
beforeEach(() => (global.scrollTo = jest.fn()))
1510

1611
it('renders children correctly', () => {
1712
const { getAllByText } = render(
1813
<ThemeProvider theme={theme}>
19-
<I18nProvider i18n={i18n}>
14+
<I18nProvider i18n={setupI18n()}>
2015
<Footer>
2116
<div>foo</div>
2217
</Footer>

frontend/src/__tests__/LandingPage.test.js

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,7 @@ import { MemoryRouter } from 'react-router-dom'
44
import { ThemeProvider, theme } from '@chakra-ui/core'
55
import { LandingPage } from '../LandingPage'
66
import { I18nProvider } from '@lingui/react'
7-
import { i18n } from '@lingui/core'
8-
import { en } from 'make-plural/plurals'
9-
10-
i18n.loadLocaleData('en', { plurals: en })
11-
i18n.load('en', { en: {} })
12-
i18n.activate('en')
7+
import { setupI18n } from '@lingui/core'
138

149
describe('<LandingPage />', () => {
1510
afterEach(cleanup)
@@ -18,7 +13,7 @@ describe('<LandingPage />', () => {
1813
render(
1914
<MemoryRouter initialEntries={['/']}>
2015
<ThemeProvider theme={theme}>
21-
<I18nProvider i18n={i18n}>
16+
<I18nProvider i18n={setupI18n()}>
2217
<LandingPage />
2318
</I18nProvider>
2419
</ThemeProvider>

frontend/src/__tests__/PasswordConfirmation.test.js

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@ import { ThemeProvider, theme } from '@chakra-ui/core'
55
import { PasswordConfirmation } from '../PasswordConfirmation'
66
import { Formik } from 'formik'
77
import { I18nProvider } from '@lingui/react'
8-
import { i18n } from '@lingui/core'
9-
import { en } from 'make-plural/plurals'
10-
11-
i18n.loadLocaleData('en', { plurals: en })
12-
i18n.load('en', { en: {} })
13-
i18n.activate('en')
8+
import { setupI18n } from '@lingui/core'
149

1510
describe('<PasswordConfirmation />', () => {
1611
it('renders within a <Formik> wrapper', async () => {
@@ -20,7 +15,7 @@ describe('<PasswordConfirmation />', () => {
2015
})
2116

2217
const { container } = render(
23-
<I18nProvider i18n={i18n}>
18+
<I18nProvider i18n={setupI18n()}>
2419
<ThemeProvider theme={theme}>
2520
<Formik
2621
// return a sadness error for the password field
@@ -47,7 +42,7 @@ describe('<PasswordConfirmation />', () => {
4742
})
4843

4944
const { getByRole } = render(
50-
<I18nProvider i18n={i18n}>
45+
<I18nProvider i18n={setupI18n()}>
5146
<ThemeProvider theme={theme}>
5247
<Formik
5348
// return a sadness error for the password field

frontend/src/__tests__/PasswordField.test.js

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@ import { ThemeProvider, theme } from '@chakra-ui/core'
55
import { PasswordField } from '../PasswordField'
66
import { Formik } from 'formik'
77
import { I18nProvider } from '@lingui/react'
8-
import { i18n } from '@lingui/core'
9-
import { en } from 'make-plural/plurals'
10-
11-
i18n.loadLocaleData('en', { plurals: en })
12-
i18n.load('en', { en: {} })
13-
i18n.activate('en')
8+
import { setupI18n } from '@lingui/core'
149

1510
describe('<PasswordField />', () => {
1611
describe('when validation fails', () => {
@@ -19,7 +14,7 @@ describe('<PasswordField />', () => {
1914
password: string().required('sadness'),
2015
})
2116
const { getByTestId, getByText } = render(
22-
<I18nProvider i18n={i18n}>
17+
<I18nProvider i18n={setupI18n()}>
2318
<ThemeProvider theme={theme}>
2419
<Formik
2520
// return a sadness error for the password field
@@ -45,7 +40,7 @@ describe('<PasswordField />', () => {
4540
describe('by default', () => {
4641
it('renders a password field', async () => {
4742
const { getByTestId } = render(
48-
<I18nProvider i18n={i18n}>
43+
<I18nProvider i18n={setupI18n()}>
4944
<ThemeProvider theme={theme}>
5045
<Formik
5146
initialValues={{
@@ -69,7 +64,7 @@ describe('<PasswordField />', () => {
6964
describe('when the hide button is clicked', () => {
7065
it('renders a password field', async () => {
7166
const { getByRole } = render(
72-
<I18nProvider i18n={i18n}>
67+
<I18nProvider i18n={setupI18n()}>
7368
<ThemeProvider theme={theme}>
7469
<Formik
7570
initialValues={{

frontend/src/__tests__/PhaseBanner.test.js

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,13 @@ import { ThemeProvider, theme } from '@chakra-ui/core'
33
import { render } from '@testing-library/react'
44
import { PhaseBanner } from '../PhaseBanner'
55
import { I18nProvider } from '@lingui/react'
6-
import { i18n } from '@lingui/core'
7-
import { en } from 'make-plural/plurals'
8-
9-
i18n.loadLocaleData('en', { plurals: en })
10-
i18n.load('en', { en: {} })
11-
i18n.activate('en')
6+
import { setupI18n } from '@lingui/core'
127

138
describe('<PhaseBanner />', () => {
149
it('properly renders alpha banner', async () => {
1510
const { queryByText } = render(
1611
<ThemeProvider theme={theme}>
17-
<I18nProvider i18n={i18n}>
12+
<I18nProvider i18n={setupI18n()}>
1813
<PhaseBanner phase="ALPHA" />
1914
</I18nProvider>
2015
</ThemeProvider>,

frontend/src/__tests__/QRcodePage.test.js

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,7 @@ import { I18nProvider } from '@lingui/react'
77
import { MockedProvider } from '@apollo/react-testing'
88
import { UserStateProvider } from '../UserState'
99
import { GENERATE_OTP_URL } from '../graphql/queries'
10-
import { i18n } from '@lingui/core'
11-
import { en } from 'make-plural/plurals'
12-
13-
i18n.loadLocaleData('en', { plurals: en })
14-
i18n.load('en', { en: {} })
15-
i18n.activate('en')
10+
import { setupI18n } from '@lingui/core'
1611

1712
const email = 'foo@example.com'
1813
const resolvers = {
@@ -51,7 +46,7 @@ describe('<QRcodePage />', () => {
5146
<MockedProvider mocks={mocks} resolvers={resolvers}>
5247
<MemoryRouter initialEntries={['/']}>
5348
<ThemeProvider theme={theme}>
54-
<I18nProvider i18n={i18n}>
49+
<I18nProvider i18n={setupI18n()}>
5550
<QRcodePage />
5651
</I18nProvider>
5752
</ThemeProvider>

0 commit comments

Comments
 (0)