Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Karma HTML2JS Preprocessor Blocks Jasmine Fixtures #788

Closed
jlukic opened this issue Oct 14, 2013 · 11 comments

Comments

Projects
None yet
4 participants
@jlukic
Copy link

commented Oct 14, 2013

I'm setting up karma for Semantic UI and i noticed that jasmine-jquery fixtures were not able to be loaded correctly using standard syntax like

 jasmine.getFixtures().fixturesPath = 'base/test/fixtures/';
 loadFixtures('modal.html');

I then found from this stackoverflow thread that html2js was enabled as a preprocessor for all html files by default for Angular integration

To get fixtures working again i had to disable html preprocessors

preprocessors: {
  '**/*.html': []
}

I feel like there should be more mention of this in the karma config init script, or perhaps html2js should be disabled by default unless a user elects to include (just like test coverage with coverage preprocessors)

@jfroom

This comment has been minimized.

Copy link
Contributor

commented Oct 21, 2013

I also just lost an hour on this. I assume it's default configured with html2js for Angular development. I'm going to add a few more keywords to this comment to help any future searchers: "karma jasmine jquery fixture url not working issue".

There is also the basePath wrinkle, which I'll cross-post fwiw: Karma fixture path with adjusted Karma window var detection

var path = '';
if (typeof window.__karma__ !== 'undefined') {
  path += 'base/'
} 
jasmine.getFixtures().fixturesPath = path + 'spec/javascripts/fixtures';
@vojtajina

This comment has been minimized.

Copy link
Contributor

commented Oct 22, 2013

This is actually not for Angular development. This is Angular agnostic, it's just a preprocessor that converts HTML into JS string, so that you can easily load it (without making your tests asynchronous) and use it. There is an Angular specific preprocessor.

Check out https://github.com/karma-runner/karma-html2js-preprocessor#how-does-it-work-

That said, I understand what you are saying. karma init should ask you.
Here's an issue for it #800

I'm even fine with removing this preprocessor from the default configuration. However, when you put HTML files into your files, you should not include them, otherwise you get "INVALID syntax <" error. I'm not sure what is the best solution here. Maybe HTML files should be not included by default and we remove the html2js preprocessor from the default configuration.

What do you think guys?

@jfroom

This comment has been minimized.

Copy link
Contributor

commented Oct 22, 2013

Thanks for the detail @vojtajina and @jlukic.

Now that I better understand what's happening, I've switched over to the HTML2JS version. It is elegant and I'm starting to prefer it. My Jasmine-Jquery fixture load now looks like this: setFixtures(window.__html__['test/unit/app/work/work.spec.html'])

Am also having trouble deciding if the HTML2JS route is more of an advanced feature/preference worthy of an explicit opt-in - or if it should be enabled by default. I would suspect more users are entering on the 'less experienced with NodeJS patterns' side of the spectrum in general (as I am) and would not entirely grok that their HTML was converting to JS by default. As you mentioned, implementation does get a bit more complex changing over to non-preprocessor HTML loading because of the included behavior.

Perhaps the default config could be left as-is, but with some more documentation and comments in the code examples on the config/files page mentioning that preprocessors may be transforming the loaded files. That was the first place I started looking for insights.

The coffee preprocessor, on the other hand I was very happy was loaded by default.

Adding a note about the 'base/' path adjustment to the docs/comments also seems important for any files that will be accessed manually in the test scripts.

Just my two bits. Please take it with a grain of salt - I'm relatively new to the NodeJS and Karma domains =]

@jlukic

This comment has been minimized.

Copy link
Author

commented Oct 24, 2013

@vojtajina Good background. I'm a fan of adding a note in karma init

If anyone is curious here was my final config to get jasmine fixtures working. Oddly enough the fixture path uses the string "base"

Config

preprocessors: {
  '**/*.html': []
}

Test

var
  fixtures  = jasmine.getFixtures()
;

// given relative path test/fixtures/ to karma
fixtures.fixturesPath = 'base/test/fixtures/';
fixtures.load('whatever.html');
@shakyShane

This comment has been minimized.

Copy link
Contributor

commented Oct 25, 2013

Yep, this took me down for over 2 hours also.

@jlukic - this worked for me.

Needs to be better documented/mentioned in the init!

@vojtajina

This comment has been minimized.

Copy link
Contributor

commented Nov 2, 2013

Guys, the docs is in https://github.com/karma-runner/karma/tree/master/docs - can you make the changes so that it is easier to understand?

I'm updating the karma init to ask you whether you wanna use the html2js preprocessor (if you add some htm/html pattern). If you say you don't wanna use it, it will set these patterns to not be included (only served).
I believe that's the best solution.

Otherwise keeping html2js preprocessor as default.

@jfroom

This comment has been minimized.

Copy link
Contributor

commented Nov 2, 2013

I can fork and take a stab at tweaking the docs sometime in the next few days.

Links need underlines
@vojtajina I just noticed a minor design/usability decision on the public facing documentation site http://karma-runner.github.io/ which may be leading to some confusion. The links do not have enough of a visual separation from regular text. I was about to go add a link to the preprocessors on the preprocessors page and realized that they actually are linked - facepalm. Simply adding an underline should help. How do we edit the CSS file? I don't see it in the repo:
http://karma-runner.github.io/assets/css/app.css

I think this would do it:

.container a {
  text-decoration:underline;
}

karma-underline-links

jfroom added a commit to jfroom/karma that referenced this issue Nov 2, 2013

docs(config): preprocessor transformation clarification
- Pirmary motivation to clear up confusion around how to reference .html files per html2js preprocessor.

Clsoes karma-runner#788
@jfroom

This comment has been minimized.

Copy link
Contributor

commented Nov 3, 2013

Sorry about the double commit - I got tangled up in a git merge conflict that wouldn't resolve. You can ignore commit dd025a.

I'll also open a new issue regarding the underlines so we can (hopefully) close this out.

@jfroom

This comment has been minimized.

Copy link
Contributor

commented Nov 3, 2013

Link underline issue is now here: 817

vojtajina added a commit that referenced this issue Nov 11, 2013

docs(config): preprocessor transformation clarification
- Pirmary motivation to clear up confusion around how to reference .html files per html2js preprocessor.

Clsoes #788
@vojtajina

This comment has been minimized.

Copy link
Contributor

commented Nov 15, 2013

@jfroom thanks! Sorry for delays, I saw you already figured it out. The whole homepage is https://github.com/karma-runner/karma-runner.github.com.

@vojtajina

This comment has been minimized.

Copy link
Contributor

commented Nov 15, 2013

Ok, I created a feature issue for karma init to ask about using html2js preprocessor #800.

Let's discuss the "link underlining" issue in #817.

Anything else we can do in order to make this more easier to understand/debug?
Please re-open this if you think so.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.