Unit Testing simple JavaScript with WebStorm

I'm working on a project which I'm building inside WebStorm. To make it more easy to provide a correct answer, the version I'm using is: WebStorm 9.0.3

Now, I have a very simple JavaScript function which toggles a class when you mousedown or mouseup.

This is being done by using the following code:

$(function() {
    $('#OfficeUI a.button').on('mousedown mouseup', function(e) {
        $(this).toggleClass('ie-fix');
    });
});

In order to test this piece of use code, I dediceded to use jasmine in combination with jamsine-jquery and with the karma test runner (which comes bundled with WebStorm.

Therefore, I've created a file karma.conf.js which looks like the following:

module.exports = function(config){
    config.set({
        basePath : './',
        files : [
            '../../Resources/External/Bower/jquery/dist/jquery.js',
            '../../Resources/External/Bower/angular/angular.js',
            '../../Resources/External/Bower/angular-mocks/angular-mocks.js',
            '../../Resources/Scripts/OfficeUI.js',
            '../../Resources/Scripts/Elements/OfficeUI.Elements.js',
            '../../Unit Tests/**/*.Test.js'
        ],
        autoWatch : true,
        watched: true,
        server: true,
        include: false,
        frameworks: ['jasmine-jquery', 'jasmine'],
        browsers: ['Chrome']
    });
};

The image below points of the folder structure I'm using in my project.

Now, I would like to unit test my plugin but I'm totally new to writing unit tests with Jasmine, did already a lot of research but I couldn't found on how to do it.

I have written a test like this but it doens't work:

describe("Unit: OfficeUI Elements", function() {
    // Provides a section to define code to execute before every test is     executed.
    beforeEach(function() {
    });

    it("A class 'ie-fix' should be added to any 'a href' which is marked with a     'button' class when you click the element.", function() {
        // Section: Create the necessary element which is needed to execute the     test.
        var buttonElement = '<div id="OfficeUI">';
        buttonElement +=    '    <a href="#" class="button">';
        buttonElement +=    '        <span>Yes</span>';
        buttonElement +=    '    </a>';
        buttonElement +=    '</div>';

        jasmine.getFixtures().set(buttonElement);

        // Section: Execute the test.
        var buttonElementSelector = $('a.button');
        $(buttonElementSelector).trigger('mousedown');

        // Set a variable that set the outcome of the test.
        var outcome = $(buttonElementSelector).hasClass('ie-fix');

        // Section: Validate the outcome of the test.
        expect(outcome).toEqual(true);
    });
});

The above code however does fails the test with the following message: Expected false to equal true. which I don''t quite understand.

After that attempt, I've try to test it with fixtures. Therefore, I've modified the karma.conf.js file as follows:

module.exports = function(config){
    config.set({
        basePath : './',
        files : [
            '../../Resources/External/Bower/jquery/dist/jquery.js',
            '../../Resources/External/Bower/angular/angular.js',
            '../../Resources/External/Bower/angular-mocks/angular-mocks.js',
            '../../Resources/Scripts/OfficeUI.js',
            '../../Resources/Scripts/Elements/OfficeUI.Elements.js',
            '../../Unit Tests/**/*.Test.js',

            { pattern: '../../Resources/Unit Tests/*.html', watched: true, served: true, included: false },
        ],
        autoWatch : true,
        watched: true,
        server: true,
        include: false,
        frameworks: ['jasmine-jquery', 'jasmine'],
        browsers: ['Chrome']
    });
};

So what I've done here is added a file to the 'Files' array contains the HTML files in which the fixtures are placed.

The fixture file itself does contain the following code:

<a href="#"></a>

Note: This is just for testing purposes.

The test file itself does then contain the following:

describe("Unit: OfficeUI Elements", function() {
    // Provides a section to define code to execute before every test is     executed.
    beforeEach(function() {
    });

    it("A class 'ie-fix' should be added to any 'a href' which is marked with a     'button' class when you click the element.", function() {
        jasmine.getFixtures().fixturesPath = "/Unit Tests/";
        loadFixtures("test.html");
    });
});

Now, when I do run the test, the following message does appear:

Error: Fixture could not be loaded: /Unit Tests/test.html (status: error, message: undefined)

Now, on the website of jasmine-jquery I do read something about Cross domain policy problems under Chrome. So I have the feeling as this could be it, but I don't know on how to solve this when I'm running the tests through the karma test runner in WebStorm.

Any help is highly appreciated. I'm already searching the whole weekend for this.