fix(scroll): scroll direction inconsistency (#1629)

empathyco · Oct 3, 2024 · ad970ae · ad970ae
1 parent bc8374d
commit ad970ae
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 4 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,6 +9,7 @@
 
 **/tests/e2e/videos/
 **/tests/e2e/screenshots/
+**/tests/e2e/downloads/
 
 # local env files
 .env.local

diff --git a/packages/x-components/.gitignore b/packages/x-components/.gitignore
@@ -8,6 +8,7 @@
 
 /tests/e2e/videos/
 /tests/e2e/screenshots/
+/tests/e2e/downloads/
 
 # local env files
 .env.local

diff --git a/packages/x-components/cypress.config.ts b/packages/x-components/cypress.config.ts
@@ -14,6 +14,7 @@ export default defineConfig({
     supportFile: 'tests/support/index.ts',
     fixturesFolder: 'tests/e2e/fixtures',
     screenshotsFolder: 'tests/e2e/screenshots',
+    downloadsFolder: 'tests/e2e/downloads',
     experimentalRunAllSpecs: true,
     screenshotOnRunFailure: false,
     video: false,

diff --git a/packages/x-components/src/components/scroll/use-scroll.ts b/packages/x-components/src/components/scroll/use-scroll.ts
@@ -113,9 +113,9 @@ export function useScroll(
    */
   const storeScrollData = () => {
     if (scrollEl.value) {
-      currentPosition.value = scrollEl.value.scrollTop;
       scrollHeight.value = scrollEl.value.scrollHeight;
       clientHeight.value = scrollEl.value.clientHeight;
+      currentPosition.value = scrollEl.value.scrollTop;
     }
   };
 

diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
@@ -102,7 +102,10 @@
     <MainModal :animation="modalAnimation">
       <MultiColumnMaxWidthLayout class="x-bg-neutral-0">
         <template #header-middle>
-          <div class="x-flex x-flex-col x-gap-16 x-items-stretch x-flex-auto">
+          <div
+            class="x-flex x-flex-col x-gap-16 x-items-stretch x-flex-auto"
+            :data-test="`main-scroll-${mainScrollDirection}`"
+          >
             <div class="x-input-group x-input-group-lead x-rounded-sm">
               <div class="x-input x-search-input-placeholder-container x-flex">
                 <SearchInputPlaceholder :messages="searchInputPlaceholderMessages" />
@@ -477,6 +480,7 @@
   import ChevronUp from '../../components/icons/chevron-up.vue';
   import CrossIcon from '../../components/icons/cross.vue';
   import { use$x } from '../../composables/use-$x';
+  import { useState } from '../../composables/use-state';
   import { infiniteScroll } from '../../directives/infinite-scroll';
   import ExperienceControls from '../../x-modules/experience-controls/components/experience-controls.vue';
   import Grid2Col from '../../components/icons/grid-2-col.vue';
@@ -613,6 +617,9 @@
       const sortValues = ['', 'price asc', 'price desc'];
       const isAnyQueryLoadedInPreview = useQueriesPreview().isAnyQueryLoadedInPreview;
 
+      const scrollData = useState('scroll', ['data']).data;
+      const mainScrollDirection = computed(() => scrollData.value['main-scroll']?.direction);
+
       const controls: ComputedRef<HomeControls> = computed(() => {
         return {
           searchInput: {
@@ -682,7 +689,8 @@
         queries,
         toggleE2EAdapter,
         controls,
-        x: use$x()
+        x: use$x(),
+        mainScrollDirection
       };
     }
   });

diff --git a/packages/x-components/tests/e2e/scroll.feature b/packages/x-components/tests/e2e/scroll.feature
@@ -101,3 +101,24 @@ Feature: Scroll component
     Examples:
       | query1 | resultId  | store |
       | lego   | result-12 | Italy |
+
+  Scenario Outline: 7. Scroll direction is updated properly
+    When  start button is clicked
+    Then  empathize should be visible
+    When  "<query1>" is searched
+    Then  related results are displayed
+    When  scrolling to bottom
+    Then  scroll direction is DOWN
+    When  scrolling to top
+    Then  scroll direction is UP
+    When  scrolling down to result "<resultId>"
+    And   the page is reloaded
+    Then  related results are displayed
+    When  scrolling to bottom
+    Then  scroll direction is DOWN
+    When  scrolling to top
+    Then  scroll direction is UP
+
+    Examples:
+      | query1 | resultId  |
+      | lego   | result-8 |
diff --git a/packages/x-components/tests/e2e/scroll/scroll.spec.ts b/packages/x-components/tests/e2e/scroll/scroll.spec.ts
@@ -1,4 +1,4 @@
-import { Then } from '@badeball/cypress-cucumber-preprocessor';
+import { Then, When } from '@badeball/cypress-cucumber-preprocessor';
 
 Then('url is updated with result {string}', (resultId: string) => {
   cy.url().should('contain', `scroll=${resultId}`);
@@ -13,3 +13,27 @@ Then('scroll position is at top', () => {
     expect(scrollContainer.scrollTop()).to.equal(0);
   });
 });
+
+When('scrolling to top', () => {
+  cy.get('#main-scroll').scrollTo('top', {
+    easing: 'swing',
+    duration: 1000,
+    ensureScrollable: true
+  });
+});
+
+When('scrolling to bottom', () => {
+  cy.get('#main-scroll').scrollTo('bottom', {
+    easing: 'swing',
+    duration: 1000,
+    ensureScrollable: true
+  });
+});
+
+Then('scroll direction is UP', () => {
+  cy.getByDataTest('main-scroll-UP').should('exist');
+});
+
+Then('scroll direction is DOWN', () => {
+  cy.getByDataTest('main-scroll-DOWN').should('exist');
+});