Test - Edit commands to match new API

Author: smastrom

cypress/support/commands.ts

@@ -1,21 +1,15 @@
-import { DEFAULT_LEAVE_DELTA, DEFAULT_ENTER_DELTA } from '../../src/constants'
 import { isCustomContainer } from './constants'
 
 import type { CSSProperties } from 'vue'
 
-type scrollRootWithDeltaOptions = {
-   delta: number
-   scrollDown?: boolean
-   minDuration?: number
-}
+import 'cypress-wait-frames'
 
 declare global {
    namespace Cypress {
       interface Chainable {
          getScrollSubject: () => Cypress.Chainable
-         scrollRootWithDelta: (options: scrollRootWithDeltaOptions) => Cypress.Chainable
-         scrollToHide: () => Cypress.Chainable
-         scrollToShow: () => Cypress.Chainable
+         scrollUp: () => Cypress.Chainable
+         scrollDown: () => Cypress.Chainable
          checkStyles: (styles: CSSProperties) => Cypress.Chainable
          resizeRoot: (newWidth: number) => Cypress.Chainable
       }
@@ -29,41 +23,29 @@ Cypress.Commands.add('getScrollSubject', () => {
 
 Cypress.Commands.add('resizeRoot', (newWidth: number) => {
    if (isCustomContainer) {
-      return cy.get('.Scroller').then(($el) => {
-         $el.css({ width: `${newWidth}px` })
-      })
+      return cy
+         .get('.Scroller')
+         .then(($el) => {
+            $el.css({ width: `${newWidth}px` })
+         })
+         .waitFrames({
+            subject: () => cy.get('.Scroller'),
+            property: 'clientWidth',
+            frames: 10,
+         })
    }
 
-   return cy.viewport(newWidth, newWidth)
+   return cy.viewport(newWidth, newWidth).waitFrames({
+      subject: cy.window,
+      property: 'outerWidth',
+      frames: 10,
+   })
 })
 
-Cypress.Commands.add(
-   'scrollRootWithDelta',
-   ({ delta, scrollDown = true, minDuration = 1000 }: scrollRootWithDeltaOptions) => {
-      let distance = delta * minDuration
-      let duration = minDuration
-
-      // If obtained distance is below header height, throw an error
-      cy.get('header').then(($header) => {
-         const headerHeight = $header.height()
-
-         if (headerHeight && distance < headerHeight) {
-            throw new Error(`Scrolling distance is less than ${headerHeight}px. Increase duration.`)
-         }
-      })
-
-      const scrollDistance = scrollDown ? distance : -1 * distance
-
-      cy.log(`Scrolling ${scrollDistance}px with a delta of ${delta} in ${duration}ms`)
-
-      return cy.getScrollSubject().scrollTo(0, scrollDistance, { duration })
-   }
-)
-
-Cypress.Commands.add('scrollToHide', () => cy.scrollRootWithDelta({ delta: DEFAULT_LEAVE_DELTA }))
+Cypress.Commands.add('scrollUp', () => cy.getScrollSubject().scrollTo('top', { duration: 300 }))
 
-Cypress.Commands.add('scrollToShow', () =>
-   cy.scrollRootWithDelta({ delta: DEFAULT_ENTER_DELTA, scrollDown: false })
+Cypress.Commands.add('scrollDown', () =>
+   cy.getScrollSubject().scrollTo('bottom', { duration: 300 }),
 )
 
 Cypress.Commands.add('checkStyles', { prevSubject: 'element' }, (subject, styles) => {

tests/components/ContainerScroll.vue

@@ -1,20 +1,16 @@
 <script setup lang="ts">
-import { onBeforeMount, ref, type CSSProperties } from 'vue'
+import { onBeforeMount, ref } from 'vue'
 import { useFixedHeader } from '../../src'
 
 const props = defineProps<{
-   enterDelta?: number
-   leaveDelta?: number
-   enterStyles?: CSSProperties
-   leaveStyles?: CSSProperties
-   simulateInstantRestoration?: boolean
+   instantScrollRestoration?: boolean
 }>()
 
 const containerRef = ref<HTMLElement | null>(null)
 const headerRef = ref<HTMLElement | null>(null)
 
 onBeforeMount(() => {
-   if (!props.simulateInstantRestoration) return
+   if (!props.instantScrollRestoration) return
 
    window.requestAnimationFrame(() => {
       if (!containerRef.value) throw new Error('containerRef is null')
@@ -25,10 +21,6 @@ onBeforeMount(() => {
 
 const { styles } = useFixedHeader(headerRef, {
    root: containerRef,
-   enterDelta: props.enterDelta,
-   leaveDelta: props.leaveDelta,
-   enterStyles: props.enterStyles,
-   leaveStyles: props.leaveStyles,
 })
 </script>
 

tests/components/WindowScroll.vue

@@ -1,31 +1,22 @@
 <script setup lang="ts">
-import { onBeforeMount, ref, type CSSProperties } from 'vue'
+import { onBeforeMount, ref } from 'vue'
 import { useFixedHeader } from '../../src'
 
 const props = defineProps<{
-   enterDelta?: number
-   leaveDelta?: number
-   enterStyles?: CSSProperties
-   leaveStyles?: CSSProperties
-   simulateInstantRestoration?: boolean
+   instantScrollRestoration?: boolean
 }>()
 
 const headerRef = ref<HTMLElement | null>(null)
 
 onBeforeMount(() => {
-   if (!props.simulateInstantRestoration) return
+   if (!props.instantScrollRestoration) return
 
    window.requestAnimationFrame(() => {
       window.scroll(0, window.innerHeight / 3)
    })
 })
 
-const { styles } = useFixedHeader(headerRef, {
-   enterDelta: props.enterDelta,
-   leaveDelta: props.leaveDelta,
-   enterStyles: props.enterStyles,
-   leaveStyles: props.leaveStyles,
-})
+const { styles } = useFixedHeader(headerRef)
 </script>
 
 <template>
@@ -61,4 +52,3 @@ const { styles } = useFixedHeader(headerRef, {
    }
 }
 </style>
-../../src/useFixedHeader