Patternfly smoke tests

* introduce Patternfly js libraries to Karma
* provide smoke test examples for running unit tests on Patternfly test fixtures
* removes any inline scripts from fixtures during Karma testing, and sources Karma scripts instead
* adds grunt-karma
* adds automated test examples for the following components:
    + About Modal
    + Accordion
    + Alerts
    + Area Charts
    + Badges
    + Bar Charts
    + Bootstrap Combobox
    + Bootstrap Datepicker
    + Bootstrap Select
    + Bootstrap Switch
    + Bootstrap Treeview
    + Datatables

Gruntfile.js

@@ -194,6 +194,11 @@ module.exports = function (grunt) {
       options: {
         livereload: true
       }
+    },
+    karma: {
+      unit: {
+        configFile: 'karma.conf.js'
+      }
     }
   });
 

README.md

@@ -142,7 +142,7 @@ The HTML pages in `tests/` are generated using Jekyll.  Do *not* edit these file
 Unit tests are written for [Karma test server] (https://karma-runner.github.io/1.0/index.html) with [Jasmine](http://jasmine.github.io/)
 
 ```
-npm test
+grunt karma
 ```
 ## Release
 

karma.conf.js

@@ -17,6 +17,12 @@ module.exports = function(config) {
     files: [
       'components/jquery/dist/jquery.js',
       'components/bootstrap/dist/js/bootstrap.js',
+      'components/bootstrap-combobox/js/bootstrap-combobox.js',
+      'components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js',
+      'components/bootstrap-select/dist/js/bootstrap-select.js',
+      'components/datatables/media/js/jquery.dataTables.js',
+      'components/bootstrap-switch/dist/js/bootstrap-switch.js',
+      'components/bootstrap-treeview/src/js/bootstrap-treeview.js',
       'components/c3/c3.js',
       'components/d3/d3.js',
       'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
@@ -105,6 +111,15 @@ var CustomMiddlewareFactory = function (config) {
       if(config.logLevel === config.LOG_DEBUG){
         console.log('Intercepted:' + request.url + ' Serving: ' + newPath);
       }
+
+      if(request.url.indexOf('.svg') > 0) {
+        response.writeHeader(200, {'Content-Type': 'image/svg+xml'});
+      } else if (request.url.indexOf('.js') > 0) {
+        response.writeHeader(200, {'Content-Type': 'application/javascript'});
+      } else if (request.url.indexOf('.css') > 0) {
+        response.writeHeader(200, {'Content-Type': 'text/css'});
+      }
+
       response.write(file);
     }
     return response.end();

package.json

@@ -20,6 +20,7 @@
     "grunt-css-count": "^0.3.0",
     "grunt-jekyll": "^0.4.2",
     "grunt-jslint": "^1.1.14",
+    "grunt-karma": "^2.0.0",
     "jasmine-core": "^2.4.1",
     "jasmine-jquery": "^2.1.1",
     "karma": "^1.1.0",

tests/unit/about-modal.spec.js

@@ -0,0 +1,36 @@
+describe("about-modal suite", function () {
+
+  beforeEach(function () {
+    globals.readFixture(globals.fixturePath + 'about-modal.html');
+  });
+
+  it('should launch the about modal', function (done) {
+    var button = $('button[data-toggle="modal"]');
+    var modal = $('.modal');
+
+    //expect modal to be hidden initially
+    expect(modal).toBeHidden();
+
+    button.click();
+
+    setTimeout(function () {
+      expect(modal).not.toBeHidden();
+      done();
+    }, globals.wait);
+  });
+
+  it('should close the about modal and the backdrop should disappear', function (done) {
+    var closeButton = $('button.close');
+
+    closeButton.click();
+
+    setTimeout(function () {
+      expect($('.modal')).toBeHidden();
+
+      //manually remove backdrop
+      $('.modal-backdrop').remove();
+      done();
+    }, globals.wait);
+  });
+
+});

tests/unit/accordion.spec.js

@@ -1,7 +1,7 @@
 describe("accordion test suite", function () {
 
   beforeEach(function () {
-    loadFixtures(globals.fixturePath + 'accordions.html');
+    globals.readFixture(globals.fixturePath + 'accordions.html');
   });
 
   it('should add the "in" class after accordion collapsed', function (done) {

tests/unit/alerts.spec.js

@@ -1,7 +1,7 @@
 describe("alerts test suite", function () {
 
   beforeEach(function () {
-    loadFixtures(globals.fixturePath + 'alerts.html');
+    globals.readFixture(globals.fixturePath + 'alerts.html');
   });
 
   it('should not exist after dismiss', function (done) {

tests/unit/area-charts.spec.js

@@ -1,7 +1,8 @@
 describe("area-charts test suite", function () {
 
   beforeEach(function () {
-    loadFixtures(globals.fixturePath + 'area-charts.html');
+    globals.readFixture(globals.fixturePath + 'area-charts.html');
+    renderAreaCharts();
   });
 
   it('should render an area chart with four data points', function (done) {
@@ -15,4 +16,35 @@ describe("area-charts test suite", function () {
     }, globals.wait);
   });
 
+  function renderAreaCharts() {
+    //area chart
+    var areaChartDataColumns = [
+      ['data1', 350, 400, 350, 0],
+      ['data2', 140, 100, 150, 205, 145, 50],
+      ['data3', 10, 60, 90, 10, 325, 400],
+      ['data4', 260, 10, 305, 100, 50, 150]
+    ];
+    var c3ChartDefaults = $().c3ChartDefaults();
+    var areaChartConfig = c3ChartDefaults.getDefaultAreaConfig();
+    areaChartConfig.bindto = '#areaChart';
+    areaChartConfig.data = {
+      columns: areaChartDataColumns,
+      type: 'area-spline'
+    };
+    var areaChart = c3.generate(areaChartConfig);
+
+    //single area chart
+    var singleAreaChartDataColumns = [
+      ['data2', 140, 100, 150, 205, 145, 50]
+    ];
+
+    var singleAreaChartConfig = c3ChartDefaults.getDefaultSingleAreaConfig();
+    singleAreaChartConfig.bindto = '#singleAreaChart';
+    singleAreaChartConfig.data = {
+      columns: singleAreaChartDataColumns,
+      type: 'area-spline'
+    };
+    var singleAreaChart = c3.generate(singleAreaChartConfig);
+  }
+
 });

tests/unit/badges.spec.js

@@ -1,18 +1,15 @@
 describe("badges test suite", function () {
 
   beforeEach(function () {
-    loadFixtures(globals.fixturePath + 'badges.html');
+    globals.readFixture(globals.fixturePath + 'badges.html');
   });
 
-  it('should contain a button with a badge span element', function (done) {
+  it('should contain a button with a badge span element', function () {
     var button = $('button');
     var span = $('button span.badge');
 
-    setTimeout(function () {
-      expect(button).toExist();
-      expect(span).toHaveClass('badge');
-      done();
-    }, globals.wait);
+    expect(button).toExist();
+    expect(span).toHaveClass('badge');
   });
 
 });

tests/unit/bar-charts.spec.js

@@ -1,7 +1,8 @@
 describe("bar-charts test suite", function () {
 
   beforeEach(function () {
-    loadFixtures(globals.fixturePath + 'bar-charts.html');
+    globals.readFixture(globals.fixturePath + 'bar-charts.html');
+    renderBarCharts();
   });
 
   it('should render a vertical bar chart with four bars', function (done) {
@@ -15,4 +16,115 @@ describe("bar-charts test suite", function () {
     }, globals.wait);
   });
 
+  function renderBarCharts() {
+    var c3ChartDefaults = $().c3ChartDefaults();
+
+    var chartUrls = [
+      'https://www.gogole.com',
+      'https://www.yahoo.com',
+      'https://www.bing.com/',
+      'https://duckduckgo.com/'
+    ];
+    var categories = ['Q1', 'Q2', 'Q3', 'Q4'];
+    var columnsData = [
+      ['data1', 400, 360, 320, 175]
+    ];
+
+    //vertical bar
+    var verticalBarChartConfig = $().c3ChartDefaults().getDefaultBarConfig(categories);
+    verticalBarChartConfig.bindto = '#verticalBarChart';
+    verticalBarChartConfig.axis = {
+      x: {
+        categories: categories,
+        type: 'category'
+      }
+    };
+    verticalBarChartConfig.data = {
+      type: 'bar',
+      columns: columnsData,
+      // optional drilldown behavior
+      onclick: function (d, element) {
+        window.location = chartUrls[d.index];
+      }
+    };
+    var verticalBarChart = c3.generate(verticalBarChartConfig);
+
+    //grouped vertical bar
+    var groupedcCategories = ['2013', '2014', '2015'];
+    var groupedColumnsData = [
+      ['Q1', 400, 250, 375],
+      ['Q2', 355, 305, 300],
+      ['Q3', 315, 340, 276],
+      ['Q4', 180, 390, 190]
+    ];
+    var groupedColors = {
+      pattern: [
+        $.pfPaletteColors.red,
+        $.pfPaletteColors.blue,
+        $.pfPaletteColors.orange,
+        $.pfPaletteColors.green
+      ]
+    };
+
+    var groupedVerticalBarChartConfig = $().c3ChartDefaults().getDefaultGroupedBarConfig();
+    groupedVerticalBarChartConfig.bindto = '#groupedVerticalBarChart';
+    groupedVerticalBarChartConfig.axis = {
+      x: {
+        categories: groupedcCategories,
+        type: 'category'
+      }
+    };
+    groupedVerticalBarChartConfig.data = {
+      type: 'bar',
+      columns: groupedColumnsData,
+      // optional drilldown behavior
+      onclick: function (d, element) {
+        window.location = chartUrls[d.index];
+      }
+    };
+    groupedVerticalBarChartConfig.color = groupedColors;
+    var groupedVerticalBarChart = c3.generate(groupedVerticalBarChartConfig);
+
+    //horizontal bar
+    var horizontalBarChartConfig = $().c3ChartDefaults().getDefaultBarConfig(categories);
+    horizontalBarChartConfig.bindto = '#horizontalBarChart';
+    horizontalBarChartConfig.axis = {
+      rotated: true,
+      x: {
+        categories: categories,
+        type: 'category'
+      }
+    };
+    horizontalBarChartConfig.data = {
+      type: 'bar',
+      columns: columnsData,
+      // optional drilldown behavior
+      onclick: function (d, element) {
+        window.location = chartUrls[d.index];
+      }
+    };
+    var horizontalBarChart = c3.generate(horizontalBarChartConfig);
+
+    //grouped horizontal bar
+    var groupedHorizontalBarChartConfig = $().c3ChartDefaults().getDefaultGroupedBarConfig();
+    groupedHorizontalBarChartConfig.bindto = '#groupedHorizontalBarChart';
+    groupedHorizontalBarChartConfig.axis = {
+      rotated: true,
+      x: {
+        categories: groupedcCategories,
+        type: 'category'
+      }
+    };
+    groupedHorizontalBarChartConfig.data = {
+      type: 'bar',
+      columns: groupedColumnsData,
+      // optional drilldown behavior
+      onclick: function (d, element) {
+        window.location = chartUrls[d.index];
+      }
+    };
+    groupedHorizontalBarChartConfig.color = groupedColors;
+    var groupedHorizontalBarChart = c3.generate(groupedHorizontalBarChartConfig);
+  }
+
 });

tests/unit/bootstrap-combobox.spec.js

@@ -0,0 +1,25 @@
+describe("bootstrap-combobox test suite", function () {
+
+  beforeAll(function () {
+    globals.readFixture(globals.fixturePath + 'bootstrap-combobox.html');
+
+    //render the combobox using the plugin
+    $('.combobox').combobox();
+  });
+
+
+  it('should use the plugin to take the first select element and render a menu list with 51 items', function (done) {
+    var select = $('select.combobox:first');
+    var toggle = $('.dropdown-toggle:first');
+
+    toggle.click();
+
+    setTimeout(function () {
+      var renderedMenuList = select.siblings().find('div.input-group ul li');
+      expect(renderedMenuList).toHaveLength(51);
+      done();
+    }, globals.wait);
+  });
+
+
+});

tests/unit/bootstrap-datepicker.spec.js

@@ -0,0 +1,32 @@
+describe("bootstrap datepicker test suite", function () {
+
+  beforeEach(function () {
+    globals.readFixture(globals.fixturePath + 'bootstrap-datepicker.html');
+  });
+
+  it('should open the first datepicker after show', function (done) {
+
+    var datePicker1 = $('#datepicker1');
+
+    datePicker1.datepicker({
+      autoclose: true,
+      orientation: "top auto",
+      todayBtn: "linked",
+      todayHighlight: true
+    });
+
+    datePicker1.datepicker('show');
+
+    setTimeout(function () {
+      expect($('.datepicker-dropdown')).toExist();
+
+      //close datepicker1
+      datePicker1.datepicker('hide');
+      expect($('.datepicker-dropdown')).not.toExist();
+
+      done();
+    }, globals.wait);
+
+  });
+
+});

tests/unit/bootstrap-select.spec.js

@@ -0,0 +1,20 @@
+describe("bootstrap-select test suite", function () {
+
+  beforeEach(function () {
+    globals.readFixture(globals.fixturePath + 'bootstrap-select.html');
+  });
+
+  it('should use the plugin to take the first select and add a dropdown menu list with 11 items', function (done) {
+    var select = $('.selectpicker:first');
+
+    //render the select using the plugin
+    select.selectpicker();
+
+    setTimeout(function () {
+      var renderedMenuList = select.siblings().find('.dropdown-menu li');
+      expect(renderedMenuList).toHaveLength(11);
+      done();
+    }, globals.wait);
+  });
+
+});