test(error_boundary): add e2e testing (#1651)

* test(error_boundary): open app * test(error_boundary): click up arrow * test(error_boundary): click down arrow * test(error_boundary): type number * test(error_boundary): clear number * fix(build): clean trunk directories * fix(test-report): detect unit tests * ci(build): echo stop trunk
2025-12-27 09:54:41 -05:00 · 2023-09-04 13:25:44 -04:00
parent 70e1ad41e2
commit 2ca1c51fdc
16 changed files with 388 additions and 21 deletions
--- a/examples/Makefile.toml
+++ b/examples/Makefile.toml
@@ -49,7 +49,7 @@ jq -R -s -c 'split("\n")[:-1]')
 echo "CARGO_MAKE_CRATE_WORKSPACE_MEMBERS = $examples"
 '''

-[tasks.test-runner-report]
+[tasks.test-report]
 workspace = false
 description = "report ci test runners and tools for each example - OPTION: [all]"
 script = '''
@@ -62,11 +62,12 @@ YELLOW="\e[0;33m"
 RESET="\e[0m"

 echo
-echo "${YELLOW}Test Runner & Tool Report${RESET}"
+echo "${YELLOW}Test Report${RESET}"
+echo
 echo "${ITALIC}Pass the option \"all\" to show all the examples${RESET}"
 echo

-makefile_paths=$(find . -name Makefile.toml -not -path '*/target/*' |
+makefile_paths=$(find . -name Makefile.toml -not -path '*/target/*' -not -path '*/node_modules/*' |
  sed 's%./%%' |
  sed 's%/Makefile.toml%%' |
  grep -v Makefile.toml |
@@ -79,11 +80,16 @@ for path in $makefile_paths; do

  crate_symbols=

-  test_count=$(grep -rl -E "#\[test\]" | wc -l)
+  test_count=$(grep -r --exclude-dir=target --exclude-dir=node_modules --fixed-strings "#[test]" | wc -l)
  if [ $test_count -gt 0 ]; then
      crate_symbols="T"
  fi

+  rstest_count=$(grep -r --exclude-dir=target --exclude-dir=node_modules --fixed-strings "#[rstest]" | wc -l)
+  if [ $rstest_count -gt 0 ]; then
+      crate_symbols=$crate_symbols"R"
+  fi
+
  while read -r line; do
      case $line in
      *"cucumber"*)
@@ -92,21 +98,18 @@ for path in $makefile_paths; do
      *"fantoccini"*)
          crate_symbols=$crate_symbols"F"
          ;;
-      *"rstest"*)
-          crate_symbols=$crate_symbols"R"
-          ;;
      esac
  done <"./Cargo.toml"

  while read -r line; do
    case $line in
-      *"wasm-test.toml"*)
+      *"cargo-make/wasm-test"*)
          crate_symbols=$crate_symbols"W"
        ;;
-      *"playwright-test.toml"*)
+      *"cargo-make/playwright"*)
          crate_symbols=$crate_symbols"P"
        ;;
-      *"cargo-leptos-test.toml"*)
+      *"cargo-make/cargo-leptos-test"*)
          crate_symbols=$crate_symbols"L"
        ;;
    esac
@@ -132,20 +135,20 @@ for path in $makefile_paths; do
  cd ${start_path}
 done

-c="${BOLD}${YELLOW}C${RESET} = Cucumber"
+c="${BOLD}${YELLOW}C${RESET} = Cucumber Test"
 f="${BOLD}${YELLOW}F${RESET} = Fantoccini WebDriver"
-l="${BOLD}${YELLOW}L${RESET} = Cargo Leptos"
-p="${BOLD}${YELLOW}P${RESET} = Playwright"
+l="${BOLD}${YELLOW}L${RESET} = Cargo Leptos Test"
+p="${BOLD}${YELLOW}P${RESET} = Playwright Test"
 r="${BOLD}${YELLOW}R${RESET} = RS Test"
-t="${BOLD}${YELLOW}T${RESET} = Cargo"
-w="${BOLD}${YELLOW}W${RESET} = WASM"
+u="${BOLD}${YELLOW}U${RESET} = Unit Test"
+w="${BOLD}${YELLOW}W${RESET} = WASM Test"

 echo
-echo "${ITALIC}Key:${RESET} $c, $f, $l, $p, $r, $t, $w"
+echo "${ITALIC}Keys:${RESET}\n  $c\n  $f\n  $l\n  $p\n  $r\n  $u\n  $w"
 echo
 '''

 # ALIASES

 [tasks.tr]
-alias = "test-runner-report"
+alias = "test-report"
--- a/examples/cargo-make/clean.toml
+++ b/examples/cargo-make/clean.toml
@@ -12,7 +12,7 @@ args = ["-rf", "target"]

 [tasks.clean-trunk]
 script = '''
-find . -type d -name target | xargs rm -rf
+find . -type d -name dist | xargs rm -rf
 '''

 [tasks.clean-node_modules]
--- a/examples/cargo-make/playwright-trunk-test.toml
+++ b/examples/cargo-make/playwright-trunk-test.toml
@@ -0,0 +1,17 @@
+extend = [
+    { path = "../cargo-make/playwright.toml" },
+    { path = "../cargo-make/trunk_server.toml" },
+]
+
+[tasks.integration-test]
+dependencies = [
+    "maybe-start-trunk",
+    "wait-one",
+    "test-playwright",
+    "stop-trunk",
+]
+
+[tasks.wait-one]
+script = '''
+sleep 1
+'''
--- a/examples/cargo-make/trunk_server.toml
+++ b/examples/cargo-make/trunk_server.toml
@@ -8,8 +8,26 @@ args = ["serve", "${@}"]

 [tasks.stop-trunk]
 script = '''
-  pkill -f "cargo-make"
-  pkill -f "trunk"
+  pkill -ef "trunk"
+'''
+
+[tasks.trunk-status]
+script = '''
+  if [ -z $(pidof trunk) ]; then
+    echo trunk is not running
+  else
+    echo trunk is up
+  fi
+'''
+
+[tasks.maybe-start-trunk]
+script = '''
+  if [ -z $(pidof trunk) ]; then
+    echo Starting trunk...
+    cargo make start-trunk ${@} & 
+  else
+    echo Trunk already started
+  fi
 '''

 # ALIASES
--- a/examples/error_boundary/.gitignore
+++ b/examples/error_boundary/.gitignore
@@ -0,0 +1,20 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
+# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
+# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
+Cargo.lock
+
+# These are backup files generated by rustfmt
+**/*.rs.bk
+
+# Support playwright testing
+node_modules/
+test-results/
+end2end/playwright-report/
+playwright/.cache/
+pnpm-lock.yaml
+
+# Support trunk
+dist
--- a/examples/error_boundary/Makefile.toml
+++ b/examples/error_boundary/Makefile.toml
@@ -1 +1,4 @@
-extend = [{ path = "../cargo-make/main.toml" }]
+extend = [
+    { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/playwright-trunk-test.toml" },
+]
--- a/examples/error_boundary/e2e/.gitignore
+++ b/examples/error_boundary/e2e/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/
--- a/examples/error_boundary/e2e/package-lock.json
+++ b/examples/error_boundary/e2e/package-lock.json
@@ -0,0 +1,83 @@
+{
+  "name": "grip",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "grip",
+      "devDependencies": {
+        "@playwright/test": "^1.35.1"
+      }
+    },
+    "node_modules/.pnpm/@playwright+test@1.33.0": {
+      "extraneous": true
+    },
+    "node_modules/.pnpm/@types+node@20.2.1/node_modules/@types/node": {
+      "version": "20.2.1",
+      "extraneous": true,
+      "license": "MIT"
+    },
+    "node_modules/.pnpm/playwright-core@1.33.0/node_modules/playwright-core": {
+      "version": "1.33.0",
+      "extraneous": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.35.1.tgz",
+      "integrity": "sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "playwright-core": "1.35.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.3.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.1.tgz",
+      "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==",
+      "dev": true
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz",
+      "integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    }
+  }
+}
--- a/examples/error_boundary/e2e/package.json
+++ b/examples/error_boundary/e2e/package.json
@@ -0,0 +1,7 @@
+{
+  "private": "true",
+  "scripts": {},
+  "devDependencies": {
+    "@playwright/test": "^1.35.1"
+  }
+}
--- a/examples/error_boundary/e2e/playwright.config.ts
+++ b/examples/error_boundary/e2e/playwright.config.ts
@@ -0,0 +1,77 @@
+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.DEV,
+  /* Retry on CI only */
+  retries: process.env.DEV ? 0 : 2,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.DEV ? 1 : 1,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [["html", { open: "never" }], ["list"]],
+  /* 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:8080",
+
+    /* 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"] },
+    },
+
+    // {
+    //   name: "firefox",
+    //   use: { ...devices["Desktop Firefox"] },
+    // },
+
+    // {
+    //   name: "webkit",
+    //   use: { ...devices["Desktop Safari"] },
+    // },
+
+    /* 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: "cd ../ && trunk serve",
+  //   url: "http://127.0.0.1:8080",
+  //   reuseExistingServer: false, //!process.env.CI,
+  // },
+});
--- a/examples/error_boundary/e2e/tests/clear_number.spec.ts
+++ b/examples/error_boundary/e2e/tests/clear_number.spec.ts
@@ -0,0 +1,23 @@
+import { test, expect } from "@playwright/test";
+import { HomePage } from "./fixtures/home_page";
+
+test.describe("Clear Number", () => {
+  test("should see the error message", async ({ page }) => {
+    const ui = new HomePage(page);
+    await ui.goto();
+
+    await ui.clearInput();
+
+    await expect(ui.errorMessage).toHaveText("Not a number! Errors: ");
+  });
+  test("should see the error list", async ({ page }) => {
+    const ui = new HomePage(page);
+    await ui.goto();
+
+    await ui.clearInput();
+
+    await expect(ui.errorList).toHaveText(
+      "cannot parse integer from empty string"
+    );
+  });
+});
--- a/examples/error_boundary/e2e/tests/click_down_arrow.spec.ts
+++ b/examples/error_boundary/e2e/tests/click_down_arrow.spec.ts
@@ -0,0 +1,17 @@
+import { test, expect } from "@playwright/test";
+import { HomePage } from "./fixtures/home_page";
+
+test.describe("Click Down Arrow", () => {
+  test("should see the negative number", async ({ page }) => {
+    const ui = new HomePage(page);
+    await ui.goto();
+
+    await ui.clickDownArrow();
+    await ui.clickDownArrow();
+    await ui.clickDownArrow();
+    await ui.clickDownArrow();
+    await ui.clickDownArrow();
+
+    await expect(ui.successMessage).toHaveText("You entered -5");
+  });
+});
--- a/examples/error_boundary/e2e/tests/click_up_arrow.spec.ts
+++ b/examples/error_boundary/e2e/tests/click_up_arrow.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from "@playwright/test";
+import { HomePage } from "./fixtures/home_page";
+
+test.describe("Click Up Arrow", () => {
+  test("should see the positive number", async ({ page }) => {
+    const ui = new HomePage(page);
+    await ui.goto();
+
+    await ui.clickUpArrow();
+    await ui.clickUpArrow();
+    await ui.clickUpArrow();
+
+    await expect(ui.successMessage).toHaveText("You entered 3");
+  });
+});
--- a/examples/error_boundary/e2e/tests/fixtures/home_page.ts
+++ b/examples/error_boundary/e2e/tests/fixtures/home_page.ts
@@ -0,0 +1,56 @@
+import { expect, Locator, Page } from "@playwright/test";
+
+export class HomePage {
+  readonly page: Page;
+  readonly pageTitle: Locator;
+  readonly numberInput: Locator;
+  readonly successMessage: Locator;
+  readonly errorMessage: Locator;
+
+  readonly errorList: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+
+    this.pageTitle = page.locator("h1");
+    this.numberInput = page.getByLabel(
+      "Type a number (or something that's not a number!)"
+    );
+    this.successMessage = page.locator("label p");
+    this.errorMessage = page.locator("div p");
+    this.errorList = page.getByRole("list");
+  }
+
+  async goto() {
+    await this.page.goto("/");
+  }
+
+  async enterNumber(count: string, index: number = 0) {
+    await Promise.all([
+      this.numberInput.waitFor(),
+      this.numberInput.fill(count),
+    ]);
+  }
+
+  async clickUpArrow() {
+    await Promise.all([
+      this.numberInput.waitFor(),
+      this.numberInput.press("ArrowUp"),
+    ]);
+  }
+
+  async clickDownArrow() {
+    await Promise.all([
+      this.numberInput.waitFor(),
+      this.numberInput.press("ArrowDown"),
+    ]);
+  }
+
+  async clearInput() {
+    await Promise.all([
+      this.numberInput.waitFor(),
+      this.clickUpArrow(),
+      this.numberInput.press("Backspace"),
+    ]);
+  }
+}
--- a/examples/error_boundary/e2e/tests/open_app.spec.ts
+++ b/examples/error_boundary/e2e/tests/open_app.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from "@playwright/test";
+import { HomePage } from "./fixtures/home_page";
+
+test.describe("Open App", () => {
+  test("should see the page title", async ({ page }) => {
+    const ui = new HomePage(page);
+    await ui.goto();
+
+    await expect(ui.pageTitle).toHaveText("Error Handling");
+  });
+});
--- a/examples/error_boundary/e2e/tests/type_number.spec.ts
+++ b/examples/error_boundary/e2e/tests/type_number.spec.ts
@@ -0,0 +1,13 @@
+import { test, expect } from "@playwright/test";
+import { HomePage } from "./fixtures/home_page";
+
+test.describe("Type Number", () => {
+  test("should see the typed number", async ({ page }) => {
+    const ui = new HomePage(page);
+    await ui.goto();
+
+    await ui.enterNumber("7");
+
+    await expect(ui.successMessage).toHaveText("You entered 7");
+  });
+});