e2e: add tests for form

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

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

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"

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

src/shared/uikit/BaseButton.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
-defineProps<{
+defineProps({
-  isPrimary: boolean;
+  cyTest: { type: String, default: "base" },
-  isLoading: boolean;
+  isPrimary: Boolean,
-}>();
+  isLoading: Boolean,
+});
 </script>
 
 <template>
   <button
     type="button"
     :class="{ '--primary': isPrimary, '--loading': isLoading }"
+    :cy-test="`${cyTest}-button`"
   >
     <slot />
   </button>