Add address tests

src/pages/Account/AddressDetails.vue

@@ -90,24 +90,39 @@ onMounted(() => getCountries());
             @on-data-saved="goBack()"
         >
             <template #form="{ data }">
-                <VnInput v-model="data.nickname" :label="t('name')" />
-                <VnInput v-model="data.street" :label="t('address')" />
-                <VnInput v-model="data.city" :label="t('city')" />
+                <VnInput
+                    v-model="data.nickname"
+                    :label="t('name')"
+                    data-testid="addressFormNickname"
+                />
+                <VnInput
+                    v-model="data.street"
+                    :label="t('address')"
+                    data-testid="addressFormStreet"
+                />
+                <VnInput
+                    v-model="data.city"
+                    :label="t('city')"
+                    data-testid="addressFormCity"
+                />
                 <VnInput
                     v-model="data.postalCode"
                     type="number"
                     :label="t('postalCode')"
+                    data-testid="addressFormPostcode"
                 />
                 <VnSelect
                     v-model="data.countryFk"
                     :label="t('country')"
                     :options="countriesOptions"
                     @update:model-value="data.provinceFk = null"
+                    data-testid="addressFormCountry"
                 />
                 <VnSelect
                     v-model="data.provinceFk"
                     :label="t('province')"
                     :options="provincesOptions"
+                    data-testid="addressFormProvince"
                 />
             </template>
         </VnForm>

src/pages/Account/AddressList.vue

@@ -98,6 +98,7 @@ onMounted(async () => {
             @click="goToAddressDetails()"
             rounded
             no-caps
+            data-testid="newAddressBtn"
         >
             <QTooltip>
                 {{ t('addAddress') }}
@@ -109,6 +110,7 @@ onMounted(async () => {
             class="rounded-borders shadow-1 shadow-transition"
             separator
             :rows="addresses"
+            data-testid="addressCardList"
         >
             <CardList
                 v-for="(address, index) in addresses"
@@ -156,6 +158,7 @@ onMounted(async () => {
                         flat
                         rounded
                         @click.stop="goToAddressDetails(address.id)"
+                        data-testid="editAddressBtn"
                     >
                         <QTooltip>
                             {{ t('editAddress') }}

src/test/cypress/integration/config/AddresList.spec.js

@@ -0,0 +1,75 @@
+describe('PendingOrders', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit('/#/account/address-list');
+    });
+
+    const getRandomAddressFormData = () => {
+        const randomString = () => Math.random().toString(36).substring(2, 15);
+        return {
+            nickname: `Nickname-${randomString()}`,
+            street: `Street-${randomString()}`,
+            city: `City-${randomString()}`,
+            postcode: Math.floor(Math.random() * 90000) + 10000
+        };
+    };
+
+    const fillFormWithData = data => {
+        cy.dataCy('addressFormNickname').find('input').click();
+        cy.dataCy('addressFormNickname').find('input').type(data.nickname);
+        cy.dataCy('addressFormStreet').find('input').click();
+        cy.dataCy('addressFormStreet').find('input').type(data.street);
+        cy.dataCy('addressFormCity').find('input').click();
+        cy.dataCy('addressFormCity').find('input').type(data.city);
+        cy.dataCy('addressFormPostcode').find('input').click();
+        cy.dataCy('addressFormPostcode').find('input').type(data.postcode);
+        cy.selectOption('[data-testid="addressFormCountry"]', 'España');
+        cy.selectOption('[data-testid="addressFormProvince"]', 'Province one');
+    };
+
+    const verifyAddressCardData = data => {
+        cy.dataCy('addressCardList')
+            .children()
+            .last()
+            .should('contain', data.nickname);
+        cy.dataCy('addressCardList')
+            .children()
+            .last()
+            .should('contain', data.street);
+        cy.dataCy('addressCardList')
+            .children()
+            .last()
+            .should('contain', data.city);
+        cy.dataCy('addressCardList')
+            .children()
+            .last()
+            .should('contain', data.postcode);
+    };
+
+    it('should create a new address', () => {
+        cy.dataCy('newAddressBtn').should('exist');
+        cy.dataCy('newAddressBtn').click();
+        cy.dataCy('formDefaultSaveButton').should('exist');
+        cy.dataCy('formDefaultSaveButton').should('be.disabled');
+        const addressFormData = getRandomAddressFormData();
+        fillFormWithData(addressFormData);
+        cy.dataCy('formDefaultSaveButton').should('not.be.disabled');
+        cy.dataCy('formDefaultSaveButton').click();
+        cy.checkNotify('positive', 'Datos guardados');
+        verifyAddressCardData(addressFormData);
+    });
+
+    it('should edit an existent address', () => {
+        cy.dataCy('addressCardList')
+            .children()
+            .last()
+            .find('[data-testid="editAddressBtn"]')
+            .click();
+        const addressFormData = getRandomAddressFormData();
+        fillFormWithData(addressFormData);
+        cy.dataCy('formDefaultSaveButton').should('not.be.disabled');
+        cy.dataCy('formDefaultSaveButton').click();
+        cy.checkNotify('positive', 'Datos guardados');
+        verifyAddressCardData(addressFormData);
+    });
+});