e2e: add base tests

cypress/e2e/contacts.cy.ts

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

cypress/e2e/dashboard.cy.ts

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

cypress/e2e/example.cy.ts

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

cypress/support/pages.ts

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

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 {
+        devShells = rec {
-          packages = with pkgs; [
+          code = pkgs.mkShell {
-            nodejs-18_x
+            packages = with pkgs; [
-            nodePackages.vue-cli
+              nodejs-18_x
-            nodePackages.vls # vue
+              nodePackages.vue-cli
-            nodePackages.typescript-language-server # typescript
+              nodePackages.vls # vue
-            nodePackages.vscode-langservers-extracted # html, css, json, eslint
+              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 ];
+          };
         };
       });
 }

package-lock.json

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

package.json

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

src/app/contacts/ContactsTable/AudienceContactsTable.vue

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

src/app/lists/ListsSelect/AudienceListsSelect.vue

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

src/shared/uikit/BaseSelect.vue

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

src/shared/uikit/BaseTable.vue

@@ -1,29 +1,28 @@
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, PropType } from "vue";
+import { PropType } from "vue";
 
 interface TableColumn {
   key: string;
   title: string;
 }
 
-export default defineComponent({
+defineProps({
-  props: {
+  cyTest: { type: String, default: "base" },
-    loading: Boolean,
+  loading: Boolean,
-    columns: {
+  columns: {
-      type: Array as PropType<TableColumn[]>,
+    type: Array as PropType<TableColumn[]>,
-      required: true,
+    required: true,
-    },
+  },
-    dataItems: {
+  dataItems: {
-      type: Array,
+    type: Array,
-      required: true,
+    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">
+        <tr
-          <td v-for="column in columns" :key="column.key">
+          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>