@rimori/playwright-testing 0.2.0 → 0.2.2

package/README.md

@@ -1,10 +1,10 @@
-# @rimori/playwright
+# @rimori/playwright-testing
 
 Playwright testing utilities for Rimori plugins. This package provides a complete testing environment that simulates how plugins run within the Rimori application, including MessageChannel communication, API mocking, and event handling.
 
 ## Overview
 
-The `@rimori/playwright` package enables end-to-end testing of Rimori plugins by:
+The `@rimori/playwright-testing` package enables end-to-end testing of Rimori plugins by:
 
 - **Simulating iframe environment**: Makes plugins think they're running in an iframe (not standalone mode)
 - **MessageChannel simulation**: Mimics the parent-iframe communication used in production
@@ -14,16 +14,167 @@ The `@rimori/playwright` package enables end-to-end testing of Rimori plugins by
 ## Installation
 
 ```bash
-npm install --save-dev @rimori/playwright @playwright/test
+npm install --save-dev @rimori/playwright-testing @playwright/test
 # or
-pnpm add -D @rimori/playwright @playwright/test
+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
 
 ```typescript
 import { test, expect } from '@playwright/test';
-import { RimoriTestEnvironment } from '@rimori/playwright';
+import { RimoriTestEnvironment } from '@rimori/playwright-testing';
 
 const pluginId = 'pl7720512027';
 const pluginUrl = 'http://localhost:3009';
@@ -338,7 +489,7 @@ env.ai.mockGetObject(
 
 ```typescript
 import { test, expect } from '@playwright/test';
-import { RimoriTestEnvironment } from '@rimori/playwright';
+import { RimoriTestEnvironment } from '@rimori/playwright-testing';
 
 const pluginId = 'pl7720512027';
 const pluginUrl = 'http://localhost:3009';

package/dist/core/RimoriTestEnvironment.d.ts

@@ -26,6 +26,12 @@ interface MockOptions {
      * The HTTP method for the route. If not provided, defaults will be used based on the route type.
      */
     method?: HttpMethod;
+    /**
+     * If true, the mock is removed after first use. Default: false (persistent).
+     * This allows for sequential mock responses where each mock is consumed once.
+     * Useful for testing flows where the same route is called multiple times with different responses.
+     */
+    once?: boolean;
 }
 export declare class RimoriTestEnvironment {
     private readonly page;
@@ -50,6 +56,10 @@ export declare class RimoriTestEnvironment {
      * Creates a route key combining HTTP method and normalized URL.
      */
     private createRouteKey;
+    /**
+     * Removes a one-time mock from the mocks array after it's been used.
+     */
+    private removeOneTimeMock;
     private handleRoute;
     /**
      * Adds a supabase route to the supabase routes object.
@@ -96,7 +106,22 @@ export declare class RimoriTestEnvironment {
         mockGetPluginInfo: (pluginInfo: Plugin, options?: MockOptions) => void;
     };
     readonly db: {
-        mockFrom: () => void;
+        /**
+         * Mocks a Supabase table endpoint (from(tableName)).
+         * The table name will be prefixed with the plugin ID in the actual URL.
+         *
+         * Supabase operations map to HTTP methods as follows:
+         * - .select() → GET
+         * - .insert() → POST
+         * - .update() → PATCH
+         * - .delete() → DELETE (can return data with .delete().select())
+         * - .upsert() → POST
+         *
+         * @param tableName - The table name (e.g., 'decks')
+         * @param value - The response value to return for the request
+         * @param options - Mock options including HTTP method (defaults to 'GET' if not specified)
+         */
+        mockFrom: (tableName: string, value: unknown, options?: MockOptions) => void;
         mockTable: () => void;
     };
     readonly event: {

package/dist/core/RimoriTestEnvironment.js

@@ -43,6 +43,7 @@ class RimoriTestEnvironment {
             mockInsertSettings: (response, options) => {
                 console.log('Mocking insert settings for mockInsertSettings', response, options);
                 console.warn('mockInsertSettings is not tested');
+                // TODO this function should not exist and possibly be combined with the mockSetSettings function
                 // POST request returns the inserted row or success response
                 // Default to an object representing successful insert
                 const defaultResponse = response ?? {
@@ -64,7 +65,26 @@ class RimoriTestEnvironment {
             },
         };
         this.db = {
-            mockFrom: () => { },
+            /**
+             * Mocks a Supabase table endpoint (from(tableName)).
+             * The table name will be prefixed with the plugin ID in the actual URL.
+             *
+             * Supabase operations map to HTTP methods as follows:
+             * - .select() → GET
+             * - .insert() → POST
+             * - .update() → PATCH
+             * - .delete() → DELETE (can return data with .delete().select())
+             * - .upsert() → POST
+             *
+             * @param tableName - The table name (e.g., 'decks')
+             * @param value - The response value to return for the request
+             * @param options - Mock options including HTTP method (defaults to 'GET' if not specified)
+             */
+            mockFrom: (tableName, value, options) => {
+                console.log('Mocking db.from for table:', tableName, 'method:', options?.method ?? 'GET', value, options);
+                const fullTableName = `${this.pluginId}_${tableName}`;
+                this.addSupabaseRoute(fullTableName, value, options);
+            },
             mockTable: () => { },
         };
         this.event = {
@@ -86,15 +106,11 @@ class RimoriTestEnvironment {
                     throw new Error('MessageChannelSimulator not initialized. Call setup() first.');
                 }
                 const topic = `${this.pluginId}.action.requestSidebar`;
-                console.log('[RimoriTestEnvironment] Setting up listener for topic:', topic, 'with payload:', payload);
                 const actionPayload = payload;
                 const off = this.messageChannelSimulator.on(topic, async (event) => {
-                    console.log('[RimoriTestEnvironment] Received action.requestSidebar event:', event);
-                    console.log('[RimoriTestEnvironment] Responding to action.requestSidebar with payload:', actionPayload);
                     await this.messageChannelSimulator.emit(topic, actionPayload, 'sidebar');
                     off();
                 });
-                console.log('[RimoriTestEnvironment] Listener set up for topic:', topic);
             },
             /**
              * Triggers a main panel action event as the parent application would.
@@ -111,20 +127,16 @@ class RimoriTestEnvironment {
                 // Listen for when the plugin emits 'action.requestMain' (which becomes '{pluginId}.action.requestMain')
                 // and respond with the MainPanelAction payload, matching rimori-main's EventBus.respond behavior
                 const topic = `${this.pluginId}.action.requestMain`;
-                console.log('[RimoriTestEnvironment] Setting up listener for topic:', topic, 'with payload:', payload);
                 // Store the payload in a closure so we can respond with it
                 const actionPayload = payload;
                 // Set up a one-time listener that responds when the plugin emits 'action.requestMain'
                 // The handler receives the event object from the plugin
                 const off = this.messageChannelSimulator.on(topic, async (event) => {
-                    console.log('[RimoriTestEnvironment] Received action.requestMain event:', event);
-                    console.log('[RimoriTestEnvironment] Responding to action.requestMain with payload:', actionPayload);
                     // When plugin emits 'action.requestMain', respond with the MainPanelAction data
                     // The sender is 'mainPanel' to match rimori-main's MainPluginHandler behavior
                     await this.messageChannelSimulator.emit(topic, actionPayload, 'mainPanel');
                     off(); // Remove listener after responding once (one-time response like EventBus.respond)
                 });
-                console.log('[RimoriTestEnvironment] Listener set up for topic:', topic);
             },
         };
         this.ai = {
@@ -145,7 +157,6 @@ class RimoriTestEnvironment {
              */
             mockGetSteamedText: (text, options) => {
                 console.log('Mocking get steamed text for mockGetSteamedText', text, options);
-                console.warn('mockGetSteamedText is not tested');
                 this.addBackendRoute('/ai/llm', text, { ...options, isStreaming: true });
             },
             mockGetVoice: (values, options) => {
@@ -160,7 +171,6 @@ class RimoriTestEnvironment {
             },
             mockGetObject: (value, options) => {
                 console.log('Mocking get object for mockGetObject', value, options);
-                console.warn('mockGetObject is not tested');
                 this.addBackendRoute('/ai/llm-object', value, { ...options, method: 'POST' });
             },
         };
@@ -230,6 +240,9 @@ class RimoriTestEnvironment {
     }
     async setup() {
         console.log('Setting up RimoriTestEnvironment');
+        this.page.on('console', (msg) => {
+            console.log(`[browser:${msg.type()}]`, msg.text());
+        });
         // Add default handlers for common routes that plugins typically access
         // These can be overridden by explicit mock calls
         if (!this.supabaseRoutes[this.createRouteKey('GET', `${this.rimoriInfo.url}/rest/v1/plugin_settings`)]) {
@@ -334,6 +347,17 @@ class RimoriTestEnvironment {
         const normalizedUrl = this.normalizeUrl(url);
         return `${method} ${normalizedUrl}`;
     }
+    /**
+     * Removes a one-time mock from the mocks array after it's been used.
+     */
+    removeOneTimeMock(mock, mocks) {
+        if (!mock.options?.once)
+            return;
+        const index = mocks.indexOf(mock);
+        if (index > -1) {
+            mocks.splice(index, 1);
+        }
+    }
     async handleRoute(route, routes) {
         console.warn('handleRoute is not tested');
         const request = route.request();
@@ -378,6 +402,8 @@ class RimoriTestEnvironment {
         // Handle the matched mock
         const options = matchingMock.options;
         await new Promise((resolve) => setTimeout(resolve, options?.delay ?? 0));
+        // Remove one-time mock after handling (before responding)
+        this.removeOneTimeMock(matchingMock, mocks);
         if (options?.error) {
             return await route.abort(options.error);
         }
@@ -392,9 +418,10 @@ class RimoriTestEnvironment {
             });
         }
         // Regular JSON response
+        const responseBody = JSON.stringify(matchingMock.value);
         route.fulfill({
             status: 200,
-            body: JSON.stringify(matchingMock.value),
+            body: responseBody,
         });
     }
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/playwright-testing",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Playwright testing utilities for Rimori plugins and workers",
   "license": "Apache-2.0",
   "main": "dist/index.js",