e2e playwright test

.envrc

@@ -1 +1,2 @@
 use flake
+nix_direnv_watch_file */*.nix

.github/workflows/ci.yaml

@@ -0,0 +1,17 @@
+name: "CI"
+on:
+  # Run only when pushing to master branch, and making PRs
+  push:
+    branches:
+      - master
+  pull_request:
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install Nix
+        uses: DeterminateSystems/nix-installer-action@main
+      - uses: DeterminateSystems/magic-nix-cache-action@main
+      - name: E2E tests
+        run: nix run .#e2e-playwright-test

.vscode/extensions.json

@@ -3,6 +3,7 @@
         "rust-lang.rust-analyzer",
         "mkhl.direnv",
         "jnoortheen.nix-ide",
-        "bradlc.vscode-tailwindcss"
+        "bradlc.vscode-tailwindcss",
+        "ms-playwright.playwright"
     ]
 }

README.md

@@ -34,7 +34,9 @@ nix run
 ## Contributing
 
 - When you are done with your changes, run `just fmt` to **autoformat** the source tree; the CI checks for this.
-- Add tests if relevant. Run `just test` to run the **tests**.
+- Add tests if relevant, and run them:
+    - Run `just test` to run the **unit tests**.
+    - Run `just e2e` (requires `just watch` to be running) or `just e2e-release` to run the **end-to-end tests**
 - Add documentation wherever useful. To preview the **docs**, run `just doc`.
 
 ## Frontend tech

e2e/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+/test-results/
+/playwright-report/
+/playwright/.cache/

e2e/README.md

@@ -0,0 +1,6 @@
+# Playwright end-to-end tests
+
+We use [Playwright](https://playwright.dev/dotnet/) to test our application.
+
+- All e2e test are nixified, simply run `nix run .#e2e-playwright-test` from project root
+- A `package.json` exists for better IDE support (autocompletion, hover docs etc)

e2e/flake-module.nix

@@ -0,0 +1,52 @@
+{ lib, ... }:
+{
+  perSystem = { config, self', pkgs, system, ... }: {
+    # e2e test service using playwright
+    process-compose.e2e-playwright-test =
+      let
+        TEST_PORT = "5000";
+      in
+      {
+        tui = false;
+        settings.processes = {
+          start-app = {
+            command = "${lib.getExe self'.packages.default} --site-addr=127.0.0.1:${TEST_PORT} --no-open";
+            readiness_probe = {
+              exec.command = "${lib.getExe pkgs.curl} --fail 127.0.0.1:${TEST_PORT}";
+              initial_delay_seconds = 2;
+              period_seconds = 10;
+              timeout_seconds = 4;
+            };
+          };
+          test = {
+            environment = {
+              inherit TEST_PORT;
+            };
+            command = pkgs.writeShellApplication {
+              name = "e2e-playwright";
+              runtimeInputs = with pkgs; [ nodejs playwright-test ];
+              text = ''
+                cd e2e
+                playwright test --project chromium
+              '';
+            };
+            depends_on."start-app".condition = "process_healthy";
+            availability.exit_on_end = true;
+          };
+        };
+      };
+
+    devShells.e2e-playwright = pkgs.mkShell {
+      buildInputs = with pkgs; [
+        nodejs
+        playwright-test
+      ];
+      shellHook = ''
+        export NODE_PATH=${pkgs.playwright-test}/lib/node_modules
+        # VSCode disrespects NODE_PATH https://github.com/microsoft/TypeScript/issues/8760
+        # So we must manually create ./node_modules
+        just node_modules NODE_PATH=$NODE_PATH
+      '';
+    };
+  };
+}

e2e/playwright.config.ts

@@ -0,0 +1,68 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'line',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: `http://127.0.0.1:${process.env.TEST_PORT}`,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    }
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});
+

e2e/tests/nix-version.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from "@playwright/test";
+
+test('check nix version', async ({ page }) => {
+  await page.goto('/info');
+  const nixVersion = await page.locator(":text('Nix Version') + div").textContent();
+  await expect(nixVersion).toBeTruthy();
+});

flake.nix

@@ -25,6 +25,7 @@
         inputs.process-compose-flake.flakeModule
         inputs.cargo-doc-live.flakeModule
         (inputs.leptos-fullstack + /nix/flake-module.nix)
+        ./e2e/flake-module.nix
       ];
       perSystem = { config, self', pkgs, lib, system, ... }: {
         _module.args.pkgs = import inputs.nixpkgs {
@@ -97,6 +98,7 @@
           inputsFrom = [
             config.treefmt.build.devShell
             self'.devShells.nix-browser
+            self'.devShells.e2e-playwright
           ];
           packages = with pkgs; [
             just

justfile

@@ -26,10 +26,23 @@ test:
     cargo test
     cargo leptos test
 
+# Run end-to-end tests against release server
+e2e-release:
+    nix run .#e2e-playwright-test
+
+# Run end-to-end tests against `just watch` server
+e2e:
+    cd e2e && TEST_PORT=3000 playwright test --project chromium
+
 # Run docs server (live reloading)
 doc:
     cargo-doc-live
 
 # Run CI locally
 ci:
     nixci
+
+# Setup node_modules using Nix (invoked automatically by nix-shell)
+node_modules NODE_PATH:
+    rm -f ./e2e/node_modules
+    ln -sf ${NODE_PATH} ./e2e/node_modules