GPT Tests w/ Jasmine

jsFiddle template to run a jasmine test inside jsFiddle. Adds jasmine external resources, and initializes jasmine's HtmlReporter on window load. For more infor check this article: http://opensas.wordpress.com/2013/06/23/sharing-you-javascript-ninja-secrets-run-your-jasmine-tests-on-jsfiddle/

by Alex Cowan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.2.1/jasmine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.2.1/jasmine-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.2.1/boot.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.2.1/jasmine.min.css">
      <button id="go-btn"></button>
      <select id="ddMfr">
        <option value="All">All</option>
        <option value="mfr1">Manufacturer 1</option>
        <option value="mfr2">Manufacturer 2</option>
      </select>
      <select id="ddModel">
        <option value="All">All</option>
        <option value="model1">Model 1</option>
        <option value="model2">Model 2</option>
      </select>
      <div class="catalog-part" mfr="mfr1" model="model1"></div>
      <div class="catalog-part" mfr="mfr1" model="model2"></div>
      <div class="catalog-part" mfr="mfr2" model="model1"></div>
      <div class="catalog-part" mfr="mfr2" model="model2"></div>

JavaScript

describe("filterParts()", function() {
  let goButton;
  let ddMfr;
  let ddModel;
  let parts;

  beforeEach(function() {
    //set up the HTML elements needed for testing
    //note: moved this above for clarity
		
    //get references to the HTML elements needed for testing
    goButton = document.getElementById('go-btn');
    ddMfr = document.getElementById('ddMfr');
    ddModel = document.getElementById('ddModel');
    parts = document.getElementsByClassName("catalog-part");
  });

  it("should hide parts with different manufacturer when 'mfr' filter is applied", function() {
    //set the 'mfr' filter to 'mfr1'
    ddMfr.value = 'mfr1';
    //trigger the filter function
    goButton.click();
    //expect all parts with 'mfr' attribute value 'mfr2' to be hidden
    for (let i = 0; i < parts.length; i++) {
      if (parts[i].getAttribute('mfr') === 'mfr2') {
        expect(parts[i].style.display).toEqual('none');
      }
    }
  });

  it("should hide parts with different model when 'model' filter is applied", function() {
    //set the 'model' filter to 'model1'
    ddModel.value = 'model1';
    //trigger the filter function
    goButton.click();
    //expect all parts with 'model' attribute value 'model2' to be hidden
    for (let i = 0; i < parts.length; i++) {
      if (parts[i].getAttribute('model') === 'model2') {
        expect(parts[i].style.display).toEqual('none');
      }
    }
  });

  it("should show all parts when 'All' filter is applied", function() {
    //set both filters to 'All'
    ddMfr.value = 'All';
    ddModel.value = 'All';
    //trigger the filter function
    goButton.click();
    //expect all parts to be visible
    for (let i = 0; i < parts.length; i++) {
      expect(parts[i].style.display).toEqual('block');
    }
  });

});