From 31c388a6e3edeb10c2d35e305d643fde359e7806 Mon Sep 17 00:00:00 2001 From: tamasmagyar <20069588+tamasmagyar@users.noreply.github.com> Date: Thu, 16 Jun 2022 08:06:34 +0200 Subject: [PATCH] added cypress framework and tests for setup page --- .gitignore | 3 +++ cypress.config.ts | 14 ++++++++++++++ cypress/e2e/setup.cy.ts | 24 ++++++++++++++++++++++++ cypress/fixtures/example.json | 5 +++++ cypress/plugins/index.js | 0 cypress/support/actors/actor.ts | 8 ++++++++ cypress/support/commands.ts | 0 cypress/support/const/user-data.ts | 4 ++++ cypress/support/e2e.ts | 1 + cypress/support/pages/dasboard-page.ts | 3 +++ cypress/support/pages/setup-page.ts | 7 +++++++ cypress/support/tasks/setup-task.ts | 15 +++++++++++++++ package.json | 5 ++++- src/pages/Setup.vue | 10 +++++----- tsconfig.json | 8 +++++--- 15 files changed, 98 insertions(+), 9 deletions(-) create mode 100644 cypress.config.ts create mode 100644 cypress/e2e/setup.cy.ts create mode 100644 cypress/fixtures/example.json create mode 100644 cypress/plugins/index.js create mode 100644 cypress/support/actors/actor.ts create mode 100644 cypress/support/commands.ts create mode 100644 cypress/support/const/user-data.ts create mode 100644 cypress/support/e2e.ts create mode 100644 cypress/support/pages/dasboard-page.ts create mode 100644 cypress/support/pages/setup-page.ts create mode 100644 cypress/support/tasks/setup-task.ts diff --git a/.gitignore b/.gitignore index cd654d903..8eb05867b 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,6 @@ dist-ssr /out /tmp .env + +cypress/videos +cypress/screenshots diff --git a/cypress.config.ts b/cypress.config.ts new file mode 100644 index 000000000..ceeebca3c --- /dev/null +++ b/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", + }, +}); diff --git a/cypress/e2e/setup.cy.ts b/cypress/e2e/setup.cy.ts new file mode 100644 index 000000000..94e18edef --- /dev/null +++ b/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."); + }); +}); diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json new file mode 100644 index 000000000..02e425437 --- /dev/null +++ b/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" +} diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/cypress/support/actors/actor.ts b/cypress/support/actors/actor.ts new file mode 100644 index 000000000..680c26ce7 --- /dev/null +++ b/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 }; diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts new file mode 100644 index 000000000..e69de29bb diff --git a/cypress/support/const/user-data.ts b/cypress/support/const/user-data.ts new file mode 100644 index 000000000..ee2264ddd --- /dev/null +++ b/cypress/support/const/user-data.ts @@ -0,0 +1,4 @@ +export const DEFAULT_USER_DATA = { + username: "testuser", + password: "testuser123", +}; diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts new file mode 100644 index 000000000..f887c29ae --- /dev/null +++ b/cypress/support/e2e.ts @@ -0,0 +1 @@ +import "./commands"; diff --git a/cypress/support/pages/dasboard-page.ts b/cypress/support/pages/dasboard-page.ts new file mode 100644 index 000000000..48660dc1d --- /dev/null +++ b/cypress/support/pages/dasboard-page.ts @@ -0,0 +1,3 @@ +export const DashboardPage = { + url: Cypress.env("baseUrl") + "/dashboard", +}; diff --git a/cypress/support/pages/setup-page.ts b/cypress/support/pages/setup-page.ts new file mode 100644 index 000000000..8c1b9cfa3 --- /dev/null +++ b/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"]', +}; diff --git a/cypress/support/tasks/setup-task.ts b/cypress/support/tasks/setup-task.ts new file mode 100644 index 000000000..866e3ca5c --- /dev/null +++ b/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(); + } +} diff --git a/package.json b/package.json index 7a18dbdfd..508722f43 100644 --- a/package.json +++ b/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", diff --git a/src/pages/Setup.vue b/src/pages/Setup.vue index 08347b8e1..cba7f8fce 100644 --- a/src/pages/Setup.vue +++ b/src/pages/Setup.vue @@ -1,5 +1,5 @@