From e630cb068e43e5e4df5f7cca04d0adb7202167b8 Mon Sep 17 00:00:00 2001 From: Po Chun Chiu <57251712+EiffelFly@users.noreply.github.com> Date: Fri, 18 Oct 2024 17:07:12 +0900 Subject: [PATCH] fix: fix onboarding form e2e (#1545) Because - fix onboarding form e2e This commit - fix onboarding form e2e --- apps/console/integration-test/data-testid.ts | 6 ------ .../helpers/actions/pipeline.ts | 3 ++- .../integration-test/pages/onboarding.page.ts | 21 ++++++++++++------- .../tests/should-change-component-id.test.ts | 3 ++- .../console/src/components/OnboardingForm.tsx | 6 +++++- packages/toolkit/src/constant/data-testid.ts | 1 + 6 files changed, 23 insertions(+), 17 deletions(-) delete mode 100644 apps/console/integration-test/data-testid.ts diff --git a/apps/console/integration-test/data-testid.ts b/apps/console/integration-test/data-testid.ts deleted file mode 100644 index 3def766381..0000000000 --- a/apps/console/integration-test/data-testid.ts +++ /dev/null @@ -1,6 +0,0 @@ -export const DataTestID = { - deleteResourceDialog: "delete-resource-dialog", - setupComponentDialog: "setup-component-dialog", - createPipelineDialog: "create-pipeline-dialog", - SelectComponentDialog: "select-component-dialog", -}; diff --git a/apps/console/integration-test/helpers/actions/pipeline.ts b/apps/console/integration-test/helpers/actions/pipeline.ts index 04e7fae42e..a9568b207c 100644 --- a/apps/console/integration-test/helpers/actions/pipeline.ts +++ b/apps/console/integration-test/helpers/actions/pipeline.ts @@ -1,6 +1,7 @@ import { Page } from "@playwright/test"; -import { DataTestID } from "../../data-testid"; +import { DataTestID } from "@instill-ai/toolkit"; + import { PipelineBuilderPage } from "../../pages/pipeline-builder.page"; import { PipelineListPage } from "../../pages/pipeline-list"; import { PipelineOverviewPage } from "../../pages/pipeline-overview.page"; diff --git a/apps/console/integration-test/pages/onboarding.page.ts b/apps/console/integration-test/pages/onboarding.page.ts index f69980e688..ddcb613a9d 100644 --- a/apps/console/integration-test/pages/onboarding.page.ts +++ b/apps/console/integration-test/pages/onboarding.page.ts @@ -3,23 +3,26 @@ import { expect, Locator, Page } from "@playwright/test"; export class OnboardingPage { readonly page: Page; readonly emailField: Locator; - readonly companyField: Locator; + readonly displayNameField: Locator; + readonly companyNameField: Locator; readonly roleField: Locator; readonly roleOption: Locator; readonly submitButton: Locator; readonly onboardingPagePath = "/onboarding"; readonly testEmail = "hello@instill.tech"; + readonly testDisplayName = "Instill AI"; readonly testCompany = "Instill AI"; - readonly testRole = "Product & Design"; + readonly testRole = "Customer Service"; readonly pipelinePagePath = "/admin/pipelines"; constructor(page: Page) { this.page = page; - this.emailField = page.locator("input#email"); - this.companyField = page.locator("input#org-name"); - this.roleField = page.locator("button#role"); - this.roleOption = page.getByRole("option", { name: this.testRole }); + this.emailField = page.locator('input[name="email"]'); + this.displayNameField = page.locator('input[name="displayName"]'); + this.companyNameField = page.locator('input[name="companyName"]'); + this.roleField = page.getByTestId("onboarding-form-role-field"); + this.roleOption = page.getByLabel(this.testRole); this.submitButton = page.getByRole("button", { name: "Start" }); } @@ -34,8 +37,10 @@ export class OnboardingPage { async fillInOnboardingForm() { await this.emailField.fill(this.testEmail); expect(this.emailField).toHaveValue(this.testEmail); - await this.companyField.fill(this.testCompany); - expect(this.companyField).toHaveValue(this.testCompany); + await this.displayNameField.fill(this.testDisplayName); + expect(this.displayNameField).toHaveValue(this.testDisplayName); + await this.companyNameField.fill(this.testCompany); + expect(this.companyNameField).toHaveValue(this.testCompany); await this.roleField.click(); await this.roleOption.click(); expect(this.roleField).toHaveText(this.testRole); diff --git a/apps/console/integration-test/tests/should-change-component-id.test.ts b/apps/console/integration-test/tests/should-change-component-id.test.ts index 5e0e02a632..d776cc95cf 100644 --- a/apps/console/integration-test/tests/should-change-component-id.test.ts +++ b/apps/console/integration-test/tests/should-change-component-id.test.ts @@ -1,6 +1,7 @@ import { expect, test } from "@playwright/test"; -import { DataTestID } from "../data-testid"; +import { DataTestID } from "@instill-ai/toolkit"; + import { createPipeline, deletePipeline } from "../helpers/actions/pipeline"; import { getSelectContent } from "../helpers/component-helpers/select"; import { PipelineBuilderPage } from "../pages/pipeline-builder.page"; diff --git a/apps/console/src/components/OnboardingForm.tsx b/apps/console/src/components/OnboardingForm.tsx index dec0e951e4..ed9739e1fb 100644 --- a/apps/console/src/components/OnboardingForm.tsx +++ b/apps/console/src/components/OnboardingForm.tsx @@ -16,6 +16,7 @@ import { useToast, } from "@instill-ai/design-system"; import { + DataTestID, instillUserRoles, toastInstillError, useInstillStore, @@ -197,7 +198,10 @@ export const OnboardingForm = () => { field.onChange(value); }} > - + diff --git a/packages/toolkit/src/constant/data-testid.ts b/packages/toolkit/src/constant/data-testid.ts index 3def766381..251c29bf68 100644 --- a/packages/toolkit/src/constant/data-testid.ts +++ b/packages/toolkit/src/constant/data-testid.ts @@ -3,4 +3,5 @@ export const DataTestID = { setupComponentDialog: "setup-component-dialog", createPipelineDialog: "create-pipeline-dialog", SelectComponentDialog: "select-component-dialog", + onboardingFormRoleField: "onboarding-form-role-field", };