fix: flush to make textContent work with ShadyDOM (#138)

vaadin · Jan 8, 2020 · 9b0c1ac · 9b0c1ac
1 parent a992292
commit 9b0c1ac
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 1 deletion.
diff --git a/src/vaadin-button.html b/src/vaadin-button.html
@@ -147,6 +147,9 @@
           this.$.button.setAttribute('role', 'presentation');
 
           this._addActiveListeners();
+
+          // Fix for https://github.com/vaadin/vaadin-button-flow/issues/120
+          window.ShadyDOM && window.ShadyDOM.flush();
         }
 
         /**

diff --git a/test/button-in-template.html b/test/button-in-template.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-button tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../vaadin-button.html">
+</head>
+<body>
+  <test-fixture id="wrapped-button">
+    <template>
+      <button-test></button-test>
+    </template>
+  </test-fixture>
+  <script>
+    customElements.whenDefined('vaadin-button').then(() => {
+      class ButtonTest extends Polymer.Element {
+        static get template() {
+          return Polymer.html`
+          <vaadin-button id="button">Old text</vaadin-button>
+          `;
+        }
+        ready() {
+          super.ready();
+          this.$.button.textContent = 'New text';
+        }
+      }
+      customElements.define('button-test', ButtonTest);
+    });
+    describe('vaadin-button in template', () => {
+      it('should flush in ready callback and update inner text', () => {
+        const wrapper = fixture('wrapped-button');
+        expect(wrapper.$.button.innerText.trim()).to.equal('New text');
+      });
+    });
+  </script>
+  </body>
diff --git a/test/test-suites.js b/test/test-suites.js
@@ -1,3 +1,4 @@
 window.VaadinButtonSuites = [
-  'vaadin-button_test.html'
+  'vaadin-button_test.html',
+  'button-in-template.html'
 ];