remove deprecations, remove header when scrolling
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
|
||||
import { mount, flushPromises } from '@vue/test-utils'
|
||||
import { nextTick } from 'vue'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import axios from 'axios'
|
||||
import AppNav from '../AppNav.vue'
|
||||
@@ -210,6 +211,109 @@ describe('AppNav', () => {
|
||||
expect(wrapper.find('.app-nav__unread').exists()).toBe(false)
|
||||
})
|
||||
|
||||
describe('scroll-driven show/hide', () => {
|
||||
// The scroll handler is rAF-throttled; run rAF synchronously so a single
|
||||
// dispatched scroll event resolves before we assert. Per the CLAUDE.md
|
||||
// Vitest gotcha, avoid bare fake timers here — they'd clobber this stub.
|
||||
beforeEach(() => {
|
||||
// Reset scroll position so each mount's lastY baseline starts at 0.
|
||||
Object.defineProperty(window, 'scrollY', { value: 0, configurable: true, writable: true })
|
||||
vi.stubGlobal('requestAnimationFrame', (cb) => { cb(); return 0 })
|
||||
// offsetHeight is 0 in jsdom; give the header a real height so the
|
||||
// "near the top" guard (scrollY <= headerH) has something to compare to.
|
||||
vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(50)
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
vi.unstubAllGlobals()
|
||||
vi.restoreAllMocks()
|
||||
})
|
||||
|
||||
function scrollTo(y) {
|
||||
Object.defineProperty(window, 'scrollY', { value: y, configurable: true, writable: true })
|
||||
window.dispatchEvent(new Event('scroll'))
|
||||
}
|
||||
|
||||
it('hides the header when scrolling down past the threshold', async () => {
|
||||
const wrapper = mountNav()
|
||||
scrollTo(200)
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
|
||||
})
|
||||
|
||||
it('reveals the header again when scrolling back up past the threshold', async () => {
|
||||
const wrapper = mountNav()
|
||||
scrollTo(200)
|
||||
await nextTick()
|
||||
expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
|
||||
|
||||
scrollTo(150)
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.find('header').classes()).not.toContain('app-nav--hidden')
|
||||
})
|
||||
|
||||
it('always shows the header near the top of the page', async () => {
|
||||
const wrapper = mountNav()
|
||||
scrollTo(400)
|
||||
await nextTick()
|
||||
expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
|
||||
|
||||
// Back within the header's own height of the top → always revealed.
|
||||
scrollTo(10)
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.find('header').classes()).not.toContain('app-nav--hidden')
|
||||
})
|
||||
|
||||
it('does not let a programmatic upward jump reveal the header mid-read', async () => {
|
||||
const { markProgrammaticScroll } = useFeeds()
|
||||
const nowSpy = vi.spyOn(performance, 'now').mockReturnValue(1000)
|
||||
const wrapper = mountNav()
|
||||
|
||||
// Hide it first via a normal scroll-down (no programmatic flag active).
|
||||
scrollTo(400)
|
||||
await nextTick()
|
||||
expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
|
||||
|
||||
// A read-correction flags a programmatic scroll, then the page jumps
|
||||
// upward. Within the window that upward jump must NOT reveal the header.
|
||||
markProgrammaticScroll() // records lastProgrammaticScroll = 1000
|
||||
nowSpy.mockReturnValue(1100) // 100ms later — inside the 300ms window
|
||||
scrollTo(200)
|
||||
await nextTick()
|
||||
expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
|
||||
|
||||
// Still allows hiding on scroll-down even while the flag is active.
|
||||
scrollTo(500)
|
||||
await nextTick()
|
||||
expect(wrapper.find('header').classes()).toContain('app-nav--hidden')
|
||||
|
||||
// Once the window elapses, a genuine scroll-up reveals it again.
|
||||
nowSpy.mockReturnValue(1500) // 500ms after the flag — outside the window
|
||||
scrollTo(450)
|
||||
await nextTick()
|
||||
expect(wrapper.find('header').classes()).not.toContain('app-nav--hidden')
|
||||
})
|
||||
|
||||
it('does not toggle on sub-threshold jitter', async () => {
|
||||
const wrapper = mountNav()
|
||||
// Start well below the top so the "near the top" guard doesn't apply.
|
||||
scrollTo(300)
|
||||
await nextTick()
|
||||
// Reveal first so we're testing that small moves don't hide it.
|
||||
scrollTo(260)
|
||||
await nextTick()
|
||||
expect(wrapper.find('header').classes()).not.toContain('app-nav--hidden')
|
||||
|
||||
scrollTo(268) // +8px, under the 12px threshold
|
||||
await nextTick()
|
||||
|
||||
expect(wrapper.find('header').classes()).not.toContain('app-nav--hidden')
|
||||
})
|
||||
})
|
||||
|
||||
it('does not mark articles as read when the confirmation is dismissed', async () => {
|
||||
const { feeds } = useFeeds()
|
||||
feeds.value = [
|
||||
|
||||
Reference in New Issue
Block a user