1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { store } from './store';
import { apiFetch } from './api';
import { renderItems } from './main';
// Mock api
vi.mock('./api', () => ({
apiFetch: vi.fn()
}));
// Mock main module functions that we aren't testing directly but are imported/used
// Note: We need to use vi.importActual to get the real implementations we want to test
// But main.ts has side effects and complex DOM manipulations, so we might want to mock parts of it.
// Mock IntersectionObserver
class MockIntersectionObserver {
observe = vi.fn();
unobserve = vi.fn();
disconnect = vi.fn();
}
vi.stubGlobal('IntersectionObserver', MockIntersectionObserver);
describe('Scroll-to-Read Regression Tests', () => {
beforeEach(() => {
document.body.innerHTML = '<div id="app"><div id="main-content"><div id="content-area"></div></div></div>';
// Mock scrollIntoView
Element.prototype.scrollIntoView = vi.fn();
vi.clearAllMocks();
store.setItems([]);
// Setup default auth response
vi.mocked(apiFetch).mockResolvedValue({
ok: true,
status: 200,
json: async () => []
} as Response);
});
afterEach(() => {
vi.useRealTimers();
});
it('should mark item as read when existing in store and scrolled past', async () => {
vi.useRealTimers();
const mockItem = {
_id: 999,
title: 'Regression Test Item',
read: false,
url: 'http://example.com/regression',
publish_date: '2023-01-01'
} as any;
store.setItems([mockItem]);
// Manually trigger the render logic that sets up the listener (implied by renderItems/init in real app)
// Here we can't easily trigger the exact closure in main.ts without fully initializing it.
// However, we can simulate the "check logic" if we extract it or replicate the test conditions
// that the previous main.test.ts used.
// Since we are mocking the scroll behavior on the DOM element which main.ts attaches to:
const mainContent = document.getElementById('main-content');
expect(mainContent).not.toBeNull();
// We need to invoke renderItems to attach the listener
renderItems();
// Mock getBoundingClientRect for container
if (mainContent) {
mainContent.getBoundingClientRect = vi.fn(() => ({
top: 0, bottom: 800, height: 800, left: 0, right: 0, width: 0, x: 0, y: 0, toJSON: () => { }
}));
}
// Mock getBoundingClientRect for item (scrolled past top: -50)
// renderItems creates the DOM elements based on store
const itemEl = document.querySelector(`.feed-item[data-id="999"]`);
expect(itemEl).not.toBeNull();
if (itemEl) {
itemEl.getBoundingClientRect = vi.fn(() => ({
top: -50, bottom: 50, height: 100, left: 0, right: 0, width: 0, x: 0, y: 0, toJSON: () => { }
}));
}
// Prepare API mock
vi.mocked(apiFetch).mockResolvedValue({ ok: true } as Response);
// Trigger scroll event
mainContent?.dispatchEvent(new Event('scroll'));
// Wait for throttle (250ms) + buffer
await new Promise(resolve => setTimeout(resolve, 300));
// Verify API call
expect(apiFetch).toHaveBeenCalledWith(expect.stringContaining('/api/item/999'), expect.objectContaining({
method: 'PUT',
body: expect.stringContaining('"read":true')
}));
});
it('should NOT mark item as read if NOT scrolled past', async () => {
vi.useRealTimers();
const mockItem = {
_id: 888,
title: 'Visible Test Item',
read: false,
url: 'http://example.com/visible',
publish_date: '2023-01-01'
} as any;
store.setItems([mockItem]);
renderItems();
const mainContent = document.getElementById('main-content');
// Container
if (mainContent) {
mainContent.getBoundingClientRect = vi.fn(() => ({
top: 0, bottom: 800, height: 800, left: 0, right: 0, width: 0, x: 0, y: 0, toJSON: () => { }
}));
}
// Item is still visible (top: 100)
const itemEl = document.querySelector(`.feed-item[data-id="888"]`);
if (itemEl) {
itemEl.getBoundingClientRect = vi.fn(() => ({
top: 100, bottom: 200, height: 100, left: 0, right: 0, width: 0, x: 0, y: 0, toJSON: () => { }
}));
}
vi.mocked(apiFetch).mockResolvedValue({ ok: true } as Response);
mainContent?.dispatchEvent(new Event('scroll'));
await new Promise(resolve => setTimeout(resolve, 300));
// API should NOT be called
expect(apiFetch).not.toHaveBeenCalledWith(expect.stringContaining('/api/item/888'), expect.anything());
});
});
|
