TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-12 06:42:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: add data-testid's and some additional testing

Browse Source
This commit is contained in:
Stefan Benz
2024-10-30 18:50:32 +01:00
parent 9af39ac1bc
commit 9c041cc46f
22 changed files with 227 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
acceptance/tests/login.ts
View File

@@ -2,18 +2,23 @@ import {Page} from "@playwright/test";
export async function loginWithPassword(page: Page, username: string, password: string) {
await page.goto("/loginname");
const loginname = page.getByLabel("Loginname");
await loginname.pressSequentially(username);
await loginname.press("Enter");
const pw = page.getByLabel("Password");
await pw.pressSequentially(password);
await pw.press("Enter");
await loginnameScreen(page, username)
await page.getByTestId("submit-button").click()
await passwordScreen(page, password)
await page.getByTestId("submit-button").click()
}
export async function loginnameScreen(page: Page, username: string) {
await page.getByTestId("username-text-input").pressSequentially(username);
}
export async function passwordScreen(page: Page, password: string) {
await page.getByTestId("password-text-input").pressSequentially(password);
}
export async function loginWithPasskey(page: Page, username: string) {
await page.goto("/loginname");
const loginname = page.getByLabel("Loginname");
await loginname.pressSequentially(username);
await loginname.press("Enter");
await loginnameScreen(page, username)
await page.getByTestId("submit-button").click()
await page.getByTestId("submit-button").click()
}

10
acceptance/tests/password.ts
View File

@@ -2,11 +2,11 @@ import {Page} from "@playwright/test";
export async function changePassword(page: Page, loginname: string, password: string) {
await page.goto('password/change?' + new URLSearchParams({loginName: loginname}));
await changePasswordScreen(page, loginname, password, password)
await page.getByRole('button', {name: 'Continue'}).click();
await changePasswordScreen(page, password, password)
await page.getByTestId("submit-button").click();
}
async function changePasswordScreen(page: Page, loginname: string, password1: string, password2: string) {
await page.getByLabel('New Password *').pressSequentially(password1);
await page.getByLabel('Confirm Password *').pressSequentially(password2);
async function changePasswordScreen(page: Page, password1: string, password2: string) {
await page.getByTestId('password-text-input').pressSequentially(password1);
await page.getByTestId('password-confirm-text-input').pressSequentially(password2);
}

5
acceptance/tests/register.spec.ts
View File

@@ -3,11 +3,8 @@ import {registerWithPassword} from './register';
import {loginWithPassword} from "./login";
test("register with password", async ({page}) => {
const firstname = "firstname"
const lastname = "lastname"
const username = "register@example.com"
const password = "Password1!"
await registerWithPassword(page, firstname, lastname, username, password, password)
await page.getByRole("heading", {name: "Welcome " + lastname + " " + lastname + "!"}).click();
await registerWithPassword(page, "firstname", "lastname", username, password, password)
await loginWithPassword(page, username, password)
});

38
acceptance/tests/register.ts
View File

@@ -2,30 +2,38 @@ import {Page} from "@playwright/test";
export async function registerWithPassword(page: Page, firstname: string, lastname: string, email: string, password1: string, password2: string) {
await page.goto('/register');
await registerUserScreenPassword(page, firstname, lastname, email)
await page.getByTestId('submit-button').click();
await registerPasswordScreen(page, password1, password2)
await page.getByTestId('submit-button').click();
}
async function registerUserScreenPassword(page: Page, firstname: string, lastname: string, email: string) {
await registerUserScreen(page, firstname, lastname, email)
await page.getByLabel('Password').click();
await page.getByRole('button', {name: 'Continue'}).click();
await registerPasswordScreen(page, password1, password2)
await page.getByRole('button', {name: 'Continue'}).click();
}
async function registerPasswordScreen(page: Page, password1: string, password2: string) {
await page.getByTestId('password-text-input').fill(password1);
await page.getByTestId('password-confirm-text-input').fill(password2);
}
export async function registerWithPasskey(page: Page, firstname: string, lastname: string, email: string) {
await page.goto('/register');
await registerUserScreenPasskey(page, firstname, lastname, email)
await page.getByTestId('submit-button').click();
await page.getByTestId('submit-button').click();
}
async function registerUserScreenPasskey(page: Page, firstname: string, lastname: string, email: string) {
await registerUserScreen(page, firstname, lastname, email)
await page.getByLabel('Passkey').click();
await page.getByRole('button', {name: 'Continue'}).click();
await page.getByRole('button', {name: 'Continue'}).click();
}
async function registerUserScreen(page: Page, firstname: string, lastname: string, email: string) {
await page.getByLabel('First name *').pressSequentially(firstname);
await page.getByLabel('Last name *').pressSequentially(lastname);
await page.getByLabel('E-mail *').pressSequentially(email);
await page.getByRole('checkbox').first().check();
await page.getByRole('checkbox').nth(1).check();
}
async function registerPasswordScreen(page: Page, password1: string, password2: string) {
await page.getByLabel('Password *', {exact: true}).fill(password1);
await page.getByLabel('Confirm Password *').fill(password2);
await page.getByTestId('firstname-text-input').pressSequentially(firstname);
await page.getByTestId('lastname-text-input').pressSequentially(lastname);
await page.getByTestId('email-text-input').pressSequentially(email);
await page.getByTestId('privacy-policy-checkbox').check();
await page.getByTestId('tos-checkbox').check();
}

154
acceptance/tests/user.ts
View File

@@ -1,4 +1,4 @@
import fetch from 'node-fetch';
import fetch from "node-fetch";
import {Page} from "@playwright/test";
import {registerWithPasskey} from "./register";
import {loginWithPasskey, loginWithPassword} from "./login";
@@ -20,7 +20,7 @@ class User {
this.props = userProps;
}
async ensure() {
async ensure(page: Page) {
await this.remove()
const body = {
@@ -72,6 +72,10 @@ class User {
return
}
public setUserId(userId: string) {
this.user = userId
}
public userId() {
return this.user;
}
@@ -84,6 +88,14 @@ class User {
return this.props.password;
}
public firstname() {
return this.props.firstName
}
public lastname() {
return this.props.lastName
}
public fullName() {
return this.props.firstName + " " + this.props.lastName
}
@@ -102,6 +114,73 @@ class User {
export class PasswordUser extends User {
}
enum OtpType {
time = "time-based",
sms = "sms",
email = "email",
}
export interface otpUserProps {
email: string;
firstName: string;
lastName: string;
organization: string;
type: OtpType,
}
export class PasswordUserWithOTP extends User {
private type: OtpType
private code: string
constructor(props: otpUserProps) {
super({
email: props.email,
firstName: props.firstName,
lastName: props.lastName,
organization: props.organization,
password: ""
})
this.type = props.type
}
async ensure(page: Page) {
await super.ensure(page)
const body = {
username: this.props.email,
organization: {
orgId: this.props.organization
},
profile: {
givenName: this.props.firstName,
familyName: this.props.lastName,
},
email: {
email: this.props.email,
isVerified: true,
},
password: {
password: this.props.password!,
}
}
const response = await fetch(process.env.ZITADEL_API_URL! + "/v2/users/human", {
method: 'POST',
body: JSON.stringify(body),
headers: {
'Content-Type': 'application/json',
'Authorization': "Bearer " + process.env.ZITADEL_SERVICE_USER_TOKEN!
}
});
if (response.statusCode >= 400 && response.statusCode != 409) {
const error = 'HTTP Error: ' + response.statusCode + ' - ' + response.statusMessage;
console.error(error);
throw new Error(error);
}
return
}
}
export interface passkeyUserProps {
email: string;
firstName: string;
@@ -109,67 +188,58 @@ export interface passkeyUserProps {
organization: string;
}
export class PasskeyUser {
private props: passkeyUserProps
export class PasskeyUser extends User {
constructor(props: passkeyUserProps) {
this.props = props
super({
email: props.email,
firstName: props.firstName,
lastName: props.lastName,
organization: props.organization,
password: ""
})
}
async ensurePasskey(page: Page) {
await registerWithPasskey(page, this.props.firstName, this.props.lastName, this.props.email)
public async ensure(page: Page) {
await this.remove()
await registerWithPasskey(page, this.firstname(), this.lastname(), this.username())
}
public async login(page: Page) {
await loginWithPasskey(page, this.props.email)
await loginWithPasskey(page, this.username())
}
public fullName() {
return this.props.firstName + " " + this.props.lastName
public async remove() {
const resp = await getUserByUsername(this.username())
if (!resp || !resp.result || !resp.result[0]) {
return
}
this.setUserId(resp.result[0].userId)
await super.remove()
}
}
async ensurePasskeyRegister() {
const url = new URL(process.env.ZITADEL_API_URL!)
const registerBody = {
domain: url.hostname,
async function getUserByUsername(username: string) {
const listUsersBody = {
queries: [{
userNameQuery: {
userName: username,
}
const userId = ""
const registerResponse = await fetch(process.env.ZITADEL_API_URL! + "/v2/users/" + userId + "/passkeys", {
}]
}
const jsonBody = JSON.stringify(listUsersBody)
const registerResponse = await fetch(process.env.ZITADEL_API_URL! + "/v2/users", {
method: 'POST',
body: JSON.stringify(registerBody),
body: jsonBody,
headers: {
'Content-Type': 'application/json',
'Authorization': "Bearer " + process.env.ZITADEL_SERVICE_USER_TOKEN!
}
});
if (registerResponse.statusCode >= 400 && registerResponse.statusCode != 409) {
if (registerResponse.statusCode >= 400) {
const error = 'HTTP Error: ' + registerResponse.statusCode + ' - ' + registerResponse.statusMessage;
console.error(error);
throw new Error(error);
}
const respJson = await registerResponse.json()
return respJson
}
async ensurePasskeyVerify(passkeyId: string, credential: Credential) {
const verifyBody = {
publicKeyCredential: credential,
passkeyName: "passkey",
}
const userId = ""
const verifyResponse = await fetch(process.env.ZITADEL_API_URL! + "/v2/users/" + userId + "/passkeys/" + passkeyId, {
method: 'POST',
body: JSON.stringify(verifyBody),
headers: {
'Content-Type': 'application/json',
'Authorization': "Bearer " + process.env.ZITADEL_SERVICE_USER_TOKEN!
}
});
if (verifyResponse.statusCode >= 400 && verifyResponse.statusCode != 409) {
const error = 'HTTP Error: ' + verifyResponse.statusCode + ' - ' + verifyResponse.statusMessage;
console.error(error);
throw new Error(error);
}
return
}
}

7
acceptance/tests/username-passkey.spec.ts
View File

@@ -1,5 +1,7 @@
import {test as base} from "@playwright/test";
import path from 'path';
import dotenv from 'dotenv';
import {PasskeyUser} from "./user";
// Read from ".env" file.
dotenv.config({path: path.resolve(__dirname, '.env.local')});
@@ -86,7 +88,7 @@ const test = base.extend<{ user: PasskeyUser }>({
enabled: false,
});
},
});
});*/
const test = base.extend<{ user: PasskeyUser }>({
user: async ({page}, use) => {
@@ -96,7 +98,7 @@ const test = base.extend<{ user: PasskeyUser }>({
lastName: "last",
organization: "",
});
await user.ensurePasskey(page);
await user.ensure(page);
await use(user)
},
});
@@ -105,4 +107,3 @@ test("username and passkey login", async ({user, page}) => {
await user.login(page)
await page.getByRole("heading", {name: "Welcome " + user.fullName() + "!"}).click();
});
*/

2
acceptance/tests/username-password-changed.spec.ts
View File

@@ -15,7 +15,7 @@ const test = base.extend<{ user: PasswordUser }>({
password: "Password1!",
organization: "",
});
await user.ensure();
await user.ensure(page);
await use(user);
},
});

2
acceptance/tests/username-password.spec.ts
View File

@@ -15,7 +15,7 @@ const test = base.extend<{ user: PasswordUser }>({
password: "Password1!",
organization: "",
});
await user.ensure();
await user.ensure(page);
await use(user);
},
});

5
apps/login/src/components/change-password-form.tsx
View File

@@ -140,6 +140,7 @@ export function ChangePasswordForm({
})}
label="New Password"
error={errors.password?.message as string}
data-testid="password-text-input"
/>
</div>
<div className="">
@@ -152,6 +153,7 @@ export function ChangePasswordForm({
})}
label="Confirm Password"
error={errors.confirmPassword?.message as string}
data-testid="password-confirm-text-input"
/>
</div>
</div>
@@ -167,7 +169,7 @@ export function ChangePasswordForm({
{error && <Alert>{error}</Alert>}
<div className="mt-8 flex w-full flex-row items-center justify-between">
<BackButton />
<BackButton data-testid="back-button" />
<Button
type="submit"
variant={ButtonVariants.Primary}
@@ -178,6 +180,7 @@ export function ChangePasswordForm({
watchPassword !== watchConfirmPassword
}
onClick={handleSubmit(submitChange)}
data-testid="submit-button"
>
{loading && <Spinner className="h-5 w-5 mr-2" />}
{t("change.submit")}

3
apps/login/src/components/login-otp.tsx
View File

@@ -235,7 +235,7 @@ export function LoginOTP({
)}
<div className="mt-8 flex w-full flex-row items-center">
<BackButton />
<BackButton data-testid="back-button" />
<span className="flex-grow"></span>
<Button
type="submit"
@@ -245,6 +245,7 @@ export function LoginOTP({
onClick={handleSubmit((e) => {
setCodeAndContinue(e, organization);
})}
data-testid="submit-button"
>
{loading && <Spinner className="h-5 w-5 mr-2" />}
{t("verify.submit")}

2
apps/login/src/components/login-passkey.tsx
View File

@@ -229,6 +229,7 @@ export function LoginPasskey({
"/password?" + new URLSearchParams(params), // alt is set because password is requested as alternative auth method, so passwordless prompt can be escaped
);
}}
data-testid="password-button"
>
{t("verify.usePassword")}
</Button>
@@ -263,6 +264,7 @@ export function LoginPasskey({
setLoading(false);
});
}}
data-testid="submit-button"
>
{loading && <Spinner className="h-5 w-5 mr-2" />}
{t("verify.submit")}

4
apps/login/src/components/password-form.tsx
View File

@@ -120,6 +120,7 @@ export function PasswordForm({
autoComplete="password"
{...register("password", { required: "This field is required" })}
label="Password"
data-testid="password-text-input"
/>
{!loginSettings?.hidePasswordReset && (
<button
@@ -155,7 +156,7 @@ export function PasswordForm({
)}
<div className="mt-8 flex w-full flex-row items-center">
<BackButton />
<BackButton data-testid="back-button" />
<span className="flex-grow"></span>
<Button
type="submit"
@@ -163,6 +164,7 @@ export function PasswordForm({
variant={ButtonVariants.Primary}
disabled={loading || !formState.isValid}
onClick={handleSubmit(submitPassword)}
data-testid="submit-button"
>
{loading && <Spinner className="h-5 w-5 mr-2" />}
{t("verify.submit")}

2
apps/login/src/components/privacy-policy-checkboxes.tsx
View File

@@ -60,6 +60,7 @@ export function PrivacyPolicyCheckboxes({ legal, onChange }: Props) {
});
onChange(checked && acceptanceState.privacyPolicyAccepted);
}}
data-testid="privacy-policy-checkbox"
/>
<div className="mr-4 w-[28rem]">
@@ -84,6 +85,7 @@ export function PrivacyPolicyCheckboxes({ legal, onChange }: Props) {
});
onChange(checked && acceptanceState.tosAccepted);
}}
data-testid="tos-checkbox"
/>
<div className="mr-4 w-[28rem]">

6
apps/login/src/components/register-form-without-password.tsx
View File

@@ -131,6 +131,7 @@ export function RegisterFormWithoutPassword({
{...register("firstname", { required: "This field is required" })}
label="First name"
error={errors.firstname?.message as string}
data-testid="firstname-text-input"
/>
</div>
<div className="">
@@ -141,6 +142,7 @@ export function RegisterFormWithoutPassword({
{...register("lastname", { required: "This field is required" })}
label="Last name"
error={errors.lastname?.message as string}
data-testid="lastname-text-input"
/>
</div>
<div className="col-span-2">
@@ -151,6 +153,7 @@ export function RegisterFormWithoutPassword({
{...register("email", { required: "This field is required" })}
label="E-mail"
error={errors.email?.message as string}
data-testid="email-text-input"
/>
</div>
</div>
@@ -180,7 +183,7 @@ export function RegisterFormWithoutPassword({
)}
<div className="mt-8 flex w-full flex-row items-center justify-between">
<BackButton />
<BackButton data-testid="back-button" />
<Button
type="submit"
variant={ButtonVariants.Primary}
@@ -188,6 +191,7 @@ export function RegisterFormWithoutPassword({
onClick={handleSubmit((values) =>
submitAndContinue(values, selected === methods[0] ? false : true),
)}
data-testid="submit-button"
>
{loading && <Spinner className="h-5 w-5 mr-2" />}
{t("submit")}

1
apps/login/src/components/register-passkey.tsx
View File

@@ -189,6 +189,7 @@ export function RegisterPasskey({
variant={ButtonVariants.Primary}
disabled={loading || !formState.isValid}
onClick={handleSubmit(submitRegisterAndContinue)}
data-testid="submit-button"
>
{loading && <Spinner className="h-5 w-5 mr-2" />}
{t("set.submit")}

3
apps/login/src/components/register-u2f.tsx
View File

@@ -190,7 +190,7 @@ export function RegisterU2f({
)}
<div className="mt-8 flex w-full flex-row items-center">
<BackButton />
<BackButton data-testid="back-button" />
<span className="flex-grow"></span>
<Button
@@ -199,6 +199,7 @@ export function RegisterU2f({
variant={ButtonVariants.Primary}
disabled={loading}
onClick={submitRegisterAndContinue}
data-testid="submit-button"
>
{loading && <Spinner className="h-5 w-5 mr-2" />}
{t("set.submit")}

3
apps/login/src/components/set-password-form.tsx
View File

@@ -207,7 +207,7 @@ export function SetPasswordForm({
{error && <Alert>{error}</Alert>}
<div className="mt-8 flex w-full flex-row items-center justify-between">
<BackButton />
<BackButton data-testid="back-button" />
<Button
type="submit"
variant={ButtonVariants.Primary}
@@ -218,6 +218,7 @@ export function SetPasswordForm({
watchPassword !== watchConfirmPassword
}
onClick={handleSubmit(submitRegister)}
data-testid="submit-button"
>
{loading && <Spinner className="h-5 w-5 mr-2" />}
{t("set.submit")}

3
apps/login/src/components/set-register-password-form.tsx
View File

@@ -149,6 +149,7 @@ export function SetRegisterPasswordForm({
})}
label="Password"
error={errors.password?.message as string}
data-testid="password-text-input"
/>
</div>
<div className="">
@@ -161,6 +162,7 @@ export function SetRegisterPasswordForm({
})}
label="Confirm Password"
error={errors.confirmPassword?.message as string}
data-testid="password-confirm-text-input"
/>
</div>
</div>
@@ -187,6 +189,7 @@ export function SetRegisterPasswordForm({
watchPassword !== watchConfirmPassword
}
onClick={handleSubmit(submitRegister)}
data-testid="submit-button"
>
{loading && <Spinner className="h-5 w-5 mr-2" />}
{t("password.submit")}

2
apps/login/src/components/totp-register.tsx
View File

@@ -122,6 +122,7 @@ export function TotpRegister({
type="text"
{...register("code", { required: "This field is required" })}
label="Code"
data-testid="code-text-input"
/>
</div>
@@ -139,6 +140,7 @@ export function TotpRegister({
variant={ButtonVariants.Primary}
disabled={loading || !formState.isValid}
onClick={handleSubmit(continueWithCode)}
data-testid="submit-button"
>
{loading && <Spinner className="h-5 w-5 mr-2" />}
{t("set.submit")}

5
apps/login/src/components/username-form.tsx
View File

@@ -80,6 +80,7 @@ export function UsernameForm({
autoComplete="username"
{...register("loginName", { required: "This field is required" })}
label="Loginname"
data-testid="username-text-input"
/>
{allowRegister && (
<button
@@ -97,6 +98,7 @@ export function UsernameForm({
}}
type="button"
disabled={loading}
data-testid="register-button"
>
{t("register")}
</button>
@@ -112,9 +114,10 @@ export function UsernameForm({
<div className="pt-6 pb-4">{children}</div>
<div className="mt-4 flex w-full flex-row items-center">
<BackButton />
<BackButton data-testid="back-button" />
<span className="flex-grow"></span>
<Button
data-testid="submit-button"
type="submit"
className="self-end"
variant={ButtonVariants.Primary}

3
apps/login/src/components/verify-email-form.tsx
View File

@@ -110,6 +110,7 @@ export function VerifyEmailForm({
autoComplete="one-time-code"
{...register("code", { required: "This field is required" })}
label="Code"
data-testid="code-text-input"
// error={errors.username?.message as string}
/>
</div>
@@ -125,6 +126,7 @@ export function VerifyEmailForm({
type="button"
onClick={() => resendCode()}
variant={ButtonVariants.Secondary}
data-testid="resend-button"
>
{t("resendCode")}
</Button>
@@ -135,6 +137,7 @@ export function VerifyEmailForm({
variant={ButtonVariants.Primary}
disabled={loading || !formState.isValid}
onClick={handleSubmit(submitCodeAndContinue)}
data-testid="submit-button"
>
{loading && <Spinner className="h-5 w-5 mr-2" />}
{t("submit")}

13
apps/login/src/lib/server/register.ts
View File

@@ -34,11 +34,16 @@ export async function registerUser(command: RegisterUserCommand) {
return { error: "Could not create user" };
}
const checks = create(ChecksSchema, {
user: { search: { case: "userId", value: human.userId } },
password: { password: command.password },
let checks = create(ChecksSchema, {
user: {search: {case: "userId", value: human.userId}},
});
if (command.password) {
checks = create(ChecksSchema, {
user: {search: {case: "userId", value: human.userId}},
password: {password: command.password}
});
}
console.log(checks)
return createSessionAndUpdateCookie(
checks,
undefined,