🤖 Add cypress tests for web UI (#1269)

.github/cypress_tests.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+# Run agent in the background to bring the webui up
+/usr/bin/kairos-agent webui &
+
+pushd internal/webui/public || exit 1
+# deps
+npm ci
+# cypress tests
+npx cypress run --e2e -q
+popd || exit

.github/workflows/webui.yaml

@@ -0,0 +1,29 @@
+name: WebUI tests
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - '**'
+      - '!docs/**'
+  pull_request:
+    paths:
+      - '**'
+      - '!docs/**'
+
+concurrency:
+  group: ci-webui-${{ github.head_ref || github.ref }}-${{ github.repository }}
+  cancel-in-progress: true
+
+jobs:
+  webui:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install earthly
+        uses: Luet-lab/luet-install-action@v1
+        with:
+          repository: quay.io/kairos/packages
+          packages: utils/earthly
+      - name: WebUI tests
+        run: earthly +webui-tests

.gitignore

@@ -20,6 +20,7 @@ coverage.out
 /docs/resources/
 /docs/node_modules/
 /docs/tech-doc-hugo
+internal/webui/public/cypress/videos/
 
 node_modules/
 

Earthfile

@@ -785,6 +785,15 @@ webui-deps:
     RUN npm install
     SAVE ARTIFACT node_modules /node_modules AS LOCAL internal/webui/public/node_modules
 
+webui-tests:
+    FROM ubuntu:22.10
+    RUN apt-get update && apt-get install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb golang nodejs npm
+    COPY +build-kairos-agent/kairos-agent /usr/bin/kairos-agent
+    COPY . src/
+    WORKDIR src/
+    RUN .github/cypress_tests.sh
+    SAVE ARTIFACT /src/internal/webui/public/cypress/videos videos
+
 docs:
     FROM node:19-bullseye
     ARG TARGETARCH

internal/webui/public/cypress.config.js

@@ -0,0 +1,8 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    supportFile: false,
+    baseUrl: "http://localhost:8080"
+  },
+});

internal/webui/public/cypress/e2e/spec.cy.js

@@ -0,0 +1,49 @@
+describe('Basic Tests for webui', () => {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.intercept({
+      method: 'POST',
+      url: '/validate',
+    }, {log: false}).as('validate')
+  })
+  it("basic items on the ui exist", () => {
+    cy.contains('#cloud-config').should("exist").should("be.visible")
+    cy.contains('Welcome to the Installer!').should("exist").should("be.visible")
+    cy.contains("p a", "cloud-config config configuration file")
+        .should("have.attr", "href", "/local/docs/reference/configuration/")
+    cy.get("#cloud-config-help a")
+        .should("have.attr", "href", "/local/docs/examples/")
+    cy.get("#installation-device").should("have.value", "auto")
+
+    // footer
+    cy.get("a .fa-github").should("exist").parent().should("have.attr", "href", "https://github.com/kairos-io/kairos")
+    cy.get("a .fa-book").should("exist").parent().should("have.attr", "href", "https://kairos.io/docs")
+    cy.get("#reboot-checkbox").should("exist").should("not.be.checked")
+    cy.get("#poweroff-checkbox").should("exist").should("not.be.checked")
+    cy.get("button").should("exist").invoke("text").should("equal", "Install")
+  })
+  it('validation works', () => {
+    cy.get('.CodeMirror')
+        .first()
+        .then((editor) => {
+          editor[0].CodeMirror.setValue('');
+        });
+
+    cy.get(".CodeMirror textarea").type("#cloud-config{enter}users:{enter}  - name: itxaka", {force: true})
+    cy.get("#validator-alert").should("have.text", "Valid YAML syntax")
+
+  })
+  it('validation fails ', () => {
+    cy.get('.CodeMirror')
+        .first()
+        .then((editor) => {
+          editor[0].CodeMirror.setValue('');
+        });
+    cy.get(".CodeMirror textarea").type("blablabla", {force: true})
+    cy.get("#validator-alert").invoke("text").should("match", /Failed validating syntax/)
+
+  })
+  it('should install', function () {
+    cy.get("button").click()
+  });
+})

internal/webui/public/index.html

@@ -47,7 +47,7 @@
     <div class="container mt-5">
       <h1>Welcome to the Installer!</h1>
       <p>Enter your <a href="/local/docs/reference/configuration/" target="_blank">cloud-config config configuration file</a> and select the device to install on:</p>
-      <div class="alert alert-info" role="alert">
+      <div id="cloud-config-help" class="alert alert-info" role="alert">
         Need help with your cloud config? Check out our <a href="/local/docs/examples/" class="alert-link">documentation on where to find examples</a>.
       </div>
       <form action="/install" method="POST">
@@ -105,21 +105,21 @@ <h1>Welcome to the Installer!</h1>
 
               codeMirrorEditor.on('change', () => content = codeMirrorEditor.getValue())
             " 
-            x-on:keydown="validateYAML"
+            x-on:keydown.debounce="validateYAML"
         >
           <label for="cloud-config">Cloud Config</label>
-          <div class="alert" x-text="getText" :class="{ 'alert-info': valid, 'alert-danger': !valid }" x-show="show"></div>
+          <div id="validator-alert" class="alert" x-text="getText" :class="{ 'alert-info': valid, 'alert-danger': !valid }" x-show="show"></div>
           <textarea x-model.debounce.750ms="content" x-ref="input" class="form-control" id="cloud-config" name="cloud-config" rows="5"></textarea>
         </div>
         <div class="form-group">
           <label for="installation-device">Device</label>
           <input type="text" class="form-control" id="installation-device" name="installation-device"  value="auto">
         </div>
-        <div class="form-group form-check">
+        <div id="reboot-checkbox" class="form-group form-check">
           <input type="checkbox" class="form-check-input" name="reboot">
           <label class="form-check-label" for="reboot">Reboot after installation</label>
         </div>
-        <div class="form-group form-check">
+        <div id="poweroff-checkbox" class="form-group form-check">
           <input type="checkbox" class="form-check-input" name="power-off">
           <label class="form-check-label" for="poweroff">Power off after installation</label>
         </div>