Merge pull request #31 from MixDrinks/cypress/add-accessibility-ids

Added new attributes and page objects

components/cocktails/CocktailComponents.vue

@@ -16,7 +16,7 @@
         @click="inc()" />
     </div>
     <ul class="сomponents__list сomponents-list">
-      <li class="сomponents-list__item сomponents-list-item" v-for="item in components" :key="item.url">
+      <li data-cy="ingredient" class="сomponents-list__item сomponents-list-item" v-for="item in components" :key="item.url">
         <NuxtLink class="сomponents-list-item__link сomponents-list-item-link" :to="`/${item.url}`">
           <picture class="сomponents-list-item-link__picture">
             <source v-for="img in item.images" :key="img.id" :srcset="img.srcset" :media="img.media" :type="img.type" />

components/cocktails/CocktailPage.vue

@@ -51,15 +51,16 @@
         <ol class="cocktail-body-recipe__list cocktail-body-recipe-list" itemprop="recipeInstructions">
           <li
             class="cocktail-body-recipe-list__item cocktail-body-recipe-list-item"
+            data-cy="recipe_step"
             v-for="recipeItem in cocktail.receipt"
             :key="recipeItem"
           >
             <span class="cocktail-body-recipe-list-item__label">{{ recipeItem }}</span>
           </li>
         </ol>
       </div>
-      <CocktailComponents class="cocktail-body__goods" :title="`Склад коктейлю ${cocktail.name}`" :components="cocktail.goods" withCounter />
-      <CocktailComponents class="cocktail-body__tools" :title="`Потрібні штучки для приготування ${cocktail.name}`" :components="cocktail.tools" />
+      <CocktailComponents data-cy="goods" class="cocktail-body__goods" :title="`Склад коктейлю ${cocktail.name}`" :components="cocktail.goods" withCounter />
+      <CocktailComponents data-cy="tools" class="cocktail-body__tools" :title="`Потрібні штучки для приготування ${cocktail.name}`" :components="cocktail.tools" />
     </div>
   </div>
 </template>

components/cocktails/FilterList.vue

@@ -41,6 +41,7 @@
             class="filters-tag-cloud-list__item filters-tag-cloud-list-item"
             v-for="filterItem in activeFilter"
             :key="filterItem.name"
+            :data-cy="`filterTag ${filterItem.id}`"
           >
             <NuxtLink
               class="filters-tag-cloud-list-item__link"

components/cocktails/Sorting.vue

@@ -6,6 +6,7 @@
         class="sorting-list__item sorting-list-item"
         @click="updateCocktails()"
         v-for="sortItem in sortWithUrl"
+        :data-cy="`sorting ${sortItem.id}`"
         :key="sortItem.id"
       >
         <NuxtLink

components/dump/CocktailsList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="list">
-    <div class="list__item list-item" v-for="cocktail in cocktails" :key="cocktail.id">
+    <div class="list__item list-item" v-for="cocktail in cocktails" :key="cocktail.id" data-cy="cocktailCard">
       <CocktailsCart :cocktail="cocktail" />
     </div>
   </div>

cypress.config.js

@@ -10,7 +10,7 @@ module.exports = defineConfig({
   video: false,
   e2e: {
     baseUrl: "http://localhost:8080/",
-    specPattern: 'cypress/e2e/tests/*.{js,jsx,ts,tsx}',
+    specPattern: 'cypress/tests/*.{js,jsx,ts,tsx}',
     setupNodeEvents(on, config) {},
   },
 });

cypress/helpers/for-every-size.js

@@ -0,0 +1,22 @@
+const defaultSizes = ['iphone-6', 'ipad-2', 'macbook-13'];
+
+function forEverySize(options) {
+    let tests;
+    let sizes;
+    if (typeof options === 'function') {
+        tests = options;
+        sizes = defaultSizes;
+    } else {
+        ({ sizes = defaultSizes, tests } = options);
+    }
+    sizes.forEach((size) => {
+        context(`for ${size} screen size`, () => {
+            beforeEach(() => {
+                cy.viewport(size);
+            });
+            tests({ viewport: size });
+        });
+    });
+}
+
+export default forEverySize;

cypress/support/page_objects/cocktailPage.js

@@ -0,0 +1,11 @@
+export default {
+    name: 'cocktail',
+    vertical: {
+        selector: {
+            title: '.cocktail-header-title',
+            recipeItem: '[data-cy="recipe_step"]',
+            component: '[data-cy="goods"]',
+            tools: '[data-cy="tools"]'
+        }
+    }
+}

cypress/support/page_objects/homePage.js

@@ -0,0 +1,19 @@
+
+export default {
+    name: 'home',
+    vertical: {
+        selector: {
+            sorting: {
+                popular: '[data-cy="sorting 1"]',
+                byRate: '[data-cy="sorting 2"]',
+            },
+            filters: {
+                lowalcohol: '[title="слабоалкогольні"]',
+                lowalcoholTag: '[data-cy="filterTag 1"]'
+            },
+            cocktailCard: '[data-cy="cocktailCard"]',
+            search: '.search',
+            searchSuggestions: '.search-result-list-item'
+        }
+    }
+}

cypress/e2e/tests/cocktail.cy.js → cypress/tests/cocktail.cy.js

@@ -1,3 +1,4 @@
+import {default as cocktailPage} from '../support/page_objects/cocktailPage'
 describe('A cocktail\'s screen tests', () => {
   beforeEach('Open the site', () => {
     cy.visit('/')
@@ -19,21 +20,19 @@ describe('A cocktail\'s screen tests', () => {
       const goods = details.goods
       const tools = details.tools
 
-      cy.get('.cocktail-header-title').should('contain', details.name)
-      cy.get('h1').should('contain', details.name)
-      cy.get('.cocktail-body-recipe-list .cocktail-body-recipe-list-item').each(listItem => {
+      cy.get(cocktailPage.vertical.selector.title).should('contain', details.name)
+      cy.get(cocktailPage.vertical.selector.recipeItem).each(listItem => {
         const itemText = listItem.text()
         expect(itemText).to.equal(receipt[listItem.index()])
       })
-      cy.get('.cocktail-body__goods .сomponents-list-item').each(listItem => {
+      cy.get(cocktailPage.vertical.selector.component).find('[data-cy="ingredient"]').each(listItem => {
         const itemText = listItem.text()
         expect(itemText).contains(goods[listItem.index()].name)
       })
-      cy.get('.cocktail-body__tools .сomponents-list-item').each(listItem => {
+      cy.get(cocktailPage.vertical.selector.tools).find('[data-cy="ingredient"]').each(listItem => {
         const itemText = listItem.text()
         expect(itemText).contains(tools[listItem.index()].name)
       })
-
     })
 
   })

cypress/tests/home-mobile.cy.js

@@ -0,0 +1,60 @@
+import { default as homePage } from '../support/page_objects/homePage';
+import { default as cocktailPage } from '../support/page_objects/cocktailPage';
+import forEverySize from '../helpers/for-every-size'
+
+describe("Home screen elements on the different screen resolutions", () => {
+forEverySize(({ viewport }) => {
+
+  beforeEach("Open home screen", () => {
+    cy.viewport(viewport);
+    cy.visit("/");
+  });
+
+  it("can view the cocktails list and open the detailed cocktail screen", () => {
+    cy.intercept({
+        method: "GET",
+        url: "/v2/cocktails/full*",
+      }).as("cocktail");
+    cy.request({
+      method: 'GET',
+      url: 'https://whale-app-iz3av.ondigitalocean.app/v2/search/cocktails?page=0',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }).then((cocktailsList) => {
+      const cocktails = cocktailsList.body.cocktails
+      cy.get(homePage.vertical.selector.sorting.byRate).should("be.visible")
+      cy.get(homePage.vertical.selector.search).should("be.visible")
+      cy.get(homePage.vertical.selector.cocktailCard).each(item => {
+        const itemText = item.text().trim()
+        expect(itemText).to.contain(cocktails[item.index()].name)
+      })
+      cy.get(homePage.vertical.selector.cocktailCard).eq(5).click()
+
+      cy.wait('@cocktail').then( cocktail => {
+        const details = cocktail.response.body;
+        const receipt = details.receipt
+        const goods = details.goods
+        const tools = details.tools
+
+        cy.get(cocktailPage.vertical.selector.title).should('contain', details.name)
+        cy.get(cocktailPage.vertical.selector.recipeItem).each(listItem => {
+          const itemText = listItem.text()
+          expect(itemText).to.equal(receipt[listItem.index()])
+        })
+        cy.get(cocktailPage.vertical.selector.component).find('[data-cy="ingredient"]').each(listItem => {
+          const itemText = listItem.text()
+          expect(itemText).contains(goods[listItem.index()].name)
+        })
+        cy.get(cocktailPage.vertical.selector.tools).find('[data-cy="ingredient"]').each(listItem => {
+          const itemText = listItem.text()
+          expect(itemText).contains(tools[listItem.index()].name)
+        })
+      })
+
+    })
+  });
+})
+})
+
+

cypress/tests/home-screen.cy.js

@@ -0,0 +1,55 @@
+import { default as homePage } from '../support/page_objects/homePage';
+
+describe("Home screen tests", () => {
+  const interceptSorting = ( sortingParam ) => {
+    cy.intercept({
+      method: "GET",
+      url: `/v2/search/cocktails?page=0&${sortingParam}`,
+    }).as("sortingApplied");
+  }
+  beforeEach("Open home screen", () => {
+    cy.visit("/");
+  });
+
+  it("items should be reordered after sorting applying", () => {
+    interceptSorting("sort=biggest-rate")
+
+    cy.get(homePage.vertical.selector.sorting.byRate).click();
+    cy.get(homePage.vertical.selector.sorting.byRate).click();
+    cy.get(homePage.vertical.selector.sorting.byRate).click();
+    cy.wait("@sortingApplied").its('response.body').then((body) => {
+      const cocktails = body.cocktails
+      cy.get(homePage.vertical.selector.cocktailCard).each(item => {
+        const itemText = item.text().trim()
+        expect(itemText).to.contain(cocktails[item.index()].name)
+      })
+    })
+
+  });
+
+  it("items should be filteres after applying a low alcohol filter", () => {
+    interceptSorting("alcohol-volume=1")
+
+    let firstItemName
+    cy.get(homePage.vertical.selector.cocktailCard).find(".cart__name").first().invoke('text').then((itemTitle) => {
+      firstItemName = itemTitle
+    })
+
+    // applying the low alcohol filter
+    cy.get(homePage.vertical.selector.filters.lowalcohol).click()
+    // checking that proper tag is shown
+    cy.get(homePage.vertical.selector.filters.lowalcoholTag).should('be.visible')
+    // applying the low alcohol filter again because when it clicked programatically the request is not sent
+    cy.get(homePage.vertical.selector.filters.lowalcohol).click()
+
+    cy.wait("@sortingApplied").its('response.body').then( (body) => {
+      const cocktails = body.cocktails
+      cy.get(homePage.vertical.selector.cocktailCard).each(item => {
+        const itemText = item.text().trim()
+        expect(itemText).to.contain(cocktails[item.index()].name)
+      })
+      // checking that the first element name is changed after applying filters
+      cy.get(homePage.vertical.selector.cocktailCard).find(".cart__name").first().should('not.contain', firstItemName)
+    });
+  });
+});

cypress/e2e/tests/search.cy.js → cypress/tests/search.cy.js

@@ -1,12 +1,14 @@
+import {default as homePage} from '../support/page_objects/homePage'
+
 describe("search cocktail tests", () => {
     beforeEach('Open home screen', () => {
         cy.visit('/')
     })
 
     it('search from home screen', () => {
         let searchSuggestion;
-        cy.get('.search').type('м')
-        cy.get('.search-result-list-item').first().then((searchSug) => {
+        cy.get(homePage.vertical.selector.search).type('м')
+        cy.get(homePage.vertical.selector.searchSuggestions).first().then((searchSug) => {
             searchSuggestion = searchSug.text().trim()
             console.log(searchSuggestion)
             cy.wrap(searchSug).click()