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

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"

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]

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
+'''

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

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

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" },
+]

examples/error_boundary/e2e/.gitignore

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

examples/error_boundary/e2e/package.json

@@ -0,0 +1,7 @@
+{
+  "private": "true",
+  "scripts": {},
+  "devDependencies": {
+    "@playwright/test": "^1.35.1"
+  }
+}

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,
+  // },
+});

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"
+    );
+  });
+});

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");
+  });
+});