feat: adds e2e test for invite functionality (#1846)

apps/web/playwright/team.spec.ts

@@ -0,0 +1,112 @@
+import { expect, test } from "playwright/test";
+
+import { login, signUpAndLogin, signupUsingInviteToken, skipOnboarding } from "./utils/helper";
+import { invites, users } from "./utils/mock";
+
+test.describe("Invite, accept and remove team member", async () => {
+  test.describe.configure({ mode: "serial" });
+  const { email, password, name } = users.team[0];
+  let inviteLink: string;
+
+  test("Invite team member", async ({ page }) => {
+    await signUpAndLogin(page, name, email, password);
+    await skipOnboarding(page);
+
+    const dropdownTrigger = page.locator("#userDropdownTrigger");
+    await expect(dropdownTrigger).toBeVisible();
+    await dropdownTrigger.click();
+
+    const dropdownContentWrapper = page.locator("#userDropdownContentWrapper");
+    await expect(dropdownContentWrapper).toBeVisible();
+
+    await page.getByRole("link", { name: "Team" }).click();
+
+    // Add member button
+    await expect(page.getByRole("button", { name: "Add Member" })).toBeVisible();
+    await page.getByRole("button", { name: "Add Member" }).click();
+
+    // Fill the member name and email form
+    await expect(page.getByLabel("Email")).toBeVisible();
+    await page.getByLabel("Full Name").fill(invites.addMember.name);
+
+    await expect(page.getByLabel("Email Address")).toBeVisible();
+    await page.getByLabel("Email Address").fill(invites.addMember.email);
+
+    await page.getByRole("button", { name: "Send Invitation", exact: true }).click();
+  });
+
+  test("Copy Invite Link", async ({ page }) => {
+    await login(page, email, password);
+
+    const dropdownTrigger = page.locator("#userDropdownTrigger");
+    await expect(dropdownTrigger).toBeVisible();
+    await dropdownTrigger.click();
+
+    const dropdownContentWrapper = page.locator("#userDropdownContentWrapper");
+    await expect(dropdownContentWrapper).toBeVisible();
+
+    await page.getByRole("link", { name: "Team" }).click();
+
+    await expect(page.locator("#membersInfoWrapper")).toBeVisible();
+
+    const lastMemberInfo = page.locator("#membersInfoWrapper > .singleMemberInfo:last-child");
+    await expect(lastMemberInfo).toBeVisible();
+
+    const pendingSpan = lastMemberInfo.locator("span").filter({ hasText: "Pending" });
+    await expect(pendingSpan).toBeVisible();
+
+    const shareInviteButton = page.locator("#shareInviteButton");
+    await expect(shareInviteButton).toBeVisible();
+
+    await shareInviteButton.click();
+
+    const inviteLinkText = page.locator("#inviteLinkText");
+    await expect(inviteLinkText).toBeVisible();
+
+    // invite link text is a paragraph, and we need the text inside it
+    const inviteLinkTextContent = await inviteLinkText.textContent();
+    if (inviteLinkTextContent) {
+      inviteLink = inviteLinkTextContent;
+    }
+  });
+
+  test("Accept Invite", async ({ page }) => {
+    const { email, name, password } = users.team[1];
+    page.goto(inviteLink);
+
+    await page.waitForURL(/\/invite\?token=[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+/);
+
+    // Create account button
+    await expect(page.getByRole("link", { name: "Create account" })).toBeVisible();
+    await page.getByRole("link", { name: "Create account" }).click();
+
+    await signupUsingInviteToken(page, name, email, password);
+    await skipOnboarding(page);
+  });
+
+  test("Remove Member", async ({ page }) => {
+    await login(page, email, password);
+
+    const dropdownTrigger = page.locator("#userDropdownTrigger");
+    await expect(dropdownTrigger).toBeVisible();
+    await dropdownTrigger.click();
+
+    const dropdownContentWrapper = page.locator("#userDropdownContentWrapper");
+    await expect(dropdownContentWrapper).toBeVisible();
+
+    await page.getByRole("link", { name: "Team" }).click();
+
+    await expect(page.locator("#membersInfoWrapper")).toBeVisible();
+
+    const lastMemberInfo = page.locator("#membersInfoWrapper > .singleMemberInfo:last-child");
+    await expect(lastMemberInfo).toBeVisible();
+
+    const deleteMemberButton = lastMemberInfo.locator("#deleteMemberButton");
+    await expect(deleteMemberButton).toBeVisible();
+
+    await deleteMemberButton.click();
+
+    await expect(page.getByRole("button", { name: "Delete", exact: true })).toBeVisible();
+    await page.getByRole("button", { name: "Delete", exact: true }).click();
+  });
+});

apps/web/playwright/utils/helper.ts

@@ -51,3 +51,23 @@ export const replaceEnvironmentIdInHtml = (filePath: string, environmentId: stri
   writeFileSync(filePath, htmlContent);
   return "file:///" + filePath;
 };
+
+export const signupUsingInviteToken = async (page: Page, name: string, email: string, password: string) => {
+  await page.getByRole("button", { name: "Continue with Email" }).click();
+  await page.getByPlaceholder("Full Name").fill(name);
+  await page.getByPlaceholder("Full Name").press("Tab");
+
+  // the email is already filled in the input field
+  const inputValue = await page.getByPlaceholder("work@email.com").inputValue();
+  expect(inputValue).toEqual(email);
+
+  await page.getByPlaceholder("work@email.com").press("Tab");
+  await page.getByPlaceholder("*******").fill(password);
+  await page.press('input[name="password"]', "Enter");
+  await page.getByRole("link", { name: "Login" }).click();
+  await page.getByRole("button", { name: "Login with Email" }).click();
+  await page.getByPlaceholder("work@email.com").fill(email);
+  await page.getByPlaceholder("*******").click();
+  await page.getByPlaceholder("*******").fill(password);
+  await page.getByRole("button", { name: "Login with Email" }).click();
+};

apps/web/playwright/utils/mock.ts

@@ -32,6 +32,18 @@ export const users = {
       password: "XpP%X9UU3efj8vJa",
     },
   ],
+  team: [
+    {
+      name: "Team User 1",
+      email: "team1@formbricks.com",
+      password: "Test#1234",
+    },
+    {
+      name: "Team User 2",
+      email: "team2@formbricks.com",
+      password: "Test#1234",
+    },
+  ],
 };
 
 export const teams = {
@@ -97,3 +109,10 @@ export const surveys = {
     },
   },
 };
+
+export const invites = {
+  addMember: {
+    name: "Team User 2",
+    email: "team2@formbricks.com",
+  },
+};