Skip to content
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

SVGGElement is not defined #2734

Open
khalyomede opened this issue Dec 3, 2019 · 3 comments · May be fixed by #2926
Open

SVGGElement is not defined #2734

khalyomede opened this issue Dec 3, 2019 · 3 comments · May be fixed by #2926
Labels
svg

Comments

@khalyomede
Copy link

khalyomede commented Dec 3, 2019 •
edited

I guess SVGGElement (MDN documentation) is not supported in jsdom ?

Basic info:

  • Node.js version: 10.150.
  • jsdom version: 11.5.1

Minimal reproduction case

const { JSDOM } = require("jsdom");

const options = {
  ... your options here ...
};
const dom = new JSDOM(`
  <svg>
    <g id="g"> 
  </svg>
`, options);

const g = dom.window.document.querySelector("#g");

if (g instanceof SVGGElement) { // throws "SVGGElement is not defined"
  console.log("ok");
}

How does similar code behave in browsers?

https://jsfiddle.net/p3ag4v85/

(check in the console and look for ok)

Notes

I have to say that I noticed the bug when I tested my code using Jest, that is using jsdom internally. Here is the error I got:

● should throw an Error if g element is not found

    expect(received).toThrowError(expected)

    Expected message: "group element not found"
    Received message: "SVGGElement is not defined"

          46 |         if (!(svgElement instanceof SVGSVGElement))
          47 |             throw new Error("svg element not found");
        > 48 |         if (!(groupElement instanceof SVGGElement))
             |                                       ^
          49 |             throw new Error("g element not found");
          50 |         this.groupElement = groupElement;
          51 |         this.groupBBoxWidth = 0;

          at new Lib (lib/js/index.js:48:39)
          at test/MyLib/constructor.test.js:86:15
          at Object.<anonymous> (node_modules/expect/build/toThrowMatchers.js:81:11)
          at Object.toThrowError (node_modules/expect/build/index.js:342:33)
          at Object.<anonymous> (test/MyLib/constructor.test.js:87:7)

      85 |     expect(
      86 |         () => new Lib({ svgIdentifier: "svg", groupIdentifier: "g" })
    > 87 |     ).toThrowError(new TypeError("group element not found"));
         |       ^
      88 | });
      89 | 

      at Object.<anonymous> (test/MyLib/constructor.test.js:87:7)
@domenic
Copy link
Member

domenic commented Dec 3, 2019

SVGElement is supported. However your code is looking up SVGElement in the Node.js global. You need to use dom.window.SVGElement.

@domenic domenic closed this as completed Dec 3, 2019
@aminnairi
Copy link

Yep. This is indeed a bug. The specification does not seem to be correctly implemented for SVG groups.

<!DOCTYPE html>
<html>
    <body>
        <svg id="svg">
            <g id="group"></g>
        </svg>
        <script>
            "use strict";

            window.addEventListener("load", function() {
                const svg = document.getElementById("svg");
                const group = document.getElementById("group");
                
                console.dir(svg.constructor);   // ƒ SVGSVGElement()
                console.dir(group.constructor); // ƒ SVGGElement()
            });
        </script>
    </body>
</html>
"use strict";

const { JSDOM } = require("jsdom");

const dom = new JSDOM(`
    <svg id="svg">
        <g id="group"></g>
    </svg>
`);

const svg = dom.window.document.getElementById("svg");
const group = dom.window.document.getElementById("group");

console.log(svg.constructor);   // [Function: SVGSVGElement]
console.log(group.constructor); // [Function: SVGElement]

GitHub reproduction repository.

@TimothyGu TimothyGu added the svg label Dec 28, 2019
@TimothyGu
Copy link
Member

Indeed, looks like this is just because we don't support the SVG g element. Our SVG support isn't too great at the moment.

@TimothyGu TimothyGu reopened this Dec 28, 2019
TimothyGu added a commit to TimothyGu/jsdom that referenced this issue Mar 28, 2020
@TimothyGu
Implement some more SVG elements
63ea803 
Namely, <defs>, <desc>, <g>, <metadata>, and <switch>.

Fixes jsdom#2734.
@TimothyGu TimothyGu linked a pull request Mar 28, 2020 that will close this issue
Open
11 tasks
@brendankenny brendankenny mentioned this issue Mar 29, 2021
Merged
TimothyGu added a commit to TimothyGu/jsdom that referenced this issue Jul 18, 2021
@TimothyGu
Implement some more SVG elements
d5e380f 
Namely, <defs>, <desc>, <g>, <metadata>, and <switch>.

Fixes jsdom#2734.
@elchininet elchininet mentioned this issue Dec 22, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
svg
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

SVG improvements TimothyGu/jsdom
4 participants
@domenic @TimothyGu @khalyomede @aminnairi