test(counters_stable): add playwright tests (#1235)

examples/cargo-make/common.toml

@@ -34,7 +34,7 @@ category = "Cleanup"
 script = '''
 for pw_dir in $(find . -name playwright.config.ts | xargs dirname)
 do
-  rm -rf $pw_dir/playwright-report
+  rm -rf $pw_dir/playwright-report pw_dir/playwright pw_dir/test-results
 done
 '''
 

examples/cargo-make/main.toml

@@ -1,5 +1,8 @@
 extend = [{ path = "../cargo-make/common.toml" }]
 
+[tasks.ci]
+alias = "verify-flow"
+
 [tasks.verify-flow]
 description = "Provides pre and post hooks for verify"
 dependencies = ["pre-verify", "verify", "post-verify"]

examples/cargo-make/playwright-test.toml

@@ -0,0 +1,7 @@
+extend = [{ path = "../cargo-make/playwright.toml" }]
+
+[tasks.test-e2e]
+dependencies = ["setup-node", "test-playwright-autostart"]
+
+[tasks.clean-all]
+dependencies = ["clean-cargo", "clean-node_modules", "clean-playwright"]

examples/cargo-make/playwright.toml

@@ -0,0 +1,119 @@
+[tasks.clean-playwright]
+description = "Delete playwright directories"
+category = "Cleanup"
+script = '''
+for pw_dir in $(find . -name playwright.config.ts | xargs dirname)
+do
+  rm -rf $pw_dir/playwright-report pw_dir/playwright pw_dir/test-results
+done
+'''
+
+[tasks.test-playwright-autostart]
+description = "Run playwright test with server autostart"
+category = "Test"
+command = "npm"
+args = ["run", "e2e:auto-start"]
+
+[tasks.test-playwright]
+description = "Run playwright test"
+category = "Test"
+script = '''
+BOLD="\e[1m"
+GREEN="\e[0;32m"
+RED="\e[0;31m"
+RESET="\e[0m"
+
+project_dir=$CARGO_MAKE_WORKING_DIRECTORY
+
+# Discover commands
+if command -v pnpm; then
+    PLAYWRIGHT_CMD=pnpm
+elif command -v npm; then
+    PLAYWRIGHT_CMD=npx
+else
+    echo "${RED}${BOLD}ERROR${RESET} - pnpm or npm is required by this task"
+    exit 1
+fi
+
+# Run playwright command
+for pw_path in $(find . -name playwright.config.ts)
+do
+  pw_dir=$(dirname $pw_path)
+  cd $pw_dir
+  ${PLAYWRIGHT_CMD} playwright test
+  cd $project_dir
+done
+'''
+
+[tasks.test-playwright-ui]
+description = "Run playwright test --ui"
+category = "Test"
+script = '''
+BOLD="\e[1m"
+GREEN="\e[0;32m"
+RED="\e[0;31m"
+RESET="\e[0m"
+
+project_dir=$CARGO_MAKE_WORKING_DIRECTORY
+
+# Discover commands
+if command -v pnpm; then
+    PLAYWRIGHT_CMD=pnpm
+elif command -v npm; then
+    PLAYWRIGHT_CMD=npx
+else
+    echo "${RED}${BOLD}ERROR${RESET} - pnpm or npm is required by this task"
+    exit 1
+fi
+
+# Run playwright command
+for pw_path in $(find . -name playwright.config.ts)
+do
+  pw_dir=$(dirname $pw_path)
+  cd $pw_dir
+  ${PLAYWRIGHT_CMD} playwright test --ui
+  cd $project_dir
+done
+'''
+
+[tasks.test-playwright-report]
+description = "Run playwright show-report"
+category = "Test"
+script = '''
+BOLD="\e[1m"
+GREEN="\e[0;32m"
+RED="\e[0;31m"
+RESET="\e[0m"
+
+project_dir=$CARGO_MAKE_WORKING_DIRECTORY
+
+# Discover commands
+if command -v pnpm; then
+    PLAYWRIGHT_CMD=pnpm
+elif command -v npm; then
+    PLAYWRIGHT_CMD=npx
+else
+    echo "${RED}${BOLD}ERROR${RESET} - pnpm or npm is required by this task"
+    exit 1
+fi
+
+# Run playwright command
+for pw_path in $(find . -name playwright.config.ts)
+do
+  pw_dir=$(dirname $pw_path)
+  cd $pw_dir
+  ${PLAYWRIGHT_CMD} playwright show-report
+  cd $project_dir
+done
+'''
+
+# ALIASES
+
+[tasks.pw]
+dependencies = ["test-playwright"]
+
+[tasks.pw-ui]
+dependencies = ["test-playwright-ui"]
+
+[tasks.pw-report]
+dependencies = ["test-playwright-report"]

examples/cargo-make/trunk_server.toml

@@ -0,0 +1,22 @@
+[tasks.build]
+command = "trunk"
+args = ["build"]
+
+[tasks.clean-trunk]
+command = "trunk"
+args = ["clean"]
+
+[tasks.start-trunk]
+command = "trunk"
+args = ["serve", "--open"]
+
+[tasks.stop-trunk]
+script = '''
+  pkill -f "cargo-make"
+  pkill -f "trunk"
+'''
+
+# ALIASES
+
+[tasks.dev]
+dependencies = ["start-trunk"]

examples/counters_stable/.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/counters_stable/Makefile.toml

@@ -1,4 +1,8 @@
-extend = [{ path = "../cargo-make/main.toml" }]
+extend = [
+    { path = "../cargo-make/main.toml" },
+    { path = "../cargo-make/trunk_server.toml" },
+    { path = "../cargo-make/playwright-test.toml" },
+]
 
 [tasks.build]
 command = "cargo"

examples/counters_stable/e2e/.gitignore

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

examples/counters_stable/e2e/package.json

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

examples/counters_stable/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.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 10 : 10,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : 1,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "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/counters_stable/e2e/tests/add_1k_counters.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from "@playwright/test";
+import { CountersPage } from "./counters_page";
+
+test.describe("Add 1000 Counters", () => {
+  test("should increment the total count by 1K", async ({ page }) => {
+    const ui = new CountersPage(page);
+    await ui.goto();
+
+    // FIXME: Uncomment to make the test fail consistently
+
+    await ui.addOneThousandCounters();
+    // await expect(ui.total).toHaveText("0");
+    // await expect(ui.counters).toHaveText("1000");
+
+    await ui.addOneThousandCounters();
+    // await expect(ui.total).toHaveText("0");
+    // await expect(ui.counters).toHaveText("2000");
+
+    await ui.addOneThousandCounters();
+    await expect(ui.total).toHaveText("0");
+    await expect(ui.counters).toHaveText("3000");
+  });
+});