test: rewrite async tests for nested sub-menu

vaadin · Mar 26, 2019 · 9092073 · 9092073
1 parent 561bb42
commit 9092073
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 30 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -11,5 +11,8 @@
   "globals": {
     "Polymer": false,
     "Vaadin": false
+  },
+  "parserOptions": {
+    "ecmaVersion": 2017
   }
 }
diff --git a/test/items.html b/test/items.html
@@ -45,6 +45,10 @@
         return menu.$.overlay.content.querySelector('vaadin-context-menu');
       };
 
+      const nextRender = el => new Promise(resolve => {
+        Polymer.RenderStatus.afterNextRender(el, () => resolve());
+      });
+
       afterEach(() => rootMenu.close());
 
       describe('default', () => {
@@ -132,8 +136,9 @@
             });
           });
 
-          it('should open the subMenu on the left if root menu is right-aligned', done => {
+          it('should open the subMenu on the left if root menu is right-aligned', async() => {
             subMenu.close();
+            await nextRender(subMenu);
             const rootItem = menuComponents()[0];
             const rootItemRect = rootItem.getBoundingClientRect();
             const rootOverlay = rootMenu.$.overlay;
@@ -142,19 +147,17 @@
             rootOverlay.setAttribute('right-aligned', '');
             const padding = parseFloat(getComputedStyle(rootOverlay.$.content).paddingLeft) * 2;
             open(rootItem);
-
-            Polymer.RenderStatus.afterNextRender(subMenu, () => {
-              expect(subMenu.$.overlay.hasAttribute('right-aligned')).to.be.true;
-              const rootMenuRect = rootOverlay.$.content.getBoundingClientRect();
-              const subMenuRect = subMenu.$.overlay.$.content.getBoundingClientRect();
-              expect(subMenuRect.right).to.be.closeTo(rootMenuRect.left + padding, 1);
-              done();
-            });
+            await nextRender(subMenu);
+            expect(subMenu.$.overlay.hasAttribute('right-aligned')).to.be.true;
+            const rootMenuRect = rootOverlay.$.content.getBoundingClientRect();
+            const subMenuRect = subMenu.$.overlay.$.content.getBoundingClientRect();
+            expect(subMenuRect.right).to.be.closeTo(rootMenuRect.left + padding, 1);
           });
 
-          it('should open the second subMenu on the right again if not enough space', done => {
+          it('should open the second subMenu on the right again if not enough space', async() => {
             let padding;
             subMenu.close();
+            await nextRender(subMenu);
             rootMenu.items[0].children[2].text = 'foo-0-2-longer';
 
             const rootItem = menuComponents()[0];
@@ -164,27 +167,25 @@
             rootOverlay.style.right = rootItemRect.width + 'px';
             rootOverlay.setAttribute('right-aligned', '');
             padding = parseFloat(getComputedStyle(rootOverlay.$.content).paddingLeft) * 2;
-            open(rootItem);
 
-            Polymer.RenderStatus.afterNextRender(subMenu, () => {
-              expect(subMenu.$.overlay.hasAttribute('right-aligned')).to.be.true;
-              const rootMenuRect = rootOverlay.$.content.getBoundingClientRect();
-              const subMenuRect = subMenu.$.overlay.$.content.getBoundingClientRect();
-              expect(subMenuRect.right).to.be.closeTo(rootMenuRect.left + padding, 1);
-
-              const nestedItem = menuComponents(subMenu)[2];
-              const nestedItemRect = nestedItem.getBoundingClientRect();
-              padding = parseFloat(getComputedStyle(subMenu.$.overlay.$.content).paddingLeft) * 2;
-              open(nestedItem);
-
-              Polymer.RenderStatus.afterNextRender(subMenu, () => {
-                const subMenu2 = getSubMenu(subMenu);
-                expect(subMenu2.$.overlay.hasAttribute('right-aligned')).to.be.false;
-                const subMenu2Rect = subMenu2.$.overlay.$.content.getBoundingClientRect();
-                expect(subMenu2Rect.left).to.be.closeTo(nestedItemRect.right, 1);
-                done();
-              });
-            });
+            /* first sub-menu right-aligned */
+            open(rootItem);
+            await nextRender(subMenu);
+            expect(subMenu.$.overlay.hasAttribute('right-aligned')).to.be.true;
+            const rootMenuRect = rootOverlay.$.content.getBoundingClientRect();
+            const subMenuRect = subMenu.$.overlay.$.content.getBoundingClientRect();
+            expect(subMenuRect.right).to.be.closeTo(rootMenuRect.left + padding, 1);
+
+            /* second sub-menu left-aligned */
+            const nestedItem = menuComponents(subMenu)[2];
+            const nestedItemRect = nestedItem.getBoundingClientRect();
+            padding = parseFloat(getComputedStyle(subMenu.$.overlay.$.content).paddingLeft) * 2;
+            open(nestedItem);
+            await nextRender(subMenu);
+            const subMenu2 = getSubMenu(subMenu);
+            expect(subMenu2.$.overlay.hasAttribute('right-aligned')).to.be.false;
+            const subMenu2Rect = subMenu2.$.overlay.$.content.getBoundingClientRect();
+            expect(subMenu2Rect.left).to.be.closeTo(nestedItemRect.right, 1);
           });
         }