From 591f7f2af66b492f2e53b945997a96edce5c92fc Mon Sep 17 00:00:00 2001
From: Dmitriy Pleshevskiy <dmitriy@ideascup.me>
Date: Fri, 3 Feb 2023 11:23:44 +0300
Subject: [PATCH] e2e: add tests for form

---
 cypress/e2e/contacts.cy.ts                    |  5 +++++
 cypress/e2e/contacts/new.cy.ts                | 20 +++++++++++++++++++
 .../ContactForm/AudienceContactForm.vue       |  8 ++++++--
 src/pages/audience/ContactsPage.vue           |  4 +++-
 src/shared/uikit/BaseButton.vue               | 10 ++++++----
 5 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 cypress/e2e/contacts/new.cy.ts

diff --git a/cypress/e2e/contacts.cy.ts b/cypress/e2e/contacts.cy.ts
index 65e3259..ee18d57 100644
--- a/cypress/e2e/contacts.cy.ts
+++ b/cypress/e2e/contacts.cy.ts
@@ -33,4 +33,9 @@ describe("Contacts", () => {
       .first()
       .should("have.text", "camryn90@yahoo.com");
   });
+
+  it("should open create contacts page", () => {
+    cy.get("[cy-test=openCreateContactForm-button]").click();
+    cy.location("pathname").should("eq", Page.CreateContact);
+  });
 });
diff --git a/cypress/e2e/contacts/new.cy.ts b/cypress/e2e/contacts/new.cy.ts
new file mode 100644
index 0000000..a34517b
--- /dev/null
+++ b/cypress/e2e/contacts/new.cy.ts
@@ -0,0 +1,20 @@
+import { Page } from "../../support/pages";
+
+describe("Create contact", () => {
+  beforeEach(() => {
+    cy.visit(Page.CreateContact);
+  });
+
+  it("should create a contact", () => {
+    const email = "foo@example.com";
+
+    cy.get("[cy-test=createContact-form-field-email]").type(email);
+    cy.get("[cy-test=createContact-button]").click();
+
+    cy.location("pathname").should("eq", Page.Contacts);
+
+    cy.get("[cy-test=contacts-table-col-email]")
+      .first()
+      .should("have.text", email);
+  });
+});
diff --git a/src/app/contacts/ContactForm/AudienceContactForm.vue b/src/app/contacts/ContactForm/AudienceContactForm.vue
index c15204f..62f71ec 100644
--- a/src/app/contacts/ContactForm/AudienceContactForm.vue
+++ b/src/app/contacts/ContactForm/AudienceContactForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, defineEmits } from "vue";
+import { ref } from "vue";
 import { ContactFormApiCreateProps } from "./ports";
 import { useContactFormStore } from "./store";
 
@@ -22,9 +22,13 @@ async function submitForm() {
   <div>
     <div>
       <label>Email</label>
-      <input v-model="contactData.email" />
+      <input
+        cy-test="createContact-formField-email"
+        v-model="contactData.email"
+      />
     </div>
     <BaseButton
+      cy-test="createContact"
       :isPrimary="true"
       :isLoading="store.loading"
       @click="submitForm"
diff --git a/src/pages/audience/ContactsPage.vue b/src/pages/audience/ContactsPage.vue
index 222dbda..386b434 100644
--- a/src/pages/audience/ContactsPage.vue
+++ b/src/pages/audience/ContactsPage.vue
@@ -52,7 +52,9 @@ provide(LISTS_SELECT_API_PROVIDE_KEY, listApi);
     <BasePageHeader>
       Контакты
       <template #extra>
-        <BaseButton @click="openAddContactForm">Добавить контакт</BaseButton>
+        <BaseButton cy-test="openCreateContactForm" @click="openAddContactForm">
+          Добавить контакт
+        </BaseButton>
       </template>
     </BasePageHeader>
     <AudienceListsSelect
diff --git a/src/shared/uikit/BaseButton.vue b/src/shared/uikit/BaseButton.vue
index ff70cd8..bb9fdea 100644
--- a/src/shared/uikit/BaseButton.vue
+++ b/src/shared/uikit/BaseButton.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-defineProps<{
-  isPrimary: boolean;
-  isLoading: boolean;
-}>();
+defineProps({
+  cyTest: { type: String, default: "base" },
+  isPrimary: Boolean,
+  isLoading: Boolean,
+});
 </script>
 
 <template>
   <button
     type="button"
     :class="{ '--primary': isPrimary, '--loading': isLoading }"
+    :cy-test="`${cyTest}-button`"
   >
     <slot />
   </button>