From 6843a996717010bc6dfe8a12c67de036a70f4d15 Mon Sep 17 00:00:00 2001
From: lauramargar <114984466+lauramargar@users.noreply.github.com>
Date: Fri, 25 Aug 2023 10:40:22 +0200
Subject: [PATCH] feat: test for collapse subheader when scroll down (#312)
EMP-1794
---
package-lock.json | 8 ++++----
package.json | 4 ++--
src/components/desktop/desktop-top-section.vue | 7 ++++++-
src/components/has-scroll-past-threshold.mixin.ts | 5 +----
tests/e2e/cucumber/common-steps.spec.ts | 4 ++++
tests/e2e/cucumber/scroll.feature | 12 ++++++++++++
tests/e2e/cucumber/scroll.spec.ts | 15 +++++++++++++++
7 files changed, 44 insertions(+), 11 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 50771cdf..2c2266a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,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",
@@ -2183,9 +2183,9 @@
"integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
},
"node_modules/@empathyco/x-components": {
- "version": "3.0.0-alpha.400",
- "resolved": "https://registry.npmjs.org/@empathyco/x-components/-/x-components-3.0.0-alpha.400.tgz",
- "integrity": "sha512-TTlDV21tCVOLyhkJQPPkSwdT70wHqrQOM36TS08MJP9Rv676VSn0Xp8hj59n5H5lFBphozwXVIhw/qXMM7C4dQ==",
+ "version": "3.0.0-alpha.405",
+ "resolved": "https://registry.npmjs.org/@empathyco/x-components/-/x-components-3.0.0-alpha.405.tgz",
+ "integrity": "sha512-C1VC/2ynX9U5lAvYCY1scnb2JnNuutowlxT+2AO1UeVQFioMZF+rG+X1g2lhMA1wupHje869fuxVCPcq9eI6Rw==",
"dependencies": {
"@empathyco/x-adapter": "^8.0.0-alpha.33",
"@empathyco/x-adapter-platform": "^1.0.0-alpha.83",
diff --git a/package.json b/package.json
index fdb02ae5..4fc3e538 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/desktop/desktop-top-section.vue b/src/components/desktop/desktop-top-section.vue
index f9f35e2c..c9944899 100644
--- a/src/components/desktop/desktop-top-section.vue
+++ b/src/components/desktop/desktop-top-section.vue
@@ -2,7 +2,12 @@
-
+
diff --git a/src/components/has-scroll-past-threshold.mixin.ts b/src/components/has-scroll-past-threshold.mixin.ts
index 8dd76fa5..ce53dab9 100644
--- a/src/components/has-scroll-past-threshold.mixin.ts
+++ b/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';
diff --git a/tests/e2e/cucumber/common-steps.spec.ts b/tests/e2e/cucumber/common-steps.spec.ts
index 2f88a98a..a23c97b2 100644
--- a/tests/e2e/cucumber/common-steps.spec.ts
+++ b/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');
+});
diff --git a/tests/e2e/cucumber/scroll.feature b/tests/e2e/cucumber/scroll.feature
index 037508df..6bc9717d 100644
--- a/tests/e2e/cucumber/scroll.feature
+++ b/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 "" size view
+ When search bar is clicked
+ And "" is searched
+ Then related results are displayed
+ When scrolling down to the bottom
+ Then subheader is not visible
+
+ Examples:
+ | query | view |
+ | shirt | macbook-13 |
diff --git a/tests/e2e/cucumber/scroll.spec.ts b/tests/e2e/cucumber/scroll.spec.ts
index e5d49230..350c3217 100644
--- a/tests/e2e/cucumber/scroll.spec.ts
+++ b/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 });
+ });
+});