diff --git a/apps/web/playwright/onboarding.e2e.ts b/apps/web/playwright/onboarding.e2e.ts index 72696117aa..b516f9e693 100644 --- a/apps/web/playwright/onboarding.e2e.ts +++ b/apps/web/playwright/onboarding.e2e.ts @@ -1,157 +1,80 @@ +/* eslint-disable playwright/no-skipped-test */ import { expect } from "@playwright/test"; import { UserPlan } from "@prisma/client"; import { test } from "./lib/fixtures"; -test.describe.configure({ mode: "parallel" }); +test.describe.configure({ mode: "serial" }); test.describe("Onboarding", () => { test.describe("Onboarding v2", () => { - test("test onboarding v2 new user first step", async ({ page, users }) => { - const user = await users.create({ plan: UserPlan.TRIAL, completedOnboarding: false, name: "new user" }); + test("Onboarding Flow", async ({ page, users }) => { + const user = await users.create({ plan: UserPlan.TRIAL, completedOnboarding: false, name: null }); await user.login(); - await page.goto("/getting-started"); - // First step - const usernameInput = await page.locator("input[name=username]"); - await usernameInput.fill("new user onboarding"); + // tests whether the user makes it to /getting-started + // after login with completedOnboarding false + await page.waitForURL("/getting-started"); - const nameInput = await page.locator("input[name=name]"); - await nameInput.fill("new user 2"); + await test.step("step 1", async () => { + // Check required fields + await page.locator("button[type=submit]").click(); + await expect(page.locator("data-testid=required")).toBeVisible(); - const timezoneSelect = await page.locator("input[role=combobox]"); - await timezoneSelect.click(); - const timezoneOption = await page.locator("text=Eastern Time"); - await timezoneOption.click(); + // happy path + await page.locator("input[name=username]").fill("new user onboarding"); + await page.locator("input[name=name]").fill("new user 2"); + await page.locator("input[role=combobox]").click(); + await page.locator("text=Eastern Time").click(); - const nextButtonUserProfile = await page.locator("button[type=submit]"); - await nextButtonUserProfile.click(); + await page.locator("button[type=submit]").click(); - await expect(page).toHaveURL(/.*connected-calendar/); + // should be on step 2 now. + await expect(page).toHaveURL(/.*connected-calendar/); - const userComplete = await user.self(); - expect(userComplete.name).toBe("new user 2"); - }); - - test("test onboarding v2 new user second step", async ({ page, users }) => { - const user = await users.create({ plan: UserPlan.TRIAL, completedOnboarding: false, name: "new user" }); - await user.login(); - await page.goto("/getting-started/connected-calendar"); - - // Second step - const nextButtonCalendar = await page.locator("button[data-testid=save-calendar-button]"); - const isDisabled = await nextButtonCalendar.isDisabled(); - await expect(isDisabled).toBe(true); - - const skipStepButton = await page.locator("button[data-testid=skip-step]"); - await skipStepButton.click(); - await expect(page).toHaveURL(/.*setup-availability/); - // @TODO: make sure calendar UL list has at least 1 item - }); - - test("test onboarding v2 new user third step", async ({ page, users }) => { - const user = await users.create({ plan: UserPlan.TRIAL, completedOnboarding: false, name: "new user" }); - await user.login(); - await page.goto("/getting-started/setup-availability"); - - // Third step - - const nextButtonAvailability = await page.locator("button[data-testid=save-availability]"); - const isDisabled = await nextButtonAvailability.isDisabled(); - await expect(isDisabled).toBe(false); - - const skipStepButton = await page.locator("button[data-testid=skip-step]"); - await skipStepButton.click(); - await expect(page).toHaveURL(/.*user-profile/); - }); - - test("test onboarding v2 new user fourth step", async ({ page, users }) => { - const user = await users.create({ plan: UserPlan.TRIAL, completedOnboarding: false, name: "new user" }); - await user.login(); - await page.goto("/getting-started/user-profile"); - - // Fourth step - - const finishButton = await page.locator("button[type=submit]"); - const bioInput = await page.locator("textarea[name=bio]"); - await bioInput.fill("Something about me"); - const isDisabled = await finishButton.isDisabled(); - await expect(isDisabled).toBe(false); - await finishButton.click(); - - await expect(page).toHaveURL(/.*event-types/); - - const userComplete = await user.self(); - expect(userComplete.bio).toBe("Something about me"); - }); - }); - - test.describe("Onboarding v2 required field test", () => { - test("test onboarding v2 new user first step required fields", async ({ page, users }) => { - const user = await users.create({ - plan: UserPlan.TRIAL, - completedOnboarding: false, - name: null, - username: null, + const userComplete = await user.self(); + expect(userComplete.name).toBe("new user 2"); }); - await user.login(); - await page.goto("/getting-started"); + await test.step("step 2", async () => { + const isDisabled = await page.locator("button[data-testid=save-calendar-button]").isDisabled(); + await expect(isDisabled).toBe(true); + // tests skip button, we don't want to test entire flow. + await page.locator("button[data-testid=skip-step]").click(); - // First step - const nextButtonUserProfile = await page.locator("button[type=submit]"); - await nextButtonUserProfile.click(); - - const requiredName = await page.locator("data-testid=required"); - await expect(requiredName).toBeVisible(); - }); - - test("test onboarding v2 new user fourth step required fields", async ({ page, users }) => { - const user = await users.create({ - plan: UserPlan.TRIAL, - completedOnboarding: false, + await expect(page).toHaveURL(/.*setup-availability/); }); - await user.login(); - await page.goto("/getting-started/user-profile"); + await test.step("step 3", async () => { + const isDisabled = await page.locator("button[data-testid=save-availability]").isDisabled(); + await expect(isDisabled).toBe(false); + // same here, skip this step. + await page.locator("button[data-testid=skip-step]").click(); - // Fourth step + await expect(page).toHaveURL(/.*user-profile/); + }); - const finishButton = await page.locator("button[type=submit]"); - await finishButton.click(); + await test.step("step 4", async () => { + const finishButton = await page.locator("button[type=submit]"); + // bio field is required, try to submit (and test whether that fails) + await finishButton.click(); - const requiredBio = await page.locator("data-testid=required"); - await expect(requiredBio).toBeVisible(); + const requiredBio = await page.locator("data-testid=required"); + await expect(requiredBio).toBeVisible(); + + await page.locator("textarea[name=bio]").fill("Something about me"); + + const isDisabled = await finishButton.isDisabled(); + await expect(isDisabled).toBe(false); + + await finishButton.click(); + + // should redirect to /event-types after onboarding + await page.waitForURL("/event-types"); + + const userComplete = await user.self(); + expect(userComplete.bio).toBe("Something about me"); + }); }); }); - - test.describe("Onboarding redirects", () => { - test("redirects to /getting-started after login", async ({ page }) => { - await page.goto("/event-types"); - await page.waitForNavigation(); - }); - - // @TODO: temporary disabled due to flakiness - // test("test onboarding v2 new user simulate add calendar redirect", async ({ page, users }) => { - // const user = await users.create({ - // plan: UserPlan.TRIAL, - // completedOnboarding: false, - // }); - - // await user.login(); - // const url = await page.url(); - // await page.context().addCookies([ - // { - // name: "return-to", - // value: "/getting-started/connected-calendar", - // expires: 9999999999, - // url, - // }, - // ]); - - // await page.goto("/apps/installed"); - - // await expect(page).toHaveURL(/.*connected-calendar/); - // }); - }); });