Skip to content

Commit 018155d

Browse files
hars-21hars-21
authored
Improve code coverage in src/components/UserPortal/Register/Register.tsx (PalisadoesFoundation#3248)
* Improve code coverage in register.tsx * Achieved 100% Code coverage
1 parent cd0f54c commit 018155d

File tree

2 files changed

+66
-39
lines changed

2 files changed

+66
-39
lines changed

‎src/components/UserPortal/Register/Register.spec.tsx‎

Lines changed: 66 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { vi } from 'vitest';
2929
* GraphQL mock data is used for testing user registration functionality.
3030
*/
3131

32+
// GraphQL Mock Data
3233
const MOCKS = [
3334
{
3435
request: {
@@ -54,6 +55,7 @@ const MOCKS = [
5455
},
5556
];
5657

58+
// Form Data
5759
const formData = {
5860
firstName: 'John',
5961
lastName: 'Doe',
@@ -62,16 +64,26 @@ const formData = {
6264
confirmPassword: 'johnDoe',
6365
};
6466

65-
const link = new StaticMockLink(MOCKS, true);
67+
// Additional GraphQL Mock Data for Error Handling
68+
const ERROR_MOCKS = [
69+
{
70+
request: {
71+
query: SIGNUP_MUTATION,
72+
variables: {
73+
firstName: 'Error',
74+
lastName: 'Test',
75+
email: '[email protected]',
76+
password: 'password',
77+
},
78+
},
79+
error: new Error('GraphQL error occurred'),
80+
},
81+
];
6682

67-
async function wait(ms = 100): Promise<void> {
68-
await act(() => {
69-
return new Promise((resolve) => {
70-
setTimeout(resolve, ms);
71-
});
72-
});
73-
}
83+
// Static Mock Link
84+
const link = new StaticMockLink(MOCKS, true);
7485

86+
// Mock toast
7587
vi.mock('react-toastify', () => ({
7688
toast: {
7789
success: vi.fn(),
@@ -80,12 +92,18 @@ vi.mock('react-toastify', () => ({
8092
},
8193
}));
8294

95+
// Mock setCurrentMode function
8396
const setCurrentMode: React.Dispatch<SetStateAction<string>> = vi.fn();
8497

98+
// Test setup props
8599
const props = {
86100
setCurrentMode,
87101
};
88102

103+
async function waitForAsync(): Promise<void> {
104+
await act(() => new Promise((resolve) => setTimeout(resolve, 100)));
105+
}
106+
89107
describe('Testing Register Component [User Portal]', () => {
90108
it('Component should be rendered properly', async () => {
91109
render(
@@ -100,7 +118,7 @@ describe('Testing Register Component [User Portal]', () => {
100118
</MockedProvider>,
101119
);
102120

103-
await wait();
121+
await waitForAsync();
104122
});
105123

106124
it('Expect the mode to be changed to Login', async () => {
@@ -116,7 +134,7 @@ describe('Testing Register Component [User Portal]', () => {
116134
</MockedProvider>,
117135
);
118136

119-
await wait();
137+
await waitForAsync();
120138

121139
userEvent.click(screen.getByTestId('setLoginBtn'));
122140

@@ -136,7 +154,7 @@ describe('Testing Register Component [User Portal]', () => {
136154
</MockedProvider>,
137155
);
138156

139-
await wait();
157+
await waitForAsync();
140158

141159
userEvent.click(screen.getByTestId('registerBtn'));
142160

@@ -156,7 +174,7 @@ describe('Testing Register Component [User Portal]', () => {
156174
</MockedProvider>,
157175
);
158176

159-
await wait();
177+
await waitForAsync();
160178

161179
userEvent.type(screen.getByTestId('emailInput'), formData.email);
162180
userEvent.click(screen.getByTestId('registerBtn'));
@@ -177,12 +195,10 @@ describe('Testing Register Component [User Portal]', () => {
177195
</MockedProvider>,
178196
);
179197

180-
await wait();
198+
await waitForAsync();
181199

182200
userEvent.type(screen.getByTestId('passwordInput'), formData.password);
183-
184201
userEvent.type(screen.getByTestId('emailInput'), formData.email);
185-
186202
userEvent.click(screen.getByTestId('registerBtn'));
187203

188204
expect(toast.error).toHaveBeenCalledWith('Please enter valid details.');
@@ -201,20 +217,17 @@ describe('Testing Register Component [User Portal]', () => {
201217
</MockedProvider>,
202218
);
203219

204-
await wait();
220+
await waitForAsync();
205221

206222
userEvent.type(screen.getByTestId('passwordInput'), formData.password);
207-
208223
userEvent.type(screen.getByTestId('emailInput'), formData.email);
209-
210224
userEvent.type(screen.getByTestId('firstNameInput'), formData.firstName);
211-
212225
userEvent.click(screen.getByTestId('registerBtn'));
213226

214227
expect(toast.error).toHaveBeenCalledWith('Please enter valid details.');
215228
});
216229

217-
test("Expect toast.error to be called if confirmPassword doesn't match with password", async () => {
230+
it("Expect toast.error to be called if confirmPassword doesn't match with password", async () => {
218231
render(
219232
<MockedProvider addTypename={false} link={link}>
220233
<BrowserRouter>
@@ -227,16 +240,12 @@ describe('Testing Register Component [User Portal]', () => {
227240
</MockedProvider>,
228241
);
229242

230-
await wait();
243+
await waitForAsync();
231244

232245
userEvent.type(screen.getByTestId('passwordInput'), formData.password);
233-
234246
userEvent.type(screen.getByTestId('emailInput'), formData.email);
235-
236247
userEvent.type(screen.getByTestId('firstNameInput'), formData.firstName);
237-
238248
userEvent.type(screen.getByTestId('lastNameInput'), formData.lastName);
239-
240249
userEvent.click(screen.getByTestId('registerBtn'));
241250

242251
expect(toast.error).toHaveBeenCalledWith(
@@ -257,27 +266,52 @@ describe('Testing Register Component [User Portal]', () => {
257266
</MockedProvider>,
258267
);
259268

260-
await wait();
269+
await waitForAsync();
261270

262271
userEvent.type(screen.getByTestId('passwordInput'), formData.password);
263-
264272
userEvent.type(
265273
screen.getByTestId('confirmPasswordInput'),
266274
formData.confirmPassword,
267275
);
268-
269276
userEvent.type(screen.getByTestId('emailInput'), formData.email);
270-
271277
userEvent.type(screen.getByTestId('firstNameInput'), formData.firstName);
272-
273278
userEvent.type(screen.getByTestId('lastNameInput'), formData.lastName);
274-
275279
userEvent.click(screen.getByTestId('registerBtn'));
276280

277-
await wait();
281+
await waitForAsync();
278282

279283
expect(toast.success).toHaveBeenCalledWith(
280284
'Successfully registered. Please wait for admin to approve your request.',
281285
);
282286
});
287+
288+
// Error Test Case
289+
it('Expect toast.error to be called if GraphQL mutation fails', async () => {
290+
render(
291+
<MockedProvider addTypename={false} mocks={ERROR_MOCKS}>
292+
<BrowserRouter>
293+
<Provider store={store}>
294+
<I18nextProvider i18n={i18nForTest}>
295+
<Register {...props} />
296+
</I18nextProvider>
297+
</Provider>
298+
</BrowserRouter>
299+
</MockedProvider>,
300+
);
301+
302+
await waitForAsync();
303+
304+
// Fill out the form with error-triggering values
305+
userEvent.type(screen.getByTestId('passwordInput'), 'password');
306+
userEvent.type(screen.getByTestId('confirmPasswordInput'), 'password');
307+
userEvent.type(screen.getByTestId('emailInput'), '[email protected]');
308+
userEvent.type(screen.getByTestId('firstNameInput'), 'Error');
309+
userEvent.type(screen.getByTestId('lastNameInput'), 'Test');
310+
userEvent.click(screen.getByTestId('registerBtn'));
311+
312+
await waitForAsync();
313+
314+
// Assert that toast.error is called with the error message
315+
expect(toast.error).toHaveBeenCalledWith('GraphQL error occurred');
316+
});
283317
});

‎src/components/UserPortal/Register/Register.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
7676
toast.success(t('afterRegister') as string); // Success message
7777

7878
// Reset form fields
79-
/* istanbul ignore next */
8079
setRegisterVariables({
8180
firstName: '',
8281
lastName: '',
@@ -86,7 +85,6 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
8685
});
8786
} catch (error: unknown) {
8887
// Handle any errors during registration
89-
/* istanbul ignore next */
9088
errorHandler(t, error);
9189
}
9290
}
@@ -96,7 +94,6 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
9694
* Updates the state with the first name input value.
9795
* @param e - Change event from the input element
9896
*/
99-
/* istanbul ignore next */
10097
const handleFirstName = (e: ChangeEvent<HTMLInputElement>): void => {
10198
const firstName = e.target.value;
10299
setRegisterVariables({ ...registerVariables, firstName });
@@ -106,7 +103,6 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
106103
* Updates the state with the last name input value.
107104
* @param e - Change event from the input element
108105
*/
109-
/* istanbul ignore next */
110106
const handleLastName = (e: ChangeEvent<HTMLInputElement>): void => {
111107
const lastName = e.target.value;
112108
setRegisterVariables({ ...registerVariables, lastName });
@@ -116,7 +112,6 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
116112
* Updates the state with the email input value.
117113
* @param e - Change event from the input element
118114
*/
119-
/* istanbul ignore next */
120115
const handleEmailChange = (e: ChangeEvent<HTMLInputElement>): void => {
121116
const email = e.target.value;
122117
setRegisterVariables({ ...registerVariables, email });
@@ -126,7 +121,6 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
126121
* Updates the state with the password input value.
127122
* @param e - Change event from the input element
128123
*/
129-
/* istanbul ignore next */
130124
const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>): void => {
131125
const password = e.target.value;
132126

@@ -137,7 +131,6 @@ export default function register(props: InterfaceRegisterProps): JSX.Element {
137131
* Updates the state with the confirm password input value.
138132
* @param e - Change event from the input element
139133
*/
140-
/* istanbul ignore next */
141134
const handleConfirmPasswordChange = (
142135
e: ChangeEvent<HTMLInputElement>,
143136
): void => {

0 commit comments

Comments
 (0)