✨ Add integration test to the onboarding process

frontend/playwright/ui/pages/DashboardPage.js

@@ -4,11 +4,6 @@ export class DashboardPage extends BaseWebSocketPage {
   static async init(page) {
     await BaseWebSocketPage.initWebSockets(page);
 
-    await BaseWebSocketPage.mockRPC(
-      page,
-      "get-profile",
-      "logged-in-user/get-profile-logged-in-no-onboarding.json",
-    );
     await BaseWebSocketPage.mockRPC(page, "get-teams", "logged-in-user/get-teams-default.json");
     await BaseWebSocketPage.mockRPC(
       page,

frontend/playwright/ui/pages/OnboardingPage.js

@@ -0,0 +1,45 @@
+import { BaseWebSocketPage } from "./BaseWebSocketPage";
+
+export class OnboardingPage extends BaseWebSocketPage {
+  constructor(page) {
+    super(page);
+    this.submitButton = page.getByRole("Button",{ name: "Next" })
+  }
+
+  async fillOnboardingInputsStep1() {
+    await this.page.getByText('Personal').click();
+    await this.page.getByText('Select option').click();
+    await this.page.getByText('Testing before self-hosting').click();
+
+    await this.submitButton.click();
+  }
+
+  async fillOnboardingInputsStep2() {
+    await this.page.getByText('Figma').click();
+
+    await this.submitButton.click();
+  }
+
+  async fillOnboardingInputsStep3() {
+    await this.page.getByText('Select option').first().click();
+    await this.page.getByText('Product Managment').click();
+    await this.page.getByText('Select option').first().click();
+    await this.page.getByText('Director').click();
+    await this.page.getByText('Select option').click();
+    await this.page.getByText('11-30').click();
+
+    await this.submitButton.click();
+  }
+
+  async fillOnboardingInputsStep4() {
+    await this.page.getByText('Other').click();
+    await this.page.getByPlaceholder('Other (specify)').fill("Another");
+    await this.submitButton.click();
+  }
+
+  async fillOnboardingInputsStep5() {
+    await this.page.getByText('Event').click();
+  }
+}
+
+export default OnboardingPage;

frontend/playwright/ui/specs/dashboard.spec.js

@@ -3,6 +3,11 @@ import DashboardPage from "../pages/DashboardPage";
 
 test.beforeEach(async ({ page }) => {
   await DashboardPage.init(page);
+  await DashboardPage.mockRPC(
+    page,
+    "get-profile",
+    "logged-in-user/get-profile-logged-in-no-onboarding.json",
+  );
 });
 
 test("Dashboad page has title ", async ({ page }) => {

frontend/playwright/ui/specs/onboarding.spec.js

@@ -0,0 +1,32 @@
+import { test, expect } from "@playwright/test";
+import DashboardPage from "../pages/DashboardPage";
+ import OnboardingPage from "../pages/OnboardingPage"
+
+test.beforeEach(async ({ page }) => {
+  await DashboardPage.init(page);
+  await DashboardPage.mockRPC(page, "get-profile", "logged-in-user/get-profile-logged-in.json");
+});
+
+
+test("User can complete the onboarding", async ({ page }) => {
+  const dashboardPage = new DashboardPage(page);
+  const onboardingPage = new OnboardingPage(page);
+
+  await dashboardPage.goToWorkspace();
+  await expect(page.getByRole("heading", { name: "Help us get to know you" })).toBeVisible();
+
+  await onboardingPage.fillOnboardingInputsStep1();
+  await expect(page.getByRole("heading", { name: "Which one of these tools do" })).toBeVisible();
+
+  await onboardingPage.fillOnboardingInputsStep2();
+  await expect(page.getByRole("heading", { name: "Tell us about your job" })).toBeVisible();
+
+  await onboardingPage.fillOnboardingInputsStep3();
+  await expect(page.getByRole("heading", { name: "Where would you like to get" })).toBeVisible();
+
+  await onboardingPage.fillOnboardingInputsStep4();
+  await expect(page.getByRole("heading", { name: "How did you hear about Penpot?" })).toBeVisible();
+
+  await onboardingPage.fillOnboardingInputsStep5();
+  await expect(page.getByRole("button", { name: "Start" })).toBeEnabled();
+});