Error while integrating html with testacularjs

Question

How do I integrate (html) fixtures with testacular? Is there any recommendation for performing DOM based tests or is it an anti-pattern?

Objective : I am trying to test a custom module which parses the DOM tree and creates a new data structure. The DOM tree can be dynamic (like contents of a html/markdown editor) and hence is not a good candidate for end to end testing

Problem : I am trying to use jasmine-jquery for this DOM testing and in my testacular.conf.js, I have the section to allow loading of html files into the browser.

// list of files / patterns to load in the browser
files = [
  JASMINE,
  JASMINE_ADAPTER,
  'test/spec/**/*.js',
  'test/fixtures/*.html' **/* Needs to be included here to be served */**
];

However in my test runner on the command line, I get the following error message when I drop the html fixture(even before I write any jasmine-jquery code to load the fixture):

Chrome 22.0 **ERROR**
    Uncaught SyntaxError: Unexpected token < at /Users/myUser/myProject/test/fixtures/fixture_template.html:1 Chrome 22.0: Executed 0 of 0 ERROR (0.143 secs / 0 secs)

EDIT : Another way to ask the same question : How do I get testacular to serve html and not blow up the test runner?

As I mentioned above, I need to include the 'test/fixtures/*.html" in the config but the test runner just blows up.

Answer 1

Current version of testacularjs cannot support this. However, the author of testacularjs(Vojta Jina), suggested I use a proxy solution to workaround this by serving the html through a different web server. For those curious, here are the end to end steps to get this working.

• First run the webserver by running a command like the following

  python -m SimpleHTTPServer 3502 &

• Drop your fixture file(s) in appropriate location. Mine was test/fixtures/first.html

  Now you should be able to visit [http://localhost:3502/test/fixtures/first.html] and see the markup when you inspect page source

• Edit testacular.conf.js to add the config block

  
  proxies = {
  '/fixtures' : 'http://localhost:3502/'
  };
  

• Edit your jasmine unit test to have a block like the following

  
  beforeEach(function(){
          jasmine.getFixtures().fixturesPath = '/fixtures/test/fixtures';
      });
  

Now you should be in a position to loadfixture/readfixture

Answer 2

As stated on http://testacular.github.com/0.6.0/config/files.html, since version 0.5.2 you can use the new configuration syntax:

files = [
  JASMINE,
  JASMINE_ADAPTER,
  'test/spec/**/*.js',
  {
    pattern: 'test/fixtures/*.html',
    watched: true,
    included: false,
    served: true
  }
];

I just tried it and it works fine for me.