@rimori/playwright-testing 0.2.1 → 0.2.3-next.1

package/README.md

@@ -17,6 +17,157 @@ The `@rimori/playwright-testing` package enables end-to-end testing of Rimori pl
 npm install --save-dev @rimori/playwright-testing @playwright/test
 # or
 pnpm add -D @rimori/playwright-testing @playwright/test
+# or
+yarn add -D @rimori/playwright-testing @playwright/test
+```
+
+## Setup Steps
+
+To initialize Playwright testing in your Rimori plugin, follow these steps:
+
+### 1. Install Dependencies
+
+Add the required dependencies to your `package.json`:
+
+```json
+{
+  "devDependencies": {
+    "@playwright/test": "^1.40.0",
+    "@rimori/playwright-testing": "^0.2.1"
+  }
+}
+```
+
+Then run:
+
+```bash
+npm install
+# or
+yarn install
+# or
+pnpm install
+```
+
+### 2. Create Playwright Configuration
+
+Create a `playwright.config.ts` file in your plugin root:
+
+```typescript
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './test',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    trace: 'on-first-retry',
+    headless: false,
+    screenshot: 'only-on-failure',
+  },
+  timeout: 30000,
+  expect: {
+    timeout: 5000,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});
+```
+
+### 3. Add Test Scripts
+
+Add test scripts to your `package.json`:
+
+```json
+{
+  "scripts": {
+    "test": "playwright test",
+    "test:headed": "playwright test --headed",
+    "test:debug": "playwright test --debug",
+    "test:ui": "playwright test --ui",
+    "test:headed:debug": "playwright test --headed --debug"
+  }
+}
+```
+
+### 4. Create Test Directory and Files
+
+Create a `test` directory in your plugin root and add your test files:
+
+```typescript
+// test/my-plugin.test.ts
+import { test, expect } from '@playwright/test';
+import { RimoriTestEnvironment } from '@rimori/playwright-testing';
+
+const pluginId = 'pl1234567890'; // Your plugin ID from rimori.config.ts
+const pluginUrl = 'http://localhost:3002'; // Your dev server URL
+
+test.describe('My Plugin', () => {
+  let env: RimoriTestEnvironment;
+
+  test.beforeEach(async ({ page }) => {
+    env = new RimoriTestEnvironment({ page, pluginId });
+
+    // Set up your mocks here
+    // env.ai.mockGetObject(...);
+    // env.plugin.mockGetSettings(...);
+
+    await env.setup();
+    await page.goto(`${pluginUrl}/#/your-page`);
+  });
+
+  test('should work correctly', async ({ page }) => {
+    await expect(page.getByText('Hello')).toBeVisible();
+  });
+});
+```
+
+### 5. Get Your Plugin ID
+
+Find your plugin ID in `rimori/rimori.config.ts`:
+
+```typescript
+const config: RimoriPluginConfig = {
+  id: 'pl1234567890', // <-- This is your plugin ID
+  // ...
+};
+```
+
+### 6. Run Tests
+
+1. **Start your dev server** in one terminal:
+
+   ```bash
+   npm run dev
+   # or
+   yarn dev
+   ```
+
+2. **Run tests** in another terminal:
+   ```bash
+   npm test
+   # or
+   yarn test
+   ```
+
+### Complete Example Setup
+
+Here's a complete example of what your plugin structure should look like:
+
+```
+your-plugin/
+├── package.json          # With @playwright/test and test scripts
+├── playwright.config.ts  # Playwright configuration
+├── rimori/
+│   └── rimori.config.ts  # Contains your plugin ID
+└── test/
+    └── my-plugin.test.ts # Your test files
 ```
 
 ## Quick Start

package/dist/core/MessageChannelSimulator.d.ts

@@ -1,92 +1,21 @@
 import type { Page } from '@playwright/test';
-type Language = {
-    code: string;
-    name: string;
-    native: string;
-    capitalized: string;
-    uppercase: string;
-};
-type StudyBuddy = {
-    id: string;
-    name: string;
-    description: string;
-    avatarUrl: string;
-    voiceId: string;
-    aiPersonality: string;
-};
-export type UserInfo = {
-    mother_tongue: Language;
-    target_language: Language;
-    skill_level_reading: string;
-    skill_level_writing: string;
-    skill_level_grammar: string;
-    skill_level_speaking: string;
-    skill_level_listening: string;
-    skill_level_understanding: string;
-    goal_longterm: string;
-    goal_weekly: string;
-    study_buddy: StudyBuddy;
-    story_genre: string;
-    study_duration: number;
-    motivation_type: string;
-    onboarding_completed: boolean;
-    context_menu_on_select: boolean;
-    user_name?: string;
-    target_country: string;
-    target_city?: string;
-};
-type RimoriGuild = {
-    id: string;
-    longTermGoalOverride: string;
-    allowUserPluginSettings: boolean;
-};
-type PluginInfo = {
-    id: string;
-    title: string;
-    description: string;
-    logo: string;
-    url: string;
-};
-type RimoriInfo = {
-    url: string;
-    key: string;
-    backendUrl: string;
-    token: string;
-    expiration: Date;
-    tablePrefix: string;
-    pluginId: string;
-    guild: RimoriGuild;
-    installedPlugins: PluginInfo[];
-    profile: UserInfo;
-    mainPanelPlugin?: PluginInfo;
-    sidePanelPlugin?: PluginInfo;
-};
-type EventBusMessage = {
-    timestamp: string;
-    sender: string;
-    topic: string;
-    data: unknown;
-    debug: boolean;
-    eventId?: number;
-};
+import { UserInfo, RimoriInfo, EventBusMessage, EventPayload } from '@rimori/client';
 type MessageChannelSimulatorArgs = {
     page: Page;
     pluginId: string;
+    rimoriInfo: RimoriInfo;
     queryParams?: Record<string, string>;
-    rimoriInfo?: RimoriInfo;
 };
 type EventListener = (event: EventBusMessage) => void | Promise<void>;
+type AutoResponder = (event: EventBusMessage) => unknown | Promise<unknown>;
 export declare class MessageChannelSimulator {
     private readonly page;
     private readonly pluginId;
     private readonly queryParams;
-    private readonly baseUserInfo;
-    private readonly providedInfo?;
+    private readonly rimoriInfo;
     private readonly listeners;
     private readonly autoResponders;
     private readonly pendingOutbound;
-    private currentUserInfo;
-    private currentRimoriInfo;
     private isReady;
     private instanceId;
     /**
@@ -106,26 +35,33 @@ export declare class MessageChannelSimulator {
     /**
      * Sends an event into the plugin as though the Rimori parent emitted it.
      */
-    emit(topic: string, data: unknown, sender?: string): Promise<void>;
+    emit(topic: string, data: EventPayload, sender?: string): Promise<void>;
     /**
      * Registers a handler for events emitted from the plugin.
      */
     on(topic: string, handler: EventListener): () => void;
     /**
-     * Overrides the default profile returned by the auto responders.
+     * Registers a one-time auto-responder for a request/response topic.
+     * When a request with an eventId comes in for this topic, the responder will
+     * be called once and then automatically removed.
+     *
+     * @param topic - The event topic to respond to
+     * @param responder - A function that returns the response data, or a value to return directly
+     * @returns A function to manually remove the responder before it's used
+     */
+    respondOnce(topic: string, responder: AutoResponder | unknown): () => void;
+    /**
+     * Overrides the user info.
      */
-    setUserInfo(overrides: Partial<UserInfo>): void;
-    getRimoriInfo(): RimoriInfo | null;
+    setUserInfo(userInfo: UserInfo): void;
+    getRimoriInfo(): RimoriInfo;
     private setupMessageChannel;
     private sendToPlugin;
     private flushPending;
     private handlePortMessage;
     private dispatchEvent;
     private maybeRespond;
-    private buildRimoriInfo;
-    private serializeRimoriInfo;
     private cloneUserInfo;
-    private mergeUserInfo;
     private registerAutoResponders;
     private cloneRimoriInfo;
 }

package/dist/core/MessageChannelSimulator.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MessageChannelSimulator = void 0;
 const node_crypto_1 = require("node:crypto");
-const default_user_info_1 = require("../fixtures/default-user-info");
 class MessageChannelSimulator {
     /**
      * Creates a simulator that mimics the Rimori host for plugin tests.
@@ -15,22 +14,19 @@ class MessageChannelSimulator {
         this.listeners = new Map();
         this.autoResponders = new Map();
         this.pendingOutbound = [];
-        this.currentRimoriInfo = null;
         this.isReady = false;
         this.instanceId = (0, node_crypto_1.randomUUID)();
         this.page = page;
         this.pluginId = pluginId;
         this.queryParams = queryParams ?? {};
-        this.baseUserInfo = this.cloneUserInfo(default_user_info_1.DEFAULT_USER_INFO);
-        this.currentUserInfo = this.cloneUserInfo(default_user_info_1.DEFAULT_USER_INFO);
-        this.providedInfo = rimoriInfo ? this.cloneRimoriInfo(rimoriInfo) : undefined;
+        this.rimoriInfo = this.cloneRimoriInfo(rimoriInfo);
         this.registerAutoResponders();
     }
     get defaultUserInfo() {
-        return this.cloneUserInfo(this.baseUserInfo);
+        return this.cloneUserInfo(this.rimoriInfo.profile);
     }
     get userInfo() {
-        return this.cloneUserInfo(this.currentUserInfo);
+        return this.cloneUserInfo(this.rimoriInfo.profile);
     }
     /**
      * Injects the handshake shims so the plugin talks to this simulator.
@@ -112,6 +108,7 @@ class MessageChannelSimulator {
         const message = {
             event: {
                 timestamp: new Date().toISOString(),
+                eventId: Math.floor(Math.random() * 1000000),
                 sender,
                 topic,
                 data,
@@ -143,25 +140,52 @@ class MessageChannelSimulator {
         };
     }
     /**
-     * Overrides the default profile returned by the auto responders.
+     * Registers a one-time auto-responder for a request/response topic.
+     * When a request with an eventId comes in for this topic, the responder will
+     * be called once and then automatically removed.
+     *
+     * @param topic - The event topic to respond to
+     * @param responder - A function that returns the response data, or a value to return directly
+     * @returns A function to manually remove the responder before it's used
      */
-    setUserInfo(overrides) {
-        this.currentUserInfo = this.mergeUserInfo(this.currentUserInfo, overrides);
-        if (this.currentRimoriInfo) {
-            this.currentRimoriInfo.profile = this.cloneUserInfo(this.currentUserInfo);
-        }
+    respondOnce(topic, responder) {
+        let used = false;
+        const wrappedResponder = (event) => {
+            if (used) {
+                return undefined;
+            }
+            used = true;
+            // Remove from autoResponders after first use
+            this.autoResponders.delete(topic);
+            // If responder is a function, call it with the event, otherwise return the value directly
+            if (typeof responder === 'function') {
+                return responder(event);
+            }
+            return responder;
+        };
+        this.autoResponders.set(topic, wrappedResponder);
+        // Return a function to manually remove the responder
+        return () => {
+            if (!used) {
+                this.autoResponders.delete(topic);
+                used = true;
+            }
+        };
+    }
+    /**
+     * Overrides the user info.
+     */
+    setUserInfo(userInfo) {
+        this.rimoriInfo.profile = userInfo;
     }
     getRimoriInfo() {
-        return this.currentRimoriInfo ? this.cloneRimoriInfo(this.currentRimoriInfo) : null;
+        return this.cloneRimoriInfo(this.rimoriInfo);
     }
     async setupMessageChannel() {
         if (this.isReady) {
             return;
         }
-        const rimoriInfo = this.buildRimoriInfo();
-        this.currentRimoriInfo = rimoriInfo;
-        const serialized = this.serializeRimoriInfo(rimoriInfo);
-        await this.page.evaluate(({ pluginId, queryParams, instanceId, rimoriInfo: info, }) => {
+        await this.page.evaluate(({ pluginId, queryParams, instanceId, rimoriInfo, }) => {
             const channel = new MessageChannel();
             channel.port1.onmessage = (event) => {
                 // @ts-expect-error binding injected via exposeBinding
@@ -176,10 +200,7 @@ class MessageChannelSimulator {
                     pluginId,
                     instanceId,
                     queryParams,
-                    rimoriInfo: {
-                        ...info,
-                        expiration: new Date(info.expiration),
-                    },
+                    rimoriInfo,
                 },
                 ports: [channel.port2],
             });
@@ -188,7 +209,7 @@ class MessageChannelSimulator {
             pluginId: this.pluginId,
             queryParams: this.queryParams,
             instanceId: this.instanceId,
-            rimoriInfo: serialized,
+            rimoriInfo: this.rimoriInfo,
         });
         this.isReady = true;
         await this.flushPending();
@@ -215,21 +236,33 @@ class MessageChannelSimulator {
             return;
         }
         if ('event' in payload && payload.event) {
-            console.log('[MessageChannelSimulator] handlePortMessage - received event:', payload.event.topic, 'from:', payload.event.sender);
+            // console.log(
+            //   '[MessageChannelSimulator] handlePortMessage - received event:',
+            //   payload.event.topic,
+            //   'from:',
+            //   payload.event.sender,
+            // );
             await this.dispatchEvent(payload.event);
             await this.maybeRespond(payload.event);
             return;
         }
     }
     async dispatchEvent(event) {
-        console.log('[MessageChannelSimulator] dispatchEvent - topic:', event.topic, 'sender:', event.sender, 'listeners:', this.listeners.has(event.topic) ? this.listeners.get(event.topic)?.size : 0);
+        // console.log(
+        //   '[MessageChannelSimulator] dispatchEvent - topic:',
+        //   event.topic,
+        //   'sender:',
+        //   event.sender,
+        //   'listeners:',
+        //   this.listeners.has(event.topic) ? this.listeners.get(event.topic)?.size : 0,
+        // );
         const handlers = this.listeners.get(event.topic);
         if (!handlers?.size) {
             console.log('[MessageChannelSimulator] No handlers found for topic:', event.topic);
             console.log('[MessageChannelSimulator] Available topics:', Array.from(this.listeners.keys()));
             return;
         }
-        console.log('[MessageChannelSimulator] Calling', handlers.size, 'handler(s) for topic:', event.topic);
+        // console.log('[MessageChannelSimulator] Calling', handlers.size, 'handler(s) for topic:', event.topic);
         for (const handler of handlers) {
             await handler(event);
         }
@@ -252,90 +285,16 @@ class MessageChannelSimulator {
             },
         });
     }
-    buildRimoriInfo() {
-        if (this.providedInfo) {
-            const clone = this.cloneRimoriInfo(this.providedInfo);
-            clone.profile = this.cloneUserInfo(this.currentUserInfo);
-            clone.pluginId = this.pluginId;
-            clone.tablePrefix = clone.tablePrefix || `${this.pluginId}_`;
-            return clone;
-        }
-        return {
-            url: 'http://localhost:3500',
-            key: 'rimori-sdk-key',
-            backendUrl: 'http://localhost:3501',
-            token: 'rimori-token',
-            expiration: new Date(Date.now() + 60 * 60 * 1000),
-            tablePrefix: `${this.pluginId}_`,
-            pluginId: this.pluginId,
-            guild: {
-                id: 'guild-test',
-                longTermGoalOverride: '',
-                allowUserPluginSettings: true,
-            },
-            installedPlugins: [
-                {
-                    id: this.pluginId,
-                    title: 'Test Plugin',
-                    description: 'Playwright testing plugin',
-                    logo: '',
-                    url: 'https://plugins.rimori.localhost',
-                },
-            ],
-            profile: this.cloneUserInfo(this.currentUserInfo),
-        };
-    }
-    serializeRimoriInfo(info) {
-        return {
-            ...info,
-            expiration: info.expiration.toISOString(),
-        };
-    }
     cloneUserInfo(input) {
         return JSON.parse(JSON.stringify(input));
     }
-    mergeUserInfo(current, overrides) {
-        const clone = this.cloneUserInfo(current);
-        if (overrides.mother_tongue) {
-            clone.mother_tongue = {
-                ...clone.mother_tongue,
-                ...overrides.mother_tongue,
-            };
-        }
-        if (overrides.target_language) {
-            clone.target_language = {
-                ...clone.target_language,
-                ...overrides.target_language,
-            };
-        }
-        if (overrides.study_buddy) {
-            clone.study_buddy = {
-                ...clone.study_buddy,
-                ...overrides.study_buddy,
-            };
-        }
-        const { mother_tongue, target_language, study_buddy, ...rest } = overrides;
-        for (const [key, value] of Object.entries(rest)) {
-            if (value === undefined) {
-                continue;
-            }
-            clone[key] = value;
-        }
-        return clone;
-    }
     registerAutoResponders() {
-        this.autoResponders.set('global.supabase.requestAccess', () => this.buildRimoriInfo());
-        this.autoResponders.set('global.profile.requestUserInfo', () => this.cloneUserInfo(this.currentUserInfo));
-        this.autoResponders.set('global.profile.getUserInfo', () => this.cloneUserInfo(this.currentUserInfo));
+        this.autoResponders.set('global.supabase.requestAccess', () => this.cloneRimoriInfo(this.rimoriInfo));
+        this.autoResponders.set('global.profile.requestUserInfo', () => this.cloneUserInfo(this.rimoriInfo.profile));
+        this.autoResponders.set('global.profile.getUserInfo', () => this.cloneUserInfo(this.rimoriInfo.profile));
     }
     cloneRimoriInfo(info) {
-        return {
-            ...info,
-            expiration: new Date(info.expiration),
-            guild: { ...info.guild },
-            installedPlugins: info.installedPlugins.map((plugin) => ({ ...plugin })),
-            profile: this.cloneUserInfo(info.profile),
-        };
+        return JSON.parse(JSON.stringify(info));
     }
 }
 exports.MessageChannelSimulator = MessageChannelSimulator;