Skip to content

Commit eb1d896

Browse files
haozang54-sourcehaozang54-source
committed
test:为【ImageViewer】测试覆盖提升与组件功能自查
1 parent ac1d4ed commit eb1d896

15 files changed

+2080
-6
lines changed

‎site/test-coverage.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ module.exports = {
2626
guide: { statements: '3.46%', branches: '0%', functions: '0%', lines: '3.77%' },
2727
hooks: { statements: '69.04%', branches: '34.32%', functions: '71.87%', lines: '70%' },
2828
image: { statements: '97.72%', branches: '100%', functions: '92.3%', lines: '97.61%' },
29-
imageViewer: { statements: '8.47%', branches: '2.87%', functions: '0%', lines: '8.84%' },
29+
imageViewer: { statements: '96.61%', branches: '84.89%', functions: '95.65%', lines: '99.11%' },
3030
indexes: { statements: '95.65%', branches: '69.81%', functions: '100%', lines: '96.94%' },
3131
input: { statements: '3.57%', branches: '0%', functions: '0%', lines: '3.7%' },
3232
layout: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
@@ -55,7 +55,7 @@ module.exports = {
5555
steps: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
5656
sticky: { statements: '7.14%', branches: '0%', functions: '0%', lines: '7.27%' },
5757
swipeCell: { statements: '4.42%', branches: '0%', functions: '0%', lines: '4.67%' },
58-
swiper: { statements: '3.77%', branches: '0.9%', functions: '1.4%', lines: '3.89%' },
58+
swiper: { statements: '62.79%', branches: '41.17%', functions: '67.6%', lines: '64.61%' },
5959
switch: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
6060
tabBar: { statements: '10%', branches: '0%', functions: '0%', lines: '10.81%' },
6161
table: { statements: '100%', branches: '90%', functions: '100%', lines: '100%' },

‎src/image-viewer/__tests__/index.alignment.test.tsx‎

Lines changed: 357 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,357 @@
1+
import React from 'react';
2+
import { describe, it, expect, render, fireEvent, act, beforeEach, afterEach } from '@test/utils';
3+
import { vi } from 'vitest';
4+
import { ImageViewer } from '../index';
5+
6+
describe('ImageViewer alignment coverage', () => {
7+
beforeEach(() => {
8+
vi.useFakeTimers();
9+
10+
// Mock image dimensions to trigger alignment calculations
11+
Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
12+
configurable: true,
13+
value: 300,
14+
});
15+
Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
16+
configurable: true,
17+
value: 400,
18+
});
19+
Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
20+
configurable: true,
21+
value: 300,
22+
});
23+
Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
24+
configurable: true,
25+
value: 400,
26+
});
27+
});
28+
29+
afterEach(() => {
30+
vi.useRealTimers();
31+
});
32+
33+
describe('getMaxDraggedY alignment branches (lines 155-172)', () => {
34+
it(':start alignment calculation', () => {
35+
const alignedImages = [
36+
{ url: 'https://example.com/1.jpg', align: 'start' as const },
37+
];
38+
39+
const { container } = render(
40+
<ImageViewer images={alignedImages} visible />,
41+
);
42+
43+
const img = container.querySelector('.t-image-viewer__img') as HTMLElement;
44+
45+
// Zoom to trigger getMaxDraggedY calculation with start alignment
46+
act(() => {
47+
fireEvent.doubleClick(img);
48+
});
49+
50+
act(() => {
51+
vi.advanceTimersByTime(20);
52+
});
53+
54+
// Drag to trigger alignment calculation
55+
act(() => {
56+
fireEvent.touchStart(img, {
57+
touches: [{ clientX: 150, clientY: 200 }],
58+
});
59+
});
60+
61+
act(() => {
62+
fireEvent.touchMove(img, {
63+
touches: [{ clientX: 150, clientY: 250 }],
64+
});
65+
});
66+
67+
act(() => {
68+
fireEvent.touchEnd(img);
69+
});
70+
71+
act(() => {
72+
vi.advanceTimersByTime(20);
73+
});
74+
75+
expect(img).not.toBeNull();
76+
});
77+
78+
it(':center alignment calculation (default)', () => {
79+
const alignedImages = [
80+
{ url: 'https://example.com/1.jpg', align: 'center' as const },
81+
];
82+
83+
const { container } = render(
84+
<ImageViewer images={alignedImages} visible />,
85+
);
86+
87+
const img = container.querySelector('.t-image-viewer__img') as HTMLElement;
88+
89+
// Zoom to trigger getMaxDraggedY calculation with center alignment
90+
act(() => {
91+
fireEvent.doubleClick(img);
92+
});
93+
94+
act(() => {
95+
vi.advanceTimersByTime(20);
96+
});
97+
98+
// Drag to trigger alignment calculation
99+
act(() => {
100+
fireEvent.touchStart(img, {
101+
touches: [{ clientX: 150, clientY: 200 }],
102+
});
103+
});
104+
105+
act(() => {
106+
fireEvent.touchMove(img, {
107+
touches: [{ clientX: 150, clientY: 250 }],
108+
});
109+
});
110+
111+
act(() => {
112+
fireEvent.touchEnd(img);
113+
});
114+
115+
act(() => {
116+
vi.advanceTimersByTime(20);
117+
});
118+
119+
expect(img).not.toBeNull();
120+
});
121+
122+
it(':end alignment calculation', () => {
123+
const alignedImages = [
124+
{ url: 'https://example.com/1.jpg', align: 'end' as const },
125+
];
126+
127+
const { container } = render(
128+
<ImageViewer images={alignedImages} visible />,
129+
);
130+
131+
const img = container.querySelector('.t-image-viewer__img') as HTMLElement;
132+
133+
// Zoom to trigger getMaxDraggedY calculation with end alignment
134+
act(() => {
135+
fireEvent.doubleClick(img);
136+
});
137+
138+
act(() => {
139+
vi.advanceTimersByTime(20);
140+
});
141+
142+
// Drag to trigger alignment calculation
143+
act(() => {
144+
fireEvent.touchStart(img, {
145+
touches: [{ clientX: 150, clientY: 200 }],
146+
});
147+
});
148+
149+
act(() => {
150+
fireEvent.touchMove(img, {
151+
touches: [{ clientX: 150, clientY: 250 }],
152+
});
153+
});
154+
155+
act(() => {
156+
fireEvent.touchEnd(img);
157+
});
158+
159+
act(() => {
160+
vi.advanceTimersByTime(20);
161+
});
162+
163+
expect(img).not.toBeNull();
164+
});
165+
166+
it(':string image without align defaults to center', () => {
167+
const images = ['https://example.com/1.jpg'];
168+
169+
const { container } = render(
170+
<ImageViewer images={images} visible />,
171+
);
172+
173+
const img = container.querySelector('.t-image-viewer__img') as HTMLElement;
174+
175+
// Zoom to trigger getMaxDraggedY calculation with default center alignment
176+
act(() => {
177+
fireEvent.doubleClick(img);
178+
});
179+
180+
act(() => {
181+
vi.advanceTimersByTime(20);
182+
});
183+
184+
// Drag to trigger alignment calculation
185+
act(() => {
186+
fireEvent.touchStart(img, {
187+
touches: [{ clientX: 150, clientY: 200 }],
188+
});
189+
});
190+
191+
act(() => {
192+
fireEvent.touchMove(img, {
193+
touches: [{ clientX: 150, clientY: 250 }],
194+
});
195+
});
196+
197+
act(() => {
198+
fireEvent.touchEnd(img);
199+
});
200+
201+
act(() => {
202+
vi.advanceTimersByTime(20);
203+
});
204+
205+
expect(img).not.toBeNull();
206+
});
207+
208+
it(':image object without align defaults to center', () => {
209+
const alignedImages = [
210+
{ url: 'https://example.com/1.jpg' }, // No align property
211+
];
212+
213+
const { container } = render(
214+
<ImageViewer images={alignedImages} visible />,
215+
);
216+
217+
const img = container.querySelector('.t-image-viewer__img') as HTMLElement;
218+
219+
// Zoom to trigger getMaxDraggedY calculation with default center alignment
220+
act(() => {
221+
fireEvent.doubleClick(img);
222+
});
223+
224+
act(() => {
225+
vi.advanceTimersByTime(20);
226+
});
227+
228+
// Drag to trigger alignment calculation
229+
act(() => {
230+
fireEvent.touchStart(img, {
231+
touches: [{ clientX: 150, clientY: 200 }],
232+
});
233+
});
234+
235+
act(() => {
236+
fireEvent.touchMove(img, {
237+
touches: [{ clientX: 150, clientY: 250 }],
238+
});
239+
});
240+
241+
act(() => {
242+
fireEvent.touchEnd(img);
243+
});
244+
245+
act(() => {
246+
vi.advanceTimersByTime(20);
247+
});
248+
249+
expect(img).not.toBeNull();
250+
});
251+
});
252+
253+
describe('additional branch coverage', () => {
254+
it(':early return when currentImageScaledHeight <= rootOffsetHeight', () => {
255+
// Mock small image dimensions to trigger early return
256+
Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
257+
configurable: true,
258+
value: 100, // Smaller than container
259+
});
260+
261+
const { container } = render(
262+
<ImageViewer images={['https://example.com/small.jpg']} visible />,
263+
);
264+
265+
const img = container.querySelector('.t-image-viewer__img') as HTMLElement;
266+
267+
// Try to zoom and drag - should hit early return in getMaxDraggedY
268+
act(() => {
269+
fireEvent.doubleClick(img);
270+
});
271+
272+
act(() => {
273+
vi.advanceTimersByTime(20);
274+
});
275+
276+
act(() => {
277+
fireEvent.touchStart(img, {
278+
touches: [{ clientX: 150, clientY: 200 }],
279+
});
280+
});
281+
282+
act(() => {
283+
fireEvent.touchMove(img, {
284+
touches: [{ clientX: 150, clientY: 250 }],
285+
});
286+
});
287+
288+
act(() => {
289+
fireEvent.touchEnd(img);
290+
});
291+
292+
act(() => {
293+
vi.advanceTimersByTime(20);
294+
});
295+
296+
expect(img).not.toBeNull();
297+
298+
// Restore
299+
Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
300+
configurable: true,
301+
value: 400,
302+
});
303+
});
304+
305+
it(':diffHeight calculation and centerDraggedY', () => {
306+
// Mock larger image to ensure diffHeight > 0
307+
Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
308+
configurable: true,
309+
value: 800, // Larger than container
310+
});
311+
312+
const { container } = render(
313+
<ImageViewer images={['https://example.com/large.jpg']} visible />,
314+
);
315+
316+
const img = container.querySelector('.t-image-viewer__img') as HTMLElement;
317+
318+
// Zoom to trigger diffHeight and centerDraggedY calculation
319+
act(() => {
320+
fireEvent.doubleClick(img);
321+
});
322+
323+
act(() => {
324+
vi.advanceTimersByTime(20);
325+
});
326+
327+
// Drag to trigger alignment calculation with diffHeight
328+
act(() => {
329+
fireEvent.touchStart(img, {
330+
touches: [{ clientX: 150, clientY: 200 }],
331+
});
332+
});
333+
334+
act(() => {
335+
fireEvent.touchMove(img, {
336+
touches: [{ clientX: 150, clientY: 100 }],
337+
});
338+
});
339+
340+
act(() => {
341+
fireEvent.touchEnd(img);
342+
});
343+
344+
act(() => {
345+
vi.advanceTimersByTime(20);
346+
});
347+
348+
expect(img).not.toBeNull();
349+
350+
// Restore
351+
Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
352+
configurable: true,
353+
value: 400,
354+
});
355+
});
356+
});
357+
});

0 commit comments

Comments
 (0)