From fa99673c132e6a58b28f403bed744ddffb0b533b Mon Sep 17 00:00:00 2001
From: minkyngkm <min.kim@canonical.com>
Date: Thu, 4 Jan 2024 14:32:18 +0000
Subject: [PATCH] Write users spect for /pro/users

---
 tests/playwright/helpers/utils.ts        |  3 ++
 tests/playwright/tests/pro/users.spec.ts | 65 ++++++++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 tests/playwright/tests/pro/users.spec.ts

diff --git a/tests/playwright/helpers/utils.ts b/tests/playwright/helpers/utils.ts
index 36148a65a8b..ed28c176891 100644
--- a/tests/playwright/helpers/utils.ts
+++ b/tests/playwright/helpers/utils.ts
@@ -10,3 +10,6 @@ export const ENDPOINTS = {
   preview: "/pro/purchase/preview*",
   stripePaymentMethod : "https://api.stripe.com/v1/payment_methods",
  };
+
+export const getRandomEmail = () =>
+  `playwright-test-${Math.random().toString(36).substring(2,12)}@canonical.com`;
diff --git a/tests/playwright/tests/pro/users.spec.ts b/tests/playwright/tests/pro/users.spec.ts
new file mode 100644
index 00000000000..fd4d7acdc23
--- /dev/null
+++ b/tests/playwright/tests/pro/users.spec.ts
@@ -0,0 +1,65 @@
+import { test, expect } from "@playwright/test";
+import { acceptCookiePolicy, login } from "../../helpers/commands";
+import { getRandomEmail } from "../../helpers/utils";
+
+test.describe("/pro/users", () => {
+  const email = getRandomEmail();
+
+  test("It should add and delete a user correctly", async ({ page }) => {
+    await page.goto("/pro/users");
+    await login(page);
+    await acceptCookiePolicy(page);
+
+    await page.getByRole("button", { name: /Add new user/ }).click();
+    await page.getByLabel("Name").fill("Angela");
+    await page.getByLabel("email address").fill(email);
+    await page
+      .getByLabel("Role", { exact: true })
+      .selectOption({ label: "Technical" });
+
+    await page.route("/pro/accounts/*", async (route) => {
+      const request = route.request();
+      const postData = await request.postDataJSON();
+
+      if (request.method() === "POST") {
+        await route.fulfill({
+          status: 200,
+          contentType: "application/json",
+          body: JSON.stringify({ email: postData.email, role: postData.role }),
+        });
+      } else if (request.method() === "DELETE") {
+        await route.fulfill({
+          status: 200,
+          contentType: "application/json",
+          body: JSON.stringify({ email: postData.email }),
+        });
+      }
+    });
+
+    await page
+      .getByRole("button", { name: "Add new user", exact: true })
+      .click();
+
+    await page.waitForTimeout(3000);
+
+    await expect(page.getByText(/User added successfully/)).toBeVisible();
+
+    await page.getByPlaceholder("Search for users").fill(email);
+
+    await expect(page.getByText(email)).toBeVisible();
+
+    await page.getByLabel(`Edit user ${email}`).click();
+
+    await page.locator("button[aria-label='delete']").click();
+
+    await page.getByRole("button", { name: "Yes, remove user" }).click();
+
+    await page.waitForTimeout(3000);
+
+    await expect(page.getByText(/User deleted/)).toBeVisible();
+
+    await page.getByPlaceholder("Search for users").fill(email);
+
+    await expect(page.getByText(email)).not.toBeVisible();
+  });
+});