e2e: add base tests

This commit is contained in:
Dmitriy Pleshevskiy 2023-02-02 23:56:33 +03:00
parent d87a5abb6d
commit cbf8132b32
Signed by: pleshevskiy
GPG key ID: 1B59187B161C0215
11 changed files with 112 additions and 37 deletions

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

View 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);
});
});

View file

@ -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
View file

@ -0,0 +1,5 @@
export enum Page {
Dashboard = "/",
Contacts = "/contacts",
CreateContact = "/contacts/new",
}

View file

@ -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
View file

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

View file

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

View file

@ -28,6 +28,7 @@ watch(
<template>
<BaseTable
cy-test="contacts"
:loading="store.loading"
:columns="columns"
:dataItems="store.contacts"

View file

@ -32,5 +32,5 @@ store.fetchMany();
</script>
<template>
<BaseSelect v-model="value" :items="selectListItems" />
<BaseSelect cy-test="lists" v-model="value" :items="selectListItems" />
</template>

View file

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

View file

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