add resize tests

cypress/support/commands.ts

@@ -16,6 +16,7 @@ declare global {
  scrollRootWithDelta: (options: scrollRootWithDeltaOptions) => Cypress.Chainable
  scrollToHide: () => Cypress.Chainable
  checkStyles: (styles: CSSProperties) => void
+ resizeRoot: (newWidth: number) => Cypress.Chainable
  }
  }
 }
@@ -25,6 +26,16 @@ Cypress.Commands.add('getScrollSubject', () => {
  return cy.window()
 })
 
+Cypress.Commands.add('resizeRoot', (newWidth: number) => {
+ if (isCustomContainer) {
+ return cy.get('.Scroller').then(($el) => {
+ $el.css({ width: `${newWidth}px` })
+ })
+ }
+
+ return cy.viewport(newWidth, newWidth)
+})
+
 Cypress.Commands.add(
  'scrollRootWithDelta',
  ({ delta, scrollDown = true, minDuration = 1000 }: scrollRootWithDeltaOptions) => {
@@ -48,10 +59,7 @@ Cypress.Commands.add(
  }
 )
 
-Cypress.Commands.add('scrollToHide', () => {
- cy.scrollRootWithDelta({ delta: DEFAULT_LEAVE_DELTA })
- return cy.get('header').should('not.be.visible')
-})
+Cypress.Commands.add('scrollToHide', () => cy.scrollRootWithDelta({ delta: DEFAULT_LEAVE_DELTA }))
 
 Cypress.Commands.add('checkStyles', { prevSubject: 'element' }, (subject, styles) => {
  Object.entries(styles).forEach(([property, value]) => {

cypress/support/constants.ts

@@ -12,3 +12,6 @@ export const customStyles = {
  opacity: 0.2,
  },
 }
+
+export const VIEWPORT_HEADER_RELATIVE = isCustomContainer ? 475 : 768
+export const VIEWPORT_HEADER_HIDDEN = isCustomContainer ? 320 : 375

src/constants.ts

@@ -23,5 +23,5 @@ export const defaultOptions: UseFixedHeaderOptions = {
  transition: `transform 0.5s ${easing} 0s`,
  transform: 'translateY(-101%)',
  },
- watch: [null],
+ watch: [],
 }

tests/components/ContainerScroll.vue

@@ -53,11 +53,14 @@ useFixedHeader(headerRef, {
 }
 
 .Scroller {
- width: 500px;
- height: 500px;
+ width: 600px;
+ height: 600px;
  overflow-y: scroll;
  overflow-x: hidden;
  background: white;
+ resize: horizontal;
+
+ container-type: inline-size;
 }
 
 .Container {
@@ -72,4 +75,17 @@ useFixedHeader(headerRef, {
  background: green;
  position: sticky;
 }
+
+/** Used in resize.cy.ts */
+@container (max-width: 475px) {
+ .Header {
+ position: relative;
+ }
+}
+
+@container (max-width: 320px) {
+ .Header {
+ display: none;
+ }
+}
 </style>

tests/components/WindowScroll.vue

@@ -47,4 +47,17 @@ useFixedHeader(headerRef, {
  background: red;
  position: fixed;
 }
+
+/** Used in resize.cy.ts */
+@media (max-width: 768px) {
+ .Header {
+ position: relative;
+ }
+}
+
+@media (max-width: 375px) {
+ .Header {
+ display: none;
+ }
+}
 </style>

tests/resize.cy.ts

@@ -0,0 +1,59 @@
+import {
+ VIEWPORT_HEADER_RELATIVE as RELATIVE,
+ VIEWPORT_HEADER_HIDDEN as HIDDEN,
+} from '../cypress/support/constants'
+
+import { defaultOptions } from '../src/constants'
+
+const ITERATIONS = 10
+const FIXED = RELATIVE * 2
+
+describe('Resize', () => {
+ describe('Functionalies are disabled', () => {
+ it('Resizing from `position: fixed` to `position: relative`', () => {
+ cy.mountApp().resizeRoot(FIXED)
+
+ for (let i = 0; i < ITERATIONS; i++) {
+ cy.resizeRoot(FIXED).wait(50).resizeRoot(RELATIVE).wait(50)
+ }
+
+ cy.getScrollSubject().scrollToHide().get('header').should('not.have.attr', 'style')
+ })
+
+ it('Resizing from `position: fixed` to `display: none`', () => {
+ cy.mountApp().resizeRoot(HIDDEN)
+
+ for (let i = 0; i < ITERATIONS; i++) {
+ cy.resizeRoot(FIXED).wait(50).resizeRoot(HIDDEN).wait(50)
+ }
+
+ cy.getScrollSubject()
+ .scrollToHide()
+ .get('header')
+ // Here we have an empty string as styles are replaced even if never applied
+ .should('have.attr', 'style', '')
+ })
+ })
+
+ describe('Functionalies are enabled', () => {
+ it('Resizing from `position: relative` to `position: fixed`', () => {
+ cy.mountApp().resizeRoot(RELATIVE)
+
+ for (let i = 0; i < ITERATIONS; i++) {
+ cy.resizeRoot(RELATIVE).wait(50).resizeRoot(FIXED).wait(50)
+ }
+
+ cy.getScrollSubject().scrollToHide().get('header').checkStyles(defaultOptions.leaveStyles)
+ })
+
+ it('Resizing from `display: none` to `position: fixed`', () => {
+ cy.mountApp().resizeRoot(HIDDEN)
+
+ for (let i = 0; i < ITERATIONS; i++) {
+ cy.resizeRoot(HIDDEN).wait(50).resizeRoot(FIXED).wait(50)
+ }
+
+ cy.getScrollSubject().scrollToHide().get('header').checkStyles(defaultOptions.leaveStyles)
+ })
+ })
+})

tests/scroll-up.cy.ts

@@ -17,7 +17,6 @@ function testScrollUp({ delta, isCustom } = { delta: DEFAULT_ENTER_DELTA, isCust
 
  it('Header is hidden if scroll delta is lower than enterDelta', () => {
  cy.mountApp(props)
- .scrollToHide()
  .scrollRootWithDelta({ delta: delta / 2 })
  .get('header')
  .should('not.be.visible')
@@ -27,6 +26,8 @@ function testScrollUp({ delta, isCustom } = { delta: DEFAULT_ENTER_DELTA, isCust
  it('Same delta', () => {
  cy.mountApp(props)
  .scrollToHide()
+ .get('header')
+ .should('not.be.visible')
  .scrollRootWithDelta({ delta, scrollDown: false })
  .get('header')
  .should('be.visible')
@@ -35,6 +36,8 @@ function testScrollUp({ delta, isCustom } = { delta: DEFAULT_ENTER_DELTA, isCust
  it('Greater delta', () => {
  cy.mountApp(props)
  .scrollToHide()
+ .get('header')
+ .should('not.be.visible')
  .scrollRootWithDelta({ delta: delta * 15, scrollDown: false })
  .get('header')
  .should('be.visible')