test: E2E test cases for project creation on dashboard

e2e/dashboard.spec.ts

@@ -2,7 +2,23 @@ import { expect, test } from "@reearth/e2e/utils";
 
 test("dasboard can be logged in", async ({ page, reearth }) => {
   await reearth.initUser();
-  await reearth.goto(`/dashboard/${reearth.teamId}`);
+  await reearth.goto(`/dashboard/${reearth.workspaceId}`);
 
   await expect(page.getByText(`${reearth.userName}'s workspace`)).toBeVisible();
 });
+
+test("can create a project", async ({ page, reearth }) => {
+  await reearth.initUser();
+  await reearth.goto(`/dashboard/${reearth.workspaceId}`);
+
+  await page.getByRole("button", { name: "New project" }).click();
+
+  await page.locator('input[name="name"]').fill("Test");
+
+  await page.locator('textarea[name="description"]').fill("test description");
+
+  await page.getByRole("button", { name: "Create" }).click();
+
+  await expect(page.getByText("Test")).toBeVisible();
+  await expect(page.getByText("test description")).toBeVisible();
+});

e2e/utils/config.ts

@@ -3,7 +3,7 @@ export const config = {
   userId: process.env["REEARTH_WEB_E2E_USER_ID"],
   userName: process.env["REEARTH_WEB_E2E_USERNAME"],
   password: process.env["REEARTH_WEB_E2E_PASSWORD"],
-  teamId: process.env["REEARTH_WEB_E2E_TEAM_ID"],
+  workspaceId: process.env["REEARTH_WEB_E2E_TEAM_ID"],
   authAudience: process.env["REEARTH_WEB_AUTH0_AUDIENCE"],
   authClientId: process.env["REEARTH_WEB_AUTH0_CLIENT_ID"],
   authUrl: process.env["REEARTH_WEB_AUTH0_DOMAIN"],

e2e/utils/index.ts

@@ -69,21 +69,21 @@ export async function initUser(
 ): Promise<{
   token: string;
   userId: string;
-  teamId: string;
+  workspaceId: string;
   userName: string;
 }> {
   if (!token) {
     throw new Error("access token is not initialized");
   }
 
-  const { userName, userId, teamId, api, signUpSecret } = config;
+  const { userName, userId, workspaceId, api, signUpSecret } = config;
 
-  if (!userName || !userId || !teamId || !api) {
+  if (!userName || !userId || !workspaceId || !api) {
     throw new Error(
       `either userName, userId, teamId and api are missing: ${JSON.stringify({
         userName,
         userId,
-        teamId,
+        teamId: workspaceId,
         api,
         signUpSecret: signUpSecret ? "***" : "",
       })}`,
@@ -100,7 +100,7 @@ export async function initUser(
       }`,
       variables: {
         userId,
-        teamId,
+        teamId: workspaceId,
         secret: signUpSecret,
         lang: "en",
       },
@@ -116,7 +116,7 @@ export async function initUser(
       `failed to init an user: ${JSON.stringify(body)} with ${JSON.stringify({
         userName,
         userId,
-        teamId,
+        workspaceId,
         api,
         signUpSecret: signUpSecret ? "***" : "",
       })}`,
@@ -127,6 +127,6 @@ export async function initUser(
     token,
     userName,
     userId: body.data.signup.user.id,
-    teamId,
+    workspaceId,
   };
 }

package.json

@@ -11,6 +11,7 @@
         "test": "vitest",
         "coverage": "vitest --coverage",
         "e2e": "playwright test",
+        "e2e:codegen": "playwright codegen http://localhost:3000",
         "prepare": "husky install",
         "build": "vite build",
         "build:preview": "run-s build storybook:build",

playwright.config.ts

@@ -3,9 +3,21 @@ import dotenv from "dotenv";
 
 dotenv.config();
 
+const localHost = "http://localhost:3000";
+const isLocal =
+  !process.env.REEARTH_WEB_E2E_BASEURL || process.env.REEARTH_WEB_E2E_BASEURL.includes(localHost);
+
 const config: PlaywrightTestConfig = {
+  ...(isLocal
+    ? {
+        webServer: {
+          command: "yarn start",
+          url: localHost,
+        },
+      }
+    : {}),
   use: {
-    baseURL: process.env.REEARTH_WEB_E2E_BASEURL || "http://localhost:3000/",
+    baseURL: process.env.REEARTH_WEB_E2E_BASEURL || localHost,
     screenshot: "only-on-failure",
     video: "retain-on-failure",
   },

src/components/molecules/Dashboard/QuickStart.tsx

@@ -56,6 +56,7 @@ const QuickStart: React.FC<Props> = ({
         </Text>
         {documentationUrl && (
           <LongBannerButton
+            role="button"
             align="center"
             justify="center"
             onClick={() => window.open(documentationUrl, "_blank", "noopener")}>
@@ -67,6 +68,7 @@ const QuickStart: React.FC<Props> = ({
         )}
         <Flex justify="space-between">
           <HeroBannerButton
+            role="button"
             direction="column"
             align="center"
             justify="center"
@@ -77,6 +79,7 @@ const QuickStart: React.FC<Props> = ({
             </Text>
           </HeroBannerButton>
           <BannerButton
+            role="button"
             direction="column"
             align="center"
             justify="center"