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
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { readFileSync } from 'fs';
import { resolve } from 'path';
import { store } from './store';
import { renderLayout, renderItems } from './main';
import { apiFetch } from './api';
// Mock api
vi.mock('./api', () => ({
apiFetch: vi.fn()
}));
// Mock IntersectionObserver
class MockIntersectionObserver {
observe = vi.fn();
unobserve = vi.fn();
disconnect = vi.fn();
}
vi.stubGlobal('IntersectionObserver', MockIntersectionObserver);
// Read the main stylesheet once for CSS rule assertions
const cssContent = readFileSync(resolve(__dirname, 'style.css'), 'utf-8');
describe('Mobile horizontal overflow prevention', () => {
beforeEach(() => {
document.body.innerHTML = '<div id="app"></div>';
vi.stubGlobal('location', {
href: 'http://localhost/v3/',
pathname: '/v3/',
search: '',
assign: vi.fn(),
replace: vi.fn()
});
vi.stubGlobal('history', { pushState: vi.fn() });
Element.prototype.scrollIntoView = vi.fn();
vi.clearAllMocks();
store.setFeeds([]);
store.setTags([]);
store.setItems([]);
vi.mocked(apiFetch).mockResolvedValue({
ok: true,
status: 200,
json: async () => []
} as Response);
});
describe('CSS containment rules', () => {
it('.item-description should have overflow-x hidden to contain wide RSS content', () => {
const itemDescBlock = cssContent.match(
/\.item-description\s*\{[^}]*\}/g
);
expect(itemDescBlock).not.toBeNull();
const mainBlock = itemDescBlock!.find(
(block: string) => !block.includes('img') && !block.includes('video') && !block.includes('pre') && !block.includes(' a')
);
expect(mainBlock).toBeDefined();
expect(mainBlock).toMatch(/overflow-x:\s*hidden/);
});
it('.item-description should constrain tables with max-width', () => {
const tableRule = cssContent.match(
/\.item-description\s+table[^{]*\{[^}]*max-width:\s*100%/
);
expect(tableRule).not.toBeNull();
});
it('.item-description should constrain iframes with max-width', () => {
const iframeRule = cssContent.match(
/\.item-description\s+iframe[^{]*\{[^}]*max-width:\s*100%/
);
expect(iframeRule).not.toBeNull();
});
it('.main-content should explicitly set overflow-x hidden', () => {
const mainContentBlock = cssContent.match(
/\.main-content\s*\{[^}]*\}/
);
expect(mainContentBlock).not.toBeNull();
expect(mainContentBlock![0]).toMatch(/overflow-x:\s*hidden/);
});
it('.feed-item should have overflow hidden to contain all child content', () => {
// .feed-item must create a block formatting context so that
// no child (title, description, images) can push the viewport wider.
// This is critical on mobile where overflow-x:hidden on scrollable
// ancestors (.main-content with overflow-y:auto) is unreliable.
const feedItemBlock = cssContent.match(
/\.feed-item\s*\{[^}]*\}/
);
expect(feedItemBlock).not.toBeNull();
expect(feedItemBlock![0]).toMatch(/overflow:\s*hidden/);
});
it('.item-title should have min-width 0 to allow flex shrinking', () => {
// In a flex container, default min-width:auto prevents items from
// shrinking below their content width. Long titles push the layout
// wider than the viewport. min-width:0 fixes this.
const itemTitleBlock = cssContent.match(
/\.item-title\s*\{[^}]*\}/
);
expect(itemTitleBlock).not.toBeNull();
expect(itemTitleBlock![0]).toMatch(/min-width:\s*0/);
});
it('.item-title should wrap long words', () => {
// Titles can contain long unbroken strings (URLs, technical terms).
// overflow-wrap ensures they wrap instead of overflowing.
const itemTitleBlock = cssContent.match(
/\.item-title\s*\{[^}]*\}/
);
expect(itemTitleBlock).not.toBeNull();
expect(itemTitleBlock![0]).toMatch(/overflow-wrap:\s*(break-word|anywhere)/);
});
});
describe('Rendered content containment after loadMore re-render', () => {
it('should contain items with long unbroken titles after re-render', () => {
renderLayout();
const longTitle = 'A'.repeat(500); // simulate long unbroken title
const items = [
{ _id: 1, title: 'Normal', url: 'http://example.com', publish_date: '2024-01-01', read: true, starred: false, description: '<p>first batch</p>' },
{ _id: 2, title: longTitle, url: 'http://example.com', publish_date: '2024-01-01', read: false, starred: false, description: '<p>long title item</p>' },
] as any;
// Initial render
store.setItems([items[0]]);
renderItems();
// Simulate loadMore re-render with appended items
store.setItems(items);
renderItems();
const feedItems = document.querySelectorAll('.feed-item');
expect(feedItems.length).toBe(2);
// The long title item should be contained within the layout
const longTitleEl = feedItems[1].querySelector('.item-title');
expect(longTitleEl).not.toBeNull();
expect(longTitleEl!.textContent!.trim().length).toBe(500);
});
it('should contain items with wide description content after re-render', () => {
renderLayout();
const items = [
{ _id: 1, title: 'Item 1', url: 'http://example.com', publish_date: '2024-01-01', read: true, starred: false, description: '<p>ok</p>' },
{ _id: 2, title: 'Item 2', url: 'http://example.com', publish_date: '2024-01-01', read: false, starred: false, description: '<table width="2000"><tr><td>wide</td></tr></table>' },
{ _id: 3, title: 'Item 3', url: 'http://example.com', publish_date: '2024-01-01', read: false, starred: false, description: '<iframe width="1200" src="https://example.com"></iframe>' },
] as any;
// Initial render
store.setItems([items[0]]);
renderItems();
// Simulate loadMore re-render
store.setItems(items);
renderItems();
const feedItems = document.querySelectorAll('.feed-item');
expect(feedItems.length).toBe(3);
});
});
});
|
