edit watch prop api, add watch test

cypress/support/commands.ts

@@ -15,7 +15,7 @@ declare global {
  getScrollSubject: () => Cypress.Chainable
  scrollRootWithDelta: (options: scrollRootWithDeltaOptions) => Cypress.Chainable
  scrollToHide: () => Cypress.Chainable
- checkStyles: (styles: CSSProperties) => void
+ checkStyles: (styles: CSSProperties) => Cypress.Chainable
  resizeRoot: (newWidth: number) => Cypress.Chainable
  }
  }

src/constants.ts

@@ -1,3 +1,4 @@
+import type { Ref } from 'vue'
 import type { UseFixedHeaderOptions } from './types'
 
 export const CAPTURE_DELTA_FRAME_COUNT = 10
@@ -23,5 +24,5 @@ export const defaultOptions: UseFixedHeaderOptions = {
  transition: `transform 0.5s ${easing} 0s`,
  transform: 'translateY(-101%)',
  },
- watch: [],
+ watch: (() => null) as unknown as Ref<any>,
 }

src/types.ts

@@ -8,5 +8,5 @@ export interface UseFixedHeaderOptions<T = any> {
  root: MaybeTemplateRef
  enterStyles: CSSProperties
  leaveStyles: CSSProperties
- watch: (Ref<T> | ComputedRef<T> | null)[]
+ watch: Ref<T> | ComputedRef<T>
 }

src/useFixedHeader.ts

@@ -263,7 +263,7 @@ export function useFixedHeader(
  }
  })
 
- watch(() => mergedOptions.watch, toggleFunctionalities, { flush: 'post' })
+ watch(mergedOptions.watch, toggleFunctionalities, { flush: 'post' })
 
  return { isVisible }
 }

tests/components/Watch.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref, unref, computed, type Ref } from 'vue'
+import { useFixedHeader } from '../../src/useFixedHeader'
+
+const props = defineProps<{
+ watch: Ref<boolean>
+}>()
+
+const headerRef = ref<HTMLElement | null>(null)
+
+useFixedHeader(headerRef, {
+ watch: props.watch,
+})
+
+const position = computed(() => (props.watch.value ? 'relative' : 'fixed'))
+</script>
+
+<template>
+ <div class="Wrapper">
+ <header
+ class="Header"
+ ref="headerRef"
+ :style="{
+ position,
+ }"
+ />
+ </div>
+</template>
+
+<style scoped>
+.Wrapper {
+ height: 2000px;
+ display: flex;
+}
+.Header {
+ width: 100%;
+ top: 0;
+ left: 0;
+ height: 80px;
+ background: red;
+}
+</style>

tests/components/WindowScroll.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeMount, ref, type CSSProperties } from 'vue'
+import { onBeforeMount, ref, type Ref, type CSSProperties } from 'vue'
 import { useFixedHeader } from '../../src/useFixedHeader'
 
 const props = defineProps<{

tests/watch.cy.ts

@@ -0,0 +1,33 @@
+import App from './components/Watch.vue'
+
+import { ref } from 'vue'
+
+import { DEFAULT_ENTER_DELTA, defaultOptions } from '../src/constants'
+
+describe('Watch', () => {
+ if (!Cypress.env('CONTAINER')) {
+ it('Toggles functionalities when reactive source changes', () => {
+ const isRelative = ref(false)
+
+ cy.mount(App, { props: { watch: isRelative } })
+ .scrollToHide()
+ .get('header')
+ .checkStyles(defaultOptions.leaveStyles)
+
+ .then(() => (isRelative.value = true))
+ .get('header')
+ .should('have.attr', 'style')
+ .and('be.eq', 'position: relative;')
+
+ .then(() => (isRelative.value = false))
+ .scrollRootWithDelta({ delta: DEFAULT_ENTER_DELTA, scrollDown: false })
+ .get('header')
+ .checkStyles(defaultOptions.enterStyles)
+
+ .then(() => (isRelative.value = true))
+ .get('header')
+ .should('have.attr', 'style')
+ .and('be.eq', 'position: relative;')
+ })
+ }
+})