[Glimmer2] Cleanup input tests

This will supersedes emberjs#13222
chadhietala · Apr 26, 2016 · d65cf95 · d65cf95
1 parent 681401d
commit d65cf95
Showing 1 changed file with 58 additions and 17 deletions.
diff --git a/packages/ember-glimmer/tests/integration/input-test.js b/packages/ember-glimmer/tests/integration/input-test.js
@@ -1,13 +1,7 @@
 import { RenderingTest, moduleFor } from '../utils/test-case';
 import { set } from 'ember-metal/property_set';
 
-const camelizeMap = {
-  tabindex: 'tabIndex',
-  maxlength: 'maxLength'
-};
-
 moduleFor('Input element tests', class extends RenderingTest {
-
   runAttributeTest(attributeName, values) {
     let template = `<input ${attributeName}={{value}}>`;
     this.render(template, { value: values[0] });
@@ -23,16 +17,32 @@ moduleFor('Input element tests', class extends RenderingTest {
     this.assertAttributeHasValue(attributeName, values[0], `${attributeName} can be set back to the initial value`);
   }
 
+  runPropertyTest(propertyName, values) {
+    let attributeName = propertyName;
+    let template = `<input ${attributeName}={{value}}>`;
+    this.render(template, { value: values[0] });
+    this.assertPropertyHasValue(propertyName, values[0], `${propertyName} is set on initial render`);
+
+    this.runTask(() => this.rerender());
+    this.assertPropertyHasValue(propertyName, values[0], `${propertyName} is set on noop rerender`);
+
+    this.setComponentValue(values[1]);
+    this.assertPropertyHasValue(propertyName, values[1], `${propertyName} is set on rerender`);
+
+    this.setComponentValue(values[0]);
+    this.assertPropertyHasValue(propertyName, values[0], `${propertyName} can be set back to the initial value`);
+  }
+
   ['@test input disabled attribute']() {
-    this.runAttributeTest('disabled', [false, true]);
+    this.runPropertyTest('disabled', [false, true]);
   }
 
   ['@test input value attribute']() {
-    this.runAttributeTest('value', ['foo', 'bar']);
+    this.runPropertyTest('value', ['foo', 'bar']);
   }
 
-  ['@test input placeholder attribute']() {
-    this.runAttributeTest('placeholder', ['placeholder', 'facebolder']);
+  ['@htmlbars input placeholder attribute']() {
+    this.runAttributeTest('placeholder', ['foo', 'bar']);
   }
 
   ['@test input name attribute']() {
@@ -51,15 +61,20 @@ moduleFor('Input element tests', class extends RenderingTest {
     this.runAttributeTest('tabindex', [2, 3]);
   }
 
-  ['@test cursor position is not lost when updating content']() {
+  ['@htmlbars cursor position is not lost when updating content']() {
     let template = `<input value={{value}}>`;
     this.render(template, { value: 'hola' });
 
-    this.setDOMValue('hola');
+    this.setDOMValue('hello');
     this.setSelectionRange(1, 3);
 
-    this.setComponentValue('hola');
+    this.setComponentValue('hello');
+
     this.assertSelectionRange(1, 3);
+
+    // Note: We should eventually get around to testing reseting, however
+    // browsers handle `selectionStart` and `selectionEnd` differently
+    // when are synthetically testing movement of the cursor.
   }
 
   ['@test input can be updated multiple times']() {
@@ -79,6 +94,25 @@ moduleFor('Input element tests', class extends RenderingTest {
     this.assertValue('', 'Value is updated the second time');
   }
 
+  ['@skip DOM is SSOT if value is set']() {
+    let template = `<input value={{value}}>`;
+    this.render(template, { value: 'hola' });
+
+    this.assertValue('hola', 'Value is initialised');
+
+    this.setComponentValue('hello');
+
+    this.assertValue('hello', 'Value is initialised');
+
+    this.setDOMValue('hola');
+
+    this.assertValue('hola', 'DOM is used');
+
+    this.setComponentValue('hello');
+
+    this.assertValue('hola', 'DOM is used');
+  }
+
   // private helpers and assertions
   setDOMValue(value) {
     this.inputElement().value = value;
@@ -94,16 +128,23 @@ moduleFor('Input element tests', class extends RenderingTest {
   }
 
   inputElement() {
-    return this.element.querySelector('input');
+    return this.$inputElement()[0];
+  }
+
+  $inputElement() {
+    return this.$('input');
   }
 
   assertValue(value, message) {
-    this.assertAttributeHasValue('value', value, message);
+    this.assertPropertyHasValue('value', value, message);
   }
 
   assertAttributeHasValue(attribute, value, message) {
-    let camelized = camelizeMap[attribute] || attribute;
-    this.assert.equal(this.inputElement()[camelized], value, `${attribute} ${message}`);
+    this.assert.equal(this.$inputElement().attr(attribute), value, `${attribute} ${message}`);
+  }
+
+  assertPropertyHasValue(property, value, message) {
+    this.assert.equal(this.$inputElement().prop(property), value, `${property} ${message}`);
   }
 
   assertSelectionRange(start, end) {