e2e: add base tests
This commit is contained in:
parent
d87a5abb6d
commit
cbf8132b32
11 changed files with 112 additions and 37 deletions
36
cypress/e2e/contacts.cy.ts
Normal file
36
cypress/e2e/contacts.cy.ts
Normal file
|
@ -0,0 +1,36 @@
|
|||
// https://docs.cypress.io/api/introduction/api.html
|
||||
|
||||
import { Page } from "../support/pages";
|
||||
|
||||
describe("Contacts", () => {
|
||||
beforeEach(() => {
|
||||
cy.visit(Page.Contacts);
|
||||
});
|
||||
|
||||
it("should open contacts page", () => {
|
||||
cy.contains("h1", "Контакты");
|
||||
});
|
||||
|
||||
it("should load contacts table", () => {
|
||||
cy.get("[cy-test=contacts-table-col-email]")
|
||||
.should("have.length.gte", 20)
|
||||
.first()
|
||||
.should("have.text", "brendon.cremin91@gmail.com");
|
||||
});
|
||||
|
||||
it("should load lists select", () => {
|
||||
cy.get("[cy-test=lists-select]")
|
||||
.should("have.value", "")
|
||||
.within(() => cy.get("option").should("have.length.gte", 20));
|
||||
});
|
||||
|
||||
it("should load contacts of selected list", () => {
|
||||
cy.get("[cy-test=lists-select]")
|
||||
.should("have.value", "")
|
||||
.select("c407a7bd-7930-43bc-8241-2aafd058ed39");
|
||||
|
||||
cy.get("[cy-test=contacts-table-col-email]")
|
||||
.first()
|
||||
.should("have.text", "camryn90@yahoo.com");
|
||||
});
|
||||
});
|
8
cypress/e2e/dashboard.cy.ts
Normal file
8
cypress/e2e/dashboard.cy.ts
Normal file
|
@ -0,0 +1,8 @@
|
|||
import { Page } from "../support/pages";
|
||||
|
||||
describe("Dashboard", () => {
|
||||
it("should redirect to contacts page", () => {
|
||||
cy.visit(Page.Dashboard);
|
||||
cy.location("pathname").should("eq", Page.Contacts);
|
||||
});
|
||||
});
|
|
@ -1,8 +0,0 @@
|
|||
// https://docs.cypress.io/api/introduction/api.html
|
||||
|
||||
describe("My First Test", () => {
|
||||
it("visits the app root url", () => {
|
||||
cy.visit("/");
|
||||
cy.contains("h1", "You did it!");
|
||||
});
|
||||
});
|
5
cypress/support/pages.ts
Normal file
5
cypress/support/pages.ts
Normal file
|
@ -0,0 +1,5 @@
|
|||
export enum Page {
|
||||
Dashboard = "/",
|
||||
Contacts = "/contacts",
|
||||
CreateContact = "/contacts/new",
|
||||
}
|
43
flake.nix
43
flake.nix
|
@ -7,17 +7,42 @@
|
|||
outputs = { self, nixpkgs, flake-utils, ... }:
|
||||
flake-utils.lib.eachDefaultSystem (system:
|
||||
let
|
||||
pkgs = import nixpkgs { inherit system; };
|
||||
cypressOverlay = final: prev: {
|
||||
cypress = prev.cypress.overrideAttrs (oldAttrs: rec {
|
||||
version = "12.3.0";
|
||||
|
||||
src = prev.fetchzip {
|
||||
url = "https://cdn.cypress.io/desktop/${version}/linux-x64/cypress.zip";
|
||||
sha256 = "sha256-RhPH/MBF8lqXeFEm2sd73Z55jgcl45VsmRWtAhckrP0=";
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
pkgs = import nixpkgs {
|
||||
inherit system;
|
||||
overlays = [ cypressOverlay ];
|
||||
};
|
||||
in
|
||||
{
|
||||
devShells.default = pkgs.mkShell {
|
||||
packages = with pkgs; [
|
||||
nodejs-18_x
|
||||
nodePackages.vue-cli
|
||||
nodePackages.vls # vue
|
||||
nodePackages.typescript-language-server # typescript
|
||||
nodePackages.vscode-langservers-extracted # html, css, json, eslint
|
||||
];
|
||||
devShells = rec {
|
||||
code = pkgs.mkShell {
|
||||
packages = with pkgs; [
|
||||
nodejs-18_x
|
||||
nodePackages.vue-cli
|
||||
nodePackages.vls # vue
|
||||
nodePackages.typescript-language-server # typescript
|
||||
nodePackages.vscode-langservers-extracted # html, css, json, eslint
|
||||
];
|
||||
};
|
||||
e2e = pkgs.mkShell {
|
||||
shellHook = ''
|
||||
export CYPRESS_INSTALL_BINARY=0;
|
||||
export CYPRESS_RUN_BINARY="${pkgs.cypress}/bin/Cypress";
|
||||
'';
|
||||
};
|
||||
default = pkgs.mkShell {
|
||||
inputsFrom = [ code e2e ];
|
||||
};
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
2
package-lock.json
generated
2
package-lock.json
generated
|
@ -22,7 +22,7 @@
|
|||
"@vue/eslint-config-typescript": "^11.0.0",
|
||||
"@vue/test-utils": "^2.2.6",
|
||||
"@vue/tsconfig": "^0.1.3",
|
||||
"cypress": "^12.0.2",
|
||||
"cypress": "^12.3.0",
|
||||
"eslint": "^8.22.0",
|
||||
"eslint-plugin-cypress": "^2.12.1",
|
||||
"eslint-plugin-vue": "^9.3.0",
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
"@vue/eslint-config-typescript": "^11.0.0",
|
||||
"@vue/test-utils": "^2.2.6",
|
||||
"@vue/tsconfig": "^0.1.3",
|
||||
"cypress": "^12.0.2",
|
||||
"cypress": "^12.3.0",
|
||||
"eslint": "^8.22.0",
|
||||
"eslint-plugin-cypress": "^2.12.1",
|
||||
"eslint-plugin-vue": "^9.3.0",
|
||||
|
|
|
@ -28,6 +28,7 @@ watch(
|
|||
|
||||
<template>
|
||||
<BaseTable
|
||||
cy-test="contacts"
|
||||
:loading="store.loading"
|
||||
:columns="columns"
|
||||
:dataItems="store.contacts"
|
||||
|
|
|
@ -32,5 +32,5 @@ store.fetchMany();
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<BaseSelect v-model="value" :items="selectListItems" />
|
||||
<BaseSelect cy-test="lists" v-model="value" :items="selectListItems" />
|
||||
</template>
|
||||
|
|
|
@ -8,6 +8,7 @@ interface SelectItem {
|
|||
}
|
||||
|
||||
const props = defineProps({
|
||||
cyTest: { type: String, default: "base" },
|
||||
items: {
|
||||
type: Array as PropType<SelectItem[]>,
|
||||
required: true,
|
||||
|
@ -29,7 +30,7 @@ const value = computed({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<select v-model="value">
|
||||
<select v-model="value" :cy-test="`${cyTest}-select`">
|
||||
<option
|
||||
v-for="selectItem in items"
|
||||
:key="selectItem.value"
|
||||
|
|
|
@ -1,29 +1,28 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
<script setup lang="ts">
|
||||
import { PropType } from "vue";
|
||||
|
||||
interface TableColumn {
|
||||
key: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
loading: Boolean,
|
||||
columns: {
|
||||
type: Array as PropType<TableColumn[]>,
|
||||
required: true,
|
||||
},
|
||||
dataItems: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
defineProps({
|
||||
cyTest: { type: String, default: "base" },
|
||||
loading: Boolean,
|
||||
columns: {
|
||||
type: Array as PropType<TableColumn[]>,
|
||||
required: true,
|
||||
},
|
||||
dataItems: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wrapper" :class="{ '--loading': loading }">
|
||||
<table>
|
||||
<table :cy-test="`${cyTest}-table`">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="column in columns" :key="column.key">
|
||||
|
@ -32,8 +31,16 @@ export default defineComponent({
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(dataItem, index) in dataItems" :key="dataItem.id || index">
|
||||
<td v-for="column in columns" :key="column.key">
|
||||
<tr
|
||||
v-for="(dataItem, index) in dataItems"
|
||||
:key="dataItem.id || index"
|
||||
:cy-test="`${cyTest}-table-row`"
|
||||
>
|
||||
<td
|
||||
v-for="column in columns"
|
||||
:key="column.key"
|
||||
:cy-test="`${cyTest}-table-col-${column.key}`"
|
||||
>
|
||||
<slot :name="column.key" :dataItem="dataItem">{{
|
||||
dataItem[column.key]
|
||||
}}</slot>
|
||||
|
|
Loading…
Reference in a new issue