How do you serve svg and fixtures with Karma Runner (aka Testacular)

Question

I've been trying for the past two hours to get Karma runner to serve an svg file and an html fixture but so far no luck.

Following the second answer on this thread: Error while integrating html with testacularjs I've been trying to use served to indicate that my fixtures and svg file should be distributed by the server but I'm still getting 'NOT FOUND's

files = [
  JASMINE,
  JASMINE_ADAPTER,
  REQUIRE,
  REQUIRE_ADAPTER,

  // put all components in requirejs 'paths' config here (included: false)
  { pattern: 'preview/public/components/**/*.js', included: false },
  { pattern: 'preview/public/js/**/*.js', included: false },

  // assets
  { pattern: 'preview/public/img/svg/*.svg', included: false, served: true },

  // helpers & fixtures for jasmine-jquery
  { pattern: 'test/libs/**/*.js', included: true },
  { pattern: 'test/fixtures/**/*.html', included: false, served: true },

  // all src and test modules (included: false)
  { pattern: 'test/specs/**/*.spec.js', included: false },

  // test main require module last
  'test/test-main.js'
];

I'm setting the jasmine.getFixtures().fixturesPath to /fixtures and I can see that it's using the correct path but I still end up with...

GET http://localhost:9876/img/svg/directional-pad-gradients.svg 404 (Not Found) GET http://localhost:9876/fixtures/directional-pad.html 404 (Not Found)

If anyone has an example of loading fixtures and/or svg with Karma runner I would really love to take a look. Thank you!

Answer 1

Answering my own question here...

I was trying to load my fixtures athttp://localhost:9876/fixtures/directional-pad.html

Instead I should have tried accessing them at http://localhost:9876/base/test/fixtures/directional-pad.html

Karma stores everything under the base/ route, so any static file routes you add will need to start with that.

Answer 2

One way to do this is to set-up a proxy server.

A good example of a test system using a proxy server is https://github.com/yearofmoo-articles/AngularJS-Testing-Article

which is the example from Year of Moo's great testing tutorial. http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-testacular.html

You set the proxy up in the karma config file

proxies = {
  '/': 'http://localhost:8100/'
};

Then you need to set-up the server on 8100

this can be done using http-server

npm install http-server --save-dev

then create two files

./server.sh

nf --procfile ./config/Procfile.server start

./config/Procfile.server

web_server: ./node_modules/http-server/bin/http-server -p 8100 preview/public

Then you need to run you server

./server.sh

Then when you run the tests, the proxy will serve up your files.