Merge pull request #30 from forrestmurray-db/refactor/verification-skills

Refactor/verification skills

Author: vivian-xie-db

client/src/components/ui/select.tsx

@@ -111,13 +111,15 @@ SelectLabel.displayName = SelectPrimitive.Label.displayName
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, value, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
+    value={value}
+    data-value={value}
     {...props}
   >
     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">

client/tests/lib/actions/auth.ts

@@ -24,30 +24,32 @@ async function selectWorkshopFromDropdown(page: Page, workshopId: string): Promi
     await page.waitForSelector('[role="listbox"]', { timeout: 3000 }).catch(() => {});
     await page.waitForTimeout(200);
 
-    // Try multiple selector patterns for Radix Select item with specific value
-    // Radix uses data-radix-collection-item and the value is in data-value
-    const selectors = [
-      `[role="option"][data-value="${workshopId}"]`,
-      `[data-radix-collection-item][data-value="${workshopId}"]`,
-      `div[role="option"]:has-text("${workshopId.substring(0, 8)}")`, // partial ID match
-    ];
-
-    let clicked = false;
-    for (const selector of selectors) {
-      const workshopOption = page.locator(selector);
-      if (await workshopOption.isVisible({ timeout: 500 }).catch(() => false)) {
-        await workshopOption.click();
-        clicked = true;
-        break;
-      }
-    }
+    // Radix Select stores the value in data-value attribute on the option element
+    // Try the data-value selector first (most reliable)
+    const dataValueSelector = `[role="option"][data-value="${workshopId}"]`;
+    const workshopOption = page.locator(dataValueSelector);
 
-    // Fallback: click first option if nothing else worked
-    if (!clicked) {
-      const firstOption = page.locator('[role="option"]').first();
-      if (await firstOption.isVisible({ timeout: 500 }).catch(() => false)) {
-        await firstOption.click();
-      }
+    if (await workshopOption.isVisible({ timeout: 1000 }).catch(() => false)) {
+      await workshopOption.click();
+    } else {
+      // If data-value selector didn't work, log and fail explicitly
+      // Don't fall back to first option as this causes wrong workshop selection
+      const availableOptions = await page.locator('[role="option"]').all();
+      const optionValues = await Promise.all(
+        availableOptions.map(async (opt) => {
+          const value = await opt.getAttribute('data-value');
+          const text = await opt.textContent();
+          return `${value}: ${text}`;
+        })
+      );
+      console.error(
+        `[selectWorkshopFromDropdown] Could not find workshop ${workshopId}. ` +
+        `Available options: ${optionValues.join(', ')}`
+      );
+      throw new Error(
+        `Workshop ${workshopId} not found in dropdown. ` +
+        `Available: ${optionValues.join(', ')}`
+      );
     }
   }
 }

client/tests/lib/scenario-builder.ts

@@ -431,6 +431,15 @@ export class TestScenario {
 
     const createdWorkshop = (await workshopResponse.json()) as Workshop;
     store.workshop.id = createdWorkshop.id;
+
+    // Update facilitator's workshop_id with the real workshop ID
+    const facilitatorIndex = store.users.findIndex((u) => u.role === 'facilitator');
+    if (facilitatorIndex !== -1) {
+      store.users[facilitatorIndex] = {
+        ...store.users[facilitatorIndex],
+        workshop_id: createdWorkshop.id,
+      };
+    }
   }
 
   /**