Fix flaky tests

cypress.json

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

src/assets/scss/_general.scss

@@ -174,11 +174,12 @@ button {
 }
 
 .img-lazy {
-  background: white url('../img/spinner.gif') no-repeat 50% 50%;
+  background: white url('../img/loading.svg') no-repeat 50% 50%;
   color: $white;
   display: block;
   // image's height
   height: 300px;
+  width: 100%;
 }
 
 .img-lazy-error {
@@ -196,4 +197,4 @@ button {
 }
 .fade-enter, .fade-leave-to {
   opacity: 0;
-}
+}

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/components/cartdetail/PageCartDetail.vue

@@ -1,14 +1,15 @@
 <template>
-  <div v-if="me"
-       class="cart-page container">
-    <div class="row">
-      <div class="col-sm-8 col-xs-12">
-      </div>
-      <div class="col-sm-4">
-        <!--{{> checkout/start-checkout-link id="cart-checkoutnow-btn"}}-->
+  <div class="cart-page container">
+    <LoadingSpinner v-if="isLoading"/>
+
+    <div v-else-if="cartNotEmpty">
+      <div class="row">
+        <div class="col-sm-8 col-xs-12">
+        </div>
+        <div class="col-sm-4">
+          <!--{{> checkout/start-checkout-link id="cart-checkoutnow-btn"}}-->
+        </div>
       </div>
-    </div>
-    <div v-if="cartNotEmpty">
       <div class="row">
         <div class="col-sm-12">
           <div class="current-in-bag">
@@ -54,11 +55,11 @@
         </div>
       </div>
     </div>
+
     <div v-else
          class="empty-results-container">
       <div class="empty-results">
-        <span
-              data-test="empty-cart">
+        <span data-test="empty-cart">
           {{ $t('empty') }}
         </span>
       </div>
@@ -74,6 +75,7 @@
 <script>
 import gql from 'graphql-tag';
 import cartMixin from '@/mixins/cartMixin';
+import LoadingSpinner from '../common/LoadingSpinner.vue';
 import CartLikeSummary from '../common/cartlike/CartLikeSummary.vue';
 import LineItemDeleteForm from './LineItemDeleteForm.vue';
 import LineItemQuantityForm from './LineItemQuantityForm.vue';
@@ -82,6 +84,7 @@ import DisplayableMoneyFragment from '@/components/DisplayableMoney.gql';
 
 export default {
   components: {
+    LoadingSpinner,
     CartLikeSummary,
     LineItemQuantityForm,
     LineItemDeleteForm,
@@ -92,6 +95,12 @@ export default {
     me: null,
   }),
 
+  computed: {
+    isLoading() {
+      return this.$apollo.loading;
+    },
+  },
+
   mixins: [cartMixin],
 
   apollo: {

src/components/common/LoadingSpinner.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="loading-spinner">
+    <img src="../../assets/img/loading.svg"
+         data-test="spinner"/>
+  </div>
+</template>
+
+<style scoped>
+  .loading-spinner {
+    width: 100%;
+    text-align: center;
+    padding: 50px;
+  }
+</style>

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,71 +1,83 @@
 <template>
   <div>
-    <form id="form-filter-products" name="filter-products" action="#">
-<!--  {{#if content.searchTerm}}
-        <input type="hidden" name="q" value="{{content.searchTerm}}"/>
-      {{/if}}-->
+    <LoadingSpinner v-if="isLoading"/>
 
-      <div class="row item-list-pagination">
-<!--    {{#if content.searchResult}}
-        <div class="search-results-row">
-          {{> catalog/pop/search-result searchResult=content.searchResult}}
-        </div>
-        {{else}}
-        <div class="jumbotron-row">
-          {{> catalog/pop/jumbotron jumbotron=content.jumbotron}}
-        </div>
+    <div v-else-if="categories && products">
+      <form v-if="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="col-xs-4 hidden-xs text-left">
-          <div v-if="products && products.results.length"
-               class="custom-select-wrapper">
-            <ProductSortSelector @changeSort="changeSort" />
-            <!--{{> catalog/pop/sort-selector sortSelector=content.sortSelector}}-->
+
+        <div class="row item-list-pagination">
+          <!--    {{#if content.searchResult}}
+          <div class="search-results-row">
+            {{> catalog/pop/search-result searchResult=content.searchResult}}
+          </div>
+          {{else}}
+          <div class="jumbotron-row">
+            {{> catalog/pop/jumbotron jumbotron=content.jumbotron}}
+          </div>
+          {{/if}}-->
+          <div class="col-xs-4 hidden-xs text-left">
+            <div 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}}-->
+            </ul>
+          </div>
+          <div class="col-xs-4 hidden-xs text-right">
+            <!--{{> catalog/pop/display-selector displaySelector=content.displaySelector}}-->
           </div>
         </div>
-        <div class="col-xs-4 hidden-xs text-center custom-pagination">
-          <ul class="page-numbers">
-            <!--{{> common/pagination pagination=content.pagination}}-->
-          </ul>
+        <div class="product-filter hidden-xs">
+          <!--{{> catalog/pop/filters-sidebar}}-->
         </div>
-        <div class="col-xs-4 hidden-xs text-right">
-          <!--{{> catalog/pop/display-selector displaySelector=content.displaySelector}}-->
+
+        <div id="pop-product-list"
+            class="row">
+          <ProductThumbnail v-for="product in products.results"
+                            data-test="product-list"
+                            :key="product.id"
+                            :product="product" />
+        </div>
+      </form>
+        <div v-else>
+          <div class="empty-results-container">
+            <span class="empty-results"
+                  data-test="empty-results">
+              {{ $t('catalog.noSearchResult.searchNotFound.notFound') }}
+            </span>
+          </div>
         </div>
-      </div>
-      <div class="product-filter hidden-xs">
-        <!--{{> catalog/pop/filters-sidebar}}-->
-      </div>
-    </form>
-    <div v-if="isLoading">
-      <img data-test="spinner" src="../../assets/img/spinner.gif"/>
     </div>
-    <div v-else-if="products && !products.results.length">
+
+    <div v-else>
       <div class="empty-results-container">
         <span class="empty-results"
-              data-test="empty-results">
-          {{ $t('catalog.noSearchResult.searchNotFound.notFound') }}
+                data-test="category-not-found">
+          {{ $t('catalog.noSearchResult.searchNotFound.categoryNotFound') }}
         </span>
       </div>
     </div>
-    <transition name="fade">
-      <div v-if="!isLoading && products && products.results.length"
-           id="pop-product-list"
-           class="row">
-        <ProductThumbnail v-for="product in products.results"
-                          data-test="product-list"
-                          :key="product.id"
-                          :product="product" />
-      </div>
-    </transition>
   </div>
 </template>
 
 <script>
 import gql from 'graphql-tag';
+import LoadingSpinner from '../common/LoadingSpinner.vue';
 import ProductThumbnail from '../common/ProductThumbnail.vue';
 import ProductSortSelector from './ProductSortSelector.vue';
 
 export default {
   components: {
+    LoadingSpinner,
     ProductThumbnail,
     ProductSortSelector,
   },
@@ -79,7 +91,9 @@ export default {
   }),
 
   computed: {
-    category: vm => vm.categories.results[0],
+    category() {
+      return this.categories.results[0];
+    },
 
     isLoading() {
       return this.$apollo.loading;
@@ -154,7 +168,7 @@ export default {
           sort: this.sort,
         };
       },
-      skip: vm => !vm.categories,
+      skip: vm => !vm.categories || !vm.category,
     },
   },
 };

src/components/useraccount/myorders/TabOrderList.vue

@@ -1,8 +1,9 @@
 <template>
-  <div v-if="me"
-       class="my-orders">
-    <div v-if="me.orders.results.length"
-        class="my-orders-content">
+  <div class="my-orders">
+    <LoadingSpinner v-if="isLoading"/>
+
+    <div v-else-if="orderListNotEmpty"
+         class="my-orders-content">
       <div class="my-orders-table-wrapper">
         <div class="row">
           <div class="col-md-2 col-sm-3 col-xs-4">
@@ -90,15 +91,26 @@
 import gql from 'graphql-tag';
 import BaseMoney from '../../common/BaseMoney.vue';
 import BaseDate from '../../common/BaseDate.vue';
+import LoadingSpinner from '../../common/LoadingSpinner.vue';
 import DisplayableMoneyFragment from '@/components/DisplayableMoney.gql';
 
 export default {
-  components: { BaseMoney, BaseDate },
+  components: { BaseMoney, BaseDate, LoadingSpinner },
 
   data: () => ({
     me: null,
   }),
 
+  computed: {
+    isLoading() {
+      return this.$apollo.loading;
+    },
+
+    orderListNotEmpty() {
+      return this.me?.orders?.results.length > 0;
+    },
+  },
+
   methods: {
     translateStatus(state) {
       return state ? this.$t(state) : '-';

src/i18n/de.yaml

@@ -185,7 +185,8 @@ catalog:
   noSearchResult:
     searchNotFound:
       title: "Suchergebnisse"
-      notFound: "Keine Ergebnisse Gefunden."
+      notFound: "Keine Ergebnisse Gefunden"
+      categoryNotFound: "Kategorie nicht gefunden"
       keyword: null
       description: "Es gab leider keine Treffer für Ihre Suche nach \"xxxxx\". Prüfe die Schreibweise oder suche nach einem Synonym."
     popularSearchPhrases:

src/i18n/en.yaml

@@ -183,7 +183,8 @@ catalog:
   noSearchResult:
     searchNotFound:
       title: "Search Results"
-      notFound: "No Results Found."
+      notFound: "No Results Found"
+      categoryNotFound: "Category Not Found"
       keyword: "zero"
       description: "Search was unable to find any results for \"Batman\", you may have typed your word incorrectly, or are being too specific. Try using a broader search phrase or try one of our most popular search phrases."
     popularSearchPhrases:

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');