test: mock connector for e2e/browser/local dev

CONTRIBUTING.md

@@ -752,6 +752,56 @@ You need to either:
 1. Add a fixture file for that package/endpoint
 2. Update the mock handlers in `test/fixtures/mock-routes.cjs` (client) or `modules/runtime/server/cache.ts` (server)
 
+### Testing connector features
+
+Features that require authentication through the local connector (org management, package collaborators, operations queue) are tested using a mock connector server. The testing infrastructure includes:
+
+**For Vitest component tests** (`test/nuxt/`):
+
+- Mock the `useConnector` composable with reactive state
+- Use `document.body` queries for components using Teleport
+- See `test/nuxt/components/ConnectorModal.spec.ts` for an example
+
+```typescript
+// Create mock state
+const mockState = ref({ connected: false, npmUser: null, ... })
+
+// Mock the composable
+vi.mock('~/composables/useConnector', () => ({
+  useConnector: () => ({
+    isConnected: computed(() => mockState.value.connected),
+    // ... other properties
+  }),
+}))
+```
+
+**For Playwright E2E tests** (`test/e2e/`):
+
+- A mock HTTP server (`test/e2e/helpers/mock-connector.ts`) implements the connector API
+- The server starts automatically via Playwright's global setup
+- Use the `mockConnector` fixture to set up test data and the `gotoConnected` helper to navigate with authentication
+
+```typescript
+test('shows org members', async ({ page, gotoConnected, mockConnector }) => {
+  // Set up test data
+  await mockConnector.setOrgData('@testorg', {
+    users: { testuser: 'owner', member1: 'admin' },
+  })
+
+  // Navigate with connector authentication
+  await gotoConnected('/@testorg')
+
+  // Test assertions
+  await expect(page.getByRole('link', { name: '@testuser' })).toBeVisible()
+})
+```
+
+The mock connector supports test endpoints for state manipulation:
+
+- `/__test__/org/:org` - Set org users and teams
+- `/__test__/user/orgs` - Set user's organizations
+- `/__test__/operations` - Get/manipulate operation queue
+
 ## Submitting changes
 
 ### Before submitting

knip.ts

@@ -27,7 +27,12 @@ const config: KnipConfig = {
         'uno-preset-rtl.ts!',
         'scripts/**/*.ts',
       ],
-      project: ['**/*.{ts,vue,cjs,mjs}', '!test/fixtures/**'],
+      project: [
+        '**/*.{ts,vue,cjs,mjs}',
+        '!test/fixtures/**',
+        '!test/test-utils/**',
+        '!test/e2e/helpers/**',
+      ],
       ignoreDependencies: [
         '@iconify-json/*',
         '@voidzero-dev/vite-plus-core',
@@ -44,6 +49,9 @@ const config: KnipConfig = {
         /** Oxlint plugins don't get picked up yet */
         '@e18e/eslint-plugin',
         'eslint-plugin-regexp',
+
+        /** Used in test/e2e/helpers/ which is excluded from knip project scope */
+        'h3-next',
       ],
       ignoreUnresolved: ['#components', '#oauth/config'],
     },

package.json

@@ -126,6 +126,7 @@
     "eslint-plugin-regexp": "3.0.0",
     "fast-check": "4.5.3",
     "h3": "1.15.5",
+    "h3-next": "npm:h3@2.0.1-rc.11",
     "knip": "5.83.0",
     "lint-staged": "16.2.7",
     "oxfmt": "0.27.0",

playwright.config.ts

@@ -18,6 +18,9 @@ export default defineConfig<ConfigOptions>({
     reuseExistingServer: false,
     timeout: 60_000,
   },
+  // Start/stop mock connector server before/after all tests
+  globalSetup: fileURLToPath(new URL('./test/e2e/global-setup.ts', import.meta.url)),
+  globalTeardown: fileURLToPath(new URL('./test/e2e/global-teardown.ts', import.meta.url)),
   // We currently only test on one browser on one platform
   snapshotPathTemplate: '{snapshotDir}/{testFileDir}/{testFileName}-snapshots/{arg}{ext}',
   use: {