-
Notifications
You must be signed in to change notification settings - Fork 91
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test: add stories for auth recipe screens
- Loading branch information
Showing
7 changed files
with
655 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { userEvent, waitFor, within } from "@storybook/testing-library"; | ||
| import meta, { Args } from "./authPage.stories"; | ||
|
|
||
| type Story = StoryObj<Args>; | ||
|
|
||
| export default { | ||
| ...meta, | ||
| title: "EmailPassword/Auth", | ||
| }; | ||
|
|
||
| export const SignIn: Story = { | ||
| args: { | ||
| "multifactorauth.firstFactors": ["emailpassword"], | ||
| }, | ||
| }; | ||
| export const SignUp: Story = { | ||
| args: { | ||
| path: "/auth", | ||
| "multifactorauth.firstFactors": ["emailpassword"], | ||
| "emailpassword.defaultToSignUp": true, | ||
| }, | ||
| }; | ||
| export const SignUpFieldErrors: Story = { | ||
| args: { | ||
| path: "/auth", | ||
| "multifactorauth.firstFactors": ["emailpassword"], | ||
| "emailpassword.defaultToSignUp": true, | ||
| }, | ||
| play: async ({ canvasElement }) => { | ||
| // Assigns canvas to the component root element | ||
| const canvas = within(canvasElement); | ||
|
|
||
| const emailInput = await canvas.findByPlaceholderText("Email address"); | ||
| await new Promise((res) => setTimeout(res, 100)); | ||
| await userEvent.type(emailInput, "asdf"); | ||
| const passwordInput = await canvas.findByPlaceholderText("Password"); | ||
|
|
||
| await userEvent.type(passwordInput, "pw"); | ||
| // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel | ||
| const submitButton = await waitFor(() => canvasElement.querySelector("button[type=submit]"))!; | ||
|
|
||
| await userEvent.click(canvasElement, { delay: 200 }); | ||
| }, | ||
| }; | ||
| export const SignUpGeneralErrors: Story = { | ||
| args: { | ||
| path: "/auth", | ||
| query: "error=asdf", | ||
| "multifactorauth.firstFactors": ["emailpassword"], | ||
| "emailpassword.defaultToSignUp": true, | ||
| }, | ||
| }; | ||
|
|
||
| export const ResetPassword: Story = { | ||
| args: { | ||
| "multifactorauth.firstFactors": ["emailpassword"], | ||
| path: "/auth/reset-password", | ||
| }, | ||
| }; | ||
|
|
||
| export const ResetPasswordLinkClicked: Story = { | ||
| args: { | ||
| "multifactorauth.firstFactors": ["emailpassword"], | ||
| path: "/auth/reset-password", | ||
| query: "token=asdf", | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,185 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import meta, { Args } from "./authPage.stories"; | ||
| import { overridePWlessWithLoginAttempt } from "./utils"; | ||
|
|
||
| type Story = StoryObj<Args>; | ||
|
|
||
| export default { | ||
| ...meta, | ||
| title: "Passwordless/Auth", | ||
| }; | ||
|
|
||
| export const ContactFormCombined: Story = { | ||
| args: { | ||
| "multifactorauth.firstFactors": ["otp-email", "otp-phone"], | ||
| }, | ||
| }; | ||
|
|
||
| export const ContactFormEmail: Story = { | ||
| args: { | ||
| "multifactorauth.firstFactors": ["otp-email"], | ||
| }, | ||
| }; | ||
| export const ContactFormPhone: Story = { | ||
| args: { | ||
| "multifactorauth.firstFactors": ["otp-phone"], | ||
| }, | ||
| }; | ||
|
|
||
| export const OTPFormPhone: Story = { | ||
| args: { | ||
| "multifactorauth.firstFactors": ["otp-email", "otp-phone"], | ||
| }, | ||
| loaders: [ | ||
| async () => ({ | ||
| funcOverrides: { | ||
| passwordless: overridePWlessWithLoginAttempt({ | ||
| contactInfo: "+36701234567", | ||
| contactMethod: "PHONE", | ||
| flowType: "USER_INPUT_CODE", | ||
| lastResend: Date.now(), | ||
| deviceId: "asdf", | ||
| preAuthSessionId: "asdf", | ||
| }), | ||
| }, | ||
| }), | ||
| ], | ||
| }; | ||
|
|
||
| export const OTPFormEmail: Story = { | ||
| args: { | ||
| "multifactorauth.firstFactors": ["otp-email", "otp-phone"], | ||
| }, | ||
| loaders: [ | ||
| async () => ({ | ||
| funcOverrides: { | ||
| passwordless: overridePWlessWithLoginAttempt({ | ||
| contactInfo: "[email protected]", | ||
| contactMethod: "EMAIL", | ||
| flowType: "USER_INPUT_CODE", | ||
| lastResend: Date.now(), | ||
| deviceId: "asdf", | ||
| preAuthSessionId: "asdf", | ||
| }), | ||
| }, | ||
| }), | ||
| ], | ||
| }; | ||
| export const OTPOrLinkEmail: Story = { | ||
| args: { | ||
| "multifactorauth.firstFactors": ["otp-email", "otp-phone"], | ||
| }, | ||
| loaders: [ | ||
| async () => ({ | ||
| funcOverrides: { | ||
| passwordless: overridePWlessWithLoginAttempt({ | ||
| contactInfo: "[email protected]", | ||
| contactMethod: "EMAIL", | ||
| flowType: "USER_INPUT_CODE_AND_MAGIC_LINK", | ||
| lastResend: Date.now(), | ||
| deviceId: "asdf", | ||
| preAuthSessionId: "asdf", | ||
| }), | ||
| }, | ||
| }), | ||
| ], | ||
| }; | ||
|
|
||
| export const OTPOrLinkPhone: Story = { | ||
| args: { | ||
| "multifactorauth.firstFactors": ["otp-email", "otp-phone"], | ||
| }, | ||
| loaders: [ | ||
| async () => ({ | ||
| funcOverrides: { | ||
| passwordless: overridePWlessWithLoginAttempt({ | ||
| contactInfo: "+36701234567", | ||
| contactMethod: "PHONE", | ||
| flowType: "USER_INPUT_CODE_AND_MAGIC_LINK", | ||
| lastResend: Date.now(), | ||
| deviceId: "asdf", | ||
| preAuthSessionId: "asdf", | ||
| }), | ||
| }, | ||
| }), | ||
| ], | ||
| }; | ||
|
|
||
| export const LinkSentEmail: Story = { | ||
| args: { | ||
| "multifactorauth.firstFactors": ["otp-email", "otp-phone"], | ||
| }, | ||
| loaders: [ | ||
| async () => ({ | ||
| funcOverrides: { | ||
| passwordless: overridePWlessWithLoginAttempt({ | ||
| contactInfo: "+36701234567", | ||
| contactMethod: "PHONE", | ||
| flowType: "MAGIC_LINK", | ||
| lastResend: Date.now(), | ||
| deviceId: "asdf", | ||
| preAuthSessionId: "asdf", | ||
| }), | ||
| }, | ||
| }), | ||
| ], | ||
| }; | ||
|
|
||
| export const LinkSentPhone: Story = { | ||
| args: { | ||
| "multifactorauth.firstFactors": ["otp-email", "otp-phone"], | ||
| }, | ||
| loaders: [ | ||
| async () => ({ | ||
| funcOverrides: { | ||
| passwordless: overridePWlessWithLoginAttempt({ | ||
| contactInfo: "+36701234567", | ||
| contactMethod: "PHONE", | ||
| flowType: "MAGIC_LINK", | ||
| lastResend: Date.now(), | ||
| deviceId: "asdf", | ||
| preAuthSessionId: "asdf", | ||
| }), | ||
| }, | ||
| }), | ||
| ], | ||
| }; | ||
|
|
||
| export const OTPResend: Story = { | ||
| args: { | ||
| "multifactorauth.firstFactors": ["otp-email", "otp-phone"], | ||
| }, | ||
| loaders: [ | ||
| async () => ({ | ||
| funcOverrides: { | ||
| passwordless: overridePWlessWithLoginAttempt({ | ||
| contactInfo: "+36701234567", | ||
| contactMethod: "PHONE", | ||
| flowType: "USER_INPUT_CODE", | ||
| lastResend: Date.now() - 3600000, | ||
| deviceId: "asdf", | ||
| preAuthSessionId: "asdf", | ||
| }), | ||
| }, | ||
| }), | ||
| ], | ||
| }; | ||
| export const LinkResend: Story = { | ||
| args: { | ||
| "multifactorauth.firstFactors": ["otp-email", "otp-phone"], | ||
| }, | ||
| loaders: [ | ||
| async () => ({ | ||
| funcOverrides: { | ||
| passwordless: overridePWlessWithLoginAttempt({ | ||
| contactInfo: "+36701234567", | ||
| contactMethod: "PHONE", | ||
| flowType: "MAGIC_LINK", | ||
| lastResend: Date.now() - 3600000, | ||
| deviceId: "asdf", | ||
| preAuthSessionId: "asdf", | ||
| }), | ||
| }, | ||
| }), | ||
| ], | ||
| }; |
Oops, something went wrong.