robot: Add cypress tests for web UI (#1269)

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 @@
 
               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>

internal/webui/public/package.json

@@ -10,5 +10,8 @@
     "xterm-addon-fit": "^0.7.0",
     "xterm-theme": "^1.1.0",
     "yamljs": "^0.3.0"
+  },
+  "devDependencies": {
+    "cypress": "^12.9.0"
   }
 }