Thorax helper tests

gistfile1.txt

  test("input helper", function(){
    var textInputView = new Application.View({
      key: 'value',
      template: '{{input type="text" class="test" value="{{key}}"}}'
    });
    textInputView.render();
    equal(textInputView.$('.test').val(), 'value');

    var textareaInputView = new Application.View({
      template: '{{input type="textarea" value="value"}}'
    });
    textareaInputView.render();
    equal(textareaInputView.$('textarea').val(), 'value');

    var selectView = new Application.View({
      optionsHash: {
        valueOne: 'Label One',
        valueTwo: 'Label Two'
      },
      optionsArray: [
        ['valueOne', 'Label One'],
        ['valueTwo', 'Label Two']
      ],
      template: '{{input name="a" type="select" options=optionsHash}}{{input name="b" type="select" options=optionsArray}}'
    });
    selectView.render();
    equal(selectView.$('select').length, 2);
    equal(selectView.$('option').length, 4);
    equal(selectView.$('select[name="a"]').find('option')[0].getAttribute('value'), 'valueOne');
  });

  test('input-error helper', function() {
    var inputErrorView = new Application.View({
      template: '{{input-error "a"}}{{input-error "b" tag="p" class="help-block"}}'
    });
    inputErrorView.render();
    equal(inputErrorView.$('span').length, 1);
    equal(inputErrorView.$('p').length, 1);
    inputErrorView.trigger('error', [
      {
        id: 'a',
        message: 'message one'
      },
      {
        id: 'b',
        message: 'message two'
      }
    ]);
    equal(inputErrorView.$('span').html(), 'message one');
    equal(inputErrorView.$('p').html(), 'message two');
    inputErrorView.reset();
    equal(inputErrorView.$('span').html(), '');
    equal(inputErrorView.$('p').html(), '');
  });

  test("control-group helper", function() {
    var controlGroupView = new Application.View({
      template: '{{#control-group name="a" label="hey"}}{{control-label}}{{control-input class="tasty"}}{{control-error}}{{/control-group}}'
    });
    controlGroupView.render();
    equal(controlGroupView.$('label').html(), 'hey');
    equal(controlGroupView.$('input.tasty').length, 1);
    equal(controlGroupView.$('.help-block').length, 1);
  });

  test("error helper", function() {
    var errorHelperView = new Application.View({
      template: '{{#error}}<p class="error-header">Some Errors</p><ul class="error-messages">{{#each errors}}<li>{{message}}</li>{{/each}}{{/error}}<form><input name="test" data-validate-required="true"></form>'
    });
    errorHelperView.render();
    equal(errorHelperView.$('.error-header').length, 0);
    ok(!errorHelperView.serialize());
    equal(errorHelperView.$('.error-header').length, 1);
    equal(errorHelperView.$('ul.error-messages li').length, 1);
    ok(!errorHelperView.serialize());
    equal(errorHelperView.$('.error-header').length, 1);
    equal(errorHelperView.$('ul.error-messages li').length, 1);
    errorHelperView.populate({test:'value'});
    ok(errorHelperView.serialize());
    equal(errorHelperView.$('.error-header').length, 0);
    equal(errorHelperView.$('ul.error-messages li').length, 0);
  });

  test("control group + validation", function() {
    var formView = new Application.View({
      template: '<form>{{#control-group name="a"}}{{control-error}}{{control-input data-validate-required="true"}}{{/control-group}}{{#control-group name="b"}}{{control-error}}{{control-input data-validate-min-length="3" data-error-message="too short"}}{{/control-group}}</form>'
    });
    formView.render();

    ok($(formView.$('.help-block')[0]).html() === '');
    ok(!formView.serialize());
    ok($(formView.$('.help-block')[0]).html() !== '');
    ok($(formView.$('.help-block')[1]).html() === 'too short');
    formView.populate({
      a: 'a',
      b: 'ab'
    });
    ok(!formView.serialize());
    formView.populate({
      b: 'abc'
    });
    ok(formView.serialize());
    ok($(formView.$('.help-block')[0]).html() === '');
    ok($(formView.$('.help-block')[1]).html() === '');
    //ensure the form can re-error
    formView.populate({
      a: '',
      b: ''
    });
    ok(!formView.serialize());
    ok($(formView.$('.help-block')[0]).html() !== '');
    ok($(formView.$('.help-block')[1]).html() === 'too short');
  });