chore: add data-testid attributes to members components (#1058) (#1062)

Co-authored-by: Ona <no-reply@ona.com>

Author: sw-factory-automations

.agents/conventions.md

@@ -1936,6 +1936,7 @@ Prefix with the domain to avoid collisions:
 |---|---|---|
 | Database | `db-` | `db-sort-button`, `db-filter-bar`, `db-row-{id}` |
 | Editor | `editor-` | `editor-toolbar`, `editor-slash-menu`, `editor-image` |
+| Members | `member-` / `invite-` / `pending-invite-` | `members-list`, `member-row-{userId}`, `invite-form`, `pending-invite-list` |
 | Sidebar | `sidebar-` | `sidebar-tree`, `sidebar-search` |
 
 For parameterized IDs, use kebab-case: `db-sort-rule-{index}`, `editor-slash-item-{name}`.

.agents/quality.md

@@ -141,5 +141,6 @@ Tracks code quality per domain. Updated by automations as a side effect of featu
 | 2026-05-11 | Reduce shared base JS below 150 kB (#1030). Replaced `next/dynamic` with `React.lazy` in providers, split lazy-loaded providers into separate chunk, disabled Sentry route manifest injection, consolidated client-side Sentry filters. Framework baseline: 152→150 kB gzipped. No test changes. Test totals unchanged: 139 Vitest files (1877 tests), 76 E2E specs (374 tests). |
 | 2026-05-12 | Fix workspace home header mobile overflow (#1038). Added `flex-wrap` and responsive button labels to prevent header buttons from overflowing on mobile. Added 1 new E2E spec: `e2e/workspace-home-mobile-header.spec.ts` (1 test). Updated `workspace-home.stories.tsx` with shared header component and MobileViewport story. Test totals: 139 Vitest files (1877 tests), 77 E2E specs (375 tests). |
 | 2026-05-12 | Add E2E tests for workspace home page interactions (#1041). Added 1 new E2E spec: `e2e/workspace-home.spec.ts` (6 tests) covering new page creation, filter by title, sort dropdown reorder, page list navigation, clear filter reset, and recently visited section. Test totals: 139 Vitest files (1877 tests), 78 E2E specs (381 tests). |
+| 2026-05-12 | Add data-testid attributes to members components (#1058). Added testids to member-list, invite-form, pending-invite-list, and role-select. Updated e2e/members.spec.ts to use testid selectors instead of fragile text/CSS selectors. No new test files. Test totals unchanged: 139 Vitest files (1877 tests), 78 E2E specs (381 tests). |
 
 

e2e/members.spec.ts

@@ -108,21 +108,18 @@ test.describe("Workspace member management", () => {
     await goToMembersPage(page, workspaceSlug);
 
     // The invite form should be visible (owner has admin privileges)
-    const inviteSection = page.locator("text=Invite").first();
-    await expect(inviteSection).toBeVisible();
+    const inviteForm = page.locator('[data-testid="invite-form"]');
+    await expect(inviteForm).toBeVisible();
 
     // Fill in the invite form
-    await page.fill("#invite-email", INVITE_EMAIL);
+    await page.locator('[data-testid="invite-email-input"]').fill(INVITE_EMAIL);
 
     // Submit the invite
     await page.getByRole("button", { name: "Invite", exact: true }).click();
 
-    // Wait for the invite link URL to appear below the form. The invite form
-    // shows the link as text followed by a copy button. Scope to the form's
-    // parent to avoid matching the pending invites table's copy buttons.
-    const inviteFormSection = page.locator("form").locator("..");
+    // Wait for the invite link section to appear below the form
     await expect(
-      inviteFormSection.getByRole("button", { name: "Copy invite link" })
+      page.locator('[data-testid="invite-copy-link-btn"]')
     ).toBeVisible({ timeout: 10_000 });
 
     // The invite form triggers router.refresh() after insert. Wait for the
@@ -139,7 +136,7 @@ test.describe("Workspace member management", () => {
     await goToMembersPage(page, workspaceSlug);
 
     // The pending invites section should show the invited email
-    const pendingSection = page.locator("text=Pending invites").first();
+    const pendingSection = page.locator('[data-testid="pending-invite-list"]');
     await expect(pendingSection).toBeVisible({ timeout: 10_000 });
 
     // The invited email should appear in the pending invites table
@@ -178,15 +175,14 @@ test.describe("Workspace member management", () => {
 
     // Re-invite the same email. Wait for the form to be interactive before
     // filling — the page is a server component that hydrates the client form.
-    const emailInput = page.locator("#invite-email");
+    const emailInput = page.locator('[data-testid="invite-email-input"]');
     await expect(emailInput).toBeVisible({ timeout: 5_000 });
     await emailInput.fill(INVITE_EMAIL);
     await page.getByRole("button", { name: "Invite", exact: true }).click();
 
-    // Wait for the invite link URL to appear below the form
-    const reInviteFormSection = page.locator("form").locator("..");
+    // Wait for the invite link section to appear below the form
     await expect(
-      reInviteFormSection.getByRole("button", { name: "Copy invite link" })
+      page.locator('[data-testid="invite-copy-link-btn"]')
     ).toBeVisible({ timeout: 10_000 });
 
     // Create the test user via admin API so they can accept the invite
@@ -290,18 +286,18 @@ test.describe("Workspace member management", () => {
     ).toBeVisible({ timeout: 10_000 });
 
     // Member should NOT see the invite form
-    await expect(memberPage.locator("#invite-email")).not.toBeVisible();
+    await expect(memberPage.locator('[data-testid="invite-form"]')).not.toBeVisible();
 
     // Member should NOT see remove buttons (trash icons)
     const removeButtons = memberPage.getByRole("button", {
       name: /remove/i,
     });
     await expect(removeButtons).toHaveCount(0);
 
-    // Member should NOT see role select dropdowns in the members table
+    // Member should NOT see role select dropdowns in the members list
     // (roles are shown as badges, not selects, for non-admin users)
-    const membersTable = memberPage.getByRole("table").first();
-    const roleSelects = membersTable.getByRole("combobox");
+    const membersList = memberPage.locator('[data-testid="members-list"]');
+    const roleSelects = membersList.getByRole("combobox");
     await expect(roleSelects).toHaveCount(0);
 
     await memberPage.context().close();

src/components/members/invite-form.tsx

@@ -166,7 +166,7 @@ export function InviteForm({
       <p className="text-xs tracking-widest uppercase text-label-faint">
         Invite
       </p>
-      <form onSubmit={handleSubmit} className="flex items-end gap-2">
+      <form onSubmit={handleSubmit} className="flex items-end gap-2" data-testid="invite-form">
         <div className="flex flex-1 flex-col gap-1.5">
           <Label htmlFor="invite-email">Email</Label>
           <Input
@@ -179,6 +179,7 @@ export function InviteForm({
               setInviteLink(null);
             }}
             required
+            data-testid="invite-email-input"
           />
         </div>
         <div className="flex flex-col gap-1.5">
@@ -187,22 +188,22 @@ export function InviteForm({
             value={role}
             onValueChange={(val) => setRole(val as InviteRole)}
           >
-            <SelectTrigger size="sm" className="w-28" aria-label="Invite role">
+            <SelectTrigger size="sm" className="w-28" aria-label="Invite role" data-testid="invite-role-select">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="admin">admin</SelectItem>
-              <SelectItem value="member">member</SelectItem>
+              <SelectItem value="admin" data-testid="invite-role-option-admin">admin</SelectItem>
+              <SelectItem value="member" data-testid="invite-role-option-member">member</SelectItem>
             </SelectContent>
           </Select>
         </div>
-        <Button type="submit" size="sm" disabled={sending}>
+        <Button type="submit" size="sm" disabled={sending} data-testid="invite-submit-btn">
           <Send className="h-4 w-4" />
           {sending ? "Sending…" : "Invite"}
         </Button>
       </form>
       {inviteLink && (
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2" data-testid="invite-link-section">
           <p className="min-w-0 flex-1 truncate text-xs text-accent">
             {inviteLink}
           </p>
@@ -211,6 +212,7 @@ export function InviteForm({
             size="icon-sm"
             onClick={handleCopyLink}
             aria-label="Copy invite link"
+            data-testid="invite-copy-link-btn"
           >
             {linkCopied ? (
               <Check className="h-4 w-4 text-accent" />

src/components/members/member-list.tsx

@@ -91,7 +91,7 @@ export function MemberList({
   }
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-col gap-3" data-testid="members-list">
       <p className="text-xs tracking-widest uppercase text-label-faint">
         Members ({members.length})
       </p>
@@ -105,7 +105,7 @@ export function MemberList({
         </TableHeader>
         <TableBody>
           {members.map((member) => (
-            <TableRow key={member.id}>
+            <TableRow key={member.id} data-testid={`member-row-${member.user_id}`}>
               <TableCell>
                 <div className="flex flex-col gap-0.5">
                   <span className="text-sm font-medium">
@@ -127,9 +127,10 @@ export function MemberList({
                     value={member.role}
                     onChange={(role) => onRoleChange(member.id, role)}
                     includeOwner={currentUserRole === "owner"}
+                    data-testid={`member-role-select-${member.user_id}`}
                   />
                 ) : (
-                  <Badge variant={roleBadgeVariant(member.role)}>
+                  <Badge variant={roleBadgeVariant(member.role)} data-testid={`member-role-badge-${member.user_id}`}>
                     {member.role}
                   </Badge>
                 )}
@@ -149,6 +150,7 @@ export function MemberList({
                             variant="ghost"
                             size="icon-sm"
                             aria-label={`Remove ${member.profiles.display_name}`}
+                            data-testid={`member-remove-btn-${member.user_id}`}
                           />
                         }
                       >

src/components/members/pending-invite-list.tsx

@@ -86,7 +86,7 @@ export function PendingInviteList({
   }
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-col gap-3" data-testid="pending-invite-list">
       <p className="text-xs tracking-widest uppercase text-label-faint">
         Pending invites ({invites.length})
       </p>
@@ -101,7 +101,7 @@ export function PendingInviteList({
         </TableHeader>
         <TableBody>
           {invites.map((invite) => (
-            <TableRow key={invite.id}>
+            <TableRow key={invite.id} data-testid={`pending-invite-row-${invite.id}`}>
               <TableCell>
                 <span className="text-sm">{invite.email}</span>
               </TableCell>
@@ -127,6 +127,7 @@ export function PendingInviteList({
                     onClick={() => handleRevoke(invite.id)}
                     disabled={revokingId === invite.id}
                     aria-label={`Revoke invite for ${invite.email}`}
+                    data-testid={`pending-invite-revoke-btn-${invite.id}`}
                   >
                     <X className="h-4 w-4 text-muted-foreground" />
                   </Button>

src/components/members/role-select.tsx

@@ -13,25 +13,27 @@ interface RoleSelectProps {
   value: MemberRole;
   onChange: (role: MemberRole) => void;
   includeOwner?: boolean;
+  "data-testid"?: string;
 }
 
 export function RoleSelect({
   value,
   onChange,
   includeOwner = false,
+  "data-testid": testId,
 }: RoleSelectProps) {
   return (
     <Select
       value={value}
       onValueChange={(val) => onChange(val as MemberRole)}
     >
-      <SelectTrigger size="sm" className="w-28" aria-label="Member role">
+      <SelectTrigger size="sm" className="w-28" aria-label="Member role" data-testid={testId ?? "members-role-select-trigger"}>
         <SelectValue />
       </SelectTrigger>
       <SelectContent>
-        {includeOwner && <SelectItem value="owner">owner</SelectItem>}
-        <SelectItem value="admin">admin</SelectItem>
-        <SelectItem value="member">member</SelectItem>
+        {includeOwner && <SelectItem value="owner" data-testid="members-role-option-owner">owner</SelectItem>}
+        <SelectItem value="admin" data-testid="members-role-option-admin">admin</SelectItem>
+        <SelectItem value="member" data-testid="members-role-option-member">member</SelectItem>
       </SelectContent>
     </Select>
   );