added cypress framework and tests for setup page

.gitignore

@@ -13,3 +13,6 @@ dist-ssr
 /out
 /tmp
 .env
+
+cypress/videos
+cypress/screenshots

cypress.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+    e2e: {
+        baseUrl: "http://localhost:3000",
+        defaultCommandTimeout: 10000,
+        pageLoadTimeout: 60000,
+        viewportWidth: 1920,
+        viewportHeight: 1080,
+    },
+    env: {
+        baseUrl: "http://localhost:3000",
+    },
+});

cypress/e2e/setup.cy.ts

@@ -0,0 +1,24 @@
+import { actor } from "../support/actors/actor";
+import { DEFAULT_USER_DATA } from "../support/const/user-data";
+import { DashboardPage } from "../support/pages/dasboard-page";
+import { SetupPage } from "../support/pages/setup-page";
+
+describe("user can create a new account on setup page", () => {
+    before(() => {
+        cy.visit("/setup");
+    });
+
+    it("user can create new account", () => {
+        cy.url().should("be.equal", SetupPage.url);
+        actor.setupTask.fillAndSubmitSetupForm(
+            DEFAULT_USER_DATA.username,
+            DEFAULT_USER_DATA.password,
+            DEFAULT_USER_DATA.password
+        );
+
+        cy.url().should("be.equal", DashboardPage.url);
+        cy.get('[role="alert"]')
+            .should("be.visible")
+            .and("contain.text", "Added Successfully.");
+    });
+});

cypress/fixtures/example.json

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

cypress/support/actors/actor.ts

@@ -0,0 +1,8 @@
+import { SetupTask } from "../tasks/setup-task";
+
+class Actor {
+    setupTask: SetupTask = new SetupTask();
+}
+
+const actor = new Actor();
+export { actor };

cypress/support/const/user-data.ts

@@ -0,0 +1,4 @@
+export const DEFAULT_USER_DATA = {
+    username: "testuser",
+    password: "testuser123",
+};

cypress/support/e2e.ts

@@ -0,0 +1 @@
+import "./commands";

cypress/support/pages/dasboard-page.ts

@@ -0,0 +1,3 @@
+export const DashboardPage = {
+    url: Cypress.env("baseUrl") + "/dashboard",
+};

cypress/support/pages/setup-page.ts

@@ -0,0 +1,7 @@
+export const SetupPage = {
+    url: Cypress.env("baseUrl") + "/setup",
+    usernameInput: '[data-cy="username-input"]',
+    passWordInput: '[data-cy="password-input"]',
+    passwordRepeatInput: '[data-cy="password-repeat-input"]',
+    submitSetupForm: '[data-cy="submit-setup-form"]',
+};

cypress/support/tasks/setup-task.ts

@@ -0,0 +1,15 @@
+import { SetupPage } from "../pages/setup-page";
+
+export class SetupTask {
+    fillAndSubmitSetupForm(
+        username: string,
+        password: string,
+        passwordRepeat: string
+    ) {
+        cy.get(SetupPage.usernameInput).type(username);
+        cy.get(SetupPage.passWordInput).type(password);
+        cy.get(SetupPage.passwordRepeatInput).type(passwordRepeat);
+
+        cy.get(SetupPage.submitSetupForm).click();
+    }
+}

package.json

@@ -58,7 +58,8 @@
         "release-final": "node extra/update-version.js && npm run build-docker && node ./extra/press-any-key.js && npm run upload-artifacts && node ./extra/update-wiki-version.js",
         "release-beta": "node extra/beta/update-version.js && npm run build && node ./extra/env2arg.js docker buildx build -f docker/dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:$VERSION -t louislam/uptime-kuma:beta .  --target release --push && node ./extra/press-any-key.js && npm run upload-artifacts",
         "git-remove-tag": "git tag -d",
-        "build-dist-and-restart": "npm run build && npm run start-server-dev"
+        "build-dist-and-restart": "npm run build && npm run start-server-dev",
+        "cy:run": "npx cypress run --browser chrome --headless"
     },
     "dependencies": {
         "@louislam/sqlite3": "~15.0.6",
@@ -125,6 +126,8 @@
         "concurrently": "^7.1.0",
         "core-js": "~3.18.3",
         "cross-env": "~7.0.3",
+        "cypress": "^10.1.0",
+        "delay": "^5.0.0",
         "dns2": "~2.0.1",
         "eslint": "~8.14.0",
         "eslint-plugin-vue": "~8.7.1",

src/pages/Setup.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="form-container">
+    <div class="form-container" data-cy="setup-form">
         <div class="form">
             <form @submit.prevent="submit">
                 <div>
@@ -23,21 +23,21 @@
                 </div>
 
                 <div class="form-floating mt-3">
-                    <input id="floatingInput" v-model="username" type="text" class="form-control" placeholder="Username" required>
+                    <input id="floatingInput" v-model="username" type="text" class="form-control" placeholder="Username" required data-cy="username-input">
                     <label for="floatingInput">{{ $t("Username") }}</label>
                 </div>
 
                 <div class="form-floating mt-3">
-                    <input id="floatingPassword" v-model="password" type="password" class="form-control" placeholder="Password" required>
+                    <input id="floatingPassword" v-model="password" type="password" class="form-control" placeholder="Password" required data-cy="password-input">
                     <label for="floatingPassword">{{ $t("Password") }}</label>
                 </div>
 
                 <div class="form-floating mt-3">
-                    <input id="repeat" v-model="repeatPassword" type="password" class="form-control" placeholder="Repeat Password" required>
+                    <input id="repeat" v-model="repeatPassword" type="password" class="form-control" placeholder="Repeat Password" required data-cy="password-repeat-input">
                     <label for="repeat">{{ $t("Repeat Password") }}</label>
                 </div>
 
-                <button class="w-100 btn btn-primary mt-3" type="submit" :disabled="processing">
+                <button class="w-100 btn btn-primary mt-3" type="submit" :disabled="processing" data-cy="submit-setup-form">
                     {{ $t("Create") }}
                 </button>
             </form>

tsconfig.json

@@ -11,9 +11,11 @@
         "removeComments": false,
         "preserveConstEnums": true,
         "sourceMap": false,
-        "strict": true
+        "strict": true,
+        "types": ["cypress"]
     },
     "files": [
-        "./src/util.ts"
+        "./src/util.ts",
-    ]
+    ],
+    "include": ["cypress/**/*.ts"]
 }