@rimori/playwright-testing 0.2.0

package/dist/core/RimoriTestEnvironment.js

@@ -0,0 +1,446 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RimoriTestEnvironment = void 0;
+const default_user_info_1 = require("../fixtures/default-user-info");
+const MessageChannelSimulator_1 = require("./MessageChannelSimulator");
+class RimoriTestEnvironment {
+    constructor(options) {
+        this.backendRoutes = {};
+        this.supabaseRoutes = {};
+        this.messageChannelSimulator = null;
+        this.plugin = {
+            /**
+             * Mocks PATCH request for updating plugin_settings.
+             * @param response - The response for PATCH. Defaults to empty array (no rows updated).
+             *                   Should return array with updated row(s) like [{ id: '...' }] if update succeeds.
+             */
+            mockSetSettings: (response, options) => {
+                console.log('Mocking set settings for mockSetSettings', response, options);
+                console.warn('mockSetSettings is not tested');
+                // PATCH request returns array of updated rows
+                // Empty array means no rows matched (will trigger INSERT)
+                // Array with items means update succeeded
+                const defaultResponse = response ?? [];
+                this.addSupabaseRoute('plugin_settings', defaultResponse, { ...options, method: 'PATCH' });
+            },
+            /**
+             * Mocks GET request for fetching plugin_settings.
+             * @param settingsRow - The full row object from plugin_settings table, or null if not found.
+             *                      Should include: { id, plugin_id, guild_id, settings, is_guild_setting, user_id }.
+             *                      If null, simulates no settings exist (triggers INSERT flow).
+             */
+            mockGetSettings: (settingsRow, options) => {
+                console.log('Mocking get settings for mockGetSettings', settingsRow, options);
+                console.warn('mockGetSettings is not tested');
+                // GET request returns the full row or null (from maybeSingle())
+                // null means no settings exist, which triggers setSettings() -> INSERT
+                this.addSupabaseRoute('plugin_settings', settingsRow, options);
+            },
+            /**
+             * Mocks POST request for inserting plugin_settings.
+             * @param response - The response for POST. Defaults to success response with inserted row.
+             */
+            mockInsertSettings: (response, options) => {
+                console.log('Mocking insert settings for mockInsertSettings', response, options);
+                console.warn('mockInsertSettings is not tested');
+                // POST request returns the inserted row or success response
+                // Default to an object representing successful insert
+                const defaultResponse = response ?? {
+                    id: 'mock-settings-id',
+                    plugin_id: this.pluginId,
+                    guild_id: this.rimoriInfo.guild.id,
+                };
+                this.addSupabaseRoute('plugin_settings', defaultResponse, { ...options, method: 'POST' });
+            },
+            mockGetUserInfo: (userInfo, options) => {
+                console.log('Mocking get user info for mockGetUserInfo', userInfo, options);
+                console.warn('mockGetUserInfo is not tested');
+                this.addSupabaseRoute('/user-info', { ...this.rimoriInfo.profile, ...userInfo }, { ...options, delay: 0 });
+            },
+            mockGetPluginInfo: (pluginInfo, options) => {
+                console.log('Mocking get plugin info for mockGetPluginInfo', pluginInfo, options);
+                console.warn('mockGetPluginInfo is not tested');
+                this.addSupabaseRoute('/plugin-info', pluginInfo, options);
+            },
+        };
+        this.db = {
+            mockFrom: () => { },
+            mockTable: () => { },
+        };
+        this.event = {
+            mockEmit: () => { },
+            mockRequest: () => { },
+            mockOn: () => { },
+            mockOnce: () => { },
+            mockRespond: () => { },
+            mockEmitAccomplishment: () => { },
+            mockOnAccomplishment: () => { },
+            mockEmitSidebarAction: () => { },
+            /**
+             * Triggers a side panel action event as the parent application would.
+             * This simulates how rimori-main's SidebarPluginHandler responds to plugin's 'action.requestSidebar' events.
+             * @param payload - The action payload containing plugin_id, action_key, and action parameters
+             */
+            triggerOnSidePanelAction: async (payload) => {
+                if (!this.messageChannelSimulator) {
+                    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.
+             * This simulates how rimori-main's MainPluginHandler uses EventBus.respond to respond
+             * to plugin's 'action.requestMain' events. When the plugin calls onMainPanelAction(),
+             * it emits '{pluginId}.action.requestMain' and listens for the response.
+             * This method sets up a responder that automatically responds when the plugin emits this event.
+             * @param payload - The main panel action payload containing plugin_id, action_key, and action parameters
+             */
+            triggerOnMainPanelAction: async (payload) => {
+                if (!this.messageChannelSimulator) {
+                    throw new Error('MessageChannelSimulator not initialized. Call setup() first.');
+                }
+                // 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 = {
+            mockGetText: (values, options) => {
+                console.log('Mocking get text for mockGetText', values, options);
+                console.warn('mockGetText is not tested');
+                this.addBackendRoute('/llm-text', values, options);
+            },
+            /**
+             * Mocks a streaming text response from the LLM endpoint.
+             * The text will be formatted as SSE (Server-Sent Events) to simulate streaming.
+             *
+             * **Note**: Due to Playwright's route.fulfill() requiring a complete response body,
+             * all SSE chunks are sent at once (no delays). The client will still parse it as SSE correctly.
+             *
+             * @param text - The text to stream. Will be formatted as SSE chunks.
+             * @param options - Optional mock options.
+             */
+            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) => {
+                console.log('Mocking get voice for mockGetVoice', values, options);
+                console.warn('mockGetVoice is not tested');
+                this.addBackendRoute('/voice/tts', values, options);
+            },
+            mockGetTextFromVoice: (text, options) => {
+                console.log('Mocking get text from voice for mockGetTextFromVoice', text, options);
+                console.warn('mockGetTextFromVoice is not tested');
+                this.addBackendRoute('/voice/stt', text, options);
+            },
+            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' });
+            },
+        };
+        this.runtime = {
+            mockFetchBackend: () => { },
+        };
+        this.community = {
+            sharedContent: {
+                mockGet: () => { },
+                mockGetList: () => { },
+                mockGetNew: () => { },
+                mockCreate: () => { },
+                mockUpdate: () => { },
+                mockComplete: () => { },
+                mockUpdateState: () => { },
+                mockRemove: () => { },
+            },
+        };
+        this.exercise = {
+            mockView: () => { },
+            mockAdd: () => { },
+            mockDelete: () => { },
+        };
+        this.navigation = {
+            mockToDashboard: () => { },
+        };
+        this.page = options.page;
+        this.pluginId = options.pluginId;
+        // TODO move to a function
+        this.rimoriInfo = {
+            key: 'rimori-testing-key',
+            token: 'rimori-testing-token',
+            url: 'http://localhost:3500',
+            backendUrl: 'http://localhost:3501',
+            expiration: new Date(Date.now() + 60 * 60 * 1000),
+            tablePrefix: options.pluginId,
+            pluginId: options.pluginId,
+            guild: {
+                id: 'guild-test-id',
+                // @ts-ignore
+                name: 'Test Guild',
+                city: 'Test City',
+                country: 'Testland',
+                description: 'A dummy guild used for testing purposes.',
+                // @ts-ignore
+                createdAt: '2024-01-01T00:00:00.000Z',
+                updatedAt: '2024-01-02T00:00:00.000Z',
+                inviteCode: 'INVITE123',
+                isPublic: true,
+                isShadowGuild: false,
+                allowUserPluginSettings: true,
+                primaryLanguage: 'en',
+                ownerId: 'test-owner-user-id',
+                scope: 'test-scope',
+                longTermGoalOverride: '',
+            },
+            installedPlugins: options.installedPlugins ?? [],
+            profile: default_user_info_1.DEFAULT_USER_INFO,
+            mainPanelPlugin: undefined,
+            sidePanelPlugin: undefined,
+        };
+        this.interceptRoutes();
+    }
+    interceptRoutes() {
+        this.page.route(`${this.rimoriInfo.backendUrl}/**`, (route) => this.handleRoute(route, this.backendRoutes));
+        this.page.route(`${this.rimoriInfo.url}/**`, (route) => this.handleRoute(route, this.supabaseRoutes));
+    }
+    async setup() {
+        console.log('Setting up RimoriTestEnvironment');
+        // 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`)]) {
+            // Default: no settings exist (null) - triggers INSERT flow
+            // Can be overridden with mockGetSettings() to return existing settings
+            this.plugin.mockGetSettings(null);
+        }
+        if (!this.supabaseRoutes[this.createRouteKey('PATCH', `${this.rimoriInfo.url}/rest/v1/plugin_settings`)]) {
+            // Default PATCH handler for plugin_settings - returns empty array (no rows updated)
+            // This triggers INSERT (POST) flow
+            // Can be overridden with mockSetSettings() to simulate successful update
+            this.plugin.mockSetSettings([]);
+        }
+        if (!this.supabaseRoutes[this.createRouteKey('POST', `${this.rimoriInfo.url}/rest/v1/plugin_settings`)]) {
+            // Default POST handler for plugin_settings - simulates successful insert
+            // Can be overridden with mockInsertSettings() to customize response
+            this.plugin.mockInsertSettings();
+        }
+        // Initialize MessageChannelSimulator to simulate parent-iframe communication
+        // This makes the plugin think it's running in an iframe (not standalone mode)
+        // Convert RimoriInfo from CommunicationHandler format to MessageChannelSimulator format
+        this.messageChannelSimulator = new MessageChannelSimulator_1.MessageChannelSimulator({
+            page: this.page,
+            pluginId: this.pluginId,
+            queryParams: {},
+            rimoriInfo: {
+                ...this.rimoriInfo,
+                guild: {
+                    id: this.rimoriInfo.guild.id,
+                    longTermGoalOverride: 'longTermGoalOverride' in this.rimoriInfo.guild ? this.rimoriInfo.guild.longTermGoalOverride : '',
+                    allowUserPluginSettings: this.rimoriInfo.guild.allowUserPluginSettings,
+                },
+                installedPlugins: this.rimoriInfo.installedPlugins.map((p) => ({
+                    id: p.id,
+                    title: p.info?.title || '',
+                    description: p.info?.description || '',
+                    logo: p.info?.logo || '',
+                    url: p.pages?.external_hosted_url || '',
+                })),
+                mainPanelPlugin: this.rimoriInfo.mainPanelPlugin
+                    ? {
+                        id: this.rimoriInfo.mainPanelPlugin.id,
+                        title: this.rimoriInfo.mainPanelPlugin.info?.title || '',
+                        description: this.rimoriInfo.mainPanelPlugin.info?.description || '',
+                        logo: this.rimoriInfo.mainPanelPlugin.info?.logo || '',
+                        url: this.rimoriInfo.mainPanelPlugin.pages?.external_hosted_url || '',
+                    }
+                    : undefined,
+                sidePanelPlugin: this.rimoriInfo.sidePanelPlugin
+                    ? {
+                        id: this.rimoriInfo.sidePanelPlugin.id,
+                        title: this.rimoriInfo.sidePanelPlugin.info?.title || '',
+                        description: this.rimoriInfo.sidePanelPlugin.info?.description || '',
+                        logo: this.rimoriInfo.sidePanelPlugin.info?.logo || '',
+                        url: this.rimoriInfo.sidePanelPlugin.pages?.external_hosted_url || '',
+                    }
+                    : undefined,
+            },
+        });
+        // Initialize the simulator - this injects the necessary shims
+        // to intercept window.parent.postMessage calls and set up MessageChannel communication
+        await this.messageChannelSimulator.initialize();
+    }
+    /**
+     * Formats text as SSE (Server-Sent Events) response.
+     * Since Playwright's route.fulfill() requires complete body, we format as SSE without delays.
+     */
+    formatAsSSE(text) {
+        const chunks = [];
+        // Start event
+        chunks.push(`data: ${JSON.stringify({ type: 'start' })}\n\n`);
+        // Text start event
+        chunks.push(`data: ${JSON.stringify({ type: 'text-start', id: '1' })}\n\n`);
+        // Text delta events (one chunk per character for simplicity)
+        for (let i = 0; i < text.length; i++) {
+            chunks.push(`data: ${JSON.stringify({ type: 'text-delta', delta: text[i] })}\n\n`);
+        }
+        // Text end event
+        chunks.push(`data: ${JSON.stringify({ type: 'text-end', id: '1' })}\n\n`);
+        // Finish event
+        chunks.push(`data: ${JSON.stringify({ type: 'finish' })}\n\n`);
+        // Done marker
+        chunks.push('data: [DONE]\n\n');
+        return chunks.join('');
+    }
+    /**
+     * Normalizes a URL by removing query parameters and fragments for consistent matching.
+     */
+    normalizeUrl(url) {
+        try {
+            const urlObj = new URL(url);
+            return `${urlObj.origin}${urlObj.pathname}`;
+        }
+        catch {
+            return url;
+        }
+    }
+    /**
+     * Creates a route key combining HTTP method and normalized URL.
+     */
+    createRouteKey(method, url) {
+        const normalizedUrl = this.normalizeUrl(url);
+        return `${method} ${normalizedUrl}`;
+    }
+    async handleRoute(route, routes) {
+        console.warn('handleRoute is not tested');
+        const request = route.request();
+        const requestUrl = request.url();
+        const method = request.method().toUpperCase();
+        const routeKey = this.createRouteKey(method, requestUrl);
+        console.log('Handling route', routeKey);
+        const mocks = routes[routeKey];
+        if (!mocks || mocks.length === 0) {
+            console.error('No route handler found for route', routeKey);
+            route.abort('not_found');
+            return;
+        }
+        // Find the first matching mock based on matcher function
+        // Priority: mocks with matchers that match > mocks without matchers (as fallback)
+        let matchingMock;
+        let fallbackMock;
+        for (const mock of mocks) {
+            if (mock.options?.matcher) {
+                try {
+                    if (mock.options.matcher(request)) {
+                        matchingMock = mock;
+                        break;
+                    }
+                }
+                catch (error) {
+                    console.error('Error in matcher function:', error);
+                }
+            }
+            else if (!fallbackMock) {
+                // Keep the first mock without a matcher as fallback
+                fallbackMock = mock;
+            }
+        }
+        // Use matching mock if found, otherwise use fallback
+        matchingMock = matchingMock ?? fallbackMock;
+        if (!matchingMock) {
+            console.error('No matching mock found for route', routeKey);
+            route.abort('not_found');
+            return;
+        }
+        // Handle the matched mock
+        const options = matchingMock.options;
+        await new Promise((resolve) => setTimeout(resolve, options?.delay ?? 0));
+        if (options?.error) {
+            return await route.abort(options.error);
+        }
+        // Handle streaming responses (for mockGetSteamedText)
+        // Since Playwright requires complete body, we format as SSE without delays
+        if (matchingMock.isStreaming && typeof matchingMock.value === 'string') {
+            const body = this.formatAsSSE(matchingMock.value);
+            return await route.fulfill({
+                status: 200,
+                headers: { 'Content-Type': 'text/event-stream' },
+                body,
+            });
+        }
+        // Regular JSON response
+        route.fulfill({
+            status: 200,
+            body: JSON.stringify(matchingMock.value),
+        });
+    }
+    /**
+     * Adds a supabase route to the supabase routes object.
+     * @param path - The path of the route.
+     * @param values - The values to return in the response.
+     * @param options - The options for the route. Method defaults to 'GET' if not specified.
+     */
+    addSupabaseRoute(path, values, options) {
+        console.warn('addSupabaseRoute is not tested');
+        const method = options?.method ?? 'GET';
+        const fullPath = `${this.rimoriInfo.url}/rest/v1/${path}`;
+        const routeKey = this.createRouteKey(method, fullPath);
+        if (!this.supabaseRoutes[routeKey]) {
+            this.supabaseRoutes[routeKey] = [];
+        }
+        this.supabaseRoutes[routeKey].push({
+            value: values,
+            method,
+            options,
+        });
+    }
+    /**
+     * Adds a backend route to the backend routes object.
+     * @param path - The path of the route.
+     * @param values - The values to return in the response.
+     * @param options - The options for the route. Method defaults to 'POST' if not specified.
+     * @param isStreaming - Optional flag to mark this as a streaming response.
+     */
+    addBackendRoute(path, values, options) {
+        console.warn('addBackendRoute is not tested');
+        const method = options?.method ?? 'POST';
+        const fullPath = `${this.rimoriInfo.backendUrl}${path.startsWith('/') ? path : '/' + path}`;
+        const routeKey = this.createRouteKey(method, fullPath);
+        if (!this.backendRoutes[routeKey]) {
+            this.backendRoutes[routeKey] = [];
+        }
+        const { isStreaming, ...mockOptions } = options || {};
+        this.backendRoutes[routeKey].push({
+            value: values,
+            method,
+            options: mockOptions,
+            isStreaming: isStreaming ?? false,
+        });
+    }
+}
+exports.RimoriTestEnvironment = RimoriTestEnvironment;
+// Todo: How to test if the event was received by the parent?
+// TODO: The matcher option of RimoriTestEnvironment v1 might be useful to use

package/dist/fixtures/default-user-info.d.ts

@@ -0,0 +1,3 @@
+import { UserInfo } from '@rimori/client/src/controller/SettingsController';
+export declare const DEFAULT_USER_INFO: UserInfo;
+export type DefaultUserInfo = typeof DEFAULT_USER_INFO;

package/dist/fixtures/default-user-info.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_USER_INFO = void 0;
+exports.DEFAULT_USER_INFO = {
+    mother_tongue: {
+        code: 'en',
+        name: 'English',
+        native: 'English',
+        capitalized: 'English',
+        uppercase: 'ENGLISH',
+    },
+    target_language: {
+        code: 'sv',
+        name: 'Swedish',
+        native: 'Svenska',
+        capitalized: 'Swedish',
+        uppercase: 'SWEDISH',
+    },
+    skill_level_reading: 'Pre-A1',
+    skill_level_writing: 'Pre-A1',
+    skill_level_grammar: 'Pre-A1',
+    skill_level_speaking: 'Pre-A1',
+    skill_level_listening: 'Pre-A1',
+    skill_level_understanding: 'Pre-A1',
+    goal_longterm: 'Learn Swedish',
+    goal_weekly: 'Practice daily',
+    study_buddy: {
+        id: 'buddy-1',
+        name: 'Test Buddy',
+        description: 'Test study buddy',
+        avatarUrl: '',
+        voiceId: 'alloy',
+        aiPersonality: 'friendly',
+    },
+    story_genre: 'fiction',
+    study_duration: 30,
+    motivation_type: 'career',
+    onboarding_completed: true,
+    context_menu_on_select: true,
+    user_name: 'Test User',
+    target_country: 'SE',
+    target_city: 'Stockholm',
+};

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './core/RimoriTestEnvironment';

package/dist/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./core/RimoriTestEnvironment"), exports);

package/dist/test/translator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/translator.test.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const RimoriTestEnvironment_1 = require("../core/RimoriTestEnvironment");
+const pluginId = 'pl7720512027';
+const pluginUrl = 'http://localhost:3009';
+test_1.test.describe('Translator Plugin', () => {
+    let env;
+    test_1.test.beforeEach(async ({ page }) => {
+        env = new RimoriTestEnvironment_1.RimoriTestEnvironment({ page, pluginId });
+        env.ai.mockGetObject({
+            gramatically_corrected_input_text: 'tree',
+            detected_language: 'English',
+            text_type: 'noun',
+            word_unexisting_likelihood: 0,
+            translation_mother_tongue: 'tree',
+            translation_swedish: 'träd',
+            translation_noun_singular: 'tree',
+            plural: 'träd',
+            en_ett_word: 'ett',
+            alternative_meaning_mother_tongue: '',
+        }, {
+            matcher: (request) => {
+                const body = request.postDataJSON();
+                return body?.instructions?.includes('Look up the word or phrase') ?? false;
+            },
+        });
+        env.ai.mockGetObject({
+            example_sentence: {
+                target_language: 'Jag ser ett **träd** i skogen.',
+                english: 'I see a **tree** in the forest.',
+                mother_tongue: 'Ich sehe einen **Baum** im Wald.',
+            },
+            explanation: 'A tall perennial plant with a single woody stem, branches, and leaves.',
+        }, {
+            delay: 1000,
+            matcher: (request) => {
+                const body = request.postDataJSON();
+                return body?.instructions?.includes('Provide example sentence and explanation') ?? false;
+            },
+        });
+        page.on('console', (msg) => {
+            console.log(`[browser:${msg.type()}]`, msg.text());
+        });
+        await env.setup();
+        await page.goto(`${pluginUrl}/#/sidebar/translate`);
+    });
+    // test.afterEach(async () => {
+    //   await env.teardown();
+    // });
+    (0, test_1.test)('translates with open page', async ({ page }) => {
+        //fill and submit the word to be translated
+        await page.getByRole('textbox', { name: 'snö, fog, Baum,....' }).fill('tree');
+        await page.getByRole('button', { name: 'Look up word' }).click();
+        //wait for basic translation to be completed
+        await (0, test_1.expect)(page.getByText('ett')).toBeVisible();
+        await (0, test_1.expect)(page.getByText('träd', { exact: true })).toBeVisible();
+        await (0, test_1.expect)(page.getByText('(träd)')).toBeVisible();
+        await (0, test_1.expect)(page.getByText('tree')).toBeVisible();
+        await (0, test_1.expect)(page.locator('.h-4').first()).toBeVisible();
+        await (0, test_1.expect)(page.locator('.h-4.bg-gray-700.rounded-md.animate-pulse.w-full')).toBeVisible();
+        //wait for example sentence to be completed
+        await (0, test_1.expect)(page.getByText('A tall perennial plant with a single woody stem, branches, and leaves.')).toBeVisible();
+        await (0, test_1.expect)(page.getByText('Jag ser ett träd i skogen.')).toBeVisible();
+        await (0, test_1.expect)(page.getByText('Ich sehe einen Baum im Wald.')).toBeVisible();
+    });
+    (0, test_1.test)('translates via side panel action event', async ({ page }) => {
+        // Set up the listener BEFORE navigating so it's ready when the plugin calls onSidePanelAction
+        await env.event.triggerOnSidePanelAction({
+            plugin_id: pluginId,
+            action_key: 'translate',
+            action: 'translate',
+            text: 'tree',
+        });
+        // Navigate to the page - the plugin will load and call onSidePanelAction, which will trigger our listener
+        await page.goto(`${pluginUrl}/#/sidebar/translate`);
+        await (0, test_1.expect)(page.getByText('ett')).toBeVisible();
+        await (0, test_1.expect)(page.getByText('träd', { exact: true })).toBeVisible();
+        await (0, test_1.expect)(page.getByText('A tall perennial plant with a single woody stem, branches, and leaves.')).toBeVisible();
+        await (0, test_1.expect)(page.getByText('Jag ser ett träd i skogen.')).toBeVisible();
+    });
+    (0, test_1.test)('translates and resets the translator', async ({ page }) => {
+        // Set up the listener BEFORE navigating so it's ready when the plugin calls onSidePanelAction
+        await env.event.triggerOnSidePanelAction({
+            plugin_id: pluginId,
+            action_key: 'translate',
+            action: 'translate',
+            text: 'tree',
+        });
+        // Navigate to the page - the plugin will load and call onSidePanelAction, which will trigger our listener
+        await page.goto(`${pluginUrl}/#/sidebar/translate`);
+        // wait for basic translation to be completed
+        await (0, test_1.expect)(page.getByText('ett')).toBeVisible();
+        await (0, test_1.expect)(page.getByText('träd', { exact: true })).toBeVisible();
+        // wait for full translation to be completed
+        await (0, test_1.expect)(page.getByText('Jag ser ett träd i skogen.')).toBeVisible();
+        // reset the translator
+        await page.getByRole('button', { name: 'New translation' }).click();
+        // wait for reset to be completed
+        await (0, test_1.expect)(page.getByText('Translate')).toBeVisible();
+        await (0, test_1.expect)(page.getByRole('textbox', { name: 'snö, fog, Baum,....' })).toBeVisible();
+    });
+    (0, test_1.test)('translates and ask question about the translation', async ({ page }) => {
+        // Mock streaming text response for the chat/question feature
+        await env.ai.mockGetSteamedText('This is a tree in Swedish: träd. It is an ett word.');
+        // Set up the listener BEFORE navigating so it's ready when the plugin calls onSidePanelAction
+        await env.event.triggerOnSidePanelAction({
+            plugin_id: pluginId,
+            action_key: 'translate',
+            action: 'translate',
+            text: 'tree',
+        });
+        // Navigate to the page - the plugin will load and call onSidePanelAction, which will trigger our listener
+        await page.goto(`${pluginUrl}/#/sidebar/translate`);
+        // wait for translation to be completed
+        await (0, test_1.expect)(page.getByText('ett')).toBeVisible();
+        await (0, test_1.expect)(page.getByText('träd', { exact: true })).toBeVisible();
+        await (0, test_1.expect)(page.getByText('Jag ser ett träd i skogen.')).toBeVisible();
+        // ask a question about the translation
+        await page.getByRole('textbox', { name: 'Ask questions...' }).click();
+        await page.getByRole('textbox', { name: 'Ask questions...' }).fill('What does that mean, explain in detail!');
+        await page.getByRole('textbox', { name: 'Ask questions...' }).press('Enter');
+        await (0, test_1.expect)(page.getByText('What does that mean, explain')).toBeVisible();
+        // validate that ai response is visible
+        await (0, test_1.expect)(page.getByText('This is a tree in Swedish: träd. It is an ett word.')).toBeVisible();
+        // reset the translator and check that the ai chat is cleared
+        await page.getByRole('button', { name: 'New translation' }).click();
+        await page.getByRole('textbox', { name: 'snö, fog, Baum,....' }).fill('tree');
+        await page.getByRole('button', { name: 'Look up word' }).click();
+        await (0, test_1.expect)(page.getByText('ett')).toBeVisible();
+        await page.getByText('Jag ser ett träd i skogen.').waitFor({ state: 'visible' });
+        await (0, test_1.expect)(page.getByText('This is a tree in Swedish: träd. It is an ett word.')).not.toBeVisible();
+    });
+});