Fix Cypress tests for the users social media

- Refactor Cypress tests to make them more language independent.

Co-Authored-By: mahula <lenzmath@posteo.de>

cypress/cypress.json

@@ -1,5 +1,6 @@
 {
   "projectId": "qa7fe2",
+  "defaultCommandTimeout": 10000,
   "ignoreTestFiles": "*.js",
   "chromeWebSecurity": false,
   "baseUrl": "http://localhost:3000",

cypress/integration/UserProfile.SocialMedia.feature

@@ -13,29 +13,29 @@ Feature: User profile - list social media accounts
     When I navigate to page "/settings/my-social-media"
     Then I am on page "/settings/my-social-media"
     When I add a social media link
-    Then I see a toaster with "Added social media"
+    Then I see a toaster with status "success"
     And the new social media link shows up on the page
 
   Scenario: Other users viewing my Social Media
-    Given I have added a social media link
+    Given I have added the social media link "https://freeradical.zone/peter-pan"
     When I navigate to page "/profile/peter-pan"
     Then they should be able to see my social media links
 
   Scenario: Deleting Social Media
     When I navigate to page "/settings/my-social-media"
     Then I am on page "/settings/my-social-media"
-    Given I have added a social media link
+    Given I have added the social media link "https://freeradical.zone/peter-pan"
-    When I delete a social media link
+    When I delete the social media link "https://freeradical.zone/peter-pan"
-    Then I see a toaster with "Deleted social media"
+    Then I see a toaster with status "success"
 
   Scenario: Editing Social Media
     When I navigate to page "/settings/my-social-media"
     Then I am on page "/settings/my-social-media"
-    Given I have added a social media link
+    Given I have added the social media link "https://freeradical.zone/peter-pan"
     When I start editing a social media link
     Then I can cancel editing
     When I start editing a social media link
     And I edit and save the link
-    Then I see a toaster with "Added social media"
+    Then I see a toaster with status "success"
     And the new url is displayed
     But the old url is not displayed

cypress/integration/UserProfile.SocialMedia/I_add_a_social_media_link.js

@@ -1,12 +1,10 @@
 import { When } from "cypress-cucumber-preprocessor/steps";
 
 When('I add a social media link', () => {
-  cy.get('button')
+  cy.get('[data-test="add-save-button"]')
-    .contains('Add link')
     .click()
     .get('#editSocialMedia')
     .type('https://freeradical.zone/peter-pan')
-    .get('button')
+    .get('[data-test="add-save-button"]')
-    .contains('Save')
     .click()
 })

cypress/integration/UserProfile.SocialMedia/I_delete_a_social_media_link.js

@@ -1,7 +0,0 @@
-import { When } from "cypress-cucumber-preprocessor/steps";
-
-When('I delete a social media link', () => {
-  cy.get(".base-button[title='Delete']")
-    .click()
-  // TODO: add delition confirmation modal click, see issue
-})

cypress/integration/UserProfile.SocialMedia/I_delete_the_social_media_link_{string}.js

@@ -0,0 +1,12 @@
+import { When } from "cypress-cucumber-preprocessor/steps";
+
+When('I delete the social media link {string}', (link) => {
+  cy.get('[data-test="delete-button"]')
+    .click()
+  cy.get('[data-test="confirm-modal"]')
+    .should("be.visible")
+  cy.get('[data-test="confirm-button"]')
+    .click()
+  cy.get('.ds-list-item-content > a')
+    .contains(link).should('not.exist')
+})

cypress/integration/UserProfile.SocialMedia/I_edit_and_save_the_link.js

@@ -4,7 +4,6 @@ When('I edit and save the link', () => {
   cy.get('input#editSocialMedia')
     .clear()
     .type('https://freeradical.zone/tinkerbell')
-    .get('button')
+    .get('[data-test="add-save-button"]')
-    .contains('Save')
     .click()
 })

cypress/integration/UserProfile.SocialMedia/I_have_added_a_social_media_link.js

@@ -1,13 +0,0 @@
-import { Given } from "cypress-cucumber-preprocessor/steps";
-
-Given('I have added a social media link', () => {
-  cy.visit('/settings/my-social-media')
-    .get('button')
-    .contains('Add link')
-    .click()
-    .get('#editSocialMedia')
-    .type('https://freeradical.zone/peter-pan')
-    .get('button')
-    .contains('Save')
-    .click()
-})

cypress/integration/UserProfile.SocialMedia/I_have_added_the_social_media_link_{string}.js

@@ -0,0 +1,13 @@
+import { Given } from "cypress-cucumber-preprocessor/steps";
+
+Given('I have added the social media link {string}', (link) => {
+  cy.visit('/settings/my-social-media')
+    .get('[data-test="add-save-button"]')
+    .click()
+    .get('#editSocialMedia')
+    .type(link)
+    .get('[data-test="add-save-button"]')
+    .click()
+  cy.get('.ds-list-item-content > a')
+    .contains(link)
+})

cypress/integration/UserProfile.SocialMedia/I_start_editing_a_social_media_link.js

@@ -1,6 +1,6 @@
 import { When } from "cypress-cucumber-preprocessor/steps";
 
 When('I start editing a social media link', () => {
-  cy.get(".base-button[title='Edit']")
+  cy.get('[data-test="edit-button"]')
     .click()
 })

cypress/integration/UserProfile.SocialMedia/they_should_be_able_to_see_my_social_media_links.js

@@ -1,8 +1,8 @@
 import { Then } from "cypress-cucumber-preprocessor/steps";
 
 Then('they should be able to see my social media links', () => {
-  cy.get('.base-card')
+  cy.get('[data-test="social-media-list-headline"]')
-    .contains('Where else can I find Peter Pan?')
+    .contains('Peter Pan')
     .get('a[href="https://freeradical.zone/peter-pan"]')
     .should('have.length', 1)
 })

cypress/integration/common/I_see_a_toaster_with_status_{string}.js

@@ -0,0 +1,9 @@
+import { Then } from "cypress-cucumber-preprocessor/steps";
+
+Then("I see a toaster with status {string}", (status) => {
+  switch (status) {
+    case "success":
+      cy.get(".iziToast.iziToast-color-green").should("be.visible");
+      break;
+  }
+})

webapp/components/Modal/ConfirmModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <ds-modal :title="title" :is-open="isOpen" @cancel="cancel">
+  <ds-modal :title="title" :is-open="isOpen" @cancel="cancel" data-test="confirm-modal">
     <transition name="ds-transition-fade">
       <ds-flex v-if="success" class="hc-modal-success" centered>
         <sweetalert-icon icon="success" />
@@ -15,6 +15,7 @@
         :danger="!modalData.buttons.confirm.danger"
         :icon="modalData.buttons.cancel.icon"
         @click="cancel"
+        data-test="cancel-button"
       >
         {{ $t(modalData.buttons.cancel.textIdent) }}
       </base-button>
@@ -25,6 +26,7 @@
         :icon="modalData.buttons.confirm.icon"
         :loading="loading"
         @click="confirm"
+        data-test="confirm-button"
       >
         {{ $t(modalData.buttons.confirm.textIdent) }}
       </base-button>

webapp/components/SocialMedia/SocialMedia.vue

@@ -2,7 +2,7 @@
   <ds-space v-if="user.socialMedia && user.socialMedia.length" margin="large">
     <base-card class="social-media-bc">
       <ds-space margin="x-small">
-        <ds-text tag="h5" color="soft">
+        <ds-text tag="h5" color="soft" data-test="social-media-list-headline">
           {{ $t('profile.socialMedia') }} {{ userName | truncate(15) }}?
         </ds-text>
         <template>

webapp/components/_new/features/MySomethingList/MySomethingList.vue

@@ -32,11 +32,11 @@
                 data-test="edit-button"
               />
               <base-button
+                :title="$t('actions.delete')"
                 icon="trash"
                 circle
                 ghost
                 @click="handleDeleteItem(item)"
-                :title="$t('actions.delete')"
                 data-test="delete-button"
               />
             </template>