4

我正在开发一个使用 SVG 图形进行大部分显示和交互的网络应用程序。我想使用 Karma 创建加载 SVG 资产的单元测试，确保存在某些组/路径等。

我还没有找到任何关于如何做到这一点的直接答案，或者我自己还没有找到答案。我正在尝试通过这样的简单测试（使用 mocha & chai）：

describe("SimpleDecalRoulette", function() {
      it("decal SVG can be loaded", function() {
        var decalLoaded = false;    
        var SVG = Snap.load("/base/app/img/decal.svg", function(fragment) {
          decalLoaded = true;
        });
        expect(decalLoaded).to.be.true;
      });
    });

最初，我假设在 karma.conf.js 的“文件”指令中包含 svg 文件就足够了：

files: [
  { pattern: 'app/bower_components/lodash/dist/lodash.min.js', watched: false, included: true, served: true },
  { pattern: 'app/bower_components/jquery/dist/jquery.min.js', watched: false, included: true, served: true },
  { pattern: 'app/bower_components/snap.svg/dist/snap.svg-min.js', watched: false, included: true, served: true },
  { pattern: 'app/js/\*\*/\*.js', watched: true, included: true, served: true },
  { pattern: 'app/img/decal.svg', watched: true, included: false, served: true },
  { pattern: 'app/img/assets.svg', watched: true, included: false, served: true },
  'tests/\*\*/\*_spec.js'
],
proxies: {
  '/app/img/': '/base/app/img/'
}

但是，尝试从app/img/decal.svg或base/app/img/decal.svg同时加载 svg 文件会导致 404 错误。我也尝试过使用“代理”指令，如this SO answer中所述，但还没有让它工作（如上所示）。

这是业力可以做的事情，还是应该以不同方式处理的用例？我需要加载 SVG 并与之交互，以便为这个游​​戏编写单元测试。

4

1 回答 1

1

我正在做同样的事情，并且刚刚开始工作。

我karma.conf.js在files数组中包含 svg 文件：

{ pattern: 'src/svg/*.svg', included: false, served: true }

在测试中我可以将其加载为：

Snap.load('base/src/svg/Drawing.svg',...);

我的测试中的主要区别是我使用延迟来确保在我做任何断言之前加载 SVG 的方式。我正在使用 Jasmine 2.0，它允许在函数done内进行回调。it

it('Should load the SVG', function(done) {
   Snap.load('base/src/svg/Drawing.svg', function (fragment) {
     expect(...).toBe(...);
     done();
   });
});

您可以在此处阅读有关异步支持的更多信息：http: //jasmine.github.io/2.0/introduction.html#section-Asynchronous_Support

对于 1.3 版：http: //jasmine.github.io/1.3/introduction.html#section-Asynchronous_Support

于 2014-12-12T12:04:22.957 回答