Skip to content

Commit 593f0a2

Browse files
zepheiryanzepheiryan
committed
Add test for settings name and choosing settings from profile selection modal
1 parent 2d076e4 commit 593f0a2

3 files changed

Lines changed: 116 additions & 34 deletions

File tree

‎src/features/manageProfileSettings/components/ProfileSettingsEditor/ProfileSettingsEditor.test.tsx‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { setInitialGlobalState } from '@/test/__mocks__/store';
22

33
import { MemoryRouter } from 'react-router-dom';
44

5-
import { render, screen, within } from '@testing-library/react';
5+
import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
66

77
import { AdvancedFieldType } from '@/common/constants/uiControls.constants';
88

@@ -11,6 +11,8 @@ import { useManageProfileSettingsStore } from '@/store';
1111
import { ProfileSettingsEditor } from './ProfileSettingsEditor';
1212

1313
describe('ProfileSettingsEditor', () => {
14+
const mockSetSettingsName = jest.fn();
15+
1416
it('renders with no state', async () => {
1517
render(
1618
<MemoryRouter>
@@ -154,4 +156,33 @@ describe('ProfileSettingsEditor', () => {
154156
expect(within(selected).getByText('1. Child B')).toBeInTheDocument();
155157
expect(screen.queryByText('ld.unusedComponents.allUsed')).not.toBeInTheDocument();
156158
});
159+
160+
it('responds to settings name change', () => {
161+
const initialName = 'initial-name';
162+
const newName = 'new-name';
163+
setInitialGlobalState([
164+
{
165+
store: useManageProfileSettingsStore,
166+
state: {
167+
settingsName: initialName,
168+
setSettingsName: mockSetSettingsName,
169+
},
170+
},
171+
]);
172+
173+
render(
174+
<MemoryRouter>
175+
<ProfileSettingsEditor />
176+
</MemoryRouter>,
177+
);
178+
179+
const nameInput = screen.getByTestId('settings-name');
180+
expect(nameInput).toHaveValue(initialName);
181+
182+
fireEvent.change(nameInput, { target: { value: newName } });
183+
184+
waitFor(() => {
185+
expect(mockSetSettingsName).toHaveBeenCalledWith(newName);
186+
});
187+
});
157188
});

‎src/features/manageProfileSettings/components/ProfileSettingsEditor/ProfileSettingsEditor.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ export const ProfileSettingsEditor = () => {
172172
<FormattedMessage
173173
id={isCreating ? 'ld.profileSettings.creatingSettingsName' : 'ld.profileSettings.editingSettingsName'}
174174
/>
175-
<Input value={settingsName} onChange={handleNameChange} />
175+
<Input value={settingsName} onChange={handleNameChange} data-testid="settings-name" />
176176
</label>
177177
</div>
178178

‎src/features/profiles/components/ModalChooseProfile/ModalChooseProfile.test.tsx‎

Lines changed: 83 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,31 @@ const mockProfileSelectionType = {
1515
resourceTypeURL: 'http://bibfra.me/vocab/lite/Work' as ResourceTypeURL,
1616
} as ProfileSelectionType;
1717

18-
const queryClient = new QueryClient({
19-
defaultOptions: {
20-
queries: { retry: false },
21-
mutations: { retry: false },
22-
},
23-
});
18+
const createWrapper = () => {
19+
const queryClient = new QueryClient({
20+
defaultOptions: {
21+
queries: { retry: false },
22+
mutations: { retry: false },
23+
},
24+
});
2425

25-
const renderWithProviders = (component: React.ReactNode) => {
26-
return render(<QueryClientProvider client={queryClient}>{component}</QueryClientProvider>);
26+
queryClient.setQueryData(
27+
['profileSettingsMeta', 'profile_1'],
28+
[
29+
{
30+
id: 1,
31+
name: 'one',
32+
},
33+
{
34+
id: 2,
35+
name: 'two',
36+
},
37+
],
38+
);
39+
40+
return ({ children }: { children: React.ReactNode }) => {
41+
return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
42+
};
2743
};
2844

2945
describe('ModalChooseProfile', () => {
@@ -40,7 +56,7 @@ describe('ModalChooseProfile', () => {
4056
});
4157

4258
test('renders modal component with profile selection', () => {
43-
renderWithProviders(
59+
render(
4460
<ModalChooseProfile
4561
isOpen={true}
4662
profileSelectionType={mockProfileSelectionType}
@@ -49,6 +65,7 @@ describe('ModalChooseProfile', () => {
4965
onClose={onClose}
5066
profiles={mockProfiles}
5167
/>,
68+
{ wrapper: createWrapper() },
5269
);
5370

5471
// Check that modal content is rendered
@@ -67,7 +84,7 @@ describe('ModalChooseProfile', () => {
6784
});
6885

6986
test('selects the first profile by default', () => {
70-
renderWithProviders(
87+
render(
7188
<ModalChooseProfile
7289
isOpen={true}
7390
profileSelectionType={mockProfileSelectionType}
@@ -76,13 +93,14 @@ describe('ModalChooseProfile', () => {
7693
onClose={onClose}
7794
profiles={mockProfiles}
7895
/>,
96+
{ wrapper: createWrapper() },
7997
);
8098

8199
expect(screen.getByTestId('select-profile')).toHaveValue('profile_1');
82100
});
83101

84102
test('changes selected profile when user selects different option', () => {
85-
renderWithProviders(
103+
render(
86104
<ModalChooseProfile
87105
isOpen={true}
88106
profileSelectionType={mockProfileSelectionType}
@@ -91,6 +109,7 @@ describe('ModalChooseProfile', () => {
91109
onClose={onClose}
92110
profiles={mockProfiles}
93111
/>,
112+
{ wrapper: createWrapper() },
94113
);
95114

96115
const selectElement = screen.getByTestId('select-profile');
@@ -100,7 +119,7 @@ describe('ModalChooseProfile', () => {
100119
});
101120

102121
test('toggles the "set as default" checkbox', () => {
103-
renderWithProviders(
122+
render(
104123
<ModalChooseProfile
105124
isOpen={true}
106125
profileSelectionType={mockProfileSelectionType}
@@ -109,6 +128,7 @@ describe('ModalChooseProfile', () => {
109128
onClose={onClose}
110129
profiles={mockProfiles}
111130
/>,
131+
{ wrapper: createWrapper() },
112132
);
113133

114134
const checkbox = screen.getByRole('checkbox');
@@ -126,7 +146,7 @@ describe('ModalChooseProfile', () => {
126146
});
127147

128148
test('calls onSubmit with selected profile id when submit button is clicked', async () => {
129-
renderWithProviders(
149+
render(
130150
<ModalChooseProfile
131151
isOpen={true}
132152
profileSelectionType={mockProfileSelectionType}
@@ -135,6 +155,7 @@ describe('ModalChooseProfile', () => {
135155
onClose={onClose}
136156
profiles={mockProfiles}
137157
/>,
158+
{ wrapper: createWrapper() },
138159
);
139160

140161
const selectElement = screen.getByTestId('select-profile');
@@ -147,7 +168,7 @@ describe('ModalChooseProfile', () => {
147168
});
148169

149170
test('calls onCancel when cancel button is clicked', () => {
150-
renderWithProviders(
171+
render(
151172
<ModalChooseProfile
152173
isOpen={true}
153174
profileSelectionType={mockProfileSelectionType}
@@ -156,14 +177,15 @@ describe('ModalChooseProfile', () => {
156177
onClose={onClose}
157178
profiles={mockProfiles}
158179
/>,
180+
{ wrapper: createWrapper() },
159181
);
160182

161183
fireEvent.click(screen.getByTestId('modal-button-cancel'));
162184
expect(onCancel).toHaveBeenCalledTimes(1);
163185
});
164186

165187
test('calls onClose when modal is closed', () => {
166-
renderWithProviders(
188+
render(
167189
<ModalChooseProfile
168190
isOpen={true}
169191
profileSelectionType={mockProfileSelectionType}
@@ -172,14 +194,15 @@ describe('ModalChooseProfile', () => {
172194
onClose={onClose}
173195
profiles={mockProfiles}
174196
/>,
197+
{ wrapper: createWrapper() },
175198
);
176199

177200
fireEvent.click(screen.getByTestId('modal-overlay'));
178201
expect(onClose).toHaveBeenCalledTimes(1);
179202
});
180203

181204
test('does not render when isOpen is false', () => {
182-
const { container } = renderWithProviders(
205+
const { container } = render(
183206
<ModalChooseProfile
184207
isOpen={false}
185208
profileSelectionType={mockProfileSelectionType}
@@ -188,13 +211,14 @@ describe('ModalChooseProfile', () => {
188211
onClose={onClose}
189212
profiles={mockProfiles}
190213
/>,
214+
{ wrapper: createWrapper() },
191215
);
192216

193217
expect(container.firstChild).toBeNull();
194218
});
195219

196220
test('calls onSubmit with correct profile id when form is submitted without manual selection', async () => {
197-
const { rerender } = renderWithProviders(
221+
const { rerender } = render(
198222
<ModalChooseProfile
199223
isOpen={true}
200224
profileSelectionType={mockProfileSelectionType}
@@ -203,19 +227,18 @@ describe('ModalChooseProfile', () => {
203227
onClose={onClose}
204228
profiles={[]}
205229
/>,
230+
{ wrapper: createWrapper() },
206231
);
207232

208233
rerender(
209-
<QueryClientProvider client={queryClient}>
210-
<ModalChooseProfile
211-
isOpen={true}
212-
profileSelectionType={mockProfileSelectionType}
213-
onCancel={onCancel}
214-
onSubmit={onSubmit}
215-
onClose={onClose}
216-
profiles={mockProfiles}
217-
/>
218-
</QueryClientProvider>,
234+
<ModalChooseProfile
235+
isOpen={true}
236+
profileSelectionType={mockProfileSelectionType}
237+
onCancel={onCancel}
238+
onSubmit={onSubmit}
239+
onClose={onClose}
240+
profiles={mockProfiles}
241+
/>,
219242
);
220243

221244
fireEvent.click(screen.getByTestId('modal-button-submit'));
@@ -232,7 +255,7 @@ describe('ModalChooseProfile', () => {
232255
{ id: 'profile_1', name: 'Test Profile 1', resourceType: 'http://bibfra.me/vocab/lite/Work' },
233256
];
234257

235-
renderWithProviders(
258+
render(
236259
<ModalChooseProfile
237260
isOpen={true}
238261
profileSelectionType={mockProfileSelectionType}
@@ -244,6 +267,7 @@ describe('ModalChooseProfile', () => {
244267
preferredProfiles={preferredProfiles}
245268
resourceTypeURL="http://bibfra.me/vocab/lite/Work"
246269
/>,
270+
{ wrapper: createWrapper() },
247271
);
248272

249273
const checkbox = screen.getByRole('checkbox');
@@ -255,7 +279,7 @@ describe('ModalChooseProfile', () => {
255279
{ id: 'profile_2', name: 'Test Profile 2', resourceType: 'http://bibfra.me/vocab/lite/Instance' },
256280
];
257281

258-
renderWithProviders(
282+
render(
259283
<ModalChooseProfile
260284
isOpen={true}
261285
profileSelectionType={mockProfileSelectionType}
@@ -267,6 +291,7 @@ describe('ModalChooseProfile', () => {
267291
preferredProfiles={preferredProfiles}
268292
resourceTypeURL="http://bibfra.me/vocab/lite/Work"
269293
/>,
294+
{ wrapper: createWrapper() },
270295
);
271296

272297
const checkbox = screen.getByRole('checkbox');
@@ -278,7 +303,7 @@ describe('ModalChooseProfile', () => {
278303
{ id: 'profile_3', name: 'Test Profile 3', resourceType: 'http://bibfra.me/vocab/lite/Work' },
279304
];
280305

281-
renderWithProviders(
306+
render(
282307
<ModalChooseProfile
283308
isOpen={true}
284309
profileSelectionType={mockProfileSelectionType}
@@ -289,6 +314,7 @@ describe('ModalChooseProfile', () => {
289314
preferredProfiles={preferredProfiles}
290315
resourceTypeURL="http://bibfra.me/vocab/lite/Work"
291316
/>,
317+
{ wrapper: createWrapper() },
292318
);
293319

294320
const selectElement = screen.getByTestId('select-profile');
@@ -310,7 +336,7 @@ describe('ModalChooseProfile', () => {
310336
});
311337

312338
test('checkbox is unchecked when no preferred profiles provided', () => {
313-
renderWithProviders(
339+
render(
314340
<ModalChooseProfile
315341
isOpen={true}
316342
profileSelectionType={mockProfileSelectionType}
@@ -320,6 +346,7 @@ describe('ModalChooseProfile', () => {
320346
profiles={mockProfiles}
321347
selectedProfileId="profile_1"
322348
/>,
349+
{ wrapper: createWrapper() },
323350
);
324351

325352
const checkbox = screen.getByRole('checkbox');
@@ -331,7 +358,7 @@ describe('ModalChooseProfile', () => {
331358
{ id: 'profile_1', name: 'Test Profile 1', resourceType: 'http://bibfra.me/vocab/lite/Work' },
332359
];
333360

334-
renderWithProviders(
361+
render(
335362
<ModalChooseProfile
336363
isOpen={true}
337364
profileSelectionType={mockProfileSelectionType}
@@ -342,9 +369,33 @@ describe('ModalChooseProfile', () => {
342369
selectedProfileId="profile_1"
343370
preferredProfiles={preferredProfiles}
344371
/>,
372+
{ wrapper: createWrapper() },
345373
);
346374

347375
const checkbox = screen.getByRole('checkbox');
348376
expect(checkbox).not.toBeChecked();
349377
});
378+
379+
test('changing the selected settings changes the submitted settings ID', async () => {
380+
render(
381+
<ModalChooseProfile
382+
isOpen={true}
383+
profileSelectionType={mockProfileSelectionType}
384+
onCancel={onCancel}
385+
onSubmit={onSubmit}
386+
onClose={onClose}
387+
profiles={mockProfiles}
388+
selectedProfileId="profile_1"
389+
/>,
390+
{ wrapper: createWrapper() },
391+
);
392+
393+
fireEvent.change(screen.getByTestId('select-profile-settings'), { target: { value: '2' } });
394+
395+
fireEvent.click(screen.getByTestId('modal-button-submit'));
396+
397+
await waitFor(() => {
398+
expect(onSubmit).toHaveBeenCalledWith('profile_1', '2', false);
399+
});
400+
});
350401
});

0 commit comments

Comments
 (0)