From 9ef3f5f3077bcffd6ea970c688d344fa03965c5d Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Tue, 13 Jun 2023 23:12:22 +0200
Subject: [PATCH] Fix nightly/release + integration workflow  (#8450)

* Revert "Add e2e tests with playwright (#8123)"

This reverts commit 0df815729b5471bc7c448857d60137684b926611.

* Revert "Revert "Add e2e tests with playwright (#8123)""

This reverts commit 2299306954045dfe62541d5520a66b5ab7ec4971.

* fix nightly/release

* fix nightly/release

* fix nightly/release

---------

Co-authored-by: andig <cpuidle@gmx.de>
---
 .github/workflows/default.yml                 | 82 ++++++++++++++++---
 .gitignore                                    |  4 +
 .../components/Energyflow/Visualization.vue   |  6 +-
 assets/js/components/Loadpoints.vue           |  1 +
 package-lock.json                             | 30 +++++++
 package.json                                  |  4 +-
 playwright.config.js                          | 32 ++++++++
 tests/basics.evcc.yaml                        | 34 ++++++++
 tests/basics.spec.js                          | 40 +++++++++
 tests/utils.js                                |  7 ++
 10 files changed, 227 insertions(+), 13 deletions(-)
 create mode 100644 playwright.config.js
 create mode 100755 tests/basics.evcc.yaml
 create mode 100644 tests/basics.spec.js
 create mode 100644 tests/utils.js

diff --git a/.github/workflows/default.yml b/.github/workflows/default.yml
index 5b6c099d8..ff6ecdd79 100644
--- a/.github/workflows/default.yml
+++ b/.github/workflows/default.yml
@@ -44,15 +44,38 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      # - uses: actions/setup-go@v4
       - uses: erezrokah/setup-go@feat/add_cache_prefix
         with:
           go-version: ^1.20
           cache-key-prefix: build-cache-
         id: go
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+          cache: "npm"
+
+      - name: Install UI
+        run: make install-ui
+
+      - name: Build UI
+        run: make ui
+
       - name: Build
-        run: mkdir dist && touch dist/empty && make build
+        run: make build
+
+      - name: Cache dist
+        uses: actions/cache/save@v3
+        id: cache-dist
+        with:
+          path: dist
+          key: ${{ runner.os }}-${{ github.sha }}-dist
+
+      - name: Upload
+        uses: actions/upload-artifact@v3
+        with:
+          name: evcc-binary
+          path: ./evcc
 
   test:
     name: Test
@@ -92,7 +115,7 @@ jobs:
           version: latest
           args: --timeout 5m
 
-  build-ui:
+  ui:
     name: UI
     runs-on: ubuntu-latest
 
@@ -104,7 +127,7 @@ jobs:
           node-version: "18"
           cache: "npm"
 
-      - name: Install tools
+      - name: Install
         run: make install-ui
 
       - name: Lint
@@ -113,12 +136,49 @@ jobs:
       - name: Test
         run: make test-ui
 
-      - name: Build
-        run: make ui
+      - name: Porcelain
+        run: |
+          test -z "$(git status --porcelain)" || (git status; git diff; false)
 
-      - name: Cache dist
-        uses: actions/cache/save@v3
-        id: cache-dist
+  integration:
+    name: Integration
+    runs-on: ubuntu-latest
+    if: ${{ github.event_name != 'workflow_call' }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
         with:
-          path: dist
-          key: ${{ runner.os }}-${{ github.sha }}-dist
+          node-version: "18"
+          cache: "npm"
+
+      - name: Install npm
+        run: npm ci
+
+      - run: npx playwright install --with-deps chromium
+
+      - name: Wait for Build
+        uses: lewagon/wait-on-check-action@v1.3.1
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+          check-name: Build
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          wait-interval: 10
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: evcc-binary
+
+      - name: Make executable
+        run: chmod +x evcc
+
+      - name: Run tests
+        run: npx playwright test
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
diff --git a/.gitignore b/.gitignore
index 9da0cd4c1..5d5fc691e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,7 @@ __debug_bin
 !util/templates/**/*.yaml
 !package*.json
 !evcc.dist.yaml
+!tests/**/*.evcc.yaml
 evcc
 evcc.exe
 evcc_*
@@ -32,3 +33,6 @@ fly.toml
 vendor/*
 QEMU_EFI.fd
 asset-stats.html
+/test-results/
+/playwright-report/
+/playwright/.cache/
diff --git a/assets/js/components/Energyflow/Visualization.vue b/assets/js/components/Energyflow/Visualization.vue
index 57745dd67..53aa89d14 100644
--- a/assets/js/components/Energyflow/Visualization.vue
+++ b/assets/js/components/Energyflow/Visualization.vue
@@ -1,5 +1,9 @@
 <template>
-	<div class="visualization" :class="{ 'visualization--ready': visualizationReady }">
+	<div
+		data-testid="visualization"
+		class="visualization"
+		:class="{ 'visualization--ready': visualizationReady }"
+	>
 		<div class="label-scale d-flex">
 			<div class="d-flex justify-content-start flex-grow-1">
 				<LabelBar v-bind="labelBarProps('top', 'pvProduction')">
diff --git a/assets/js/components/Loadpoints.vue b/assets/js/components/Loadpoints.vue
index dbc0fc07a..0a03afb27 100644
--- a/assets/js/components/Loadpoints.vue
+++ b/assets/js/components/Loadpoints.vue
@@ -11,6 +11,7 @@
 				<Loadpoint
 					v-bind="loadpoint"
 					:id="index + 1"
+					data-testid="loadpoint"
 					:vehicles="vehicles"
 					:smartCostLimit="smartCostLimit"
 					:smartCostType="smartCostType"
diff --git a/package-lock.json b/package-lock.json
index e0df2122d..c0797a59b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
         "@babel/core": "^7.17.2",
         "@h2d2/shopicons": "^1.2.0",
         "@histoire/plugin-vue": "^0.16.1",
+        "@playwright/test": "^1.34.3",
         "@popperjs/core": "^2.11.5",
         "@vitejs/plugin-legacy": "^4.0.2",
         "@vitejs/plugin-vue": "^4.1.0",
@@ -2356,6 +2357,24 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.34.3",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.3.tgz",
+      "integrity": "sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==",
+      "dependencies": {
+        "@types/node": "*",
+        "playwright-core": "1.34.3"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.21",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
@@ -6124,6 +6143,17 @@
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.0.tgz",
       "integrity": "sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w=="
     },
+    "node_modules/playwright-core": {
+      "version": "1.34.3",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.3.tgz",
+      "integrity": "sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.23",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
diff --git a/package.json b/package.json
index 8f9c26980..376006a4d 100644
--- a/package.json
+++ b/package.json
@@ -7,13 +7,15 @@
     "test": "TZ=Europe/Berlin vitest",
     "lint": "prettier assets './**/*.{yml,yaml,toml}' --write && eslint assets/**/*.js assets/**/*.vue --fix",
     "dev": "vite",
-    "histoire": "histoire dev"
+    "histoire": "histoire dev",
+    "playwright": "playwright test --ui"
   },
   "main": "index.js",
   "dependencies": {
     "@babel/core": "^7.17.2",
     "@h2d2/shopicons": "^1.2.0",
     "@histoire/plugin-vue": "^0.16.1",
+    "@playwright/test": "^1.34.3",
     "@popperjs/core": "^2.11.5",
     "@vitejs/plugin-legacy": "^4.0.2",
     "@vitejs/plugin-vue": "^4.1.0",
diff --git a/playwright.config.js b/playwright.config.js
new file mode 100644
index 000000000..443a018cb
--- /dev/null
+++ b/playwright.config.js
@@ -0,0 +1,32 @@
+const { defineConfig, devices } = require("@playwright/test");
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+module.exports = defineConfig({
+  testDir: "./tests",
+  /* Run tests in files in parallel */
+  fullyParallel: false,
+  /* 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: "html",
+  /* 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:7070",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+});
diff --git a/tests/basics.evcc.yaml b/tests/basics.evcc.yaml
new file mode 100755
index 000000000..99832e635
--- /dev/null
+++ b/tests/basics.evcc.yaml
@@ -0,0 +1,34 @@
+site:
+  title: Hello World
+  meters:
+    grid: grid
+
+meters:
+  - name: grid
+    type: custom
+    power:
+      source: js
+      script: |
+        1000
+
+loadpoints:
+  - title: Carport
+    charger: charger
+
+chargers:
+  - name: charger
+    type: custom
+    enable:
+      source: js
+      script:
+    enabled:
+      source: js
+      script: |
+        false
+    status:
+      source: js
+      script: |
+        "B"
+    maxcurrent:
+      source: js
+      script:
diff --git a/tests/basics.spec.js b/tests/basics.spec.js
new file mode 100644
index 000000000..a2a6cf448
--- /dev/null
+++ b/tests/basics.spec.js
@@ -0,0 +1,40 @@
+const { test, expect } = require("@playwright/test");
+const { execEvcc } = require("./utils");
+
+let server;
+
+test.beforeAll(() => {
+  server = execEvcc("basics.evcc.yaml");
+});
+
+test.afterAll(() => {
+  server.kill();
+});
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/");
+});
+
+test.describe("main screen", async () => {
+  test("site title", async ({ page }) => {
+    await expect(page.getByRole("heading", { name: "Hello World" })).toBeVisible();
+  });
+
+  test("visualization", async ({ page }) => {
+    const locator = page.getByTestId("visualization");
+    await expect(locator).toBeVisible();
+    await expect(locator).toContainText("1,000 W");
+  });
+
+  test("one loadpoint", async ({ page }) => {
+    await expect(page.getByTestId("loadpoint")).toHaveCount(1);
+  });
+
+  test("loadpoint title", async ({ page }) => {
+    await expect(page.getByRole("heading", { name: "Carport" })).toBeVisible();
+  });
+
+  test("guest vehicle", async ({ page }) => {
+    await expect(page.getByRole("heading", { name: "Guest vehicle" })).toBeVisible();
+  });
+});
diff --git a/tests/utils.js b/tests/utils.js
new file mode 100644
index 000000000..04a3b9262
--- /dev/null
+++ b/tests/utils.js
@@ -0,0 +1,7 @@
+import { exec } from "child_process";
+
+export function execEvcc(config) {
+  const server = exec(`./evcc --config tests/${config}`);
+  server.stdout.pipe(process.stdout);
+  return server;
+}