Move scroll button from search grid to search page (#360)

* Move scroll button from search grid to search page

* Add debounce to scroll length check

* Fix removing the debounced scroll listener

* Rename browse-page test

src/components/SearchGrid.vue

@@ -1,40 +1,25 @@
 <template>
-  <div>
-    <SearchGridManualLoad
-      :query="query"
-      :search-term="query.q"
-      data-testid="search-grid"
-      @onLoadMoreImages="onLoadMoreImages"
-    />
-    <ScrollButton data-testid="scroll-button" :show-btn="showScrollButton" />
-  </div>
+  <SearchGridManualLoad
+    :query="query"
+    :search-term="query.q"
+    data-testid="search-grid"
+    @onLoadMoreImages="onLoadMoreImages"
+  />
 </template>
 
 <script>
 export default {
   name: 'SearchGrid',
   props: ['searchTerm'],
-  data: () => ({
-    showScrollButton: false,
-  }),
   computed: {
     query() {
       return this.$store.state.query
     },
   },
-  mounted() {
-    document.addEventListener('scroll', this.checkScrollLength)
-  },
-  beforeDestroy() {
-    document.removeEventListener('scroll', this.checkScrollLength)
-  },
   methods: {
     onLoadMoreImages(searchParams) {
       this.$emit('onLoadMoreImages', searchParams)
     },
-    checkScrollLength() {
-      this.showScrollButton = window.scrollY > 70
-    },
   },
 }
 </script>

src/pages/search.vue

@@ -17,6 +17,10 @@
         <SearchTypeTabs />
         <FilterDisplay v-if="shouldShowFilterTags" />
         <NuxtChild :key="$route.path" @onLoadMoreItems="onLoadMoreItems" />
+        <ScrollButton
+          data-testid="scroll-button"
+          :show-btn="showScrollButton"
+        />
       </div>
     </div>
   </div>
@@ -40,6 +44,7 @@ import local from '~/utils/local'
 import { screenWidth } from '~/utils/get-browser-info'
 import { ALL_MEDIA, IMAGE } from '~/constants/media'
 import { mapActions, mapMutations } from 'vuex'
+import debounce from 'lodash.debounce'
 
 const BrowsePage = {
   name: 'browse-page',
@@ -56,6 +61,12 @@ const BrowsePage = {
     await this.setSearchTypeFromUrl({ url })
     await this.setFiltersFromUrl({ url })
   },
+  data: () => ({
+    showScrollButton: false,
+  }),
+  created() {
+    this.debounceScrollHandling = debounce(this.checkScrollLength, 100)
+  },
   mounted() {
     const localFilterState = () =>
       local.get(process.env.filterStorageKey)
@@ -68,6 +79,10 @@ const BrowsePage = {
     this.setFilterVisibility({
       isFilterVisible: isDesktop() ? localFilterState() : false,
     })
+    window.addEventListener('scroll', this.debounceScrollHandling)
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.debounceScrollHandling)
   },
   computed: {
     query() {
@@ -113,6 +128,9 @@ const BrowsePage = {
         this.$route.path === '/search/' || this.$route.path === '/search/image'
       )
     },
+    checkScrollLength() {
+      this.showScrollButton = window.scrollY > 70
+    },
   },
   watch: {
     query(newQuery) {

test/unit/specs/components/search-grid-wrapper.spec.js

@@ -13,13 +13,5 @@ describe('Search Grid Wrapper', () => {
   it('renders correct content', () => {
     const wrapper = render(SearchGrid, options)
     expect(wrapper.find('[data-testid="search-grid"]').element).toBeDefined()
-    expect(wrapper.find('[data-testid="scroll-button"]').element).toBeDefined()
-  })
-
-  it('renders the scroll button when the page scrolls down', () => {
-    const wrapper = render(SearchGrid, options)
-    window.scrollY = 80
-    wrapper.vm.checkScrollLength()
-    expect(wrapper.vm.showScrollButton).toBe(true)
   })
 })

test/unit/specs/pages/browse-page.spec.js

@@ -0,0 +1,40 @@
+import BrowsePage from '~/pages/search'
+import render from '../../test-utils/render'
+
+const options = {
+  stubs: {
+    AppModal: true,
+    FilterDisplay: true,
+    NuxtChild: true,
+    ScrollButton: true,
+    SearchGridFilter: true,
+    SearchGridForm: true,
+    SearchTypeTabs: true,
+    SearchGridManualLoad: true,
+  },
+  mocks: {
+    $store: {
+      commit: jest.fn(),
+      state: { query: { q: 'foo' }, isFilterVisible: false },
+    },
+    $router: { path: { name: 'search-image' } },
+    $route: { path: '/search/image' },
+  },
+}
+
+describe('Search Grid Wrapper', () => {
+  it('renders correct content', () => {
+    const wrapper = render(BrowsePage, options)
+    expect(wrapper.find('[data-testid="scroll-button"]').element).toBeDefined()
+    window.scrollY = 50
+    wrapper.vm.checkScrollLength()
+    expect(wrapper.vm.showScrollButton).toBe(false)
+  })
+
+  it('renders the scroll button when the page scrolls down', () => {
+    const wrapper = render(BrowsePage, options)
+    window.scrollY = 80
+    wrapper.vm.checkScrollLength()
+    expect(wrapper.vm.showScrollButton).toBe(true)
+  })
+})