title: Jasmine: How to test a jQuery plugin
body: <p>I'm very new to unit testing with Jasmine and I do have a question.
  I have a simple button that add'toggle's a class on mousedown and mouseup:</p>
  
  <pre><code>$(function() {
      $('#OfficeUI a.button').on('mousedown mouseup', function(e) {
          $(this).addClass('ie-fix');
      });
  });
  </code></pre>
  
  <p>My karma configuration file does contain the following:</p>
  
  <pre><code>module.exports = function(config){
      config.set({
          basePath : '../../',
          files : [
              // Dependencies
              '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',
  
              // Fixtures
              { pattern: 'Unit Tests/Fixtures/**/*.Test.html', watched: true,     served: true, included: false },
  
              // Files to test.
              { pattern: 'Unit Tests/**/*.Test.js', watched: true, server: true,     included: true }
          ],
          autoWatch : true,
          watched: true,
          server: true,
          include: false,
          frameworks: ['jasmine-jquery', 'jasmine'],
          browsers: ['Chrome']
      });
  };
  </code></pre>
  
  <p>The plugin code is stored in the file: <code>OfficeUI.Elements.js</code> which is referenced from within the karma configuration file.</p>
  
  <p>I do have fixture file containing the following logic:</p>
  
  <pre><code>&lt;div id="OfficeUI"&gt;
      &lt;a href="#" class="button"&gt;
          &lt;span&gt;&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, according to my plugin, the anchor on this page should have a class <code>ie-fix</code> when a mousedown event is executed on it.</p>
  
  <p>My test file itself is the following:</p>
  
  <pre><code>describe('Unit: OfficeUI Elements', function() {
      // Provides a section to define code to execute before every test is     executed.
      beforeEach(function() {
          jasmine.getFixtures().fixturesPath = 'base/Unit Tests/Fixtures/';
      });
  
      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() {
          loadFixtures('OfficeUI.Elements.Test.html');
          $('#OfficeUI a.button').mousedown();
          expect($('#OfficeUI a.button')).toHaveClass('ie-fix');
      });
  });
  </code></pre>
  
  <p>However, when I do execute the test, the following error pops up:</p>
  
  <pre><code>Expected ({ 0: HTMLNode, length: 1, prevObject: ({ 0: HTMLNode, context: HTMLNode, length: 1 }), context: HTMLNode, selector: '#OfficeUI a.button' }) to have class 'ie-fix'.
      at Object.&lt;anonymous&gt; 
  </code></pre>
  
  <p>So, the test has failed, but I don't know why at all.
  Anyone who has an idea?</p>
  
  <p><strong>Edit: Changed to the current version</strong></p>
  
  <p>I've modified everything and here's the new <code>karma.conf.js</code></p>
  
  <pre><code>module.exports = function(config){
      config.set({
          basePath : '../../',
          files : [
              // Resources
              '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',
  
              // Fixtures
              { pattern: 'Tests/Fixtures/*.Test.html', watched: true, served:     true, included: false },
  
              // Unit Tests
              'Tests/**/*.Test.js'
          ],
          autoWatch : true,
          watched: true,
          server: true,
          include: false,
          frameworks: ['jasmine-jquery', 'jasmine'],
          browsers: ['Chrome']
      });
  };
  </code></pre>
  
  <p>And the modified test runner file:</p>
  
  <pre><code>describe("Unit: OfficeUI Elements", function() {
      // Provides a section to define code to execute before every test is     executed.
      beforeEach(function() {
          jasmine.getFixtures().fixturesPath = 'base/Tests/Fixtures/';
          loadFixtures('OfficeUI.Elements.Button.Test.html');
      });
  
      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() {
  
          $('#OfficeUI a.button').first().click();
  
          expect($('#OfficeUI a.button').first()).toHaveClass('ie-fix');
      });
  });
  </code></pre>
  
  <p>The unit test does still fail.</p>
  
  <p>Kind regards,</p>