How to write unit tests in karma that interact with SVG graphics using Snap.svg?

I am working on a web application that uses SVG graphics for most of the display and interaction. I would like to use Karma to create unit tests that load an SVG resource, provide for the presence of certain groups / paths, etc.

I did not find direct answers to the question of how to do this, or did not understand it yet. I am trying to run a simple test like this (using mocha and 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;
      });
    });

At first, I suggested that including the svg file in the "files" directive of the karma.conf.js file would be enough:

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/'
}

SVG app/img/decal.svg base/app/img/decal.svg 404 . "", SO-, , ( ).

-, , -? SVG , .

+4
1

.

My karma.conf.js svg files:

{ 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();
   });
});

Async : http://jasmine.imtqy.com/2.0/introduction.html#section-Asynchronous_Support

1.3: http://jasmine.imtqy.com/1.3/introduction.html#section-Asynchronous_Support

+1

Source: https://habr.com/ru/post/1534961/


All Articles