feat: add onboarding e2e test (#20)

Because

- We need e2e test to make sure everything is working correctly

This commit

- Implement onboarding e2e test
- Fix issue related to input field's id

.env

@@ -10,8 +10,10 @@ TRITONSERVER_VERSION=22.01-py3
 
 #----------- For Jest -------------------------#
 
+NEXT_PUBLIC_MAIN_URL=http://localhost:3000
 NEXT_PUBLIC_MGMT_API_ENDPOINT=http://localhost:8080
 NEXT_PUBLIC_PIPELINE_API_ENDPOINT=http://localhost:8081
 NEXT_PUBLIC_CONNECTOR_API_ENDPOINT=http://localhost:8082
 NEXT_PUBLIC_MODEL_API_ENDPOINT=http://localhost:8083
 NEXT_PUBLIC_API_VERSION=v1alpha
+NEXT_PUBLIC_INSTILL_AI_USER_COOKIE_NAME=instill_ai_user

.eslintrc.js

@@ -41,12 +41,6 @@ module.exports = {
     // eslint-plugin-react-hooks
     "plugin:react-hooks/recommended",
 
-    // eslint-plugin-jest
-    "plugin:jest/recommended",
-
-    // eslint-plugin-jest-formatting
-    "plugin:jest-formatting/recommended",
-
     // eslint-plugin-storybook
     "plugin:storybook/recommended",
 
@@ -61,13 +55,21 @@ module.exports = {
     {
       // For performance run jest/recommended on test files, not regular code
       files: ["**/?(*.)+(test).{js,jsx,ts,tsx}"],
-      extends: ["plugin:jest/recommended"],
+      extends: [
+        "plugin:jest/recommended",
+        "plugin:jest-formatting/recommended",
+      ],
       rules: {
         "@typescript-eslint/no-non-null-assertion": "off",
         "@typescript-eslint/no-object-literal-type-assertion": "off",
         "@typescript-eslint/no-empty-function": "off",
       },
     },
+    {
+      // We use playwright eslint plugin on e2e test
+      files: ["e2e/*.spec.{js,ts}"],
+      extends: ["plugin:playwright/playwright-test"],
+    },
     {
       // To disambiguate unit from e2e (playwright) test files, the *.spec.ts
       // is used across this repo, so we can apply a different ruleset.

.github/workflows/playwright.yml

@@ -1,27 +1 @@
 name: Playwright Tests
-on:
-  push:
-    branches: []
-  pull_request:
-    branches: []
-jobs:
-  test:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: "14.x"
-      - name: Install dependencies
-        run: yarn
-      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
-      - name: Run Playwright tests
-        run: yarn playwright test
-      - uses: actions/upload-artifact@v2
-        if: always()
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 30

README.md

@@ -4,8 +4,8 @@ Visual Data Preparation (VDP) console
 
 - Combine StatusLabel and ModeLabel under a single LabelBase
 - Make all the configuration form become self-generated from backend schema
-- Source and Destination's component are almost identical, combine their component together
-- Complete ConfigureDestination and ConfigureSource form
+- ~~Source and Destination's component are almost identical, combine their component together~~
+- ~~Complete ConfigureDestination and ConfigureSource form~~
 - When updating cache in react-query, we use code below, this won't retain the order of the old array.
 
 ```js

e2e/mgmt/onboarding.spec.ts

@@ -0,0 +1,94 @@
+import { test, expect } from "@playwright/test";
+
+test("first time enter user should go to the onboarding page", async ({
+  page,
+}) => {
+  if (!process.env.NEXT_PUBLIC_MAIN_URL) return;
+
+  await page.goto(process.env.NEXT_PUBLIC_MAIN_URL);
+
+  await expect(page).toHaveURL(
+    `${process.env.NEXT_PUBLIC_MAIN_URL}/onboarding`
+  );
+});
+
+test("should disable start button, if email input is not correct", async ({
+  page,
+}) => {
+  if (!process.env.NEXT_PUBLIC_MAIN_URL) return;
+
+  await page.goto(process.env.NEXT_PUBLIC_MAIN_URL);
+
+  // Fill in email
+  await page.fill("text='Your email *'", "instill");
+
+  // Fill in company
+  await page.fill("text='Your company *'", "instill-ai");
+
+  // Select role
+  const select = await page.waitForSelector("#react-select-role-input");
+  await select.click();
+  const option = await page.waitForSelector(":text('Manager')", {
+    state: "attached",
+  });
+  await option.scrollIntoViewIfNeeded();
+  await option.click();
+
+  await page.locator("test=Start").isDisabled();
+});
+
+test("should disable start button, if other field is not filled in", async ({
+  page,
+}) => {
+  if (!process.env.NEXT_PUBLIC_MAIN_URL) return;
+
+  await page.goto(process.env.NEXT_PUBLIC_MAIN_URL);
+  await page.fill("text='Your email *'", "instill@instill.tech");
+  await page.locator("test=Start").isDisabled();
+});
+
+test("should successfully fill in the onboarding form and submit", async ({
+  page,
+  context,
+}) => {
+  if (!process.env.NEXT_PUBLIC_MAIN_URL) return;
+
+  await page.goto(process.env.NEXT_PUBLIC_MAIN_URL);
+  await expect(page).toHaveURL(
+    `${process.env.NEXT_PUBLIC_MAIN_URL}/onboarding`
+  );
+
+  // Fill in email
+  await page.fill("text='Your email *'", "instill@instill.tech");
+
+  // Fill in company
+  await page.fill("text='Your company *'", "instill-ai");
+
+  // Select role - manager
+  const select = await page.waitForSelector("#react-select-role-input");
+  await select.click();
+  const option = await page.waitForSelector(":text('Manager')", {
+    state: "attached",
+  });
+  await option.scrollIntoViewIfNeeded();
+  await option.click();
+
+  // Accept newsletter subscription
+  await page.locator("#newsletter_subscription").click();
+
+  // Click Start and wait for navigation
+  await page.locator("test=Start").click();
+  await page.waitForNavigation();
+
+  expect(page.url).toBe(`${process.env.NEXT_PUBLIC_MAIN_URL}/pipeline`);
+
+  // Check cookie exist
+  const cookies = await context.cookies();
+  const instillCookies = cookies.find(
+    (e) => e.name === process.env.NEXT_PUBLIC_INSTILL_AI_USER_COOKIE_NAME
+  );
+  expect(instillCookies).not.toBeNull();
+  expect(
+    JSON.parse(instillCookies?.value as string).cookie_token
+  ).not.toBeNull();
+});

jest.config.js

@@ -9,7 +9,7 @@ const createJestConfig = nextJest({
 const customJestConfig = {
   setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
   testEnvironment: "jest-environment-jsdom",
-  modulePathIgnorePatterns: ["<rootDir>/__tests__/e2e/"],
+  modulePathIgnorePatterns: ["<rootDir>/e2e/"],
   moduleNameMapper: {
     "^@/components/(.*)$": "<rootDir>/src/components/$1",
     "^@/utils/(.*)$": "<rootDir>/src/utils/$1",

package.json

@@ -72,6 +72,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.1.4",
     "eslint-plugin-jest-formatting": "^3.1.0",
+    "eslint-plugin-playwright": "^0.9.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.4.0",
     "eslint-plugin-storybook": "^0.5.10",

src/components/formik/FormikField/SingleSelect/SingleSelect.tsx

@@ -37,7 +37,7 @@ const SingleSelect: FC<SingleSelectProps & FieldProps> = ({
   return (
     <BasicSingleSelect
       {...props}
-      id={name}
+      id={field.name}
       instanceId={instanceId}
       error={error}
       options={options}

src/components/formik/FormikField/TextArea/TextArea.tsx

@@ -26,7 +26,7 @@ const TextArea: FC<TextAreaProps & FieldProps> = ({
   return (
     <BasicTextArea
       {...props}
-      id={name}
+      id={field.name}
       error={error}
       onChangeInput={onChange}
     />

src/components/formik/FormikField/TextField/TextField.tsx

@@ -29,7 +29,7 @@ const TextField: FC<TextFieldProps & FieldProps> = ({
   return (
     <BasicTextField
       {...props}
-      id={name}
+      id={field.name}
       error={error}
       onChangeInput={onChange}
     />

src/components/formik/FormikField/ToggleField/ToggleField.tsx

@@ -33,7 +33,7 @@ const ToggleField: FC<ToggleFieldProps & FieldProps> = ({
   return (
     <BasicToggleField
       {...props}
-      id={name}
+      id={field.name}
       error={error}
       onChangeInput={onChange}
       defaultChecked={defaultChecked}

src/components/formik/FormikField/UploadFileField/UploadFileField.tsx

@@ -32,7 +32,7 @@ const UploadFileField: FC<UploadFileFieldProps & FieldProps> = ({
   return (
     <BasicUploadFileField
       {...props}
-      id={name}
+      id={field.name}
       error={error}
       onChangeInput={onChange}
     />

src/components/forms/OnboardingForm/OnboardingForm.tsx

@@ -144,7 +144,7 @@ const OnboardingForm: FC<OnBoardingFormProps> = ({ user }) => {
             <SingleSelect
               name="role"
               label="Your role"
-              instanceId="new-data-destination-type"
+              instanceId="role"
               options={mockMgmtRoles}
               value={selectedRoleOption}
               error={formik.errors.role || null}

tailwind.config.js

@@ -91,7 +91,7 @@ module.exports = {
         ".text-instill-h3": {
           fontFamily: `IBM Plex Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
           fontSize: "16px",
-          fontWeight: 500,
+          fontWeight: 400,
           lineHeight: "28px",
         },
         ".text-instill-body": {

yarn.lock

@@ -6358,6 +6358,11 @@ eslint-plugin-jest@^26.1.4:
   dependencies:
     "@typescript-eslint/utils" "^5.10.0"
 
+eslint-plugin-playwright@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-playwright/-/eslint-plugin-playwright-0.9.0.tgz#e14ac6c834f2704b293fc3f45cd40d771ec2e840"
+  integrity sha512-5bxAhiKjRASSgtQ4IipwtdesgQ8GT9m0PK61Uqxclu/TpiZS4eaAksydVeiiSPIOQph5GvuuLA7+oBS0WkWO6w==
+
 eslint-plugin-react-hooks@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.4.0.tgz#71c39e528764c848d8253e1aa2c7024ed505f6c4"