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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
|
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 fully scrolled past (bottom < container top)', 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]);
// Manual setup
const mainContent = document.getElementById('main-content');
expect(mainContent).not.toBeNull();
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 (fully scrolled past: bottom < 0)
// Item top: -150, Item bottom: -50. Container Top: 0.
// -50 < 0, so should mark as read.
const itemEl = document.querySelector(`.feed-item[data-id="999"]`);
expect(itemEl).not.toBeNull();
if (itemEl) {
itemEl.getBoundingClientRect = vi.fn(() => ({
top: -150, bottom: -50, height: 100, left: 0, right: 0, width: 0, x: 0, y: 0, toJSON: () => { }
}));
}
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 only partially scrolled past (top < container top but bottom > container top)', async () => {
vi.useRealTimers();
const mockItem = {
_id: 777,
title: 'Partial Test Item',
read: false,
url: 'http://example.com/partial',
publish_date: '2023-01-01'
} as any;
store.setItems([mockItem]);
renderItems();
const mainContent = document.getElementById('main-content');
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 (partially scrolled past: top < 0, bottom > 0)
// Item top: -50, Item bottom: 50. Container Top: 0.
// 50 is NOT < 0, so should NOT mark as read.
const itemEl = document.querySelector(`.feed-item[data-id="777"]`);
if (itemEl) {
itemEl.getBoundingClientRect = vi.fn(() => ({
top: -50, bottom: 50, 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));
expect(apiFetch).not.toHaveBeenCalledWith(expect.stringContaining('/api/item/777'), expect.anything());
});
it('should NOT mark item as read if NOT scrolled past (item below container top)', 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());
});
});
|
