Fix flaky tests

cypress.json

@@ -2,6 +2,7 @@
   "baseUrl": "http://localhost:8080",
   "pluginsFile": "tests/e2e/plugins/index.js",
   "projectId": "gfk5oj",
+  "graphqlTimeout": 20000,
   "reporterOptions": {
     "reporterEnabled": "spec, mocha-junit-reporter",
     "mochaJunitReporterReporterOptions": {

src/assets/scss/_my-account-my-orders.scss

@@ -15,6 +15,7 @@
   border: 1px solid $alto;
   padding: 20px;
 }
+
 .my-orders-title {
   text-transform: uppercase;
   font-size: 18px;

src/assets/scss/_pop.scss

@@ -65,6 +65,11 @@
   word-spacing: 0.1em;
 }
 
+.loading-spinner {
+  text-align: center;
+  padding: 50px;
+}
+
 #pop-product-list {
 
   @media screen and (min-width: 767px) {

src/components/cartdetail/PageCartDetail.vue

@@ -8,7 +8,11 @@
         <!--{{> checkout/start-checkout-link id="cart-checkoutnow-btn"}}-->
       </div>
     </div>
-    <div v-if="cartNotEmpty">
+    <div v-if="isLoading"
+         class="loading-spinner">
+      <img data-test="spinner" src="../../assets/img/spinner.gif"/>
+    </div>
+    <div v-else-if="!isLoading && cartNotEmpty">
       <div class="row">
         <div class="col-sm-12">
           <div class="current-in-bag">
@@ -57,9 +61,10 @@
     <div v-else
          class="empty-results-container">
       <div class="empty-results">
-        <span
-              data-test="empty-cart">
+        <span data-test="empty-cart">
           {{ $t('empty') }}
+                        {{isLoading}}
+
         </span>
       </div>
       <div class="empty-cart-continue-shopping-btn">
@@ -92,6 +97,12 @@ export default {
     me: null,
   }),
 
+  computed: {
+    isLoading() {
+      return this.$apollo.loading;
+    },
+  },
+
   mixins: [cartMixin],
 
   apollo: {

src/components/common/form/LoadingButton.vue

@@ -16,6 +16,7 @@
                 mode="in-out">
       <span v-if="formState === 'success'"
             key="success"
+            data-test="success-state-success"
             class="state-layer">
         <svg xmlns="http://www.w3.org/2000/svg"
              class="check"

src/components/productoverview/ProductList.vue

@@ -1,12 +1,14 @@
 <template>
   <div>
-    <form id="form-filter-products" name="filter-products" action="#">
-<!--  {{#if content.searchTerm}}
+    <form v-if="!isLoading && products && products.results.length"
+          id="form-filter-products"
+          name="filter-products" action="#">
+      <!--  {{#if content.searchTerm}}
         <input type="hidden" name="q" value="{{content.searchTerm}}"/>
       {{/if}}-->
 
       <div class="row item-list-pagination">
-<!--    {{#if content.searchResult}}
+        <!--    {{#if content.searchResult}}
         <div class="search-results-row">
           {{> catalog/pop/search-result searchResult=content.searchResult}}
         </div>
@@ -16,12 +18,13 @@
         </div>
         {{/if}}-->
         <div class="col-xs-4 hidden-xs text-left">
-          <div v-if="products && products.results.length"
+          <div v-if="!isLoading && products && products.results.length"
                class="custom-select-wrapper">
             <ProductSortSelector @changeSort="changeSort" />
             <!--{{> catalog/pop/sort-selector sortSelector=content.sortSelector}}-->
           </div>
         </div>
+
         <div class="col-xs-4 hidden-xs text-center custom-pagination">
           <ul class="page-numbers">
             <!--{{> common/pagination pagination=content.pagination}}-->
@@ -35,17 +38,21 @@
         <!--{{> catalog/pop/filters-sidebar}}-->
       </div>
     </form>
-    <div v-if="isLoading">
+
+    <div v-else-if="isLoading"
+         class="loading-spinner">
       <img data-test="spinner" src="../../assets/img/spinner.gif"/>
     </div>
-    <div v-else-if="products && !products.results.length">
+
+    <div v-else-if="!isLoading && products && !products.results.length">
       <div class="empty-results-container">
         <span class="empty-results"
               data-test="empty-results">
           {{ $t('catalog.noSearchResult.searchNotFound.notFound') }}
         </span>
       </div>
     </div>
+
     <transition name="fade">
       <div v-if="!isLoading && products && products.results.length"
            id="pop-product-list"

src/components/useraccount/myorders/TabOrderList.vue

@@ -1,7 +1,12 @@
 <template>
   <div v-if="me"
        class="my-orders">
-    <div v-if="me.orders.results.length"
+    <div v-if="isLoading"
+         class="loading-spinner">
+      <img data-test="spinner" src="../../../assets/img/spinner.gif"/>
+    </div>
+
+    <div v-else-if="!isLoading && me.orders.results.length"
         class="my-orders-content">
       <div class="my-orders-table-wrapper">
         <div class="row">
@@ -83,6 +88,7 @@
         {{ $t('emptyOrders') }}
       </span>
     </div>
+
   </div>
 </template>
 
@@ -99,6 +105,12 @@ export default {
     me: null,
   }),
 
+  computed: {
+    isLoading() {
+      return this.$apollo.loading;
+    },
+  },
+
   methods: {
     translateStatus(state) {
       return state ? this.$t(state) : '-';

tests/e2e/specs/breadcrumb_spec.js

@@ -4,7 +4,7 @@ describe('Breadcrumb', () => {
   });
 
   it('links to each category of the breadcrumb', () => {
-    cy.get('[data-test=breadcrumb-home-link]', { timeout: 20000 })
+    cy.get('[data-test=breadcrumb-home-link]', { timeout: Cypress.config('graphqlTimeout') })
       .should('contain', 'Home')
       .should('have.attr', 'href', '/')
       .should('not.have.class', 'active');

tests/e2e/specs/cartDetailPage_spec.js

@@ -12,7 +12,7 @@ describe('CartDetailPage', () => {
     cy.addLineItem('/product/lemare-booties-0778-brown/M0E20000000E0XM', 2);
     cy.addLineItem('/product/lemare-booties-0778-grey/M0E20000000E0WX', 3);
     cy.visit('/cart');
-    cy.get('[data-test=cart-total-items]')
+    cy.get('[data-test=cart-total-items]', { timeout: Cypress.config('graphqlTimeout') })
       .contains(/^\s*5 items in total\s*$/);
 
     cy.get('[data-test=cart-total-price]')
@@ -59,7 +59,7 @@ describe('CartDetailPage', () => {
     cy.addLineItem('/product/lemare-booties-0778-grey/M0E20000000E0WX', 3);
     cy.visit('/cart');
 
-    cy.get('[data-test=cart-line-item]')
+    cy.get('[data-test=cart-line-item]', { timeout: Cypress.config('graphqlTimeout') })
       .should('have.length', 1)
       .then(($lineItem) => {
         cy.wrap($lineItem)
@@ -69,7 +69,7 @@ describe('CartDetailPage', () => {
           .type('5');
         cy.wrap($lineItem)
           .find('[data-test=cart-line-item-total-price]')
-          .contains(/^\s*696,50\s€\s*$/);
+          .contains(/^\s*696,50\s€\s*$/, { timeout: Cypress.config('graphqlTimeout') });
 
         cy.wrap($lineItem)
           .find('[data-test=cart-line-item-quantity-inc]')
@@ -80,7 +80,7 @@ describe('CartDetailPage', () => {
           .should('have.value', '7');
         cy.wrap($lineItem)
           .find('[data-test=cart-line-item-total-price]')
-          .contains(/^\s*975,10\s€\s*$/);
+          .contains(/^\s*975,10\s€\s*$/, { timeout: Cypress.config('graphqlTimeout') });
 
         cy.wrap($lineItem)
           .find('[data-test=cart-line-item-quantity-dec]')
@@ -90,12 +90,13 @@ describe('CartDetailPage', () => {
           .should('have.value', '6');
         cy.wrap($lineItem)
           .find('[data-test=cart-line-item-total-price]')
-          .contains(/^\s*835,80\s€\s*$/);
+          .contains(/^\s*835,80\s€\s*$/, { timeout: Cypress.config('graphqlTimeout') });
 
         cy.wrap($lineItem)
           .find('[data-test=cart-line-item-delete]').click();
       });
-    cy.get('[data-test=cart-line-item]').should('have.length', 0);
+    cy.get('[data-test=cart-line-item]')
+      .should('have.length', 0, { timeout: Cypress.config('graphqlTimeout') });
   });
 
   const cartDiscount = {
@@ -117,21 +118,21 @@ describe('CartDetailPage', () => {
     cy.visit('/cart');
 
     cy.get('[data-test=cart-line-item-total-price]')
-      .contains(/^\s*199,00\s€\s*$/);
+      .contains(/^\s*199,00\s€\s*$/, { timeout: Cypress.config('graphqlTimeout') });
 
     cy.get('[data-test=discount-code-input]')
       .type('SUNRISE_CI');
     cy.get('[data-test=apply-discount-code-button]')
       .click();
     cy.get('[data-test=cart-total-price]')
-      .contains(/^\s*99,50\s€\s*$/);
+      .contains(/^\s*99,50\s€\s*$/, { timeout: Cypress.config('graphqlTimeout') });
 
     cy.get('[data-test=discount-code-name]')
       .contains('SUNRISE_CI');
     cy.get('[data-test=remove-discount-button]')
       .click();
 
     cy.get('[data-test=cart-line-item-total-price]')
-      .contains(/^\s*199,00\s€\s*$/);
+      .contains(/^\s*199,00\s€\s*$/, { timeout: Cypress.config('graphqlTimeout') });
   });
 });

tests/e2e/specs/categoriesMenu_spec.js

@@ -4,7 +4,7 @@ describe('Categories menu', () => {
   });
 
   it('links to any level category', () => {
-    cy.get('[data-test=category-1st-level]', { timeout: 20000 })
+    cy.get('[data-test=category-1st-level]', { timeout: Cypress.config('graphqlTimeout') })
       .eq(1)
       .then(($menu) => {
         cy.wrap($menu)

tests/e2e/specs/locationSelector_spec.js

@@ -6,12 +6,14 @@ describe('Location selector', () => {
   it('changes text to selected language', () => {
     cy.changeLanguage('Deutsch');
 
-    cy.get('[data-test=product-name]').should('contain', 'Stiefeletten Lemare grau');
-    cy.get('[data-test=stores-link]').should('contain', 'Filiale');
+    cy.get('[data-test=product-name]')
+      .should('contain', 'Stiefeletten Lemare grau', { timeout: Cypress.config('graphqlTimeout') });
+    cy.get('[data-test=stores-link]')
+      .should('contain', 'Filiale');
 
     cy.changeLanguage('English');
-
-    cy.get('[data-test=product-name]').should('contain', 'Booties Lemare grey');
+    cy.get('[data-test=product-name]')
+      .should('contain', 'Booties Lemare grey', { timeout: Cypress.config('graphqlTimeout') });
     cy.get('[data-test=stores-link]').should('contain', 'Stores');
   });
 

tests/e2e/specs/login_spec.js

@@ -7,16 +7,17 @@ describe('Login', () => {
   };
 
   it('logs in', () => {
+    cy.createCustomer(customer);
     cy.login(customer);
-    cy.location('pathname').should('eq', '/user/account');
+    cy.location('pathname').should('eq', '/user/account', { timeout: Cypress.config('graphqlTimeout') });
     cy.checkCustomerIsLoggedIn(customer);
 
     cy.reload();
-    cy.location('pathname').should('eq', '/user/account');
+    cy.location('pathname').should('eq', '/user/account', { timeout: Cypress.config('graphqlTimeout') });
     cy.checkCustomerIsLoggedIn(customer);
 
     cy.get('[data-test=logout-button]').click();
-    cy.location('pathname').should('eq', '/login');
+    cy.location('pathname').should('eq', '/login', { timeout: Cypress.config('graphqlTimeout') });
     cy.get('[data-test=login-button]').should('exist');
     cy.get('[data-test=logout-button]').should('not.exist');
     cy.get('[data-test=login-info-name]').should('not.exist');

tests/e2e/specs/miniCart_spec.js

@@ -3,23 +3,24 @@ describe('MiniCart', () => {
     localStorage.removeItem('auth');
     cy.visit('/');
   });
+
   it('links to shopping cart', () => {
     cy.get('[data-test=mini-cart-open-button]')
       .click()
-      .should('have.attr', 'href', '/cart');
+      .should('have.attr', 'href', '/cart', { timeout: Cypress.config('graphqlTimeout') });
   });
 
   it('displays content of cart', () => {
-    cy.get('[data-test=mini-cart-open-button]', { timeout: 20000 })
-      .contains(/^\s*Cart\s*0\s*$/);
+    cy.get('[data-test=mini-cart-open-button]')
+      .contains(/^\s*Cart\s*0\s*$/, { timeout: Cypress.config('graphqlTimeout') });
 
     cy.addLineItem('/product/lemare-booties-0778-brown/M0E20000000E0XM', 2);
-    cy.get('[data-test=mini-cart-open-button]', { timeout: 20000 })
-      .contains(/^\s*Cart\s*2\s*$/);
+    cy.get('[data-test=mini-cart-open-button]')
+      .contains(/^\s*Cart\s*2\s*$/, { timeout: Cypress.config('graphqlTimeout') });
 
     cy.addLineItem('/product/lemare-booties-0778-grey/M0E20000000E0WX', 3);
     cy.get('[data-test=mini-cart-open-button]')
-      .contains(/^\s*Cart\s*5\s*$/)
+      .contains(/^\s*Cart\s*5\s*$/, { timeout: Cypress.config('graphqlTimeout') })
       .trigger('mouseenter');
 
     cy.get('[data-test=mini-cart-price]')
@@ -47,7 +48,7 @@ describe('MiniCart', () => {
       .eq(1)
       .click();
     cy.get('[data-test=mini-cart-open-button]')
-      .contains(/^\s*Cart\s*3\s*$/)
+      .contains(/^\s*Cart\s*3\s*$/, { timeout: Cypress.config('graphqlTimeout') })
       .click();
     cy.get('[data-test=mini-cart-content]')
       .find('[data-test=mini-cart-line-item]')
@@ -59,9 +60,9 @@ describe('MiniCart', () => {
     cy.get('[data-test=mini-cart-content]').should('not.be.visible');
 
     cy.addLineItem('/product/lemare-booties-0778-brown/M0E20000000E0XM', 2);
-    cy.get('[data-test=mini-cart-content]')
-      .should('be.visible')
-      .wait(3000)
+    cy.get('[data-test=mini-cart-content]', { timeout: Cypress.config('graphqlTimeout') })
+      .should('be.visible');
+    cy.wait(3000)
       .should('not.be.visible');
 
     cy.get('[data-test=mini-cart-open-button]').trigger('mouseenter');

tests/e2e/specs/orderDetail_spec.js

@@ -71,6 +71,7 @@ describe('OrderDetailPage', () => {
 
   before(() => {
     cy.addDiscountCode(cartDiscount, 'SUNRISE_CI');
+    cy.createCustomer(customerDraft);
     cy.login(customerDraft);
     cy.createOrder(cartDraft, orderDraft);
   });

tests/e2e/specs/orderList_spec.js

@@ -39,13 +39,14 @@ describe('my orders', () => {
 
   beforeEach(() => {
     cy.visit('/');
+    cy.createCustomer(customer);
     cy.login(customer);
   });
 
   it('shows my orders', () => {
     cy.createOrder(cartDraft1, orderDraft1);
     cy.createOrder(cartDraft2, orderDraft2);
-    cy.get('[data-test=my-orders-button]', { timeout: 20000 }).click();
+    cy.get('[data-test=my-orders-button]', { timeout: Cypress.config('graphqlTimeout') }).click();
     cy.get('[data-test=order-list]')
       .should('have.length', 2)
       .eq(1)
@@ -70,9 +71,9 @@ describe('my orders', () => {
   });
 
   it('displays an empty order list message when no orders have been placed', () => {
-    cy.get('[data-test=my-orders-button]').click();
+    cy.get('[data-test=my-orders-button]', { timeout: Cypress.config('graphqlTimeout') }).click();
     cy.get('[data-test=order-list]')
-      .should('have.length', 0);
+      .should('have.length', 0, { timeout: Cypress.config('graphqlTimeout') });
     cy.get('[data-test=empty-order-list]')
       .contains('You have not placed any orders yet!');
   });