Merge pull request #11396 from cibernox/make-ember-checkbox-a-component

Make Ember.Checkbox extend from Ember.Component
emberjs · Jun 10, 2015 · 3189a1e · 3189a1e
2 parents 2aefbac + e271685
commit 3189a1e
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 57 deletions.
diff --git 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
@@ -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");
 });