Skip to content

Commit bd77ab4

Browse files
EhespEhesp
authored
Merge pull request #1231 from firebase/@invertase/angular-redirect-error
2 parents e80649c + 6ffd101 commit bd77ab4

17 files changed

+408
-1
lines changed

‎packages/angular/src/lib/auth/screens/email-link-auth-screen/email-link-auth-screen.component.spec.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,20 @@ import {
2626
CardContentComponent,
2727
} from "../../../components/card/card.component";
2828

29+
@Component({
30+
selector: "fui-email-link-auth-form",
31+
template: '<button class="fui-form__action fui-button">labels.sendSignInLink</button>',
32+
standalone: true,
33+
})
34+
class MockEmailLinkAuthFormComponent {}
35+
36+
@Component({
37+
selector: "fui-redirect-error",
38+
template: '<div data-testid="redirect-error">Redirect Error</div>',
39+
standalone: true,
40+
})
41+
class MockRedirectErrorComponent {}
42+
2943
@Component({
3044
template: `
3145
<fui-email-link-auth-screen>
@@ -64,6 +78,8 @@ describe("<fui-email-link-auth-screen>", () => {
6478
await render(TestHostWithoutContentComponent, {
6579
imports: [
6680
EmailLinkAuthScreenComponent,
81+
MockEmailLinkAuthFormComponent,
82+
MockRedirectErrorComponent,
6783
CardComponent,
6884
CardHeaderComponent,
6985
CardTitleComponent,
@@ -80,6 +96,8 @@ describe("<fui-email-link-auth-screen>", () => {
8096
await render(TestHostWithoutContentComponent, {
8197
imports: [
8298
EmailLinkAuthScreenComponent,
99+
MockEmailLinkAuthFormComponent,
100+
MockRedirectErrorComponent,
83101
CardComponent,
84102
CardHeaderComponent,
85103
CardTitleComponent,
@@ -97,6 +115,8 @@ describe("<fui-email-link-auth-screen>", () => {
97115
await render(TestHostWithContentComponent, {
98116
imports: [
99117
EmailLinkAuthScreenComponent,
118+
MockEmailLinkAuthFormComponent,
119+
MockRedirectErrorComponent,
100120
CardComponent,
101121
CardHeaderComponent,
102122
CardTitleComponent,
@@ -110,10 +130,30 @@ describe("<fui-email-link-auth-screen>", () => {
110130
expect(projectedContent).toHaveTextContent("Test Content");
111131
});
112132

133+
it("renders RedirectError component in children section", async () => {
134+
const { container } = await render(TestHostWithContentComponent, {
135+
imports: [
136+
EmailLinkAuthScreenComponent,
137+
MockEmailLinkAuthFormComponent,
138+
MockRedirectErrorComponent,
139+
CardComponent,
140+
CardHeaderComponent,
141+
CardTitleComponent,
142+
CardSubtitleComponent,
143+
CardContentComponent,
144+
],
145+
});
146+
147+
const redirectErrorElement = container.querySelector("fui-redirect-error");
148+
expect(redirectErrorElement).toBeInTheDocument();
149+
});
150+
113151
it("has correct CSS classes", async () => {
114152
const { container } = await render(TestHostWithoutContentComponent, {
115153
imports: [
116154
EmailLinkAuthScreenComponent,
155+
MockEmailLinkAuthFormComponent,
156+
MockRedirectErrorComponent,
117157
CardComponent,
118158
CardHeaderComponent,
119159
CardTitleComponent,
@@ -135,6 +175,8 @@ describe("<fui-email-link-auth-screen>", () => {
135175
await render(TestHostWithoutContentComponent, {
136176
imports: [
137177
EmailLinkAuthScreenComponent,
178+
MockEmailLinkAuthFormComponent,
179+
MockRedirectErrorComponent,
138180
CardComponent,
139181
CardHeaderComponent,
140182
CardTitleComponent,

‎packages/angular/src/lib/auth/screens/email-link-auth-screen/email-link-auth-screen.component.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
} from "../../../components/card/card.component";
2626
import { injectTranslation } from "../../../provider";
2727
import { EmailLinkAuthFormComponent } from "../../forms/email-link-auth-form/email-link-auth-form.component";
28+
import { RedirectErrorComponent } from "../../../components/redirect-error/redirect-error.component";
2829
import { UserCredential } from "@angular/fire/auth";
2930

3031
@Component({
@@ -38,6 +39,7 @@ import { UserCredential } from "@angular/fire/auth";
3839
CardSubtitleComponent,
3940
CardContentComponent,
4041
EmailLinkAuthFormComponent,
42+
RedirectErrorComponent,
4143
],
4244
template: `
4345
<div class="fui-screen">
@@ -48,6 +50,7 @@ import { UserCredential } from "@angular/fire/auth";
4850
</fui-card-header>
4951
<fui-card-content>
5052
<fui-email-link-auth-form (emailSent)="emailSent.emit()" (signIn)="signIn.emit($event)" />
53+
<fui-redirect-error />
5154
<ng-content></ng-content>
5255
</fui-card-content>
5356
</fui-card>

‎packages/angular/src/lib/auth/screens/forgot-password-auth-screen/forgot-password-auth-screen.component.spec.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
*/
1616

1717
import { render, screen } from "@testing-library/angular";
18+
import { Component } from "@angular/core";
1819

1920
import { ForgotPasswordAuthScreenComponent } from "./forgot-password-auth-screen.component";
2021
import {
@@ -25,6 +26,20 @@ import {
2526
CardContentComponent,
2627
} from "../../../components/card/card.component";
2728

29+
@Component({
30+
selector: "fui-forgot-password-auth-form",
31+
template: '<div class="fui-form">Forgot Password Form</div>',
32+
standalone: true,
33+
})
34+
class MockForgotPasswordAuthFormComponent {}
35+
36+
@Component({
37+
selector: "fui-redirect-error",
38+
template: '<div data-testid="redirect-error">Redirect Error</div>',
39+
standalone: true,
40+
})
41+
class MockRedirectErrorComponent {}
42+
2843
describe("<fui-forgot-password-auth-screen>", () => {
2944
beforeEach(() => {
3045
const { injectTranslation } = require("../../../provider");
@@ -45,6 +60,8 @@ describe("<fui-forgot-password-auth-screen>", () => {
4560
await render(ForgotPasswordAuthScreenComponent, {
4661
imports: [
4762
ForgotPasswordAuthScreenComponent,
63+
MockForgotPasswordAuthFormComponent,
64+
MockRedirectErrorComponent,
4865
CardComponent,
4966
CardHeaderComponent,
5067
CardTitleComponent,
@@ -61,6 +78,8 @@ describe("<fui-forgot-password-auth-screen>", () => {
6178
const { container } = await render(ForgotPasswordAuthScreenComponent, {
6279
imports: [
6380
ForgotPasswordAuthScreenComponent,
81+
MockForgotPasswordAuthFormComponent,
82+
MockRedirectErrorComponent,
6483
CardComponent,
6584
CardHeaderComponent,
6685
CardTitleComponent,
@@ -73,10 +92,30 @@ describe("<fui-forgot-password-auth-screen>", () => {
7392
expect(form).toBeInTheDocument();
7493
});
7594

95+
it("renders RedirectError component in children section when no MFA resolver", async () => {
96+
const { container } = await render(ForgotPasswordAuthScreenComponent, {
97+
imports: [
98+
ForgotPasswordAuthScreenComponent,
99+
MockForgotPasswordAuthFormComponent,
100+
MockRedirectErrorComponent,
101+
CardComponent,
102+
CardHeaderComponent,
103+
CardTitleComponent,
104+
CardSubtitleComponent,
105+
CardContentComponent,
106+
],
107+
});
108+
109+
const redirectErrorElement = container.querySelector("fui-redirect-error");
110+
expect(redirectErrorElement).toBeInTheDocument();
111+
});
112+
76113
it("has correct CSS classes", async () => {
77114
const { container } = await render(ForgotPasswordAuthScreenComponent, {
78115
imports: [
79116
ForgotPasswordAuthScreenComponent,
117+
MockForgotPasswordAuthFormComponent,
118+
MockRedirectErrorComponent,
80119
CardComponent,
81120
CardHeaderComponent,
82121
CardTitleComponent,
@@ -98,6 +137,8 @@ describe("<fui-forgot-password-auth-screen>", () => {
98137
await render(ForgotPasswordAuthScreenComponent, {
99138
imports: [
100139
ForgotPasswordAuthScreenComponent,
140+
MockForgotPasswordAuthFormComponent,
141+
MockRedirectErrorComponent,
101142
CardComponent,
102143
CardHeaderComponent,
103144
CardTitleComponent,

‎packages/angular/src/lib/auth/screens/forgot-password-auth-screen/forgot-password-auth-screen.component.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
} from "../../../components/card/card.component";
2626
import { injectTranslation } from "../../../provider";
2727
import { ForgotPasswordAuthFormComponent } from "../../forms/forgot-password-auth-form/forgot-password-auth-form.component";
28+
import { RedirectErrorComponent } from "../../../components/redirect-error/redirect-error.component";
2829

2930
@Component({
3031
selector: "fui-forgot-password-auth-screen",
@@ -37,6 +38,7 @@ import { ForgotPasswordAuthFormComponent } from "../../forms/forgot-password-aut
3738
CardSubtitleComponent,
3839
CardContentComponent,
3940
ForgotPasswordAuthFormComponent,
41+
RedirectErrorComponent,
4042
],
4143
template: `
4244
<div class="fui-screen">
@@ -47,6 +49,7 @@ import { ForgotPasswordAuthFormComponent } from "../../forms/forgot-password-aut
4749
</fui-card-header>
4850
<fui-card-content>
4951
<fui-forgot-password-auth-form (passwordSent)="passwordSent.emit()" (backToSignIn)="backToSignIn.emit()" />
52+
<fui-redirect-error />
5053
</fui-card-content>
5154
</fui-card>
5255
</div>

‎packages/angular/src/lib/auth/screens/oauth-screen/oauth-screen.component.spec.ts‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import { ContentComponent } from "../../../components/content/content.component"
3030
jest.mock("../../../provider", () => ({
3131
injectTranslation: jest.fn(),
3232
injectPolicies: jest.fn(),
33+
injectRedirectError: jest.fn(),
3334
}));
3435

3536
@Component({
@@ -39,6 +40,13 @@ jest.mock("../../../provider", () => ({
3940
})
4041
class MockPoliciesComponent {}
4142

43+
@Component({
44+
selector: "fui-redirect-error",
45+
template: '<div data-testid="redirect-error">Redirect Error</div>',
46+
standalone: true,
47+
})
48+
class MockRedirectErrorComponent {}
49+
4250
@Component({
4351
template: `
4452
<fui-oauth-screen>
@@ -71,7 +79,7 @@ class TestHostWithoutContentComponent {}
7179

7280
describe("<fui-oauth-screen>", () => {
7381
beforeEach(() => {
74-
const { injectTranslation, injectPolicies } = require("../../../provider");
82+
const { injectTranslation, injectPolicies, injectRedirectError } = require("../../../provider");
7583
injectTranslation.mockImplementation((category: string, key: string) => {
7684
const mockTranslations: Record<string, Record<string, string>> = {
7785
labels: {
@@ -88,13 +96,18 @@ describe("<fui-oauth-screen>", () => {
8896
termsOfServiceUrl: "https://example.com/terms",
8997
privacyPolicyUrl: "https://example.com/privacy",
9098
});
99+
100+
injectRedirectError.mockImplementation(() => {
101+
return () => undefined;
102+
});
91103
});
92104

93105
it("renders with correct title and subtitle", async () => {
94106
await render(TestHostWithoutContentComponent, {
95107
imports: [
96108
OAuthScreenComponent,
97109
MockPoliciesComponent,
110+
MockRedirectErrorComponent,
98111
CardComponent,
99112
CardHeaderComponent,
100113
CardTitleComponent,
@@ -113,6 +126,7 @@ describe("<fui-oauth-screen>", () => {
113126
imports: [
114127
OAuthScreenComponent,
115128
MockPoliciesComponent,
129+
MockRedirectErrorComponent,
116130
CardComponent,
117131
CardHeaderComponent,
118132
CardTitleComponent,
@@ -131,6 +145,7 @@ describe("<fui-oauth-screen>", () => {
131145
imports: [
132146
OAuthScreenComponent,
133147
MockPoliciesComponent,
148+
MockRedirectErrorComponent,
134149
CardComponent,
135150
CardHeaderComponent,
136151
CardTitleComponent,
@@ -150,6 +165,7 @@ describe("<fui-oauth-screen>", () => {
150165
imports: [
151166
OAuthScreenComponent,
152167
MockPoliciesComponent,
168+
MockRedirectErrorComponent,
153169
CardComponent,
154170
CardHeaderComponent,
155171
CardTitleComponent,
@@ -168,11 +184,31 @@ describe("<fui-oauth-screen>", () => {
168184
expect(provider2).toHaveTextContent("Provider 2");
169185
});
170186

187+
it("renders RedirectError component with children when no MFA resolver", async () => {
188+
const { container } = await render(TestHostWithContentComponent, {
189+
imports: [
190+
OAuthScreenComponent,
191+
MockPoliciesComponent,
192+
MockRedirectErrorComponent,
193+
CardComponent,
194+
CardHeaderComponent,
195+
CardTitleComponent,
196+
CardSubtitleComponent,
197+
CardContentComponent,
198+
ContentComponent,
199+
],
200+
});
201+
202+
const redirectErrorElement = container.querySelector("fui-redirect-error");
203+
expect(redirectErrorElement).toBeInTheDocument();
204+
});
205+
171206
it("has correct CSS classes", async () => {
172207
const { container } = await render(TestHostWithoutContentComponent, {
173208
imports: [
174209
OAuthScreenComponent,
175210
MockPoliciesComponent,
211+
MockRedirectErrorComponent,
176212
CardComponent,
177213
CardHeaderComponent,
178214
CardTitleComponent,
@@ -196,6 +232,7 @@ describe("<fui-oauth-screen>", () => {
196232
imports: [
197233
OAuthScreenComponent,
198234
MockPoliciesComponent,
235+
MockRedirectErrorComponent,
199236
CardComponent,
200237
CardHeaderComponent,
201238
CardTitleComponent,

‎packages/angular/src/lib/auth/screens/oauth-screen/oauth-screen.component.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
import { injectTranslation } from "../../../provider";
2727
import { PoliciesComponent } from "../../../components/policies/policies.component";
2828
import { ContentComponent } from "../../../components/content/content.component";
29+
import { RedirectErrorComponent } from "../../../components/redirect-error/redirect-error.component";
2930

3031
@Component({
3132
selector: "fui-oauth-screen",
@@ -39,6 +40,7 @@ import { ContentComponent } from "../../../components/content/content.component"
3940
CardContentComponent,
4041
PoliciesComponent,
4142
ContentComponent,
43+
RedirectErrorComponent,
4244
],
4345
template: `
4446
<div class="fui-screen">
@@ -51,6 +53,7 @@ import { ContentComponent } from "../../../components/content/content.component"
5153
<fui-content>
5254
<ng-content></ng-content>
5355
</fui-content>
56+
<fui-redirect-error />
5457
<fui-policies />
5558
</fui-card-content>
5659
</fui-card>

0 commit comments

Comments
 (0)