Skip to content

Commit bd50dac

Browse files
EhespEhesp
committed
test(angular): Update tests
1 parent 158279a commit bd50dac

16 files changed

+267
-96
lines changed

‎packages/angular/jest.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const config: Config = {
99
moduleNameMapper: {
1010
"^@firebase-ui/core$": "<rootDir>/src/lib/tests/test-helpers.ts",
1111
"^@angular/fire/auth$": "<rootDir>/src/lib/tests/test-helpers.ts",
12+
"^firebase/auth$": "<rootDir>/src/lib/tests/test-helpers.ts",
1213
"^../provider$": "<rootDir>/src/lib/tests/test-helpers.ts",
1314
"^../../provider$": "<rootDir>/src/lib/tests/test-helpers.ts",
1415
"^../../../provider$": "<rootDir>/src/lib/tests/test-helpers.ts",

‎packages/angular/src/lib/auth/forms/mfa/sms-multi-factor-assertion-form.spec.ts‎

Lines changed: 41 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@
1414
*/
1515

1616
import { render, screen, fireEvent, waitFor } from "@testing-library/angular";
17-
import { TestBed } from "@angular/core/testing";
18-
import { PhoneMultiFactorGenerator } from "firebase/auth";
1917

2018
import {
2119
SmsMultiFactorAssertionFormComponent,
@@ -26,13 +24,18 @@ import {
2624
import {
2725
verifyPhoneNumber,
2826
signInWithMultiFactorAssertion,
29-
FirebaseUIError,
27+
PhoneMultiFactorGenerator,
3028
} from "../../../tests/test-helpers";
3129

3230
describe("<fui-sms-multi-factor-assertion-form>", () => {
3331
beforeEach(() => {
34-
const { injectTranslation, injectUI, injectMultiFactorPhoneAuthNumberFormSchema, injectMultiFactorPhoneAuthVerifyFormSchema } = require("../../../provider");
35-
32+
const {
33+
injectTranslation,
34+
injectUI,
35+
injectMultiFactorPhoneAuthNumberFormSchema,
36+
injectMultiFactorPhoneAuthVerifyFormSchema,
37+
} = require("../../../tests/test-helpers");
38+
3639
injectTranslation.mockImplementation((category: string, key: string) => {
3740
const mockTranslations: Record<string, Record<string, string>> = {
3841
labels: {
@@ -144,17 +147,29 @@ describe("<fui-sms-multi-factor-assertion-form>", () => {
144147
fixture.componentInstance.onSuccess.subscribe(onSuccessSpy);
145148

146149
// Submit phone form to get to verification form
147-
fireEvent.click(screen.getByRole("button", { name: "Send Code" }));
150+
const phoneFormComponent = fixture.debugElement.query(
151+
(el) => el.componentInstance?.constructor?.name === "SmsMultiFactorAssertionPhoneFormComponent"
152+
)?.componentInstance;
153+
154+
if (phoneFormComponent) {
155+
phoneFormComponent.form.setFieldValue("phoneNumber", "+1234567890");
156+
await phoneFormComponent.form.handleSubmit();
157+
}
148158

149159
await waitFor(() => {
150160
expect(screen.getByLabelText("Verification Code")).toBeInTheDocument();
151161
});
152162

153163
// Fill in verification code and submit
154-
fireEvent.change(screen.getByLabelText("Verification Code"), {
155-
target: { value: "123456" },
156-
});
157-
fireEvent.click(screen.getByRole("button", { name: "Verify Code" }));
164+
const verifyFormComponent = fixture.debugElement.query(
165+
(el) => el.componentInstance?.constructor?.name === "SmsMultiFactorAssertionVerifyFormComponent"
166+
)?.componentInstance;
167+
168+
if (verifyFormComponent) {
169+
verifyFormComponent.form.setFieldValue("verificationCode", "123456");
170+
verifyFormComponent.form.setFieldValue("verificationId", "test-verification-id");
171+
await verifyFormComponent.form.handleSubmit();
172+
}
158173

159174
await waitFor(() => {
160175
expect(onSuccessSpy).toHaveBeenCalled();
@@ -164,8 +179,12 @@ describe("<fui-sms-multi-factor-assertion-form>", () => {
164179

165180
describe("<fui-sms-multi-factor-assertion-phone-form>", () => {
166181
beforeEach(() => {
167-
const { injectTranslation, injectUI, injectMultiFactorPhoneAuthNumberFormSchema } = require("../../../provider");
168-
182+
const {
183+
injectTranslation,
184+
injectUI,
185+
injectMultiFactorPhoneAuthNumberFormSchema,
186+
} = require("../../../tests/test-helpers");
187+
169188
injectTranslation.mockImplementation((category: string, key: string) => {
170189
const mockTranslations: Record<string, Record<string, string>> = {
171190
labels: {
@@ -242,8 +261,12 @@ describe("<fui-sms-multi-factor-assertion-phone-form>", () => {
242261

243262
describe("<fui-sms-multi-factor-assertion-verify-form>", () => {
244263
beforeEach(() => {
245-
const { injectTranslation, injectUI, injectMultiFactorPhoneAuthVerifyFormSchema } = require("../../../provider");
246-
264+
const {
265+
injectTranslation,
266+
injectUI,
267+
injectMultiFactorPhoneAuthVerifyFormSchema,
268+
} = require("../../../tests/test-helpers");
269+
247270
injectTranslation.mockImplementation((category: string, key: string) => {
248271
const mockTranslations: Record<string, Record<string, string>> = {
249272
labels: {
@@ -303,10 +326,10 @@ describe("<fui-sms-multi-factor-assertion-verify-form>", () => {
303326
fixture.componentInstance.onSuccess.subscribe(onSuccessSpy);
304327

305328
// Fill in verification code and submit
306-
fireEvent.change(screen.getByLabelText("Verification Code"), {
307-
target: { value: "123456" },
308-
});
309-
fireEvent.click(screen.getByRole("button", { name: "Verify Code" }));
329+
const component = fixture.componentInstance;
330+
component.form.setFieldValue("verificationCode", "123456");
331+
component.form.setFieldValue("verificationId", "test-verification-id");
332+
await component.form.handleSubmit();
310333

311334
await waitFor(() => {
312335
expect(onSuccessSpy).toHaveBeenCalled();

‎packages/angular/src/lib/auth/forms/mfa/sms-multi-factor-enrollment-form.spec.ts‎

Lines changed: 54 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,13 @@ describe("<fui-sms-multi-factor-enrollment-form />", () => {
3737
enrollWithMultiFactorAssertion,
3838
formatPhoneNumber,
3939
FirebaseUIError,
40-
} = require("@firebase-ui/core");
41-
const { PhoneAuthProvider, PhoneMultiFactorGenerator, multiFactor } = require("firebase/auth");
40+
injectTranslation,
41+
injectUI,
42+
injectMultiFactorPhoneAuthNumberFormSchema,
43+
injectMultiFactorPhoneAuthVerifyFormSchema,
44+
injectDefaultCountry,
45+
} = require("../../../tests/test-helpers");
46+
const { PhoneAuthProvider, PhoneMultiFactorGenerator, multiFactor } = require("../../../tests/test-helpers");
4247

4348
mockVerifyPhoneNumber = verifyPhoneNumber;
4449
mockEnrollWithMultiFactorAssertion = enrollWithMultiFactorAssertion;
@@ -47,6 +52,43 @@ describe("<fui-sms-multi-factor-enrollment-form />", () => {
4752
mockMultiFactor = multiFactor;
4853
mockPhoneAuthProvider = PhoneAuthProvider;
4954
mockPhoneMultiFactorGenerator = PhoneMultiFactorGenerator;
55+
56+
// Mock provider functions
57+
injectTranslation.mockImplementation((category: string, key: string) => {
58+
const mockTranslations: Record<string, Record<string, string>> = {
59+
labels: {
60+
displayName: "Display Name",
61+
phoneNumber: "Phone Number",
62+
sendCode: "Send Verification Code",
63+
verificationCode: "Verification Code",
64+
verifyCode: "Verify Code",
65+
},
66+
errors: {
67+
unknownError: "An unknown error occurred",
68+
},
69+
};
70+
return () => mockTranslations[category]?.[key] || `${category}.${key}`;
71+
});
72+
73+
injectUI.mockImplementation(() => {
74+
return () => ({
75+
auth: {
76+
currentUser: { uid: "test-user" },
77+
},
78+
});
79+
});
80+
81+
injectMultiFactorPhoneAuthNumberFormSchema.mockImplementation(() => {
82+
return () => jest.fn();
83+
});
84+
85+
injectMultiFactorPhoneAuthVerifyFormSchema.mockImplementation(() => {
86+
return () => jest.fn();
87+
});
88+
89+
injectDefaultCountry.mockImplementation(() => {
90+
return () => ({ code: "US" });
91+
});
5092
});
5193

5294
afterEach(() => {
@@ -286,6 +328,16 @@ describe("<fui-sms-multi-factor-enrollment-form />", () => {
286328
});
287329

288330
it("should throw error if user is not authenticated", async () => {
331+
// Override the injectUI mock for this test
332+
const { injectUI } = require("../../../tests/test-helpers");
333+
injectUI.mockImplementation(() => {
334+
return () => ({
335+
auth: {
336+
currentUser: null,
337+
},
338+
});
339+
});
340+
289341
const { fixture } = await render(SmsMultiFactorEnrollmentFormComponent, {
290342
imports: [
291343
CommonModule,
@@ -302,12 +354,6 @@ describe("<fui-sms-multi-factor-enrollment-form />", () => {
302354

303355
const component = fixture.componentInstance;
304356

305-
// Mock UI to return null currentUser
306-
const mockUI = {
307-
auth: { currentUser: null },
308-
};
309-
jest.spyOn(component as any, "ui").mockReturnValue(() => mockUI);
310-
311357
component.phoneForm.setFieldValue("displayName", "Test User");
312358
component.phoneForm.setFieldValue("phoneNumber", "1234567890");
313359
fixture.detectChanges();

‎packages/angular/src/lib/auth/forms/mfa/sms-multi-factor-enrollment-form.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,8 @@ export class SmsMultiFactorEnrollmentFormComponent {
177177
if (error instanceof FirebaseUIError) {
178178
return error.message;
179179
}
180+
181+
console.error(error);
180182
return this.unknownErrorLabel();
181183
}
182184
},
@@ -200,6 +202,9 @@ export class SmsMultiFactorEnrollmentFormComponent {
200202
if (error instanceof FirebaseUIError) {
201203
return error.message;
202204
}
205+
if (error instanceof Error) {
206+
return error.message;
207+
}
203208
return this.unknownErrorLabel();
204209
}
205210
},

0 commit comments

Comments
 (0)