jasmine-jquery icon indicating copy to clipboard operation
jasmine-jquery copied to clipboard

Trigger only works if it's the first test on the spec

Open andregumieri opened this issue 9 years ago • 0 comments

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 toBe expect($(".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.

andregumieri avatar Dec 04 '15 15:12 andregumieri