Merge "Polymer 2: Fix tests"

polygerrit-ui/app/elements/admin/gr-repo/gr-repo_test.html

@@ -102,10 +102,12 @@ limitations under the License.
     const SCHEMES = {http: {}, repo: {}, ssh: {}};
 
     function getFormFields() {
-      const selects = Polymer.dom(element.root).querySelectorAll('select');
+      const selects = Array.from(
-      const textareas =
+          Polymer.dom(element.root).querySelectorAll('select'));
-          Polymer.dom(element.root).querySelectorAll('iron-autogrow-textarea');
+      const textareas = Array.from(
-      const inputs = Polymer.dom(element.root).querySelectorAll('input');
+          Polymer.dom(element.root).querySelectorAll('iron-autogrow-textarea'));
+      const inputs = Array.from(
+          Polymer.dom(element.root).querySelectorAll('input'));
       return inputs.concat(textareas).concat(selects);
     }
 

polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog_test.html

@@ -146,7 +146,8 @@ limitations under the License.
     });
 
     test('anchors use download attribute', () => {
-      const anchors = Polymer.dom(element.root).querySelectorAll('a');
+      const anchors = Array.from(
+          Polymer.dom(element.root).querySelectorAll('a'));
       assert.isTrue(!anchors.some(a => !a.hasAttribute('download')));
     });
 

polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row_test.html

@@ -267,7 +267,7 @@ limitations under the License.
       assert.isTrue(element.$$('iron-selector').hidden);
     });
 
-    test('asymetrical labels', () => {
+    test('asymetrical labels', done => {
       element.permittedLabels = {
         'Code-Review': [
           '-2',
@@ -281,30 +281,35 @@ limitations under the License.
           '+1',
         ],
       };
-      flushAsynchronousOperations();
+      flush(() => {
-      assert.strictEqual(element.$$('iron-selector')
+        assert.strictEqual(element.$$('iron-selector')
-          .items.length, 2);
+            .items.length, 2);
-      assert.strictEqual(Polymer.dom(element.root).
+        assert.strictEqual(
-          querySelectorAll('.placeholder').length, 3);
+            Polymer.dom(element.root).querySelectorAll('.placeholder').length,
+            3);
 
-      element.permittedLabels = {
+        element.permittedLabels = {
-        'Code-Review': [
+          'Code-Review': [
-          ' 0',
+            ' 0',
-          '+1',
+            '+1',
-        ],
+          ],
-        'Verified': [
+          'Verified': [
-          '-2',
+            '-2',
-          '-1',
+            '-1',
-          ' 0',
+            ' 0',
-          '+1',
+            '+1',
-          '+2',
+            '+2',
-        ],
+          ],
-      };
+        };
-      flushAsynchronousOperations();
+        flush(() => {
-      assert.strictEqual(element.$$('iron-selector')
+          assert.strictEqual(element.$$('iron-selector')
-          .items.length, 5);
+              .items.length, 5);
-      assert.strictEqual(Polymer.dom(element.root).
+          assert.strictEqual(
-          querySelectorAll('.placeholder').length, 0);
+              Polymer.dom(element.root).querySelectorAll('.placeholder').length,
+              0);
+          done();
+        });
+      });
     });
 
     test('default_value', () => {

polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_test.html

@@ -277,17 +277,19 @@ limitations under the License.
       });
     });
 
-    test('setlabelValue', () => {
+    test('setlabelValue', done => {
       element._account = {_account_id: 1};
-      flushAsynchronousOperations();
+      flush(() => {
-      const label = 'Verified';
+        const label = 'Verified';
-      const value = '+1';
+        const value = '+1';
-      element.setLabelValue(label, value);
+        element.setLabelValue(label, value);
-      flushAsynchronousOperations();
+
-      const labels = element.$.labelScores.getLabelValues();
+        const labels = element.$.labelScores.getLabelValues();
-      assert.deepEqual(labels, {
+        assert.deepEqual(labels, {
-        'Code-Review': 0,
+          'Code-Review': 0,
-        'Verified': 1,
+          'Verified': 1,
+        });
+        done();
       });
     });
 
@@ -310,6 +312,26 @@ limitations under the License.
       });
     }
 
+    function isFocusInsideElement(element) {
+      // In Polymer 2 focused element either <paper-input> or nested
+      // native input <input> element depending on the current focus
+      // in browser window.
+      // For example, the focus is changed if the developer console
+      // get a focus.
+      let activeElement = getActiveElement();
+      while (activeElement) {
+        if (activeElement === element) {
+          return true;
+        }
+        if (activeElement.parentElement) {
+          activeElement = activeElement.parentElement;
+        } else {
+          activeElement = activeElement.getRootNode().host;
+        }
+      }
+      return false;
+    }
+
     function testConfirmationDialog(done, cc) {
       const yesButton =
           element.$$('.reviewerConfirmationButtons gr-button:first-child');
@@ -363,7 +385,8 @@ limitations under the License.
         assert.isFalse(isVisible(element.$.reviewerConfirmationOverlay));
 
         // We should be focused on account entry input.
-        assert.equal(getActiveElement().id, 'input');
+        assert.isTrue(
+            isFocusInsideElement(element.$.reviewers.$.entry.$.input.$.input));
 
         // No reviewer/CC should have been added.
         assert.equal(element.$$('#ccs').additions().length, 0);
@@ -408,7 +431,13 @@ limitations under the License.
             ]);
 
         // We should be focused on account entry input.
-        assert.equal(getActiveElement().id, 'input');
+        if (cc) {
+          assert.isTrue(
+              isFocusInsideElement(element.$.ccs.$.entry.$.input.$.input));
+        } else {
+          assert.isTrue(
+              isFocusInsideElement(element.$.reviewers.$.entry.$.input.$.input));
+        }
       }).then(done);
     }
 

polygerrit-ui/app/elements/plugins/gr-endpoint-decorator/gr-endpoint-decorator_test.html

@@ -88,7 +88,7 @@ limitations under the License.
     test('decoration', () => {
       const element =
           container.querySelector('gr-endpoint-decorator[name="first"]');
-      const modules = Polymer.dom(element.root).children.filter(
+      const modules = Array.from(Polymer.dom(element.root).children).filter(
           element => element.nodeName === 'SOME-MODULE');
       assert.equal(modules.length, 1);
       const [module] = modules;
@@ -105,7 +105,7 @@ limitations under the License.
     test('replacement', () => {
       const element =
           container.querySelector('gr-endpoint-decorator[name="second"]');
-      const module = Polymer.dom(element.root).children.find(
+      const module = Array.from(Polymer.dom(element.root).children).find(
           element => element.nodeName === 'OTHER-MODULE');
       assert.isOk(module);
       assert.equal(module['someparam'], 'foofoo');
@@ -122,7 +122,7 @@ limitations under the License.
       flush(() => {
         const element =
             container.querySelector('gr-endpoint-decorator[name="banana"]');
-        const module = Polymer.dom(element.root).children.find(
+        const module = Array.from(Polymer.dom(element.root).children).find(
             element => element.nodeName === 'NOOB-NOOB');
         assert.isOk(module);
         done();
@@ -135,10 +135,10 @@ limitations under the License.
       flush(() => {
         const element =
             container.querySelector('gr-endpoint-decorator[name="banana"]');
-        const module1 = Polymer.dom(element.root).children.find(
+        const module1 = Array.from(Polymer.dom(element.root).children).find(
             element => element.nodeName === 'MOD-ONE');
         assert.isOk(module1);
-        const module2 = Polymer.dom(element.root).children.find(
+        const module2 = Array.from(Polymer.dom(element.root).children).find(
             element => element.nodeName === 'MOD-TWO');
         assert.isOk(module2);
         done();
@@ -152,14 +152,14 @@ limitations under the License.
       param['value'] = undefined;
       plugin.registerCustomComponent('banana', 'noob-noob');
       flush(() => {
-        let module = Polymer.dom(element.root).children.find(
+        let module = Array.from(Polymer.dom(element.root).children).find(
             element => element.nodeName === 'NOOB-NOOB');
         // Module waits for param to be defined.
         assert.isNotOk(module);
         const value = {abc: 'def'};
         param.value = value;
         flush(() => {
-          module = Polymer.dom(element.root).children.find(
+          module = Array.from(Polymer.dom(element.root).children).find(
               element => element.nodeName === 'NOOB-NOOB');
           assert.isOk(module);
           assert.strictEqual(module['someParam'], value);
@@ -177,7 +177,7 @@ limitations under the License.
       param.value = value1;
       plugin.registerCustomComponent('banana', 'noob-noob');
       flush(() => {
-        const module = Polymer.dom(element.root).children.find(
+        const module = Array.from(Polymer.dom(element.root).children).find(
             element => element.nodeName === 'NOOB-NOOB');
         assert.strictEqual(module['someParam'], value1);
         param.value = value2;

polygerrit-ui/app/elements/settings/gr-group-list/gr-group-list_test.html

@@ -73,7 +73,8 @@ limitations under the License.
     teardown(() => { sandbox.restore(); });
 
     test('renders', () => {
-      const rows = Polymer.dom(element.root).querySelectorAll('tbody tr');
+      const rows = Array.from(
+          Polymer.dom(element.root).querySelectorAll('tbody tr'));
 
       assert.equal(rows.length, 3);
 

polygerrit-ui/app/elements/settings/gr-identities/gr-identities_test.html

@@ -71,7 +71,8 @@ limitations under the License.
     });
 
     test('renders', () => {
-      const rows = Polymer.dom(element.root).querySelectorAll('tbody tr');
+      const rows = Array.from(
+          Polymer.dom(element.root).querySelectorAll('tbody tr'));
 
       assert.equal(rows.length, 2);
 
@@ -84,7 +85,8 @@ limitations under the License.
     });
 
     test('renders email', () => {
-      const rows = Polymer.dom(element.root).querySelectorAll('tbody tr');
+      const rows = Array.from(
+          Polymer.dom(element.root).querySelectorAll('tbody tr'));
 
       assert.equal(rows.length, 2);
 

polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor_test.html

@@ -57,7 +57,7 @@ limitations under the License.
       MockInteractions.tap(button);
     }
 
-    setup(() => {
+    setup(done => {
       element = fixture('basic');
       menu = [
         {url: '/first/url', name: 'first name', target: '_blank'},
@@ -66,6 +66,7 @@ limitations under the License.
       ];
       element.set('menuItems', menu);
       Polymer.dom.flush();
+      flush(done);
     });
 
     test('renders', () => {

polygerrit-ui/app/elements/settings/gr-watched-projects-editor/gr-watched-projects-editor_test.html

@@ -189,6 +189,7 @@ limitations under the License.
       element.$.newProject.value = {id: 'project b'};
       element.$.newProject.setText('project b');
       element.$.newFilter.bindValue = 'filter 1';
+      element.$.newFilter.value = 'filter 1';
 
       element._handleAddProject();
 

polygerrit-ui/app/elements/shared/gr-avatar/gr-avatar_test.html

@@ -129,14 +129,31 @@ limitations under the License.
             element.style.backgroundImage.includes('/accounts/123/avatar?s=64'));
       });
     });
+  });
+
+  suite('plugin has avatars', () => {
+    let element;
+    let sandbox;
+
+    setup(() => {
+      sandbox = sinon.sandbox.create();
+
+      stub('gr-avatar', {
+        _getConfig: () => {
+          return Promise.resolve({plugin: {has_avatars: true}});
+        },
+      });
+
+      element = fixture('basic');
+    });
+
+    teardown(() => {
+      sandbox.restore();
+    });
 
     test('dom for non available account', () => {
       assert.isFalse(element.hasAttribute('hidden'));
 
-      sandbox.stub(element, '_getConfig', () => {
-        return Promise.resolve({plugin: {has_avatars: true}});
-      });
-
       // Emulate plugins loaded.
       Gerrit._setPluginsPending([]);
 
@@ -149,45 +166,45 @@ limitations under the License.
         assert.strictEqual(element.style.backgroundImage, '');
       });
     });
+  });
 
-    test('avatar config not set and account not set', () => {
+  suite('config not set', () => {
-      assert.isFalse(element.hasAttribute('hidden'));
+    let element;
+    let sandbox;
 
-      sandbox.stub(element, '_getConfig', () => {
+    setup(() => {
-        return Promise.resolve({});
+      sandbox = sinon.sandbox.create();
+
+      stub('gr-avatar', {
+        _getConfig: () => {
+          return Promise.resolve({});
+        },
       });
 
-      // Emulate plugins loaded.
+      element = fixture('basic');
-      Gerrit._setPluginsPending([]);
-
-      return Promise.all([
-        element.$.restAPI.getConfig(),
-        Gerrit.awaitPluginsLoaded(),
-      ]).then(() => {
-        assert.isTrue(element.hasAttribute('hidden'));
-      });
     });
 
-    test('avatar config not set and account set', () => {
+    teardown(() => {
-      assert.isFalse(element.hasAttribute('hidden'));
+      sandbox.restore();
+    });
 
-      sandbox.stub(element, '_getConfig', () => {
+    test('avatar hidden when account set', () => {
-        return Promise.resolve({});
+      flush(() => {
-      });
+        assert.isFalse(element.hasAttribute('hidden'));
 
-      element.imageSize = 64;
+        element.imageSize = 64;
-      element.account = {
+        element.account = {
-        _account_id: 123,
+          _account_id: 123,
-      };
+        };
+        // Emulate plugins loaded.
+        Gerrit._setPluginsPending([]);
 
-      // Emulate plugins loaded.
+        return Promise.all([
-      Gerrit._setPluginsPending([]);
+          element.$.restAPI.getConfig(),
-
+          Gerrit.awaitPluginsLoaded(),
-      return Promise.all([
+        ]).then(() => {
-        element.$.restAPI.getConfig(),
+          assert.isTrue(element.hasAttribute('hidden'));
-        Gerrit.awaitPluginsLoaded(),
+        });
-      ]).then(() => {
-        assert.isTrue(element.hasAttribute('hidden'));
       });
     });
   });

polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard_test.html

@@ -39,12 +39,13 @@ limitations under the License.
     let element;
     let sandbox;
 
-    setup(() => {
+    setup(done => {
       sandbox = sinon.sandbox.create();
       element = fixture('basic');
       element.text = `git fetch http://gerrit@localhost:8080/a/test-project
           refs/changes/05/5/1 && git checkout FETCH_HEAD`;
       flushAsynchronousOperations();
+      flush(done);
     });
 
     teardown(() => {

polygerrit-ui/app/elements/shared/gr-download-commands/gr-download-commands_test.html

@@ -67,12 +67,13 @@ limitations under the License.
     });
 
     suite('unauthenticated', () => {
-      setup(() => {
+      setup(done => {
         element = fixture('basic');
         element.schemes = SCHEMES;
         element.commands = COMMANDS;
         element.selectedScheme = SELECTED_SCHEME;
         flushAsynchronousOperations();
+        flush(done);
       });
 
       test('focusOnCopy', () => {
@@ -91,13 +92,13 @@ limitations under the License.
         assert.isTrue(isHidden(element.$$('.commands')));
       });
 
-      test('tab selection', () => {
+      test('tab selection', done => {
         assert.equal(element.$.downloadTabs.selected, '0');
         MockInteractions.tap(element.$$('[data-scheme="ssh"]'));
         flushAsynchronousOperations();
-
         assert.equal(element.selectedScheme, 'ssh');
         assert.equal(element.$.downloadTabs.selected, '2');
+        done();
       });
 
       test('loads scheme from preferences', done => {

polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list_test.html

@@ -94,77 +94,79 @@ limitations under the License.
       ];
       assert.equal(element.$$('paper-listbox').selected, element.value);
       assert.equal(element.text, 'Button Text 2');
-      flushAsynchronousOperations();
+      flush(() => {
-      const items = Polymer.dom(element.root).querySelectorAll('paper-item');
+        const items = Polymer.dom(element.root).querySelectorAll('paper-item');
-      const mobileItems = Polymer.dom(element.root).querySelectorAll('option');
+        const mobileItems = Polymer.dom(element.root).querySelectorAll('option');
-      assert.equal(items.length, 3);
+        assert.equal(items.length, 3);
-      assert.equal(mobileItems.length, 3);
+        assert.equal(mobileItems.length, 3);
 
-      // First Item
+        // First Item
-      // The first item should be disabled, has no bottom text, and no date.
+        // The first item should be disabled, has no bottom text, and no date.
-      assert.isFalse(!!items[0].disabled);
+        assert.isFalse(!!items[0].disabled);
-      assert.isFalse(mobileItems[0].disabled);
+        assert.isFalse(mobileItems[0].disabled);
-      assert.isFalse(items[0].classList.contains('iron-selected'));
+        assert.isFalse(items[0].classList.contains('iron-selected'));
-      assert.isFalse(mobileItems[0].selected);
+        assert.isFalse(mobileItems[0].selected);
 
-      assert.isNotOk(Polymer.dom(items[0]).querySelector('gr-date-formatter'));
+        assert.isNotOk(Polymer.dom(items[0]).querySelector('gr-date-formatter'));
-      assert.isNotOk(Polymer.dom(items[0]).querySelector('.bottomContent'));
+        assert.isNotOk(Polymer.dom(items[0]).querySelector('.bottomContent'));
-      assert.equal(items[0].value, element.items[0].value);
+        assert.equal(items[0].value, element.items[0].value);
-      assert.equal(mobileItems[0].value, element.items[0].value);
+        assert.equal(mobileItems[0].value, element.items[0].value);
-      assert.equal(Polymer.dom(items[0]).querySelector('.topContent div')
+        assert.equal(Polymer.dom(items[0]).querySelector('.topContent div')
-          .innerText, element.items[0].text);
+            .innerText, element.items[0].text);
 
-      // Since no mobile specific text, it should fall back to text.
+        // Since no mobile specific text, it should fall back to text.
-      assert.equal(mobileItems[0].text, element.items[0].text);
+        assert.equal(mobileItems[0].text, element.items[0].text);
 
 
-      // Second Item
+        // Second Item
-      // The second item should have top text, bottom text, and no date.
+        // The second item should have top text, bottom text, and no date.
-      assert.isFalse(!!items[1].disabled);
+        assert.isFalse(!!items[1].disabled);
-      assert.isFalse(mobileItems[1].disabled);
+        assert.isFalse(mobileItems[1].disabled);
-      assert.isTrue(items[1].classList.contains('iron-selected'));
+        assert.isTrue(items[1].classList.contains('iron-selected'));
-      assert.isTrue(mobileItems[1].selected);
+        assert.isTrue(mobileItems[1].selected);
 
-      assert.isNotOk(Polymer.dom(items[1]).querySelector('gr-date-formatter'));
+        assert.isNotOk(Polymer.dom(items[1]).querySelector('gr-date-formatter'));
-      assert.isOk(Polymer.dom(items[1]).querySelector('.bottomContent'));
+        assert.isOk(Polymer.dom(items[1]).querySelector('.bottomContent'));
-      assert.equal(items[1].value, element.items[1].value);
+        assert.equal(items[1].value, element.items[1].value);
-      assert.equal(mobileItems[1].value, element.items[1].value);
+        assert.equal(mobileItems[1].value, element.items[1].value);
-      assert.equal(Polymer.dom(items[1]).querySelector('.topContent div')
+        assert.equal(Polymer.dom(items[1]).querySelector('.topContent div')
-          .innerText, element.items[1].text);
+            .innerText, element.items[1].text);
 
-      // Since there is mobile specific text, it should that.
+        // Since there is mobile specific text, it should that.
-      assert.equal(mobileItems[1].text, element.items[1].mobileText);
+        assert.equal(mobileItems[1].text, element.items[1].mobileText);
 
-      // Since this item is selected, and it has triggerText defined, that
+        // Since this item is selected, and it has triggerText defined, that
-      // should be used.
+        // should be used.
-      assert.equal(element.text, element.items[1].triggerText);
+        assert.equal(element.text, element.items[1].triggerText);
 
-      // Third item
+        // Third item
-      // The third item should be disabled, and have a date, and bottom content.
+        // The third item should be disabled, and have a date, and bottom content.
-      assert.isTrue(!!items[2].disabled);
+        assert.isTrue(!!items[2].disabled);
-      assert.isTrue(mobileItems[2].disabled);
+        assert.isTrue(mobileItems[2].disabled);
-      assert.isFalse(items[2].classList.contains('iron-selected'));
+        assert.isFalse(items[2].classList.contains('iron-selected'));
-      assert.isFalse(mobileItems[2].selected);
+        assert.isFalse(mobileItems[2].selected);
 
-      assert.isOk(Polymer.dom(items[2]).querySelector('gr-date-formatter'));
+        assert.isOk(Polymer.dom(items[2]).querySelector('gr-date-formatter'));
-      assert.isOk(Polymer.dom(items[2]).querySelector('.bottomContent'));
+        assert.isOk(Polymer.dom(items[2]).querySelector('.bottomContent'));
-      assert.equal(items[2].value, element.items[2].value);
+        assert.equal(items[2].value, element.items[2].value);
-      assert.equal(mobileItems[2].value, element.items[2].value);
+        assert.equal(mobileItems[2].value, element.items[2].value);
-      assert.equal(Polymer.dom(items[2]).querySelector('.topContent div')
+        assert.equal(Polymer.dom(items[2]).querySelector('.topContent div')
-          .innerText, element.items[2].text);
+            .innerText, element.items[2].text);
 
-      // Since there is mobile specific text, it should that.
+        // Since there is mobile specific text, it should that.
-      assert.equal(mobileItems[2].text, element.items[2].mobileText);
+        assert.equal(mobileItems[2].text, element.items[2].mobileText);
 
-      // Select a new item.
+        // Select a new item.
-      MockInteractions.tap(items[0]);
+        MockInteractions.tap(items[0]);
-      flushAsynchronousOperations();
+        flushAsynchronousOperations();
-      assert.equal(element.value, 1);
+        assert.equal(element.value, 1);
-      assert.isTrue(items[0].classList.contains('iron-selected'));
+        assert.isTrue(items[0].classList.contains('iron-selected'));
-      assert.isTrue(mobileItems[0].selected);
+        assert.isTrue(mobileItems[0].selected);
 
-      // Since no triggerText, the fallback is used.
+        // Since no triggerText, the fallback is used.
-      assert.equal(element.text, element.items[0].text);
+        assert.equal(element.text, element.items[0].text);
+        done();
+      });
     });
   });
 </script>

polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_test.html

@@ -61,13 +61,16 @@ limitations under the License.
     let label;
     let sandbox;
 
-    setup(() => {
+    setup(done => {
       element = fixture('basic');
       elementNoPlaceholder = fixture('no-placeholder');
 
-      input = element.$.input.$.input;
       label = element.$$('label');
       sandbox = sinon.sandbox.create();
+      flush(() => {
+        input = element.$.input.inputElement;
+        done();
+      });
     });
 
     teardown(() => {
@@ -79,7 +82,7 @@ limitations under the License.
       assert.isFalse(element.$.dropdown.opened);
       assert.isTrue(label.classList.contains('editable'));
       assert.equal(label.textContent, 'value text');
-      const focusSpy = sandbox.spy(element.$.input.$.input, 'focus');
+      const focusSpy = sandbox.spy(input, 'focus');
       const showSpy = sandbox.spy(element, '_showDropdown');
 
       MockInteractions.tap(label);

polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-annotation-actions-context_test.html

@@ -56,6 +56,7 @@ limitations under the License.
       el.setAttribute('data-side', 'right');
       lineNumberEl = document.createElement('td');
       lineNumberEl.classList.add('right');
+      document.body.appendChild(el);
       instance = new GrAnnotationActionsContext(
           el, lineNumberEl, line, 'dummy/path', '123', '1');
     });

polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea_test.html

@@ -33,6 +33,18 @@ limitations under the License.
   </template>
 </test-fixture>
 
+<test-fixture id="monospace">
+  <template>
+    <gr-textarea monospace="true"></gr-textarea>
+  </template>
+</test-fixture>
+
+<test-fixture id="hideBorder">
+  <template>
+    <gr-textarea hide-border="true"></gr-textarea>
+  </template>
+</test-fixture>
+
 <script>
   suite('gr-textarea tests', () => {
     let element;
@@ -49,16 +61,10 @@ limitations under the License.
 
     test('monospace is set properly', () => {
       assert.isFalse(element.classList.contains('monospace'));
-      element.monospace = true;
-      element.ready();
-      assert.isTrue(element.classList.contains('monospace'));
     });
 
     test('hideBorder is set properly', () => {
       assert.isFalse(element.$.textarea.classList.contains('noBorder'));
-      element.hideBorder = true;
-      element.ready();
-      assert.isTrue(element.$.textarea.classList.contains('noBorder'));
     });
 
     test('emoji selector is not open with the textarea lacks focus', () => {
@@ -235,4 +241,52 @@ limitations under the License.
       });
     });
   });
+
+  suite('gr-textarea monospace', () => {
+    // gr-textarea set monospace class in the ready() method.
+    // In Polymer2, ready() is called from the fixture(...) method,
+    // If ready() is called again later, some nested elements doesn't
+    // handle it correctly. A separate test-fixture is used to set
+    // properties before ready() is called.
+
+    let element;
+    let sandbox;
+
+    setup(() => {
+      sandbox = sinon.sandbox.create();
+      element = fixture('monospace');
+    });
+
+    teardown(() => {
+      sandbox.restore();
+    });
+
+    test('monospace is set properly', () => {
+      assert.isTrue(element.classList.contains('monospace'));
+    });
+  });
+
+  suite('gr-textarea hideBorder', () => {
+    // gr-textarea set noBorder class in the ready() method.
+    // In Polymer2, ready() is called from the fixture(...) method,
+    // If ready() is called again later, some nested elements doesn't
+    // handle it correctly. A separate test-fixture is used to set
+    // properties before ready() is called.
+
+    let element;
+    let sandbox;
+
+    setup(() => {
+      sandbox = sinon.sandbox.create();
+      element = fixture('hideBorder');
+    });
+
+    teardown(() => {
+      sandbox.restore();
+    });
+
+    test('hideBorder is set properly', () => {
+      assert.isTrue(element.$.textarea.classList.contains('noBorder'));
+    });
+  });
 </script>