chore: setup e2e tests

.github/actions/setup-e2e-env/action.yml

@@ -0,0 +1,29 @@
+name: Setup E2E Environment
+
+description: Build the CLI and caches Docker layers
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Build the CLI
+      run: npm run build
+      shell: bash
+
+    - name: Link CLI globally
+      run: npm link
+      shell: bash
+
+    - name: Cache Docker layers
+      uses: actions/cache@v3
+      with:
+        path: /home/runner/.docker
+        key: ${{ runner.os }}-docker-${{ github.sha }}
+        restore-keys: |
+          ${{ runner.os }}-docker-
+
+    - name: Run emulator
+      shell: bash
+      run: |
+        set -e
+        juno emulator start --headless &
+        juno emulator wait

.github/workflows/tests-screenshots.yml

@@ -0,0 +1,32 @@
+name: Update E2E Screenshots
+
+on:
+  workflow_dispatch:
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Prepare
+        uses: ./.github/actions/prepare
+
+      - name: Prepare Playwright
+        run: npm run e2e:playwright:install
+
+      - name: Setup Tests Environment
+        uses: ./.github/actions/setup-e2e-env
+
+      - name: Run Playwright tests
+        run: npm run e2e:snapshots
+
+      - name: Commit Playwright updated screenshots
+        uses: EndBug/add-and-commit@v9
+        if: ${{ github.ref != 'refs/heads/main' }}
+        with:
+          add: ./e2e
+          default_author: github_actions
+          message: '🤖 update tests screenshots'

.github/workflows/tests.yml

@@ -0,0 +1,47 @@
+name: E2E Tests
+
+on:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Prepare
+        uses: ./.github/actions/prepare
+
+      - name: Prepare Playwright
+        run: npm run e2e:playwright:install
+
+      - name: Setup Tests Environment
+        uses: ./.github/actions/setup-e2e-env
+
+      - name: Run tests
+        run: npm run e2e:ci
+
+      - name: Upload Playwright report on failure
+        uses: actions/upload-artifact@v4
+        if: ${{ failure() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 3
+      - name: Upload Playwright results on failure
+        uses: actions/upload-artifact@v4
+        if: ${{ failure() }}
+        with:
+          name: test-results
+          path: test-results/
+          retention-days: 3
+
+  may-merge:
+    needs: ['e2e']
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cleared for merging
+        run: echo OK

.gitignore

@@ -36,4 +36,11 @@ dist/
 target/
 templates/eject/rust/Cargo.lock
 templates/eject/rust/src/declarations
-templates/eject/rust/src/satellite/satellite_extension.did
+templates/eject/rust/src/satellite/satellite_extension.did
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

e2e/constants/test-ids.constants.ts

@@ -0,0 +1,18 @@
+import {TestIds} from '../types/test-id';
+
+export const testIds: TestIds = {
+  auth: {
+    signIn: 'btn-sign-in'
+  },
+  createSatellite: {
+    launch: 'btn-launch-satellite',
+    create: 'btn-create-satellite',
+    input: 'input-satellite-name',
+    website: 'input-radio-satellite-website',
+    application: 'input-radio-satellite-application',
+    continue: 'btn-continue-overview'
+  },
+  satelliteOverview: {
+    visit: 'link-visit-satellite'
+  }
+};

e2e/create-website.spec.ts

@@ -0,0 +1,19 @@
+import {testWithII} from '@dfinity/internet-identity-playwright';
+import {expect} from '@playwright/test';
+import {initTestSuite} from './utils/init.utils';
+
+const getConsolePage = initTestSuite();
+
+testWithII('should create a satellite for a website', async () => {
+  const consolePage = getConsolePage();
+
+  await consolePage.createSatellite({kind: 'website'});
+});
+
+testWithII('should visit newly create satellite', async () => {
+  const consolePage = getConsolePage();
+
+  const satellitePage = await consolePage.visitSatellite();
+
+  await expect(satellitePage).toHaveScreenshot({fullPage: true});
+});

e2e/page-objects/console.page.ts

@@ -0,0 +1,69 @@
+import {InternetIdentityPage} from '@dfinity/internet-identity-playwright';
+import {expect} from '@playwright/test';
+import type {Page} from 'playwright-core';
+import {testIds} from '../constants/test-ids.constants';
+import {IdentityPage, type IdentityPageParams} from './identity.page';
+
+export class ConsolePage extends IdentityPage {
+  readonly #consoleIIPage: InternetIdentityPage;
+
+  constructor(params: IdentityPageParams) {
+    super(params);
+
+    this.#consoleIIPage = new InternetIdentityPage({
+      page: this.page,
+      context: this.context,
+      browser: this.browser
+    });
+  }
+
+  async goto(): Promise<void> {
+    await this.page.goto('/');
+  }
+
+  async signIn(): Promise<void> {
+    this.identity = await this.#consoleIIPage.signInWithNewIdentity({
+      selector: `[data-tid=${testIds.auth.signIn}]`
+    });
+  }
+
+  async waitReady(): Promise<void> {
+    const CONTAINER_URL = 'http://127.0.0.1:5987';
+    const INTERNET_IDENTITY_ID = 'rdmx6-jaaaa-aaaaa-aaadq-cai';
+
+    await this.#consoleIIPage.waitReady({url: CONTAINER_URL, canisterId: INTERNET_IDENTITY_ID});
+  }
+
+  async createSatellite({kind}: {kind: 'website' | 'application'}): Promise<void> {
+    await expect(this.page.getByTestId(testIds.createSatellite.launch)).toBeVisible();
+
+    await this.page.getByTestId(testIds.createSatellite.launch).click();
+
+    await expect(this.page.getByTestId(testIds.createSatellite.create)).toBeVisible();
+
+    await this.page.getByTestId(testIds.createSatellite.input).fill('Test');
+    await this.page.getByTestId(testIds.createSatellite[kind]).click();
+
+    await this.page.getByTestId(testIds.createSatellite.create).click();
+
+    await expect(this.page.getByTestId(testIds.createSatellite.continue)).toBeVisible({
+      timeout: 20000
+    });
+
+    await this.page.getByTestId(testIds.createSatellite.continue).click();
+  }
+
+  async visitSatellite(): Promise<Page> {
+    await expect(this.page.getByTestId(testIds.satelliteOverview.visit)).toBeVisible();
+
+    const satellitePagePromise = this.context.waitForEvent('page');
+
+    await this.page.getByTestId(testIds.satelliteOverview.visit).click();
+
+    const satellitePage = await satellitePagePromise;
+
+    await expect(satellitePage).toHaveTitle('Juno / Satellite');
+
+    return satellitePage;
+  }
+}

e2e/page-objects/identity.page.ts

@@ -0,0 +1,25 @@
+import type {Browser, BrowserContext, Page} from '@playwright/test';
+
+export interface IdentityPageParams {
+  page: Page;
+  context: BrowserContext;
+  browser: Browser;
+}
+
+export abstract class IdentityPage {
+  protected identity: number | undefined;
+
+  protected readonly page: Page;
+  protected readonly context: BrowserContext;
+  protected readonly browser: Browser;
+
+  protected constructor({page, context, browser}: IdentityPageParams) {
+    this.page = page;
+    this.context = context;
+    this.browser = browser;
+  }
+
+  async close(): Promise<void> {
+    await this.page.close();
+  }
+}

e2e/types/test-id.ts

@@ -0,0 +1,9 @@
+type TestCTAType = 'btn' | 'link' | 'input';
+
+type TestAction = string;
+
+export type TestId = `${TestCTAType}-${TestAction}`;
+
+type TestSuite = string;
+
+export type TestIds = Record<TestSuite, Record<string, TestId>>;

e2e/utils/init.utils.ts

@@ -0,0 +1,35 @@
+import {testWithII} from '@dfinity/internet-identity-playwright';
+import {ConsolePage} from '../page-objects/console.page';
+
+export const initTestSuite = (): (() => ConsolePage) => {
+  testWithII.describe.configure({mode: 'serial'});
+
+  let consolePage: ConsolePage;
+
+  testWithII.beforeAll(async ({playwright}) => {
+    testWithII.setTimeout(120000);
+
+    const browser = await playwright.chromium.launch();
+
+    const context = await browser.newContext();
+    const page = await context.newPage();
+
+    consolePage = new ConsolePage({
+      page,
+      context,
+      browser
+    });
+
+    await consolePage.waitReady();
+
+    await consolePage.goto();
+
+    await consolePage.signIn();
+  });
+
+  testWithII.afterAll(async () => {
+    await consolePage.close();
+  });
+
+  return (): ConsolePage => consolePage;
+};

juno.config.ts

@@ -0,0 +1,30 @@
+import {defineConfig} from '@junobuild/config';
+
+export default defineConfig({
+  satellite: {
+    ids: {
+      development: '<DEV_SATELLITE_ID>',
+      production: '<PROD_SATELLITE_ID>'
+    },
+    source: 'build',
+    predeploy: ['npm run build'],
+    collections: {
+      datastore: [
+        {
+          collection: 'notes',
+          read: 'managed',
+          write: 'managed',
+          memory: 'stable'
+        }
+      ],
+      storage: [
+        {
+          collection: 'images',
+          read: 'managed',
+          write: 'managed',
+          memory: 'stable'
+        }
+      ]
+    }
+  }
+});