feat: test for collapse subheader when scroll down (#312)

EMP-1794

package.json

@@ -19,7 +19,7 @@
     "test:unit": "vue-cli-service test:unit",
     "lint": "eslint src tests --ext .ts,.tsx,.vue",
     "lint:fix": "npm run lint -- --fix",
-    "install:local": "npm install file:../x/packages/x-components/empathyco-x-components-3.0.0-alpha.378.tgz --no-save",
+    "install:local": "npm install file:../x/packages/x-components/empathyco-x-components-3.0.0-alpha.400.tgz --no-save",
     "install:adapter-platform:local": "npm install file:../x/packages/x-adapter-platform/empathyco-x-adapter-platform-1.0.0-alpha.73.tgz --no-save",
     "install:types:local": "npm install file:../x/packages/x-types/empathyco-x-types-10.0.0-alpha.68.tgz",
     "install:utils:local": "npm install file:../x/packages/x-archetype-utils/empathyco-x-archetype-utils-0.1.0-alpha.20.tgz --no-save",
@@ -32,7 +32,7 @@
     "@empathyco/x-adapter": "^8.0.0-alpha.33",
     "@empathyco/x-adapter-platform": "^1.0.0-alpha.83",
     "@empathyco/x-archetype-utils": "^1.0.0-alpha.3",
-    "@empathyco/x-components": "^3.0.0-alpha.400",
+    "@empathyco/x-components": "^3.0.0-alpha.405",
     "@empathyco/x-deep-merge": "^1.3.0-alpha.29",
     "@empathyco/x-types": "^10.0.0-alpha.72",
     "@empathyco/x-utils": "^1.0.0-alpha.20",

src/components/desktop/desktop-top-section.vue

@@ -2,7 +2,12 @@
   <div>
     <DesktopHeaderFullPredictive />
 
-    <DesktopSubHeader :hasSearched="hasSearched" :isFullPredictive="true" class="x-layout-item" />
+    <DesktopSubHeader
+      data-test="sub-header"
+      :hasSearched="hasSearched"
+      :isFullPredictive="true"
+      class="x-layout-item"
+    />
   </div>
 </template>
 

src/components/has-scroll-past-threshold.mixin.ts

@@ -23,11 +23,8 @@ export default class IsScrollingUp extends Vue {
     if (mainScrollData?.hasReachedStart) {
       this.hasScrolledPastThresholdFlag = false;
       return;
-    }
-
-    if (mainScrollData?.hasAlmostReachedEnd) {
+    } else {
       this.hasScrolledPastThresholdFlag = true;
-      return;
     }
 
     const isScrollingUp = mainScrollData?.direction === 'UP';

tests/e2e/cucumber/common-steps.spec.ts

@@ -81,3 +81,7 @@ Then('related results have changed', () => {
       .as('resultsList');
   });
 });
+
+Then('subheader is not visible', () => {
+  cy.getByDataTest('sub-header').should('not.be.visible');
+});

tests/e2e/cucumber/scroll.feature

@@ -25,3 +25,15 @@ Feature: Scroll
       | query | view        | resultId     |
       | shirt | macbook-13  | result-12    |
       | shirt | iphone-x    | result-12    |
+
+  Scenario Outline: 2. Scroll position is at end and toolbar is hidden
+    Given start page with "<view>" size view
+    When  search bar is clicked
+    And   "<query>" is searched
+    Then  related results are displayed
+    When  scrolling down to the bottom
+    Then  subheader is not visible
+
+    Examples:
+      | query | view        |
+      | shirt | macbook-13  |

tests/e2e/cucumber/scroll.spec.ts

@@ -23,3 +23,18 @@ When('scroll to top is clicked', () => {
 Then('scroll position is at top', () => {
   cy.url().should('not.contain', 'scroll');
 });
+
+/**
+ * In this step we have to make 2 scrolls, because in the second scenario in scroll.feature file
+ * we want to check if the subheader is collapse when the scroll is at end.
+ * First we make a scroll center to collapse the header and calculate the height of the page without
+ * the subheader. And then we can reach the bottom because we have the total height of the page.
+ */
+When('scrolling down to the bottom', () => {
+  cy.getByDataTest('query-preview-item')
+    .should('have.length', 10)
+    .then(() => {
+      cy.getByDataTest('base-scroll').scrollTo('center', { duration: 1000 });
+      cy.getByDataTest('base-scroll').scrollTo('bottom', { duration: 500 });
+    });
+});