jasmine-jquery
jasmine-jquery copied to clipboard
Trigger only works if it's the first test on the spec
It's a weird behaviour that is happening on my tests. First, I confess that i'm new on it, but i've made my researches and didn't find anything that helps me.
Depending on the order I execute the tests, it passes or fails. But, as I see, one shouldn't conflict with another.
My stack:
- an already compiled script with browserify
- karma
- jasmine + jasmine-jquery (of course).
I've created the follow spec. Really simple. It shoud verify if a function is defined and then, if a class is added to a element when the event is triggered:
describe('Menu', function() {
beforeEach(function() {
jasmine.getFixtures().clearCache()
var f = jasmine.getFixtures();
f.fixturesPath = 'base/test/fixtures';
f.load('menu.html');
$.holdReady(false);
});
afterEach(function() {
var f = jasmine.getFixtures();
f.cleanUp();
f.clearCache();
});
it('should be defined', function() {
expect(window.app.components.menu.init).toBeDefined()
});
it('should show the submenu on hover', function() {
var $a = $(".sub").eq(0).parent().children("a");
$a.trigger("mouseenter");
expect($(".sub").eq(0)).toBeMatchedBy('.show');
});
});
It fails:
04 12 2015 13:02:23.841:INFO [watcher]: Changed file "/Users/admin/teste-dev/karma-teste-boilerplate/test/menu-spec.js".
Chrome 47.0.2526 (Mac OS X 10.10.5) Menu should show the submenu on hover FAILED
Expected ({ 0: HTMLNode, length: 1, prevObject: ({ 0: HTMLNode, length: 1, prevObject: ({ 0: HTMLNode, context: HTMLNode, length: 1 }), context: HTMLNode, selector: '.sub' }), context: HTMLNode }) to be matched by '.show'.
at Object.<anonymous> (/Users/admin/teste-dev/karma-teste-boilerplate/test/menu-spec.js:28:27)
Chrome 47.0.2526 (Mac OS X 10.10.5): Executed 2 of 2 (1 FAILED) (0.049 secs / 0.038 secs)
Now, the weird part: If I put the trigger validation before the defined, it works:
describe('Menu', function() {
beforeEach(function() {
jasmine.getFixtures().clearCache()
var f = jasmine.getFixtures();
f.fixturesPath = 'base/test/fixtures';
f.load('menu.html');
$.holdReady(false);
});
afterEach(function() {
var f = jasmine.getFixtures();
f.cleanUp();
f.clearCache();
});
it('should show the submenu on hover', function() {
var $a = $(".sub").eq(0).parent().children("a");
$a.trigger("mouseenter");
expect($(".sub").eq(0)).toBeMatchedBy('.show');
});
it('should be defined', function() {
expect(window.app.components.menu.init).toBeDefined()
});
});
It passes:
04 12 2015 13:08:33.474:INFO [watcher]: Changed file "/Users/admin/teste-dev/karma-teste-boilerplate/test/menu-spec.js".
Chrome 47.0.2526 (Mac OS X 10.10.5): Executed 2 of 2 SUCCESS (0.046 secs / 0.037 secs)
I've tried the following without success:
- Use spyOn on the mouseenter event
- Use another matches, as 'toHaveClass'
expect($(".sub").eq(0)).toHaveClass('show');
and toBeexpect($(".sub").eq(0).hasClass('show')).toBe(true);
- Use the script without browserify
- Use browserify plugin on karma
- cleanUp() on afterEach, on afterAll and even don't cleanUp at all
- The same to setup the fixture: tried on beforeEach and beforeAll
My source code: KarmaJasmineJqueryTestReduced.zip
Thanks.