test: mock connector for e2e tests

Author: danielroe

CONTRIBUTING.md

@@ -347,6 +347,56 @@ pnpm test:browser:ui     # Run with Playwright UI
 
 Make sure to read about [Playwright best practices](https://playwright.dev/docs/best-practices) and don't rely on classes/IDs but try to follow user-replicable behaviour (like selecting an element based on text content instead).
 
+### 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** (`tests/`):
+
+- A mock HTTP server (`tests/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

package.json

@@ -76,6 +76,7 @@
     "@voidzero-dev/vite-plus-core": "latest",
     "@vue/test-utils": "2.4.6",
     "axe-core": "^4.11.1",
+    "h3-next": "npm:h3@2.0.1-rc.11",
     "happy-dom": "20.3.5",
     "lint-staged": "16.2.7",
     "marked": "17.0.1",

playwright.config.ts

@@ -11,6 +11,9 @@ export default defineConfig<ConfigOptions>({
   workers: process.env.CI ? 1 : undefined,
   reporter: 'html',
   timeout: 120_000,
+  // Start/stop mock connector server before/after all tests
+  globalSetup: fileURLToPath(new URL('./tests/global-setup.ts', import.meta.url)),
+  globalTeardown: fileURLToPath(new URL('./tests/global-teardown.ts', import.meta.url)),
   use: {
     trace: 'on-first-retry',
     nuxt: {

pnpm-lock.yaml

@@ -0,0 +1,24 @@
+/**
+ * Shared test utilities for mock connector testing.
+ *
+ * These utilities can be used by both:
+ * - Playwright E2E tests (via HTTP server)
+ * - Vitest browser tests (via composable mock)
+ */
+
+// Types
+export * from './mock-connector-types'
+
+// State management (used by both HTTP server and composable mock)
+export {
+  MockConnectorStateManager,
+  createMockConnectorState,
+  DEFAULT_MOCK_CONFIG,
+} from './mock-connector-state'
+
+// Composable mock (for Vitest browser tests)
+export {
+  createMockConnectorComposable,
+  type MockConnectorComposable,
+  type MockConnectorTestControls,
+} from './mock-connector-composable'