3

I'm having trouble replicating SVG funcationality within my tests. Jasmine is successfully wired up alongside jasmine-jquery within a Sinatra web-app. The tests are for JavaScript functions associated with an SVG object. Such as:

function findMapImage() {
  return $("#svg")[0].contentDocument;
}

function findRegions(map) {
  return map.querySelectorAll('path');
}

And the Jasmine fixture looks something like this (I've stripped some details out):

<object id="svg" type="image/svg+xml">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 484.33 547" height="500">
    <path/>
    <path/>
  </svg>
</object>

I've added the following lines to my test:

var map = findMapImage();
console.log(map)

And the console.log yields:

#document
  <html>
    #shadow-root (open)
      <shadow>
        <head>
        <body>
      </shadow>
    <head></head>
    <body></body>
  <html>

But what I SHOULD be seeing is something more like:

#document
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 484.33 547" height="500">
    <defs>...</defs>
    <title>...</title>
    <path></path>
    etc.
  </svg>

I've read that 'xmlns' resources are required for svg objects of the type 'image/svg+xml.' So my best guess is that the xmlns resource isn't loading. So maybe I need to figure out how to load the remote resource or download it locally? I'm open to other thoughts.

Community
  • 1
  • 1
Zollie
  • 381
  • 3
  • 16
  • Would it suit your usecase to avoid the `` element and instead use the `` directly in your HTML? – RJHunter Nov 25 '16 at 03:22
  • Can't see why not. Just tried it out and moved the id "svg" within the tags. It yields undefined. – Zollie Nov 25 '16 at 03:25
  • With the plain inline `` tag, you can drop the `.contentDocument` from `findMapImage` and just use the element directly. – RJHunter Nov 25 '16 at 03:30
  • You're dead on. I suppose this does warp my use case a bit. Outside of my tests and this fixture, my svg is not loaded inline. I only made it inline because I wasn't sure how to give jasmine a path to my resource. – Zollie Nov 25 '16 at 03:52
  • That said, I suppose I could just avoid testing findMapImage and focus on the others now that I have access to the svg – Zollie Nov 25 '16 at 03:55

1 Answers1

0

Let's say, your svg has width and height 500px then it can be:

describe('the svg' ,function() {

   it('should be created', function() {
      expect(findMapImage()).not.toBeNull();
    });

    it('should have the correct height', function() {
     expect(findMapImage().attr('height')).toBe('500');
     });

   // you can use this if you have width, just in case
    it('should have the correct width', function() {
      expect(findMapImage().attr('width')).toBe('500');
     }); 

    function findMapImage() {
      return $("#svg")[0].contentDocument;
    }

});
Ruhul Amin
  • 1,751
  • 15
  • 18
  • Hey thanks for answering but this isn't quite what I was asking. I know how to write an 'it block.' But I'm not actually getting an SVG to work with. I've added an edit to emphasize the problem. – Zollie Nov 25 '16 at 00:38
  • if you `console.log($("#svg"))`, what do you get? – Ruhul Amin Nov 25 '16 at 06:53
  • It returns [function] and $("#svg")[0] returns function anonymous(). My concern is that we're changing my the function rather than testing it. – Zollie Nov 25 '16 at 21:08