Question

我在测试中复制SVG功能时遇到了麻烦。 Jasmine与Sinatra网络应用程序中的jasmine-jquery成功连接。测试用于与SVG对象关联的JavaScript函数。如：

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

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

Jasmine夹具看起来像这样（我已经删除了一些细节）：

<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>

我在测试中添加了以下几行：

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

console.log产生：

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

但我应该看到的更像是：

#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>

我read表示'image / svg + xml'类型的svg对象需要'xmlns'资源。所以我最好的猜测是xmlns资源没有加载。那么也许我需要弄清楚如何加载远程资源或在本地下载它？我对其他想法持开放态度。

Answer 1

让我们说，你的svg宽度和高度为500px然后可以是：

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;
    }

});

在Jasmine中测试SVG对象时遇到问题

1 个答案: