diff --git a/packages/ember-views/lib/views/checkbox.js b/packages/ember-views/lib/views/checkbox.js index 69b7c1c46a2..ff34cbd6f03 100644 --- a/packages/ember-views/lib/views/checkbox.js +++ b/packages/ember-views/lib/views/checkbox.js @@ -1,6 +1,6 @@ import { get } from "ember-metal/property_get"; import { set } from "ember-metal/property_set"; -import View from "ember-views/views/view"; +import EmberComponent from "ember-views/views/component"; /** @module ember @@ -29,11 +29,10 @@ import View from "ember-views/views/view"; @class Checkbox @namespace Ember - @extends Ember.View + @extends Ember.Component @public */ -// 2.0TODO: Subclass Component rather than View -export default View.extend({ +export default EmberComponent.extend({ instrumentDisplay: '{{input type="checkbox"}}', classNames: ['ember-checkbox'], diff --git a/packages/ember-views/tests/views/checkbox_test.js b/packages/ember-views/tests/views/checkbox_test.js index b79df1132dd..31df6f8f985 100644 --- a/packages/ember-views/tests/views/checkbox_test.js +++ b/packages/ember-views/tests/views/checkbox_test.js @@ -11,12 +11,11 @@ function set(obj, key, value) { function append() { run(function() { - checkboxView.appendTo('#qunit-fixture'); + checkboxComponent.appendTo('#qunit-fixture'); }); } - -var checkboxView, dispatcher; +var checkboxComponent, dispatcher; QUnit.module("Ember.Checkbox", { setup() { @@ -27,116 +26,116 @@ QUnit.module("Ember.Checkbox", { teardown() { run(function() { dispatcher.destroy(); - checkboxView.destroy(); + checkboxComponent.destroy(); }); } }); QUnit.test("should begin disabled if the disabled attribute is true", function() { - checkboxView = Checkbox.create({}); + checkboxComponent = Checkbox.create({}); - checkboxView.set('disabled', true); + checkboxComponent.set('disabled', true); append(); - ok(checkboxView.$().is(":disabled")); + ok(checkboxComponent.$().is(":disabled")); }); QUnit.test("should become disabled if the disabled attribute is changed", function() { - checkboxView = Checkbox.create({}); + checkboxComponent = Checkbox.create({}); append(); - ok(checkboxView.$().is(":not(:disabled)")); + ok(checkboxComponent.$().is(":not(:disabled)")); - run(function() { checkboxView.set('disabled', true); }); - ok(checkboxView.$().is(":disabled")); + run(function() { checkboxComponent.set('disabled', true); }); + ok(checkboxComponent.$().is(":disabled")); - run(function() { checkboxView.set('disabled', false); }); - ok(checkboxView.$().is(":not(:disabled)")); + run(function() { checkboxComponent.set('disabled', false); }); + ok(checkboxComponent.$().is(":not(:disabled)")); }); QUnit.test("should begin indeterminate if the indeterminate attribute is true", function() { - checkboxView = Checkbox.create({}); + checkboxComponent = Checkbox.create({}); - checkboxView.set('indeterminate', true); + checkboxComponent.set('indeterminate', true); append(); - equal(checkboxView.$().prop('indeterminate'), true, "Checkbox should be indeterminate"); + equal(checkboxComponent.$().prop('indeterminate'), true, "Checkbox should be indeterminate"); }); QUnit.test("should become indeterminate if the indeterminate attribute is changed", function() { - checkboxView = Checkbox.create({}); + checkboxComponent = Checkbox.create({}); append(); - equal(checkboxView.$().prop('indeterminate'), false, "Checkbox should not be indeterminate"); + equal(checkboxComponent.$().prop('indeterminate'), false, "Checkbox should not be indeterminate"); - run(function() { checkboxView.set('indeterminate', true); }); - equal(checkboxView.$().prop('indeterminate'), true, "Checkbox should be indeterminate"); + run(function() { checkboxComponent.set('indeterminate', true); }); + equal(checkboxComponent.$().prop('indeterminate'), true, "Checkbox should be indeterminate"); - run(function() { checkboxView.set('indeterminate', false); }); - equal(checkboxView.$().prop('indeterminate'), false, "Checkbox should not be indeterminate"); + run(function() { checkboxComponent.set('indeterminate', false); }); + equal(checkboxComponent.$().prop('indeterminate'), false, "Checkbox should not be indeterminate"); }); QUnit.test("should support the tabindex property", function() { - checkboxView = Checkbox.create({}); + checkboxComponent = Checkbox.create({}); - run(function() { checkboxView.set('tabindex', 6); }); + run(function() { checkboxComponent.set('tabindex', 6); }); append(); - equal(checkboxView.$().prop('tabindex'), '6', 'the initial checkbox tabindex is set in the DOM'); + equal(checkboxComponent.$().prop('tabindex'), '6', 'the initial checkbox tabindex is set in the DOM'); - run(function() { checkboxView.set('tabindex', 3); }); - equal(checkboxView.$().prop('tabindex'), '3', 'the checkbox tabindex changes when it is changed in the view'); + run(function() { checkboxComponent.set('tabindex', 3); }); + equal(checkboxComponent.$().prop('tabindex'), '3', 'the checkbox tabindex changes when it is changed in the component'); }); QUnit.test("checkbox name is updated when setting name property of view", function() { - checkboxView = Checkbox.create({}); + checkboxComponent = Checkbox.create({}); - run(function() { checkboxView.set('name', 'foo'); }); + run(function() { checkboxComponent.set('name', 'foo'); }); append(); - equal(checkboxView.$().attr('name'), "foo", "renders checkbox with the name"); + equal(checkboxComponent.$().attr('name'), "foo", "renders checkbox with the name"); - run(function() { checkboxView.set('name', 'bar'); }); + run(function() { checkboxComponent.set('name', 'bar'); }); - equal(checkboxView.$().attr('name'), "bar", "updates checkbox after name changes"); + equal(checkboxComponent.$().attr('name'), "bar", "updates checkbox after name changes"); }); QUnit.test("checked property mirrors input value", function() { - checkboxView = Checkbox.create({}); - run(function() { checkboxView.append(); }); + checkboxComponent = Checkbox.create({}); + run(function() { checkboxComponent.append(); }); - equal(get(checkboxView, 'checked'), false, "initially starts with a false value"); - equal(!!checkboxView.$().prop('checked'), false, "the initial checked property is false"); + equal(get(checkboxComponent, 'checked'), false, "initially starts with a false value"); + equal(!!checkboxComponent.$().prop('checked'), false, "the initial checked property is false"); - set(checkboxView, 'checked', true); + set(checkboxComponent, 'checked', true); - equal(checkboxView.$().prop('checked'), true, "changing the value property changes the DOM"); + equal(checkboxComponent.$().prop('checked'), true, "changing the value property changes the DOM"); - run(function() { checkboxView.remove(); }); - run(function() { checkboxView.append(); }); + run(function() { checkboxComponent.remove(); }); + run(function() { checkboxComponent.append(); }); - equal(checkboxView.$().prop('checked'), true, "changing the value property changes the DOM"); + equal(checkboxComponent.$().prop('checked'), true, "changing the value property changes the DOM"); - run(function() { checkboxView.remove(); }); - run(function() { set(checkboxView, 'checked', false); }); - run(function() { checkboxView.append(); }); + run(function() { checkboxComponent.remove(); }); + run(function() { set(checkboxComponent, 'checked', false); }); + run(function() { checkboxComponent.append(); }); - equal(checkboxView.$().prop('checked'), false, "changing the value property changes the DOM"); + equal(checkboxComponent.$().prop('checked'), false, "changing the value property changes the DOM"); }); QUnit.test("checking the checkbox updates the value", function() { - checkboxView = Checkbox.create({ checked: true }); + checkboxComponent = Checkbox.create({ checked: true }); append(); - equal(get(checkboxView, 'checked'), true, "precond - initially starts with a true value"); - equal(!!checkboxView.$().prop('checked'), true, "precond - the initial checked property is true"); + equal(get(checkboxComponent, 'checked'), true, "precond - initially starts with a true value"); + equal(!!checkboxComponent.$().prop('checked'), true, "precond - the initial checked property is true"); // IE fires 'change' event on blur. - checkboxView.$()[0].focus(); - checkboxView.$()[0].click(); - checkboxView.$()[0].blur(); + checkboxComponent.$()[0].focus(); + checkboxComponent.$()[0].click(); + checkboxComponent.$()[0].blur(); - equal(!!checkboxView.$().prop('checked'), false, "after clicking a checkbox, the checked property changed"); - equal(get(checkboxView, 'checked'), false, "changing the checkbox causes the view's value to get updated"); + equal(!!checkboxComponent.$().prop('checked'), false, "after clicking a checkbox, the checked property changed"); + equal(get(checkboxComponent, 'checked'), false, "changing the checkbox causes the view's value to get updated"); });