feat: add test infrastructure for the web UI (#81)

* Fix sonar lint issues and formatting

* Add test infrastructure + test StatusCard and StatusCardList components

* Add test to docker file

* Review comments

* Use Dockerfile as source of truth instead of a GitHub action

* revert docker-ci to main

---------

Co-authored-by: Malek Adawi <[email protected]>

Author: EhabY

Dockerfile

@@ -1,22 +1,31 @@
-FROM node:22-alpine3.19 AS ui
+# Stage 1: Build the frontend
+FROM node:22-alpine3.19 AS frontend-build
 WORKDIR /ui
-COPY ui/package.json ui/package-lock.json .
+COPY ui/package.json ui/package-lock.json ./
 RUN npm install
-COPY ui/ .
+COPY ui/ ./
 RUN npm run build
+# Fail this stage if tests fail
+RUN npm run test
 
-FROM golang:1.22.5 AS backend
+# Stage 2: Build the backend
+FROM golang:1.22.5 AS backend-build
+WORKDIR /backend
 COPY go.mod go.sum ./
 RUN go mod download
 COPY cmd/ cmd/
 COPY util/ util/
-COPY web/  web/ 
+COPY web/ web/
 COPY swarmcd/ swarmcd/
 RUN CGO_ENABLED=0 GOOS=linux go build -o /swarm-cd ./cmd/
 
+# Stage 3: Final production image (depends on previous stages)
 FROM alpine:3.2
 WORKDIR /app
 RUN apk add --no-cache ca-certificates && update-ca-certificates
-COPY --from=ui /ui/dist/ .
-COPY --from=backend /swarm-cd .
+# Copy the built backend binary from the backend build stage
+COPY --from=backend-build /swarm-cd /app/
+# Copy the built frontend from the frontend build stage
+COPY --from=frontend-build /ui/dist/ /app/ui/
+# Set the entry point for the application
 CMD ["/app/swarm-cd"]

ui/.eslintrc.cjs

@@ -5,7 +5,8 @@ module.exports = {
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
-    "plugin:react-hooks/recommended"
+    "plugin:react-hooks/recommended",
+    "plugin:react/jsx-runtime"
   ],
   ignorePatterns: ["dist", ".eslintrc.cjs"],
   parser: "@typescript-eslint/parser",

ui/README.md

@@ -21,8 +21,10 @@ swarm-cd-ui/
 │   ├── hooks/             # React hooks
 │   ├── App.tsx            # Main App component
 │   ├── index.tsx          # Entry point
+├── tests/                 # Test files
 ├── package.json           # Project metadata and scripts
 └── vite.config.ts         # Vite configuration
+└── vitest.config.ts       # Vitest configuration
 ```
 
 Recommended `.vscode/settings.json`: