Knockout-Validation - validatedObservable Tests

<!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>
    <script src="validatedObservable_spec.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('#testContainer').get(0), options);
}

function applyTestBindings(viewModel) {
    ko.applyBindings(viewModel, jQuery('#testContainer').get(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```.

'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*/


module('validatedObservable', {
    beforeEach: function() {
        ko.validation.init({/*custom validation options here*/}, true);
    },
    afterEach: function() {
        var $element = jQuery('#testElement');
        ko.cleanNode($element.get(0));
        $element.empty();
        ko.validation.reset();
    }    
});

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

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

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


//
// Test example
//
test('Issue #442 - validatedObservable initialized with undefined', function() {
  expect(6);

  var testObj = ko.validatedObservable();
  
  strictEqual(testObj(), undefined, 'observable still works');
  strictEqual(testObj.isValid(), true, 'observable is valid');
  strictEqual(testObj.error(), null, 'message is properly formatted');

  var data = {
    value: ko.observable('').extend({required: true})
  };
  testObj(data);
  strictEqual(testObj(), data, 'observable still works after changing value');
  strictEqual(testObj.isValid(), false, 'observable is not valid');
  strictEqual(testObj.error(), 'This field is required.', 'message is properly formatted');
});


test('observable with object value updates validation when value changes', function() {
  expect(6);
  
  var firstValue = {
    first: ko.observable('').extend({required: true})
  }
  var secondValue = {
    second: ko.observable('test').extend({required: true})
  }
  var testObj = ko.observable(firstValue).extend({validatable: true});

  strictEqual(testObj(), firstValue, 'observable still works');
  strictEqual(testObj.isValid(), false, 'observable is not valid');
  strictEqual(testObj.error(), 'This field is required.', 'message is properly formatted');
  
  //Change value
  testObj(secondValue);
  strictEqual(testObj(), secondValue, 'observable still works');
  strictEqual(testObj.isValid(), true, 'observable is valid');
  strictEqual(testObj.error(), null, 'message is empty');
});