added cypress framework and tests for setup page

This commit is contained in:
tamasmagyar 2022-06-16 08:06:34 +02:00
parent 9a8b484ee8
commit 31c388a6e3
15 changed files with 98 additions and 9 deletions

3
.gitignore vendored
View File

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

14
cypress.config.ts Normal file
View File

@ -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",
},
});

24
cypress/e2e/setup.cy.ts Normal file
View File

@ -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.");
});
});

View File

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

0
cypress/plugins/index.js Normal file
View File

View File

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

View File

View File

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

1
cypress/support/e2e.ts Normal file
View File

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

View File

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

View File

@ -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"]',
};

View File

@ -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();
}
}

View File

@ -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-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", "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", "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": { "dependencies": {
"@louislam/sqlite3": "~15.0.6", "@louislam/sqlite3": "~15.0.6",
@ -125,6 +126,8 @@
"concurrently": "^7.1.0", "concurrently": "^7.1.0",
"core-js": "~3.18.3", "core-js": "~3.18.3",
"cross-env": "~7.0.3", "cross-env": "~7.0.3",
"cypress": "^10.1.0",
"delay": "^5.0.0",
"dns2": "~2.0.1", "dns2": "~2.0.1",
"eslint": "~8.14.0", "eslint": "~8.14.0",
"eslint-plugin-vue": "~8.7.1", "eslint-plugin-vue": "~8.7.1",

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="form-container"> <div class="form-container" data-cy="setup-form">
<div class="form"> <div class="form">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<div> <div>
@ -23,21 +23,21 @@
</div> </div>
<div class="form-floating mt-3"> <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> <label for="floatingInput">{{ $t("Username") }}</label>
</div> </div>
<div class="form-floating mt-3"> <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> <label for="floatingPassword">{{ $t("Password") }}</label>
</div> </div>
<div class="form-floating mt-3"> <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> <label for="repeat">{{ $t("Repeat Password") }}</label>
</div> </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") }} {{ $t("Create") }}
</button> </button>
</form> </form>

View File

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