10000 Implement getClientRects() and getBoundingClientRect() · Issue #3729 · jsdom/jsdom · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Implement getClientRects() and getBoundingClientRect() #3729

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
danieldongit opened this issue Jun 5, 2024 · 1 comment
Open

Implement getClientRects() and getBoundingClientRect() #3729

danieldongit opened this issue Jun 5, 2024 · 1 comment

Comments

@danieldongit
Copy link
danieldongit commented Jun 5, 2024 •
edited
Loading

Basic info:

  • Node.js version: v18.20.2
  • jsdom version: v24.1.0

Minimal reproduction case

When using Codemirror 6 I get the following error when mocking any user event:
TypeError: textRange(...).getClientRects is not a function

I managed to fix it by adding the following code to my test file:

document.createRange = () => {
    const range = new Range();
    range.getClientRects = () => ({
        item: () => null,
        length: 0,
        [Symbol.iterator]: function *() {
            yield* [];
        },
    });
    return range;
};

I later on found a better fix which covers more functions:

function getBoundingClientRect(): DOMRect {
    const rec = {
        x: 0,
        y: 0,
        bottom: 0,
        height: 0,
        left: 0,
        right: 0,
        top: 0,
        width: 0,
    };
    return {...rec, toJSON: () => rec};
}

class FakeDOMRectList extends Array<DOMRect> implements DOMRectList {
    item(index: number): DOMRect | null {
        return this[index];
    }
}

document.elementFromPoint = (): null => null;
HTMLElement.prototype.getBoundingClientRect = getBoundingClientRect;
HTMLElement.prototype.getClientRects = (): DOMRectList => new FakeDOMRectList();
Range.prototype.getBoundingClientRect = getBoundingClientRect;
Range.prototype.getClientRects = (): DOMRectList => new FakeDOMRectList();

How does similar code behave in browsers?

This doesnt cause issues in the browser as this is JS native code.

Would be great if this implmenetation (or something simiar) can be added so that there will be no need to add hacky solutions directly to test files.

Thanks!
Merged
@aspiers
Copy link
aspiers commented Dec 16, 2024

I am also experiencing this issue. Thanks a lot @danieldongit for sharing your solution!

@domenic domenic changed the title getClientRect is not a function Implement getClientRects() and getBoundingClientRect() Mar 8, 2025
@domenic domenic removed the feature label Mar 8, 2025
@domenic domenic marked this as a duplicate of #3621 Mar 8, 2025
@johnsimons johnsimons mentioned this issue Mar 17, 2025
Merged
@iammatthew2 iammatthew2 mentioned this issue Mar 19, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

add support for getClientRects in Range iammatthew2/jsdom
3 participants
@aspiers @domenic @danieldongit
0