From a90baa91c7f590a4e223a3b8e648116d7b64afb8 Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Fri, 7 Jun 2024 13:35:04 +0200
Subject: [PATCH] :sparkles: Add integration test to the onboarding process

---
 frontend/playwright/ui/pages/DashboardPage.js |  5 ---
 .../playwright/ui/pages/OnboardingPage.js     | 45 +++++++++++++++++++
 .../playwright/ui/specs/dashboard.spec.js     |  5 +++
 .../playwright/ui/specs/onboarding.spec.js    | 32 +++++++++++++
 4 files changed, 82 insertions(+), 5 deletions(-)
 create mode 100644 frontend/playwright/ui/pages/OnboardingPage.js
 create mode 100644 frontend/playwright/ui/specs/onboarding.spec.js

diff --git a/frontend/playwright/ui/pages/DashboardPage.js b/frontend/playwright/ui/pages/DashboardPage.js
index 285e47d95..e83c62dd9 100644
--- a/frontend/playwright/ui/pages/DashboardPage.js
+++ b/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,
diff --git a/frontend/playwright/ui/pages/OnboardingPage.js b/frontend/playwright/ui/pages/OnboardingPage.js
new file mode 100644
index 000000000..0fe68e78a
--- /dev/null
+++ b/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;
diff --git a/frontend/playwright/ui/specs/dashboard.spec.js b/frontend/playwright/ui/specs/dashboard.spec.js
index 145c1321a..23e71efad 100644
--- a/frontend/playwright/ui/specs/dashboard.spec.js
+++ b/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 }) => {
diff --git a/frontend/playwright/ui/specs/onboarding.spec.js b/frontend/playwright/ui/specs/onboarding.spec.js
new file mode 100644
index 000000000..39efa967c
--- /dev/null
+++ b/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();
+});