test(web): add simple, comprehensive, and minimum e2e tests

web/e2e/common/notification.ts

@@ -0,0 +1,9 @@
+import { Page } from "@playwright/test";
+
+export async function closeNotification(page: Page) {
+  await page
+    .locator(".ant-notification-notice")
+    .last()
+    .locator(".ant-notification-notice-close")
+    .click();
+}

web/e2e/general/auth.spec.ts

@@ -0,0 +1,8 @@
+import { expect, test } from "@reearth-cms/e2e/utils";
+
+test("Logout has succeeded", async ({ reearth, page }) => {
+  await reearth.goto("/", { waitUntil: "domcontentloaded" });
+  await page.locator("a").nth(1).click();
+  await page.getByText("Logout").click();
+  await expect(page.getByLabel("Log In")).toBeVisible();
+});

web/e2e/general/project.spec.ts

@@ -0,0 +1,63 @@
+import { closeNotification } from "@reearth-cms/e2e/common/notification";
+import { expect, test } from "@reearth-cms/e2e/utils";
+
+test("Project CRUD and searching has succeeded", async ({ reearth, page }) => {
+  await reearth.goto("/", { waitUntil: "domcontentloaded" });
+  await page.getByRole("button", { name: "plus New Project" }).click();
+  await page.getByLabel("Project name").click();
+  await page.getByLabel("Project name").fill("project name");
+  await page.getByLabel("Project alias").click();
+  await page.getByLabel("Project alias").fill("project alias");
+  await page.getByLabel("Project description").click();
+  await page.getByLabel("Project description").fill("project description");
+  await page.getByRole("button", { name: "OK" }).click();
+  await expect(page.getByRole("alert").last()).toContainText("input: createProject invalid alias");
+  await closeNotification(page);
+  await page.getByLabel("Project alias").click();
+  await page.getByLabel("Project alias").fill("project-alias");
+  await page.getByRole("button", { name: "OK" }).click();
+  await expect(page.getByRole("alert").last()).toContainText("Successfully created project!");
+  await closeNotification(page);
+
+  await expect(page.getByText("project name", { exact: true })).toBeVisible();
+  await expect(page.getByText("project description", { exact: true })).toBeVisible();
+  await page.locator(".ant-input-affix-wrapper").click();
+  await page.getByPlaceholder("search projects").fill("no project");
+  await page.getByRole("button", { name: "search" }).click();
+  await expect(page.getByText("project name", { exact: true })).not.toBeVisible();
+  await page.getByRole("button", { name: "close-circle" }).click();
+  await expect(page.getByText("project name", { exact: true })).toBeVisible();
+  await page.getByText("project name", { exact: true }).click();
+  await expect(page.getByText("project name").nth(1)).toBeVisible();
+  await expect(page.getByText("project description")).toBeVisible();
+
+  await page.getByText("Settings").click();
+  await page.getByLabel("Name").click();
+  await page.getByLabel("Name").fill("new project name");
+  await page.getByLabel("Description").click();
+  await page.getByLabel("Description").fill("new project description");
+  await page.locator("form").getByRole("button", { name: "Save changes" }).click();
+  await expect(page.getByRole("alert").last()).toContainText("Successfully updated project!");
+  await closeNotification(page);
+
+  await expect(page.locator("#root")).toContainText("Project Settings / new project name");
+  await expect(page.locator("header")).toContainText("new project name");
+  await page.getByRole("row", { name: "Owner" }).getByRole("switch").click();
+  await page.getByRole("button", { name: "Save changes" }).nth(1).click();
+  await expect(page.getByRole("row", { name: "Owner" }).getByRole("switch")).toHaveAttribute(
+    "aria-checked",
+    "false",
+  );
+  await expect(page.getByRole("alert").last()).toContainText("Successfully updated request roles!");
+  await closeNotification(page);
+
+  await page.getByText("Overview").click();
+  await expect(page.locator("#root")).toContainText("new project name");
+  await expect(page.locator("#root")).toContainText("new project description");
+  await page.getByText("Settings").click();
+  await page.getByRole("button", { name: "Delete Project" }).click();
+  await page.getByRole("button", { name: "OK" }).click();
+  await expect(page.getByRole("alert").last()).toContainText("Successfully deleted project!");
+  await closeNotification(page);
+  await expect(page.getByText("new project name", { exact: true })).not.toBeVisible();
+});

web/e2e/general/workspace.spec.ts

@@ -0,0 +1,45 @@
+import { closeNotification } from "@reearth-cms/e2e/common/notification";
+import { expect, test } from "@reearth-cms/e2e/utils";
+
+test("Workspace CRUD has succeeded", async ({ reearth, page }) => {
+  await reearth.goto("/", { waitUntil: "domcontentloaded" });
+  await page.getByRole("button", { name: "Create a Workspace" }).click();
+  await page.getByLabel("Workspace name").click();
+  await page.getByLabel("Workspace name").fill("workspace name");
+  await page.getByRole("button", { name: "OK" }).click();
+  await expect(page.getByRole("alert").last()).toContainText("Successfully created workspace!");
+  await closeNotification(page);
+
+  await page.getByText("Workspace", { exact: true }).click();
+  await page.getByLabel("Workspace Name").click();
+  await page.getByLabel("Workspace Name").fill("new workspace name");
+  await page.getByRole("button", { name: "Save changes" }).click();
+  await expect(page.getByRole("alert").last()).toContainText("Successfully updated workspace!");
+  await closeNotification(page);
+
+  await expect(page.locator("header")).toContainText("new workspace name");
+  await page.getByRole("button", { name: "Remove Workspace" }).click();
+  await page.getByRole("button", { name: "OK" }).click();
+  await expect(page.getByRole("alert").last()).toContainText("Successfully deleted workspace!");
+  await closeNotification(page);
+
+  await page.locator("a").first().click();
+  await expect(page.getByText("new workspace name")).not.toBeVisible();
+});
+
+test("Workspace Creating from tab has succeeded", async ({ reearth, page }) => {
+  await reearth.goto("/", { waitUntil: "domcontentloaded" });
+  await page.locator("a").first().click();
+  await page.getByText("Create Workspace").click();
+  await page.getByLabel("Workspace name").click();
+  await page.getByLabel("Workspace name").fill("workspace name");
+  await page.getByRole("button", { name: "OK" }).click();
+  await expect(page.getByRole("alert").last()).toContainText("Successfully created workspace!");
+  await closeNotification(page);
+
+  await page.getByText("Workspace", { exact: true }).click();
+  await page.getByRole("button", { name: "Remove Workspace" }).click();
+  await page.getByRole("button", { name: "OK" }).click();
+  await expect(page.getByRole("alert").last()).toContainText("Successfully deleted workspace!");
+  await closeNotification(page);
+});

web/e2e/project/accessibility.spec.ts

@@ -0,0 +1,29 @@
+import { closeNotification } from "@reearth-cms/e2e/common/notification";
+import { expect, test } from "@reearth-cms/e2e/utils";
+
+import { createProject, deleteProject } from "./utils/project";
+
+test("Update settings on Accesibility page has succeeded", async ({ reearth, page }) => {
+  await reearth.goto("/", { waitUntil: "domcontentloaded" });
+  await createProject(page);
+
+  await page.getByText("Accessibility").click();
+  await page.getByText("Private").click();
+  await page.getByText("Public", { exact: true }).click();
+  await page.getByRole("textbox").click();
+  await page.getByRole("textbox").fill("new-e2e-project-alias");
+  await page.getByRole("switch").click();
+  await page.getByRole("button", { name: "Save changes" }).click();
+  await expect(page.getByRole("alert").last()).toContainText(
+    "Successfully updated publication settings!",
+  );
+  await closeNotification(page);
+  await expect(page.locator("form")).toContainText("Public");
+  await expect(page.getByRole("textbox")).toHaveValue("new-e2e-project-alias");
+  await expect(page.getByRole("switch")).toHaveAttribute("aria-checked", "true");
+  await expect(page.locator("tbody")).toContainText(
+    "http://localhost:8080/api/p/new-e2e-project-alias/assets",
+  );
+
+  await deleteProject(page);
+});

web/e2e/project/asset.spec.ts

@@ -0,0 +1,129 @@
+import { closeNotification } from "@reearth-cms/e2e/common/notification";
+import { expect, test } from "@reearth-cms/e2e/utils";
+
+import { crudComment } from "./utils/comment";
+import { createProject, deleteProject } from "./utils/project";
+
+const uploadFileUrl =
+  "https://assets.cms.plateau.reearth.io/assets/11/6d05db-ed47-4f88-b565-9eb385b1ebb0/13100_tokyo23-ku_2022_3dtiles%20_1_1_op_bldg_13101_chiyoda-ku_lod1/tileset.json";
+const uploadFileName = "tileset.json";
+
+test("Asset CRUD and Searching has succeeded", async ({ reearth, page }) => {
+  await reearth.goto("/", { waitUntil: "domcontentloaded" });
+  await createProject(page);
+
+  await page.getByText("Asset").click();
+  await page.getByRole("button", { name: "upload Upload Asset" }).click();
+  await page.getByRole("tab", { name: "URL" }).click();
+  await page.getByPlaceholder("Please input a valid URL").click();
+  await page.getByPlaceholder("Please input a valid URL").fill(uploadFileUrl);
+  await page.getByRole("button", { name: "Upload", exact: true }).click();
+  await expect(page.getByRole("alert").last()).toContainText("Successfully added asset!");
+  await closeNotification(page);
+  await expect(page.getByText(uploadFileName)).toBeVisible();
+  await page.getByPlaceholder("Please enter").click();
+  await page.getByPlaceholder("Please enter").fill("no asset");
+  await page.getByRole("button", { name: "search" }).click();
+  await expect(page.getByText(uploadFileName)).not.toBeVisible();
+  await page.getByPlaceholder("Please enter").click();
+  await page.getByPlaceholder("Please enter").fill("");
+  await page.getByRole("button", { name: "search" }).click();
+  await expect(page.getByText(uploadFileName)).toBeVisible();
+  await page.getByLabel("edit").locator("svg").click();
+  await page
+    .locator("div")
+    .filter({ hasText: /^Unknown Type$/ })
+    .nth(1)
+    .click();
+  await page.getByText("GEOJSON/KML/CZML").click();
+  await page.getByRole("button", { name: "Save" }).click();
+  await expect(page.getByRole("alert").last()).toContainText("Asset was successfully updated!");
+  await closeNotification(page);
+  await page.getByLabel("Back").click();
+  await page.getByLabel("", { exact: true }).check();
+  await page.getByText("Delete").click();
+  await expect(page.getByText(uploadFileName)).not.toBeVisible();
+  await expect(page.getByRole("alert").last()).toContainText(
+    "One or more assets were successfully deleted!",
+  );
+  await closeNotification(page);
+
+  await deleteProject(page);
+});
+
+test("Donwloading asset has succeeded", async ({ reearth, page }) => {
+  await reearth.goto("/", { waitUntil: "domcontentloaded" });
+  await createProject(page);
+
+  await page.getByText("Asset").click();
+  await page.getByRole("button", { name: "upload Upload Asset" }).click();
+  await page.getByRole("tab", { name: "URL" }).click();
+  await page.getByPlaceholder("Please input a valid URL").click();
+  await page.getByPlaceholder("Please input a valid URL").fill(uploadFileUrl);
+  await page.getByRole("button", { name: "Upload", exact: true }).click();
+  await expect(page.getByRole("alert").last()).toContainText("Successfully added asset!");
+  await closeNotification(page);
+  await expect(page.getByText(uploadFileName)).toBeVisible();
+
+  await page.getByLabel("", { exact: true }).check();
+  const downloadPromise = page.waitForEvent("download");
+  await page.getByRole("button", { name: "download Download" }).click();
+  const download = await downloadPromise;
+  expect(download.suggestedFilename()).toEqual(uploadFileName);
+
+  await page.getByLabel("edit").locator("svg").click();
+  const download1Promise = page.waitForEvent("download");
+  await page.getByRole("button", { name: "download Download" }).click();
+  const download1 = await download1Promise;
+  expect(download1.suggestedFilename()).toEqual(uploadFileName);
+
+  await page.getByLabel("Back").click();
+  await page.getByLabel("", { exact: true }).check();
+  await page.getByText("Delete").click();
+  await expect(page.getByRole("alert").last()).toContainText(
+    "One or more assets were successfully deleted!",
+  );
+  await closeNotification(page);
+  await deleteProject(page);
+});
+
+test("Comment CRUD on edit page has succeeded", async ({ reearth, page }) => {
+  await reearth.goto("/", { waitUntil: "domcontentloaded" });
+  await createProject(page);
+
+  await page.getByText("Asset").click();
+  await page.getByRole("button", { name: "upload Upload Asset" }).click();
+  await page.getByRole("tab", { name: "URL" }).click();
+  await page.getByPlaceholder("Please input a valid URL").click();
+  await page.getByPlaceholder("Please input a valid URL").fill(uploadFileUrl);
+  await page.getByRole("button", { name: "Upload", exact: true }).click();
+  await expect(page.getByRole("alert").last()).toContainText("Successfully added asset!");
+  await closeNotification(page);
+  await expect(page.getByText(uploadFileName)).toBeVisible();
+
+  await page.getByRole("cell", { name: "edit" }).locator("svg").click();
+  await page.getByLabel("message").click();
+  await expect(page.getByText("CommentsComment")).toBeVisible();
+  await crudComment(page);
+  await deleteProject(page);
+});
+
+test("Comment CRUD on Asset page has succeeded", async ({ reearth, page }) => {
+  await reearth.goto("/", { waitUntil: "domcontentloaded" });
+  await createProject(page);
+
+  await page.getByText("Asset").click();
+  await page.getByRole("button", { name: "upload Upload Asset" }).click();
+  await page.getByRole("tab", { name: "URL" }).click();
+  await page.getByPlaceholder("Please input a valid URL").click();
+  await page.getByPlaceholder("Please input a valid URL").fill(uploadFileUrl);
+  await page.getByRole("button", { name: "Upload", exact: true }).click();
+  await expect(page.getByRole("alert").last()).toContainText("Successfully added asset!");
+  await closeNotification(page);
+  await expect(page.getByText(uploadFileName)).toBeVisible();
+
+  await page.getByRole("button", { name: "0" }).click();
+  await expect(page.getByText("CommentsNo comments.Comment")).toBeVisible();
+  await crudComment(page);
+  await deleteProject(page);
+});