How to check specific div is displayed on click in JASMINE (JS) FRAMEWORK

Question

I am very new to Jasmine JS Framework.

I have two divs' <div id="DIV_1"></div> and <div id="DIV_2"></div>. I have two link images, Suppose I am clicking link image1 I am displaying DIV_1. If I am clicking link image 2, I am hiding first DIV_1 and displaying DIV_2.

My question is, how to know when I'm clicking link image 1, I am displaying DIV_1 using JASMINE JS Framework?.

I am using this script in Jasmine spec to click the link image 1: $('.link_image').trigger('click');

Answer 1

I would create a Jasmine fixture, and call the click event on that fixture. After this, you can make assertions about the state of the fixture.

I usually use a plugin called jasmine-jquery for this: https://github.com/velesin/jasmine-jquery

The code would end up looking something like this:

var fixture = setFixture("some_html");
fixture.find('.link_image').trigger('click'); //.find() accepts a JQuery selector
expect(fixture.find('#DIV_1').toBeHidden();
expect(fixture.find('#DIV_2').toBeVisible();

Also, if you template is another file (maybe loaded through AMD) use this function:

var fixture = loadFixture('path/to/amd/template');

I would strongly recommend using the the AMD method to load the same templates you use in production, otherwise you must re-create your HTML as fixtures for the tests and then at that point you are just testing your fixtures and not your actual code.