Merge pull request #485 from FlowFuse/e2e-tests

E2E Testing Framework

.eslintrc.json

@@ -8,7 +8,8 @@
         "eslint:recommended", 
         "standard",
         "plugin:import/recommended",
-        "plugin:promise/recommended"
+        "plugin:promise/recommended",
+        "plugin:cypress/recommended"
     ],
     "globals":{
         "RED": "readonly"
@@ -116,6 +117,27 @@
                 "sourceType": "module",
                 "ecmaVersion": 2022
             }
+        },
+
+        // Cypress is used for E2E
+        {
+            "files": "test/e2e/**",
+            "env": {
+                "cypress/globals": true
+            },
+            "extends": ["plugin:cypress/recommended"],
+            "plugins": ["cypress"],
+            "rules": {
+                // plugin:cypress
+                "cypress/require-data-selectors": "warn",
+                "cypress/assertion-before-screenshot": "error",
+                "cypress/no-force": "warn",
+                "cypress/no-pause": "error",
+
+                // plugin:n
+                "promise/always-return": "off",
+                "promise/catch-or-return": "off"
+            }
         }
     ]
 }

.github/workflows/e2e-tests.yml

@@ -0,0 +1,35 @@
+name: E2E Tests
+on:
+  push:
+    branches:
+      - main
+      - maintenance
+  pull_request:
+
+jobs:
+  e2e-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install Dependencies
+        run: npm ci
+      - name: Install Node-RED Dependencies
+        working-directory: ./cypress/fixtures/user-dir/
+        run: npm install
+      - name: Run Linting Tests
+        run: npm run lint
+      - name: Run Dashboard E2E (Cypress) Tests
+        uses: cypress-io/github-action@v4
+        with:
+          install: false
+          config-file: cypress.config.js
+          build: npm run build
+          start: npm run cy:server
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-output
+          path: |
+            cypress/screenshots
+            cypress/videos

.gitignore

@@ -139,4 +139,9 @@ dist
 .DS_Store
 
 # Vitepress
-docs/.vitepress/cache/
+docs/.vitepress/cache/
+
+# Node-RED Testing
+/cypress/fixtures/user-dir/flows.json
+/cypress/fixtures/user-dir/.flows.json.backup   
+/cypress/screenshots

cypress.config.js

@@ -0,0 +1,11 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+    e2e: {
+        baseUrl: 'http://localhost:1881',
+        specPattern: 'cypress/tests/**/*.spec.{js,jsx,ts,tsx}',
+        setupNodeEvents (on, config) {
+            // implement node event listeners here
+        }
+    }
+})

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/fixtures/flows/context-api.json

@@ -0,0 +1,106 @@
+[
+    {
+        "id": "node-red-tab-helper-api",
+        "type": "tab",
+        "label": "Helper API",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "node-red-http-in-store-context",
+        "type": "http in",
+        "z": "node-red-tab-helper-api",
+        "name": "",
+        "url": "/context/flow",
+        "method": "get",
+        "upload": false,
+        "swaggerDoc": "",
+        "x": 130,
+        "y": 50,
+        "wires": [
+            [
+                "fcn-store-context"
+            ]
+        ]
+    },
+    {
+        "id": "fcn-store-context",
+        "type": "function",
+        "z": "node-red-tab-helper-api",
+        "name": "function 1",
+        "func": "msg.payload = {\n    msg: global.get('msg')\n}\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 300,
+        "y": 50,
+        "wires": [
+            [
+                "node-red-http-out-store-context"
+            ]
+        ]
+    },
+    {
+        "id": "node-red-http-out-store-context",
+        "type": "http response",
+        "z": "node-red-tab-helper-api",
+        "name": "",
+        "statusCode": "",
+        "headers": {},
+        "x": 430,
+        "y": 50,
+        "wires": []
+    },
+    {
+        "id": "node-red-http-in-reset-context",
+        "type": "http in",
+        "z": "node-red-tab-helper-api",
+        "name": "",
+        "url": "/context/reset",
+        "method": "post",
+        "upload": false,
+        "swaggerDoc": "",
+        "x": 130,
+        "y": 100,
+        "wires": [
+            [
+                "fcn-reset-context"
+            ]
+        ]
+    },
+    {
+        "id": "fcn-reset-context",
+        "type": "function",
+        "z": "node-red-tab-helper-api",
+        "name": "function 2",
+        "func": "global.set('msg', undefined)\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 300,
+        "y": 100,
+        "wires": [
+            [
+                "node-red-http-out-reset-context"
+            ]
+        ]
+    },
+    {
+        "id": "node-red-http-out-reset-context",
+        "type": "http response",
+        "z": "node-red-tab-helper-api",
+        "name": "",
+        "statusCode": "",
+        "headers": {},
+        "x": 430,
+        "y": 100,
+        "wires": []
+    }
+]

cypress/fixtures/flows/dashboard-basic.json

@@ -0,0 +1,11 @@
+[{
+    "id": "dashboard-ui-base",
+    "type": "ui-base",
+    "name": "UI Name",
+    "path": "/dashboard",
+    "includeClientData": true,
+    "acceptsClientConfig": [
+        "ui-notification",
+        "ui-control"
+    ]
+}]

cypress/fixtures/flows/dashboard-buttons.json

@@ -0,0 +1,132 @@
+[
+    {
+        "id": "node-red-tab-buttons",
+        "type": "tab",
+        "label": "UI Buttons",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "dashboard-ui-base",
+        "type": "ui-base",
+        "name": "UI Name",
+        "path": "/dashboard",
+        "includeClientData": true,
+        "acceptsClientConfig": [
+            "ui-notification",
+            "ui-control"
+        ]
+    },
+    {
+        "id": "dashboard-ui-page-1",
+        "type": "ui-page",
+        "name": "Page 1",
+        "ui": "dashboard-ui-base",
+        "path": "/page1",
+        "icon": "",
+        "layout": "grid",
+        "theme": "dashboard-ui-theme",
+        "order": -1,
+        "className": "",
+        "visible": "true",
+        "disabled": false
+    },
+    {
+        "id": "dashboard-ui-theme",
+        "type": "ui-theme",
+        "name": "Theme Name",
+        "colors": {
+            "surface": "#ffffff",
+            "primary": "#0094ce",
+            "bgPage": "#eeeeee",
+            "groupBg": "#ffffff",
+            "groupOutline": "#cccccc"
+        }
+    },
+    {
+        "id": "test-helper",
+        "type": "function",
+        "z": "node-red-tab-buttons",
+        "name": "Store Latest Msg",
+        "func": "global.set('msg', msg)\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 350,
+        "y": 80,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "dashboard-ui-group",
+        "type": "ui-group",
+        "name": "Group 1",
+        "page": "dashboard-ui-page-1",
+        "width": "6",
+        "height": "1",
+        "order": -1,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
+    },
+    {
+        "id": "dashboard-ui-button-str",
+        "type": "ui-button",
+        "z": "node-red-tab-buttons",
+        "group": "dashboard-ui-group",
+        "name": "",
+        "label": "Button 1 (str)",
+        "order": 0,
+        "width": 0,
+        "height": 0,
+        "passthru": false,
+        "tooltip": "",
+        "color": "",
+        "bgcolor": "",
+        "className": "",
+        "icon": "",
+        "payload": "button 1 clicked",
+        "payloadType": "str",
+        "topic": "button-str-topic",
+        "topicType": "str",
+        "x": 100,
+        "y": 80,
+        "wires": [
+            ["test-helper"]
+        ]
+    },
+    {
+        "id": "dashboard-ui-button-json",
+        "type": "ui-button",
+        "z": "node-red-tab-buttons",
+        "group": "dashboard-ui-group",
+        "name": "",
+        "label": "Button 1 (json)",
+        "order": 0,
+        "width": 0,
+        "height": 0,
+        "passthru": false,
+        "tooltip": "",
+        "color": "",
+        "bgcolor": "",
+        "className": "",
+        "icon": "",
+        "payload": "{\"hello\": \"world\"}",
+        "payloadType": "json",
+        "topic": "button-json-topic",
+        "topicType": "str",
+        "x": 120,
+        "y": 120,
+        "wires": [
+            [
+                "test-helper"
+            ]
+        ]
+    }
+]