@rimori/playwright-testing 0.3.6 → 0.3.7

package/dist/core/RimoriE2ETestEnvironment.d.ts

@@ -0,0 +1,48 @@
+import { Browser, Page } from '@playwright/test';
+interface RimoriE2ETestEnvironmentOptions {
+    browser: Browser;
+    pluginId: string;
+}
+interface Exercise {
+    title: string;
+    description: string;
+    pluginId: string;
+    actionKey: string;
+    parameters?: Record<string, unknown>;
+}
+export interface Onboarding {
+    motivation_type?: string;
+    preferred_genre?: string;
+    target_country?: string;
+    target_city?: string;
+}
+interface SetupOptions {
+    onboarding?: Onboarding;
+    exercises?: Array<Exercise>;
+    studyPlan?: {
+        complete: boolean;
+    };
+}
+export declare class RimoriE2ETestEnvironment {
+    private browser;
+    private pluginId;
+    private persistentUserContext;
+    private tempUserContext;
+    private testUserEmail;
+    private existingUserEmail;
+    private authToken;
+    constructor(options: RimoriE2ETestEnvironmentOptions);
+    setup({ onboarding, exercises, studyPlan }?: SetupOptions): Promise<void>;
+    getTempUserPage(): Promise<Page>;
+    getPersistUserPage(): Promise<Page>;
+    getTempUserEmail(): string;
+    getPersistUserEmail(): string;
+    private createTestUserViaApi;
+    private deleteTestUserViaApi;
+    private setupConsoleLogging;
+    private setSessionFromMagicLink;
+    private completeOnboarding;
+    private completeExerciseSetup;
+    private completeStudyPlanCreation;
+}
+export {};

package/dist/core/RimoriE2ETestEnvironment.js

@@ -0,0 +1,185 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RimoriE2ETestEnvironment = void 0;
+const dotenv_1 = require("dotenv");
+const study_plan_setup_1 = require("../helpers/e2e/study-plan-setup");
+const onboarding_1 = require("../helpers/e2e/onboarding");
+(0, dotenv_1.config)();
+const RIMORI_URL = 'https://dev-app.rimori.se';
+const BACKEND_URL = 'http://localhost:2800';
+class RimoriE2ETestEnvironment {
+    constructor(options) {
+        this.persistentUserContext = null;
+        this.tempUserContext = null;
+        this.testUserEmail = null;
+        this.existingUserEmail = null;
+        this.authToken = null;
+        this.browser = options.browser;
+        this.pluginId = options.pluginId;
+        this.authToken = process.env.RIMORI_TOKEN ?? '';
+        if (!this.authToken) {
+            throw new Error('RIMORI_TOKEN is not set as an environment variable.');
+        }
+    }
+    async setup({ onboarding, exercises, studyPlan } = {}) {
+        const onboardingData = {
+            motivation_type: onboarding?.motivation_type ?? 'accomplishment',
+            preferred_genre: onboarding?.preferred_genre ?? 'comedy',
+            target_country: onboarding?.target_country ?? 'SE',
+            target_city: onboarding?.target_city ?? 'Malmö',
+        };
+        // Step 1: Create both test users (temp + persist) via API
+        const { temp, persist } = await this.createTestUserViaApi();
+        this.testUserEmail = temp.email;
+        this.existingUserEmail = persist.email;
+        console.log(`[E2E] Test user (temp): ${temp.email}`);
+        console.log(`[E2E] Existing user (persist): ${persist.email}`);
+        this.tempUserContext = await this.browser.newContext({ baseURL: RIMORI_URL });
+        this.persistentUserContext = await this.browser.newContext({ baseURL: RIMORI_URL });
+        await this.setupConsoleLogging(this.tempUserContext, 'temp');
+        await this.setupConsoleLogging(this.persistentUserContext, 'persist');
+        console.log(`[E2E] Preparing existing user context`);
+        // Step 2: Set up existing user browser context with session via magic link
+        await this.setSessionFromMagicLink(this.persistentUserContext, persist.magicLink);
+        // Step 3: Run onboarding for existing user
+        await this.completeOnboarding(this.persistentUserContext, onboardingData);
+        console.log(`[E2E] Setting up test user context`);
+        // Step 4: Set up test user browser context with session via magic link
+        await this.setSessionFromMagicLink(this.tempUserContext, temp.magicLink);
+        // Delete test user when test user context is closed
+        this.tempUserContext.on('close', async () => {
+            await this.deleteTestUserViaApi(temp.email);
+            console.log(`[E2E] Deleted test user: ${temp.email}`);
+        });
+        // Step 5: Run onboarding for test user with e2e plugin flag
+        await this.completeOnboarding(this.tempUserContext, onboardingData, this.pluginId);
+        // Step 6: Add exercises if specified
+        if (exercises && exercises?.length > 0) {
+            console.log(`[E2E] Setting up exercises`);
+            await this.completeExerciseSetup(this.tempUserContext, exercises);
+        }
+        // Step 7: Complete study plan creation if specified
+        if (studyPlan?.complete) {
+            console.log(`[E2E] Setting up study plan`);
+            await this.completeStudyPlanCreation(this.tempUserContext);
+        }
+        console.log(`[E2E] Setup completed`);
+    }
+    async getTempUserPage() {
+        if (!this.tempUserContext) {
+            throw new Error('Test user context not initialized. Call setup() first.');
+        }
+        return this.tempUserContext.newPage();
+    }
+    async getPersistUserPage() {
+        if (!this.persistentUserContext) {
+            throw new Error('Existing user context not initialized. Call setup() first.');
+        }
+        return this.persistentUserContext.newPage();
+    }
+    getTempUserEmail() {
+        if (!this.testUserEmail) {
+            throw new Error('Test user not created. Call setup() first.');
+        }
+        return this.testUserEmail;
+    }
+    getPersistUserEmail() {
+        if (!this.existingUserEmail) {
+            throw new Error('Existing user not created. Call setup() first.');
+        }
+        return this.existingUserEmail;
+    }
+    async createTestUserViaApi() {
+        const response = await fetch(`${BACKEND_URL}/testing/test-user`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${this.authToken}`,
+            },
+            body: JSON.stringify({
+                plugin_id: this.pluginId,
+            }),
+        });
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(`Failed to create test user: ${response.status} ${errorText}`);
+        }
+        return response.json();
+    }
+    async deleteTestUserViaApi(email) {
+        const response = await fetch(`${BACKEND_URL}/testing/test-user`, {
+            method: 'DELETE',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${this.authToken}`,
+            },
+            body: JSON.stringify({
+                plugin_id: this.pluginId,
+                email,
+            }),
+        });
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(`Failed to delete test user: ${response.status} ${errorText}`);
+        }
+    }
+    async setupConsoleLogging(context, user) {
+        console.log(`[E2E] Setting up console logging for ${user}`);
+        context.on('console', (msg) => {
+            const logLevel = msg.type();
+            const logMessage = msg.text();
+            if (logLevel === 'debug')
+                return;
+            if (logMessage.includes('Download the React DevTools'))
+                return;
+            if (logMessage.includes('languageChanged en'))
+                return;
+            if (logMessage.includes('i18next: initialized {debug: true'))
+                return;
+            console.log(`[browser:${logLevel}] [${user}]`, logMessage);
+        });
+    }
+    async setSessionFromMagicLink(context, magicLink) {
+        const page = await context.newPage();
+        await page.goto(magicLink, { waitUntil: 'networkidle' });
+        await page.waitForTimeout(5000);
+        const url = page.url();
+        if (!url.includes('/dashboard') && !url.includes('/onboarding')) {
+            throw new Error(`Failed to set session from magic link: ${url}`);
+        }
+        await page.close();
+        console.log(`[E2E] Authentication completed`);
+    }
+    async completeOnboarding(context, onboarding, e2ePluginId) {
+        console.log(`[E2E] Starting onboarding`);
+        const page = await context.newPage();
+        await page.goto('/onboarding');
+        await page.waitForTimeout(5000);
+        const isOnboaded = page.url().includes('/dashboard');
+        if (!isOnboaded) {
+            console.log(`[E2E] Onboarding user`);
+            await (0, onboarding_1.completeOnboarding)(page, onboarding, e2ePluginId);
+            console.log(`[E2E] Onboarding completed`);
+        }
+        else {
+            console.log(`[E2E] User already onboarded`);
+        }
+        await page.close();
+    }
+    async completeExerciseSetup(context, exercises) {
+        const page = await context.newPage();
+        for (const exercise of exercises) {
+            const encoded = encodeURIComponent(JSON.stringify(exercise));
+            await page.goto(`${RIMORI_URL}/dashboard?flag-e2e-exercise=${encoded}`);
+            // Wait for the exercise to be created and the flag to be cleared from URL
+            await page.waitForURL((url) => !url.searchParams.has('flag-e2e-exercise'), { timeout: 15000 });
+        }
+        await page.close();
+    }
+    async completeStudyPlanCreation(context) {
+        const page = await context.newPage();
+        await (0, study_plan_setup_1.completeStudyPlanGettingStarted)(page);
+        await page.close();
+    }
+}
+exports.RimoriE2ETestEnvironment = RimoriE2ETestEnvironment;

package/dist/helpers/e2e/onboarding.d.ts

@@ -0,0 +1,3 @@
+import { Page } from "@playwright/test";
+import { Onboarding } from "../../core/RimoriE2ETestEnvironment";
+export declare function completeOnboarding(page: Page, onboarding: Required<Onboarding>, e2ePluginId?: string): Promise<void>;

package/dist/helpers/e2e/onboarding.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.completeOnboarding = completeOnboarding;
+const test_1 = require("@playwright/test");
+async function completeOnboarding(page, onboarding, e2ePluginId) {
+    console.log(`[E2E] Onboarding user`);
+    console.log(`[E2E] E2E plugin ID: ${e2ePluginId}`);
+    console.log(`[E2E] Onboarding: ${JSON.stringify(onboarding)}`);
+    const url = e2ePluginId ? `/onboarding?flag-e2e-plugin-id=${e2ePluginId}` : `/onboarding`;
+    await page.goto(url, { waitUntil: 'networkidle' });
+    page.setDefaultTimeout(60000);
+    page.setDefaultNavigationTimeout(60000);
+    // Ensure we're on onboarding page
+    await (0, test_1.expect)(page).toHaveURL(/\/onboarding/);
+    // Step 1: Purpose/Long-term goal
+    const goalInput = page.locator('textarea, input[type="text"]');
+    await goalInput.waitFor({ state: 'visible' });
+    await goalInput.click();
+    await goalInput.fill("test goal");
+    const continueButton = page.getByRole('button', { name: /continue/i });
+    await (0, test_1.expect)(continueButton).toBeEnabled({ timeout: 10000 });
+    await continueButton.click();
+    // Step 2: Motivation type (auto-advances after selection)
+    // Wait for the motivation step heading to appear
+    const motivationHeading = page.getByText('What motivates you most?');
+    await (0, test_1.expect)(motivationHeading).toBeVisible({ timeout: 10000 });
+    const motivationOption = page.locator('label').filter({ hasText: '🏆Progress & Accomplishment' });
+    await (0, test_1.expect)(motivationOption).toBeVisible({ timeout: 10000 });
+    await motivationOption.click();
+    // Step 3: Genre preference (auto-advances after selection)
+    // Wait for the genre step heading to appear
+    const genreHeading = page.getByText('What kind of stories do you like most?');
+    await (0, test_1.expect)(genreHeading).toBeVisible({ timeout: 10000 });
+    const genreOption = page.locator('label').filter({ hasText: 'Comedy' });
+    await (0, test_1.expect)(genreOption).toBeVisible({ timeout: 10000 });
+    await genreOption.click();
+    // Step 4: Location
+    // Wait for the location step to appear
+    const countrySelect = page.getByLabel('Country');
+    await (0, test_1.expect)(countrySelect).toBeVisible({ timeout: 10000 });
+    await countrySelect.selectOption('SE');
+    await page.getByLabel('City (optional)').selectOption('Malmö');
+    await page.getByRole('button', { name: 'Continue' }).click();
+    // Step 5: Wait for setup completion
+    await (0, test_1.expect)(page.getByRole('heading', { name: 'Almost there!' })).toBeVisible({ timeout: 10000 });
+    await page.waitForURL('**/dashboard', { timeout: 120000 });
+    // await page.screenshot({ path: path.join(process.cwd(), 'playwright/dashboard.png') });
+    await (0, test_1.expect)(page.getByRole('heading', { name: "Today's Mission" })).toBeVisible({ timeout: 30000 });
+    await (0, test_1.expect)(page.getByRole('button', { name: 'Grammar', exact: true })).toBeVisible({ timeout: 60000 });
+    await (0, test_1.expect)(page.getByRole('heading', { name: 'Getting Started: Create your first study plan' })).toBeVisible({
+        timeout: 60000,
+    });
+    await (0, test_1.expect)(page.getByText('Train your first flashcard deck', { exact: true })).toBeVisible({ timeout: 200000 });
+    await (0, test_1.expect)(page.locator('iframe').contentFrame().getByRole('button', { name: 'Back to Plugins' })).toBeVisible({
+        timeout: 250000,
+    });
+}

package/dist/helpers/e2e/study-plan-setup.d.ts

@@ -0,0 +1,11 @@
+import { Page } from '@playwright/test';
+/**
+ * Navigates through the study plan getting-started flow on the dashboard.
+ * This clicks through the real UI: milestone planning (Submit Topics) and
+ * exercise creation (Save Exercises).
+ *
+ * Expects the page to already be on the dashboard with a "Getting Started" exercise visible.
+ *
+ * @param page - Playwright page instance, should be on the dashboard
+ */
+export declare function completeStudyPlanGettingStarted(page: Page): Promise<void>;

package/dist/helpers/e2e/study-plan-setup.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.completeStudyPlanGettingStarted = completeStudyPlanGettingStarted;
+const test_1 = require("@playwright/test");
+/**
+ * Navigates through the study plan getting-started flow on the dashboard.
+ * This clicks through the real UI: milestone planning (Submit Topics) and
+ * exercise creation (Save Exercises).
+ *
+ * Expects the page to already be on the dashboard with a "Getting Started" exercise visible.
+ *
+ * @param page - Playwright page instance, should be on the dashboard
+ */
+async function completeStudyPlanGettingStarted(page) {
+    page.goto('/dashboard');
+    await page.waitForTimeout(2000);
+    // Step 1: Find and click the Getting Started exercise card
+    const card = page.getByText('Getting Started: Create your first study plan', { exact: false });
+    await card.waitFor({ timeout: 10000, state: 'visible' }).catch(() => {
+        /* not visible within 10s, continue to early return below */
+    });
+    if (!(await card.isVisible())) {
+        page.close();
+        console.warn(`[E2E] Getting Started card not found, skipping study plan setup`);
+        return;
+    }
+    const gettingStartedCard = page.getByText('Start Exercise', { exact: false }).first();
+    await (0, test_1.expect)(gettingStartedCard).toBeVisible({ timeout: 30000 });
+    await gettingStartedCard.click();
+    // Wait for the study plan plugin iframe to load
+    const iframe = page.locator('iframe').first();
+    await (0, test_1.expect)(iframe).toBeVisible({ timeout: 30000 });
+    const frame = iframe.contentFrame();
+    // Step 2: Milestone Planning Stage
+    // Wait for the 3 milestone cards to appear (AI generates them)
+    await (0, test_1.expect)(frame.getByText('Week 1', { exact: false })).toBeVisible({ timeout: 180000 });
+    await (0, test_1.expect)(frame.getByText('Week 2', { exact: false })).toBeVisible({ timeout: 10000 });
+    await (0, test_1.expect)(frame.getByText('Week 3', { exact: false })).toBeVisible({ timeout: 10000 });
+    // Wait for "Submit Topics" button to be enabled and click it
+    const submitTopicsButton = frame.getByRole('button', { name: /submit topics/i });
+    await (0, test_1.expect)(submitTopicsButton).toBeEnabled({ timeout: 180000 });
+    await submitTopicsButton.click();
+    // Step 3: Exercise Creation Stage
+    // Wait for "Save Exercises" button to appear (AI generates all exercises)
+    const saveExercisesButton = frame.getByRole('button', { name: /save exercises/i });
+    await (0, test_1.expect)(saveExercisesButton).toBeVisible({ timeout: 300000 });
+    await (0, test_1.expect)(saveExercisesButton).toBeEnabled({ timeout: 30000 });
+    await saveExercisesButton.click();
+    // Wait for save to complete (button should disappear or page navigates)
+    await (0, test_1.expect)(saveExercisesButton).toBeHidden({ timeout: 30000 });
+    // Step 4: Verify completion - should be back on dashboard
+    // The "Getting Started" card should be gone and exercises should appear
+    await (0, test_1.expect)(page.getByText("Today's Mission", { exact: false })).toBeVisible({ timeout: 30000 });
+}

package/dist/index.d.ts

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

package/dist/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./core/RimoriTestEnvironment"), exports);
+__exportStar(require("./core/RimoriE2ETestEnvironment"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/playwright-testing",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "Playwright testing utilities for Rimori plugins and workers",
   "license": "Apache-2.0",
   "repository": {
@@ -21,13 +21,16 @@
     "test:ui": "playwright test --ui",
     "test:headed:debug": "playwright test --headed --debug"
   },
+  "dependencies": {
+    "dotenv": "^16.4.5"
+  },
   "peerDependencies": {
     "@playwright/test": "^1.40.0",
-    "@rimori/client": "^2.5.12"
+    "@rimori/client": "^2.5.13"
   },
   "devDependencies": {
     "@playwright/test": "^1.40.0",
-    "@rimori/client": "^2.5.12",
+    "@rimori/client": "^2.5.13",
     "@types/node": "^20.12.7",
     "rimraf": "^5.0.7",
     "typescript": "^5.7.2"