Add simple testing and some small fixes (#215)

* Add simple testing and some small fixes

 - Debian is 12, value should be that even if the name is bookworm
 - Alpine is 3.21 both value and text was wrong
 - adds some classes to several divs and il/ul to make it more easy to
   identify them. Currently for testing but could be used for css as
well
 - adds some basic testing with cypress

Signed-off-by: Itxaka <itxaka@kairos.io>

* Try to run the tests

Signed-off-by: Itxaka <itxaka@kairos.io>

* test

Signed-off-by: Itxaka <itxaka@kairos.io>

* Preload the aurora image so it doesnt time out starting the server

Signed-off-by: Itxaka <itxaka@kairos.io>

* Fix

Signed-off-by: Itxaka <itxaka@kairos.io>

* Add test for input values and fix input value

Signed-off-by: Itxaka <itxaka@kairos.io>

---------

Signed-off-by: Itxaka <itxaka@kairos.io>

Author: Itxaka

.github/workflows/tests.yml

@@ -204,4 +204,22 @@ jobs:
           KVM: true
         run: |
           export RAW_IMAGE=$(find $PWD/build -name *.raw)
-          go run github.com/onsi/ginkgo/v2/ginkgo run --label-filter "raw-bootable" -v --fail-fast -r ./e2e
+          go run github.com/onsi/ginkgo/v2/ginkgo run --label-filter "raw-bootable" -v --fail-fast -r ./e2e
+  test-ui-builder:
+    runs-on: ubuntu-latest
+    needs: build-image
+    steps:
+     - name: Checkout code
+       uses: actions/checkout@v4
+       with:
+         fetch-depth: 1
+     - name: Set up Docker Buildx
+       id: buildx
+       uses: docker/setup-buildx-action@master
+     - name: Preload the Aurora image
+       run: docker pull quay.io/kairos/ci-temp-images:auroraboot-${{ github.sha }}
+     - name: Cypress run
+       uses: cypress-io/github-action@v6
+       with:
+         working-directory: e2e/web/
+         start: docker run --rm -p 8080:8080 quay.io/kairos/ci-temp-images:auroraboot-${{ github.sha }} web > /dev/null 2>&1

.gitignore

@@ -3,4 +3,6 @@ examples/airgap/data
 dist/
 build/
 coverage.out
-coverage.out.*
+coverage.out.*
+e2e/web/node_modules/
+e2e/web/cypress/screenshots/

e2e/web/cypress.config.js

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

e2e/web/cypress/e2e/scpec.cy.js

@@ -0,0 +1,85 @@
+describe('Basic Tests for webui', () => {
+    beforeEach(() => {
+        cy.visit('/')
+    })
+    const expectedText = [
+        "Ubuntu 24.04 LTS",
+        "Fedora 40",
+        "Alpine 3.21",
+        "Rocky Linux 9",
+        "Debian 12 (Bookworm)",
+        "AMD64",
+        "ARM64",
+        "Core",
+        "Standard",
+        "Welcome to the Kairos Factory",
+    ];
+
+    expectedText.forEach((text) => {
+        it(`Checking that ${text} exists and is visible`, () => {
+            cy.log(`Checking that ${text} exists and is visible`)
+            cy.contains(text).should("exist").should("be.visible")
+        });
+    });
+
+
+    const values = [
+        "ubuntu:24.04",
+        "fedora:40",
+        "alpine:3.21",
+        "rockylinux:9",
+        "debian:12",
+    ]
+    values.forEach((value) => {
+        it(`Input with value ${value} exists`, () => {
+            cy.get(`input[type="radio"][name="base_image"][value="${value}"]`, {timeout: 1000}).should("exist")
+        });
+    });
+
+
+    it("base images has the proper sizes", () => {
+        cy.get(".baseimage-list", { timeout: 1000 }).should("exist").should("be.visible")
+        // Check the number of items in the list 6 flavors + byo
+        cy.get(".baseimage-list").find("li").should("have.length", 7)
+    })
+
+     it("arch has the proper sizes", () => {
+        cy.get(".arch-list", { timeout: 1000 }).should("exist").should("be.visible")
+        cy.get(".arch-list").find("li").should("have.length", 2)
+     })
+
+     it("variant has the proper list sizes", () => {
+         cy.get(".variant-list", { timeout: 1000 }).should("exist").should("be.visible")
+         cy.get(".variant-list").find("li").should("have.length", 2)
+     })
+
+     it("models for arm are disabled if we click on amd64 arch", () => {
+        // Click on the AMD64 architecture
+        cy.get('ul.arch-list li').contains('AMD64').click()
+        cy.get("ul.model-list li").then(($lis) => {
+            cy.wrap($lis).each(($li) => {
+                cy.wrap($li).find("div.model-title").then(($div) => {
+                    if ($div.text().includes("Generic")) { // Generic is the only model that should be visible always
+                        } else {
+                            cy.wrap($li).should("have.css", "display", "none")
+                    };
+                });
+            });
+        });
+    });
+
+    it("models for arm are enabled if we click on arm64 arch", () => {
+        // Click on the ARM64 architecture
+        cy.get('ul.arch-list li').contains('ARM64').click()
+        cy.get("ul.model-list li").then(($lis) => {
+            cy.wrap($lis).each(($li) => {
+                cy.wrap($li).find("div.model-title").then(($div) => {
+                    if ($div.text().includes("Generic")) { // Generic is the only model that should be visible always
+                    } else {
+                        cy.wrap($li).should("have.css", "display", "block")
+                    };
+                });
+            });
+        });
+    });
+})