Knockout-Validation Tests - Ensure validation message is inserted when view model is bound to multiple elements Issue #289

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.16.0.css" />
    <link rel="stylesheet" href="style.css" />
    
    <script data-semver="1.11.0" src="http://code.jquery.com/jquery-1.11.0.js"></script>
    <script data-semver="3.2.0"  src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
    <script data-semver="master" src="http://rawgit.com/Knockout-Contrib/Knockout-Validation/master/Dist/knockout.validation.js"></script>
    <script data-semver="1.16.0" src="http://code.jquery.com/qunit/qunit-1.16.0.js"></script>
    
    <script>
      // jQuery extension to easily access knockout and knockout-validation specifics
      jQuery.fn.extend({
          $config: function() {
            if (this.size() > 1) {
              var result = [];
              this.each(function() {
                result.push(ko.validation.utils.getConfigOptions(this));
              });
              return result;
            }
            return ko.validation.utils.getConfigOptions(this.get(0));
          },
          $context: function() {
            if (this.size() > 1) {
              var result = [];
              this.each(function() {
                result.push(ko.contextFor(this));
              });
              return result;
            }
            return ko.contextFor(this.get(0));
          },
          $viewModel: function() {
            if (this.size() > 1) {
              var result = [];
              this.each(function() {
                result.push(ko.dataFor(this));
              });
              return result;
            }
            return ko.dataFor(this.get(0));
          }
      });
    </script>

    <script src="tests.js"></script>
  </head>

  <body>
    <div id="qunit"></div>

    <!-- The element used for testing -->
    <div id="testElement"></div>
  </body>

</html>

'use strict';
/*global ko, jQuery, $*/
/*global QUnit:true, module:true, test:true, asyncTest:true, expect:true*/
/*global start:true, stop:true ok:true, equal:true, notEqual:true, deepEqual:true*/
/*global notDeepEqual:true, strictEqual:true, notStrictEqual:true, raises:true*/

//
// Helper method to set HTML content to test element
//
function addTestHtml(contents) {
  jQuery('#testElement').html(contents);
}

function applyTestBindingsWithValidation(viewModel, options) {
    ko.applyBindingsWithValidation(viewModel, jQuery('#testElement').get(0), options);
}

function applyTestBindings(viewModel) {
    ko.applyBindings(viewModel, jQuery('#testElement').get(0));
}


module('validatedObservable', {
    beforeEach: function() {
        ko.validation.init({
          messagesOnModified: false,
          decorateInputElement: true,
          decorateElementOnModified: false
        }, true);
    },
    afterEach: function() {
        var $element = jQuery('#testElement');
        ko.cleanNode($element.get(0));
        $element.empty();
        ko.validation.reset();
    }    
});


test('Issue #289 - validation message is not inserted when view model is bound to multiple elements', function() {
  expect(5);
  
  var viewModel = {
    value: ko.observable('').extend({required: true})
  };
  
  var $element = jQuery([
    '<div>',
      '<div id="first">',
        '<input type="text" data-bind="value: $data.value">',
      '</div>',
      '<div id="second">',
        '<input type="text" data-bind="value: $data.value">',
      '</div>',
    '</div>'].join(''));
  
  
  addTestHtml($element);
  applyTestBindings(viewModel);

  // Check validation state for observable
  strictEqual(viewModel.value(), '', 'observable works');
  strictEqual(viewModel.value.isValid(), false, 'observable is not valid');
  strictEqual(viewModel.value.error(), 'This field is required.', 'message is properly formatted.');

  // Check HTML
  var $first = $element.find('#first > span.validationMessage');
  strictEqual($first.text(), 'This field is required.', 'validationMessage for #first is inserted');

  var $second = $element.find('#second > span.validationMessage');
  strictEqual($second.text(), 'This field is required.', 'validationMessage for #second is inserted');

  // Show HTML for further investigation
  console.log(console.dirxml($element[0]));
});

/* Styles go here */

# Knockout-Validation - qUnit Tests

> Template for creating tests using qUnit for Knockout-Validation library.

## Writing Tests

Tests should be written in ```tests.js``` file.
The DOM element used for testing has an ID of ```testElement```.