Improve search-results test

vuestorefront · Jul 6, 2018 · 7bfb58a · 7bfb58a
1 parent f149d79
commit 7bfb58a
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 59 deletions.
diff --git a/cypress/integration/search-results.js b/cypress/integration/search-results.js
@@ -4,81 +4,40 @@ describe('Search results', () => {
     cy.setCookie('shop/claims/onboardingAccepted', 'test')
     indexedDB.deleteDatabase('shop')
     cy.clearLocalStorage()
-    cy.get('.header > .fixed > .container > .row > .end-xs')
-      .find('[aria-label="Open search panel"]')
-      .click()
-    cy.get('.header .container > .row .visible-xs')
-      .first()
-      .find('[aria-label="Open search panel"]')
-      .should('be.not.be.visible')
-    cy.get('#search')
-      .should('be.visible')
-      .type('Didi Sport Watch')
-
+    cy.get('[data-testid=openSearchPanelButton]').first().should('not.be.visible')
+    cy.get('[data-testid=openSearchPanelButton]').last().click()
+    cy.get('#search').should('be.visible').type('Didi Sport Watch')
     cy.wait(200)
-
-    cy.get('.searchpanel .product-listing .product')
-      .first()
-      .as('firstResult')
+    cy.get('[data-testid=searchPanel] [data-testid=productLink]').first().as('firstResult')
     cy.get('@firstResult')
       .should('be.visible')
-      .find('img')
+      .find('[data-testid=productImage]')
       .should(
         'have.attr',
         'src',
         'https://demo.vuestorefront.io/img/310/300/resize/w/g/wg02-bk-0.jpg'
       )
-    cy.get('@firstResult')
-      .find('.product-link p')
-      .first()
-      .should('contain', 'Didi Sport Watch')
-
-    cy.get('.searchpanel.active')
-      .find('.material-icons')
-      .should('contain', 'close')
-      .click()
-    cy.get('.searchpanel')
-      .should('not.have.class', 'active')
-      .find('.product-listing')
-      .should('be.not.be.visible')
+    cy.get('@firstResult').find('p').contains('Didi Sport Watch')
+    cy.get('[data-testid=closeSearchPanelButton]').contains('close').click()
+    cy.get('[data-testid=searchPanel]').should('not.be.visible')
 
     // check mobile viewport
     cy.viewport(320, 480)
-    cy.get('.header > .fixed > .container > .row > .end-xs')
-      .find('[aria-label="Open search panel"]')
-      .should('be.not.be.visible')
-    cy.get('.header .container > .row .visible-xs')
-      .first()
-      .find('[aria-label="Open search panel"]')
-      .click()
-    cy.get('#search')
-      .should('be.visible')
-      .type('Didi Sport Watch')
-
+    cy.get('[data-testid=openSearchPanelButton]').last().should('not.be.visible')
+    cy.get('[data-testid=openSearchPanelButton]').first().click()
+    cy.get('#search').should('be.visible').type('Didi Sport Watch')
     cy.wait(200)
-
-    cy.get('.searchpanel .product-listing .product')
-      .first()
-      .as('firstResult')
+    cy.get('[data-testid=searchPanel] [data-testid=productLink]').first().as('firstResult')
     cy.get('@firstResult')
       .should('be.visible')
-      .find('img')
+      .find('[data-testid=productImage]')
       .should(
         'have.attr',
         'src',
         'https://demo.vuestorefront.io/img/310/300/resize/w/g/wg02-bk-0.jpg'
       )
-    cy.get('@firstResult')
-      .find('.product-link p')
-      .first()
-      .should('contain', 'Didi Sport Watch')
-    cy.get('.searchpanel.active')
-      .find('.material-icons')
-      .should('contain', 'close')
-      .click()
-    cy.get('.searchpanel')
-      .should('not.have.class', 'active')
-      .find('.product-listing')
-      .should('be.not.be.visible')
+    cy.get('@firstResult').find('p').contains('Didi Sport Watch')
+    cy.get('[data-testid=closeSearchPanelButton]').contains('close').click()
+    cy.get('[data-testid=searchPanel]').should('not.be.visible')
   })
 })
diff --git a/src/themes/default/components/core/ProductTile.vue b/src/themes/default/components/core/ProductTile.vue
@@ -13,6 +13,7 @@
           childSku: product.sku
         }
       })"
+      data-testid="productLink"
     >
       <div
         class="product-image relative bg-cl-secondary"

diff --git a/src/themes/default/components/core/blocks/Header/SearchIcon.vue b/src/themes/default/components/core/blocks/Header/SearchIcon.vue
@@ -4,6 +4,7 @@
     :aria-label="$t('Open search panel')"
     class="bg-cl-transparent brdr-none inline-flex"
     @click="toggleSearchpanel"
+    data-testid="openSearchPanelButton"
   >
     <i class="material-icons">search</i>
   </button>

diff --git a/src/themes/default/components/core/blocks/SearchPanel/SearchPanel.vue b/src/themes/default/components/core/blocks/SearchPanel/SearchPanel.vue
@@ -1,8 +1,18 @@
 <template>
-  <div class="searchpanel fixed mw-100 bg-cl-primary cl-accent" :class="{ active: isOpen }">
+  <div
+    class="searchpanel fixed mw-100 bg-cl-primary cl-accent"
+    :class="{ active: isOpen }"
+    data-testid="searchPanel"
+  >
     <div class="row">
       <div class="col-md-12 end-xs">
-        <i class="material-icons p15 pointer cl-accent" @click="closeSearchpanel">close</i>
+        <i
+          class="material-icons p15 pointer cl-accent"
+          @click="closeSearchpanel"
+          data-testid="closeSearchPanelButton"
+        >
+          close
+        </i>
       </div>
     </div>
     <div class="col-md-12 end-xs">
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,7 @@ @@
               childSku: product.sku
             }
           })"
+          data-testid="productLink"
         >
           <div
             class="product-image relative bg-cl-secondary"
@@ Expand Down @@