-
Notifications
You must be signed in to change notification settings - Fork 7.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: page spinner is styled incorrectly when scrolling (#4163)
* feat: add contributor information to documents * fix: page spinner is styled incorrectly when scrolling
- Loading branch information
Showing
21 changed files
with
548 additions
and
257 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,140 +1,127 @@ | ||
| import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'; | ||
|
|
||
| import { getElementVisibleHeight } from './dom'; // 假设函数位于 utils.ts 中 | ||
|
|
||
| describe('getElementVisibleHeight', () => { | ||
| // Mocking the getBoundingClientRect method | ||
| const mockGetBoundingClientRect = vi.fn(); | ||
| const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect; | ||
|
|
||
| beforeAll(() => { | ||
| // Mock getBoundingClientRect method | ||
| Element.prototype.getBoundingClientRect = mockGetBoundingClientRect; | ||
| }); | ||
|
|
||
| afterAll(() => { | ||
| // Restore original getBoundingClientRect method | ||
| Element.prototype.getBoundingClientRect = originalGetBoundingClientRect; | ||
| import { beforeEach, describe, expect, it, vi } from 'vitest'; | ||
|
|
||
| import { getElementVisibleRect } from './dom'; // 假设函数位于 utils.ts 中 | ||
|
|
||
| describe('getElementVisibleRect', () => { | ||
| // 设置浏览器视口尺寸的 mock | ||
| beforeEach(() => { | ||
| vi.spyOn(document.documentElement, 'clientHeight', 'get').mockReturnValue( | ||
| 800, | ||
| ); | ||
| vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(800); | ||
| vi.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue( | ||
| 1000, | ||
| ); | ||
| vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1000); | ||
| }); | ||
|
|
||
| it('should return 0 if the element is null or undefined', () => { | ||
| expect(getElementVisibleHeight(null)).toBe(0); | ||
| expect(getElementVisibleHeight()).toBe(0); | ||
| }); | ||
|
|
||
| it('should return the visible height of the element', () => { | ||
| // Mock the getBoundingClientRect return value | ||
| mockGetBoundingClientRect.mockReturnValue({ | ||
| bottom: 500, | ||
| height: 400, | ||
| it('should return default rect if element is undefined', () => { | ||
| expect(getElementVisibleRect()).toEqual({ | ||
| bottom: 0, | ||
| height: 0, | ||
| left: 0, | ||
| right: 0, | ||
| toJSON: () => ({}), | ||
| top: 100, | ||
| top: 0, | ||
| width: 0, | ||
| x: 0, | ||
| y: 0, | ||
| }); | ||
|
|
||
| const mockElement = document.createElement('div'); | ||
| document.body.append(mockElement); | ||
|
|
||
| // Mocking window.innerHeight and document.documentElement.clientHeight | ||
| const originalInnerHeight = window.innerHeight; | ||
| const originalClientHeight = document.documentElement.clientHeight; | ||
|
|
||
| Object.defineProperty(window, 'innerHeight', { | ||
| value: 600, | ||
| writable: true, | ||
| }); | ||
|
|
||
| Object.defineProperty(document.documentElement, 'clientHeight', { | ||
| value: 600, | ||
| writable: true, | ||
| }); | ||
|
|
||
| expect(getElementVisibleHeight(mockElement)).toBe(400); | ||
|
|
||
| // Restore original values | ||
| Object.defineProperty(window, 'innerHeight', { | ||
| value: originalInnerHeight, | ||
| writable: true, | ||
| }); | ||
|
|
||
| Object.defineProperty(document.documentElement, 'clientHeight', { | ||
| value: originalClientHeight, | ||
| writable: true, | ||
| }); | ||
|
|
||
| mockElement.remove(); | ||
| }); | ||
|
|
||
| it('should return the visible height when element is partially out of viewport', () => { | ||
| // Mock the getBoundingClientRect return value | ||
| mockGetBoundingClientRect.mockReturnValue({ | ||
| bottom: 300, | ||
| height: 400, | ||
| it('should return default rect if element is null', () => { | ||
| expect(getElementVisibleRect(null)).toEqual({ | ||
| bottom: 0, | ||
| height: 0, | ||
| left: 0, | ||
| right: 0, | ||
| toJSON: () => ({}), | ||
| top: -100, | ||
| top: 0, | ||
| width: 0, | ||
| x: 0, | ||
| y: 0, | ||
| }); | ||
|
|
||
| const mockElement = document.createElement('div'); | ||
| document.body.append(mockElement); | ||
|
|
||
| // Mocking window.innerHeight and document.documentElement.clientHeight | ||
| const originalInnerHeight = window.innerHeight; | ||
| const originalClientHeight = document.documentElement.clientHeight; | ||
|
|
||
| Object.defineProperty(window, 'innerHeight', { | ||
| value: 600, | ||
| writable: true, | ||
| }); | ||
| }); | ||
|
|
||
| Object.defineProperty(document.documentElement, 'clientHeight', { | ||
| value: 600, | ||
| writable: true, | ||
| it('should return correct visible rect when element is fully visible', () => { | ||
| const element = { | ||
| getBoundingClientRect: () => ({ | ||
| bottom: 400, | ||
| height: 300, | ||
| left: 200, | ||
| right: 600, | ||
| top: 100, | ||
| width: 400, | ||
| }), | ||
| } as HTMLElement; | ||
|
|
||
| expect(getElementVisibleRect(element)).toEqual({ | ||
| bottom: 400, | ||
| height: 300, | ||
| left: 200, | ||
| right: 600, | ||
| top: 100, | ||
| width: 400, | ||
| }); | ||
| }); | ||
|
|
||
| expect(getElementVisibleHeight(mockElement)).toBe(300); | ||
|
|
||
| // Restore original values | ||
| Object.defineProperty(window, 'innerHeight', { | ||
| value: originalInnerHeight, | ||
| writable: true, | ||
| it('should return correct visible rect when element is partially off-screen at the top', () => { | ||
| const element = { | ||
| getBoundingClientRect: () => ({ | ||
| bottom: 200, | ||
| height: 250, | ||
| left: 100, | ||
| right: 500, | ||
| top: -50, | ||
| width: 400, | ||
| }), | ||
| } as HTMLElement; | ||
|
|
||
| expect(getElementVisibleRect(element)).toEqual({ | ||
| bottom: 200, | ||
| height: 200, | ||
| left: 100, | ||
| right: 500, | ||
| top: 0, | ||
| width: 400, | ||
| }); | ||
| }); | ||
|
|
||
| Object.defineProperty(document.documentElement, 'clientHeight', { | ||
| value: originalClientHeight, | ||
| writable: true, | ||
| it('should return correct visible rect when element is partially off-screen at the right', () => { | ||
| const element = { | ||
| getBoundingClientRect: () => ({ | ||
| bottom: 400, | ||
| height: 300, | ||
| left: 800, | ||
| right: 1200, | ||
| top: 100, | ||
| width: 400, | ||
| }), | ||
| } as HTMLElement; | ||
|
|
||
| expect(getElementVisibleRect(element)).toEqual({ | ||
| bottom: 400, | ||
| height: 300, | ||
| left: 800, | ||
| right: 1000, | ||
| top: 100, | ||
| width: 200, | ||
| }); | ||
|
|
||
| mockElement.remove(); | ||
| }); | ||
|
|
||
| it('should return 0 if the element is completely out of viewport', () => { | ||
| // Mock the getBoundingClientRect return value | ||
| mockGetBoundingClientRect.mockReturnValue({ | ||
| bottom: -100, | ||
| height: 400, | ||
| left: 0, | ||
| right: 0, | ||
| toJSON: () => ({}), | ||
| top: -500, | ||
| it('should return all zeros when element is completely off-screen', () => { | ||
| const element = { | ||
| getBoundingClientRect: () => ({ | ||
| bottom: 1200, | ||
| height: 300, | ||
| left: 1100, | ||
| right: 1400, | ||
| top: 900, | ||
| width: 300, | ||
| }), | ||
| } as HTMLElement; | ||
|
|
||
| expect(getElementVisibleRect(element)).toEqual({ | ||
| bottom: 800, | ||
| height: 0, | ||
| left: 1100, | ||
| right: 1000, | ||
| top: 900, | ||
| width: 0, | ||
| x: 0, | ||
| y: 0, | ||
| }); | ||
|
|
||
| const mockElement = document.createElement('div'); | ||
| document.body.append(mockElement); | ||
|
|
||
| expect(getElementVisibleHeight(mockElement)).toBe(0); | ||
|
|
||
| mockElement.remove(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.