1 files changed, 140 insertions, 35 deletions
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_test.html b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_test.html
index 42770aa289..ec5b64a0e5 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_test.html
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_test.html
@@ -20,6 +20,7 @@ limitations under the License.
 
 <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
 <script src="../../../bower_components/web-component-tester/browser.js"></script>
+<link rel="import" href="../../../test/common-test-setup.html"/>
 <script src="../../../bower_components/iron-test-helpers/mock-interactions.js"></script>
 
 <link rel="import" href="gr-editable-label.html">
@@ -34,6 +35,12 @@ limitations under the License.
   </template>
 </test-fixture>
 
+<test-fixture id="no-placeholder">
+  <template>
+    <gr-editable-label value=""></gr-editable-label>
+  </template>
+</test-fixture>
+
 <test-fixture id="read-only">
   <template>
     <gr-editable-label
@@ -44,88 +51,186 @@ limitations under the License.
 </test-fixture>
 
 <script>
-  suite('gr-editable-label tests', function() {
-    var element;
-    var input;
-    var label;
-
-    setup(function() {
+  suite('gr-editable-label tests', () => {
+    let element;
+    let elementNoPlaceholder;
+    let input;
+    let label;
+    let sandbox;
+
+    setup(() => {
       element = fixture('basic');
+      elementNoPlaceholder = fixture('no-placeholder');
 
-      input = element.$$('input');
+      input = element.$.input.$.input;
       label = element.$$('label');
+      sandbox = sinon.sandbox.create();
     });
 
-    test('element render', function() {
-      // The input is hidden and the label is visible:
-      assert.isNotNull(input.getAttribute('hidden'));
-      assert.isNull(label.getAttribute('hidden'));
+    teardown(() => {
+      sandbox.restore();
+    });
 
+    test('element render', () => {
+      // The dropdown is closed and the label is visible:
+      assert.isFalse(element.$.dropdown.opened);
       assert.isTrue(label.classList.contains('editable'));
-
       assert.equal(label.textContent, 'value text');
 
       MockInteractions.tap(label);
 
       Polymer.dom.flush();
 
-      // The input is visible and the label is hidden:
-      assert.isNull(input.getAttribute('hidden'));
-      assert.isNotNull(label.getAttribute('hidden'));
-
+      // The dropdown is open (which covers up the label):
+      assert.isTrue(element.$.dropdown.opened);
       assert.equal(input.value, 'value text');
     });
 
-    test('edit value', function(done) {
-      var editedStub = sinon.stub();
+    test('title with placeholder', done => {
+      assert.equal(element.title, 'value text');
+      element.value = '';
+
+      element.async(() => {
+        assert.equal(element.title, 'label text');
+        done();
+      });
+    });
+
+    test('title without placeholder', done => {
+      assert.equal(elementNoPlaceholder.title, '');
+      element.value = 'value text';
+
+      element.async(() => {
+        assert.equal(element.title, 'value text');
+        done();
+      });
+    });
+
+    test('edit value', done => {
+      const editedStub = sandbox.stub();
       element.addEventListener('changed', editedStub);
+      assert.isFalse(element.editing);
 
       MockInteractions.tap(label);
 
       Polymer.dom.flush();
 
+      assert.isTrue(element.editing);
       element._inputText = 'new text';
 
       assert.isFalse(editedStub.called);
 
-      element.async(function() {
+      element.async(() => {
         assert.isTrue(editedStub.called);
         assert.equal(input.value, 'new text');
+        assert.isFalse(element.editing);
         done();
       });
 
       // Press enter:
       MockInteractions.keyDownOn(input, 13);
     });
+
+    test('save button', done => {
+      const editedStub = sandbox.stub();
+      element.addEventListener('changed', editedStub);
+      assert.isFalse(element.editing);
+
+      MockInteractions.tap(label);
+
+      Polymer.dom.flush();
+
+      assert.isTrue(element.editing);
+      element._inputText = 'new text';
+
+      assert.isFalse(editedStub.called);
+
+      element.async(() => {
+        assert.isTrue(editedStub.called);
+        assert.equal(input.value, 'new text');
+        assert.isFalse(element.editing);
+        done();
+      });
+
+      // Press enter:
+      MockInteractions.tap(element.$.saveBtn, 13);
+    });
+
+
+    test('edit and then escape key', done => {
+      const editedStub = sandbox.stub();
+      element.addEventListener('changed', editedStub);
+      assert.isFalse(element.editing);
+
+      MockInteractions.tap(label);
+
+      Polymer.dom.flush();
+
+      assert.isTrue(element.editing);
+      element._inputText = 'new text';
+
+      assert.isFalse(editedStub.called);
+
+      element.async(() => {
+        assert.isFalse(editedStub.called);
+        // Text changes sould be discarded.
+        assert.equal(input.value, 'value text');
+        assert.isFalse(element.editing);
+        done();
+      });
+
+      // Press escape:
+      MockInteractions.keyDownOn(input, 27);
+    });
+
+    test('cancel button', done => {
+      const editedStub = sandbox.stub();
+      element.addEventListener('changed', editedStub);
+      assert.isFalse(element.editing);
+
+      MockInteractions.tap(label);
+
+      Polymer.dom.flush();
+
+      assert.isTrue(element.editing);
+      element._inputText = 'new text';
+
+      assert.isFalse(editedStub.called);
+
+      element.async(() => {
+        assert.isFalse(editedStub.called);
+        // Text changes sould be discarded.
+        assert.equal(input.value, 'value text');
+        assert.isFalse(element.editing);
+        done();
+      });
+
+      // Press escape:
+      MockInteractions.tap(element.$.cancelBtn);
+    });
   });
 
-  suite('gr-editable-label read-only tests', function() {
-    var element;
-    var input;
-    var label;
+  suite('gr-editable-label read-only tests', () => {
+    let element;
+    let label;
 
-    setup(function() {
+    setup(() => {
       element = fixture('read-only');
-
-      input = element.$$('input');
       label = element.$$('label');
     });
 
-    test('disallows edit when read-only', function() {
-      // The input is hidden and the label is visible:
-      assert.isNotNull(input.getAttribute('hidden'));
-      assert.isNull(label.getAttribute('hidden'));
-
+    test('disallows edit when read-only', () => {
+      // The dropdown is closed.
+      assert.isFalse(element.$.dropdown.opened);
       MockInteractions.tap(label);
 
       Polymer.dom.flush();
 
-      // The input is still hidden and the label is still visible:
-      assert.isNotNull(input.getAttribute('hidden'));
-      assert.isNull(label.getAttribute('hidden'));
+      // The dropdown is still closed.
+      assert.isFalse(element.$.dropdown.opened);
     });
 
-    test('label is not marked as editable', function() {
+    test('label is not marked as editable', () => {
       assert.isFalse(label.classList.contains('editable'));
     });
   });