Skip to content

Commit cdac3c6

Browse files
PhilKsrPhilKsr
committed
chore: wrap components in NextIntlClientProvider for internationalization support in tests
1 parent dd845b8 commit cdac3c6

3 files changed

Lines changed: 108 additions & 91 deletions

File tree

‎packages/lib/src/components/FeedbackWidget/FeedbackWidget.test.tsx‎

Lines changed: 57 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919

2020
import { AppShell, MantineProvider } from '@mantine/core'
2121
import { cleanup, fireEvent, render, screen } from '@testing-library/react'
22+
import { NextIntlClientProvider } from 'next-intl'
2223
import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
2324

2425
import { FeedbackWidget } from './FeedbackWidget'
@@ -106,18 +107,20 @@ describe('FeedbackWidget', () => {
106107

107108
it('should render the button to open the feedback widget', () => {
108109
const component = render(
109-
<MantineProvider>
110-
<AppShell>
111-
<FeedbackWidget
112-
currentUser={mockedProps.user}
113-
createFeedback={mockedProps.spyFunctions.createFeedback}
114-
feedbackCreated={false}
115-
feedbackFailed={false}
116-
feedbackSending={false}
117-
createNotification={mockedProps.createNotification}
118-
/>
119-
</AppShell>
120-
</MantineProvider>,
110+
<NextIntlClientProvider locale="en" messages={{}}>
111+
<MantineProvider>
112+
<AppShell>
113+
<FeedbackWidget
114+
currentUser={mockedProps.user}
115+
createFeedback={mockedProps.spyFunctions.createFeedback}
116+
feedbackCreated={false}
117+
feedbackFailed={false}
118+
feedbackSending={false}
119+
createNotification={mockedProps.createNotification}
120+
/>
121+
</AppShell>
122+
</MantineProvider>
123+
</NextIntlClientProvider>,
121124
)
122125

123126
const openButton = screen.getByLabelText(
@@ -154,18 +157,20 @@ describe('FeedbackWidget', () => {
154157

155158
it('should render the feedback form after clicking the issue button', async () => {
156159
const component = render(
157-
<MantineProvider>
158-
<AppShell>
159-
<FeedbackWidget
160-
currentUser={mockedProps.user}
161-
createFeedback={mockedProps.spyFunctions.createFeedback}
162-
feedbackCreated={false}
163-
feedbackFailed={false}
164-
feedbackSending={false}
165-
createNotification={mockedProps.createNotification}
166-
/>
167-
</AppShell>
168-
</MantineProvider>,
160+
<NextIntlClientProvider locale="en" messages={{}}>
161+
<MantineProvider>
162+
<AppShell>
163+
<FeedbackWidget
164+
currentUser={mockedProps.user}
165+
createFeedback={mockedProps.spyFunctions.createFeedback}
166+
feedbackCreated={false}
167+
feedbackFailed={false}
168+
feedbackSending={false}
169+
createNotification={mockedProps.createNotification}
170+
/>
171+
</AppShell>
172+
</MantineProvider>
173+
</NextIntlClientProvider>,
169174
)
170175

171176
const openButton = screen.getByLabelText(
@@ -210,18 +215,20 @@ describe('FeedbackWidget', () => {
210215

211216
it('should render the success message after submitting the feedback', async () => {
212217
const renderedComponent = render(
213-
<MantineProvider>
214-
<AppShell>
215-
<FeedbackWidget
216-
currentUser={mockedProps.user}
217-
createFeedback={mockedProps.spyFunctions.createFeedback}
218-
feedbackCreated
219-
feedbackFailed={false}
220-
feedbackSending={false}
221-
createNotification={mockedProps.createNotification}
222-
/>
223-
</AppShell>
224-
</MantineProvider>,
218+
<NextIntlClientProvider locale="en" messages={{}}>
219+
<MantineProvider>
220+
<AppShell>
221+
<FeedbackWidget
222+
currentUser={mockedProps.user}
223+
createFeedback={mockedProps.spyFunctions.createFeedback}
224+
feedbackCreated
225+
feedbackFailed={false}
226+
feedbackSending={false}
227+
createNotification={mockedProps.createNotification}
228+
/>
229+
</AppShell>
230+
</MantineProvider>
231+
</NextIntlClientProvider>,
225232
)
226233

227234
const openButton = screen.getByLabelText(
@@ -248,18 +255,20 @@ describe('FeedbackWidget', () => {
248255

249256
it('should render the error message after not submitting the feedback', async () => {
250257
const renderedComponent = render(
251-
<MantineProvider>
252-
<AppShell>
253-
<FeedbackWidget
254-
currentUser={mockedProps.user}
255-
createFeedback={mockedProps.spyFunctions.createFeedback}
256-
feedbackCreated={false}
257-
feedbackFailed
258-
feedbackSending={false}
259-
createNotification={mockedProps.createNotification}
260-
/>
261-
</AppShell>
262-
</MantineProvider>,
258+
<NextIntlClientProvider locale="en" messages={{}}>
259+
<MantineProvider>
260+
<AppShell>
261+
<FeedbackWidget
262+
currentUser={mockedProps.user}
263+
createFeedback={mockedProps.spyFunctions.createFeedback}
264+
feedbackCreated={false}
265+
feedbackFailed
266+
feedbackSending={false}
267+
createNotification={mockedProps.createNotification}
268+
/>
269+
</AppShell>
270+
</MantineProvider>
271+
</NextIntlClientProvider>,
263272
)
264273

265274
const openButton = screen.getByLabelText(

‎packages/lib/src/components/LoginForm/LoginForm.test.tsx‎

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
RenderResult,
2626
screen,
2727
} from '@testing-library/react'
28+
import { NextIntlClientProvider } from 'next-intl'
2829
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
2930

3031
import { LoginForm } from './LoginForm'
@@ -43,19 +44,20 @@ describe('LoginForm', () => {
4344
const isPasswordResetFormOpened = false
4445

4546
LoginFormMounted = render(
46-
<MantineProvider>
47-
<AppShell>
48-
<LoginForm
49-
handleLogin={handleLogin}
50-
handlePasswordReset={handlePasswordReset}
51-
setIsPasswordResetFormOpened={setIsPasswordResetFormOpened}
52-
isResetPasswordSent={isResetPasswordSent}
53-
isPasswordResetFormOpened={isPasswordResetFormOpened}
54-
isResettingPassword={isResettingPassword}
55-
/>
56-
,
57-
</AppShell>
58-
</MantineProvider>,
47+
<NextIntlClientProvider locale="en" messages={{}}>
48+
<MantineProvider>
49+
<AppShell>
50+
<LoginForm
51+
handleLogin={handleLogin}
52+
handlePasswordReset={handlePasswordReset}
53+
setIsPasswordResetFormOpened={setIsPasswordResetFormOpened}
54+
isResetPasswordSent={isResetPasswordSent}
55+
isPasswordResetFormOpened={isPasswordResetFormOpened}
56+
isResettingPassword={isResettingPassword}
57+
/>
58+
</AppShell>
59+
</MantineProvider>
60+
</NextIntlClientProvider>,
5961
)
6062
})
6163

@@ -86,19 +88,20 @@ describe('LoginForm', () => {
8688
const isPasswordResetFormOpened = true
8789

8890
LoginFormMounted = render(
89-
<MantineProvider>
90-
<AppShell>
91-
<LoginForm
92-
handleLogin={handleLogin}
93-
handlePasswordReset={handlePasswordReset}
94-
setIsPasswordResetFormOpened={setIsPasswordResetFormOpened}
95-
isResetPasswordSent={isResetPasswordSent}
96-
isPasswordResetFormOpened={isPasswordResetFormOpened}
97-
isResettingPassword={isResettingPassword}
98-
/>
99-
,
100-
</AppShell>
101-
</MantineProvider>,
91+
<NextIntlClientProvider locale="en" messages={{}}>
92+
<MantineProvider>
93+
<AppShell>
94+
<LoginForm
95+
handleLogin={handleLogin}
96+
handlePasswordReset={handlePasswordReset}
97+
setIsPasswordResetFormOpened={setIsPasswordResetFormOpened}
98+
isResetPasswordSent={isResetPasswordSent}
99+
isPasswordResetFormOpened={isPasswordResetFormOpened}
100+
isResettingPassword={isResettingPassword}
101+
/>
102+
</AppShell>
103+
</MantineProvider>
104+
</NextIntlClientProvider>,
102105
)
103106

104107
expect(

‎packages/lib/src/components/TablePagination/TablePagination.test.tsx‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
import { AppShell, MantineProvider } from '@mantine/core'
2121
import { getCoreRowModel, useReactTable } from '@tanstack/react-table'
2222
import { fireEvent, render, screen } from '@testing-library/react'
23+
import { NextIntlClientProvider } from 'next-intl'
2324
import { describe, expect, it, vi } from 'vitest'
2425

2526
import { TablePagination } from './TablePagination'
@@ -114,11 +115,13 @@ describe('TablePagination.tsx', () => {
114115

115116
it('should render page select and pagination', () => {
116117
const renderedComponent = render(
117-
<MantineProvider>
118-
<AppShell>
119-
<TablePagination {...mockedProps} />
120-
</AppShell>
121-
</MantineProvider>,
118+
<NextIntlClientProvider locale="en" messages={{}}>
119+
<MantineProvider>
120+
<AppShell>
121+
<TablePagination {...mockedProps} />
122+
</AppShell>
123+
</MantineProvider>
124+
</NextIntlClientProvider>,
122125
)
123126

124127
const pageSelectDescription = screen.getByText('table.footer.pageSize')
@@ -150,18 +153,20 @@ describe('TablePagination.tsx', () => {
150153

151154
it('it should render pagination when fixed page size is set ', () => {
152155
const renderedComponent = render(
153-
<MantineProvider>
154-
<AppShell>
155-
<TablePagination
156-
table={mockedProps.table}
157-
pageSize={mockedProps.pageSize}
158-
activePage={mockedProps.activePage}
159-
setPageSize={mockedProps.setPageSize}
160-
setActivePage={mockedProps.setActivePage}
161-
fixedTablePageSize={2}
162-
/>
163-
</AppShell>
164-
</MantineProvider>,
156+
<NextIntlClientProvider locale="en" messages={{}}>
157+
<MantineProvider>
158+
<AppShell>
159+
<TablePagination
160+
table={mockedProps.table}
161+
pageSize={mockedProps.pageSize}
162+
activePage={mockedProps.activePage}
163+
setPageSize={mockedProps.setPageSize}
164+
setActivePage={mockedProps.setActivePage}
165+
fixedTablePageSize={2}
166+
/>
167+
</AppShell>
168+
</MantineProvider>
169+
</NextIntlClientProvider>,
165170
)
166171

167172
const pageSelect = screen.queryByLabelText('table.footer.pageSize')

0 commit comments

Comments
 (0)