test: use vaadin testing helpers

Author: web-padawan

packages/vaadin-context-menu/package.json

@@ -67,9 +67,8 @@
   "devDependencies": {
     "@esm-bundle/chai": "^4.1.5",
     "@open-wc/rollup-plugin-html": "^1.2.5",
-    "@open-wc/testing-helpers": "^1.8.12",
     "@polymer/iron-component-page": "^4.0.0",
-    "@polymer/iron-test-helpers": "^3.0.0",
+    "@vaadin/testing-helpers": "^0.1.3",
     "@web/dev-server": "^0.1.5",
     "@web/test-runner": "^0.12.7",
     "@web/test-runner-saucelabs": "^0.4.1",

packages/vaadin-context-menu/test/common.js

@@ -1,10 +1,9 @@
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
-import { fixtureSync } from '@open-wc/testing-helpers';
+import { fixtureSync, fire } from '@vaadin/testing-helpers';
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 import '@vaadin/vaadin-list-box/vaadin-list-box.js';
 import '@vaadin/vaadin-item/vaadin-item.js';
-import { fire } from './common.js';
 import './not-animated-styles.js';
 import '../vaadin-context-menu.js';
 

packages/vaadin-context-menu/test/context.test.js

@@ -1,6 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync } from '@open-wc/testing-helpers';
-import { isIOS } from './common.js';
+import { fixtureSync, isIOS } from '@vaadin/testing-helpers';
 import '../src/vaadin-device-detector.js';
 
 describe('device detector', () => {

packages/vaadin-context-menu/test/device-detector.test.js

@@ -1,8 +1,6 @@
 import { expect } from '@esm-bundle/chai';
-import { aTimeout, fixtureSync } from '@open-wc/testing-helpers';
-import { makeSoloTouchEvent, tap } from '@polymer/iron-test-helpers/mock-interactions.js';
+import { aTimeout, click, fixtureSync, isIOS, makeSoloTouchEvent } from '@vaadin/testing-helpers';
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { isIOS } from './common.js';
 import './not-animated-styles.js';
 import '../vaadin-context-menu.js';
 
@@ -34,7 +32,7 @@ describe('integration', () => {
   });
 
   it('should open context menu on .open(e)', () => {
-    tap(button);
+    click(button);
     expect(menu.opened).to.eql(true);
   });
 

packages/vaadin-context-menu/test/integration.test.js

@@ -1,8 +1,16 @@
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
-import { fixtureSync, nextFrame } from '@open-wc/testing-helpers';
-import { fire, isIOS } from './common.js';
-import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
+import {
+  arrowDownKeyDown,
+  arrowUpKeyDown,
+  enterKeyDown,
+  fire,
+  fixtureSync,
+  isIOS,
+  nextFrame,
+  nextRender,
+  spaceKeyDown
+} from '@vaadin/testing-helpers';
 import '@vaadin/vaadin-list-box/vaadin-list-box.js';
 import '@vaadin/vaadin-item/vaadin-item.js';
 import './not-animated-styles.js';
@@ -29,11 +37,6 @@ describe('items', () => {
     return menu.$.overlay.content.querySelector('vaadin-context-menu');
   };
 
-  const nextRender = (el) =>
-    new Promise((resolve) => {
-      afterNextRender(el, () => resolve());
-    });
-
   afterEach(() => {
     rootMenu.close();
   });
@@ -119,7 +122,6 @@ describe('items', () => {
       rootMenu.$.overlay.style.bottom = rootItemRect.height * 2 + 'px';
       rootMenu.$.overlay.setAttribute('bottom-aligned', '');
       open(menuComponents()[0]);
-
       await nextRender(subMenu);
       const rootMenuRect = rootMenu.$.overlay.getBoundingClientRect();
       const subMenuRect = subMenu.$.overlay.getBoundingClientRect();
@@ -314,13 +316,13 @@ describe('items', () => {
 
     it('should open item on enter', () => {
       subMenu.close();
-      fire(menuComponents()[0], 'keydown', {}, { keyCode: 13, key: 'Enter' });
+      enterKeyDown(menuComponents()[0]);
       expect(subMenu.opened).to.be.true;
     });
 
     it('should open item on space', () => {
       subMenu.close();
-      fire(menuComponents()[0], 'keydown', {}, { keyCode: 32, key: 'Space' });
+      spaceKeyDown(menuComponents()[0]);
       expect(subMenu.opened).to.be.true;
     });
 
@@ -340,7 +342,7 @@ describe('items', () => {
       await nextRender(subMenu);
       const item = menuComponents(subMenu)[0];
       const spy = sinon.spy(item, 'focus');
-      fire(subMenu.$.overlay.$.overlay, 'keydown', {}, { keyCode: 40, key: 'ArrowDown' });
+      arrowDownKeyDown(subMenu.$.overlay.$.overlay);
       expect(spy.calledOnce).to.be.true;
     });
 
@@ -352,7 +354,7 @@ describe('items', () => {
       const items = menuComponents(subMenu);
       const item = items[items.length - 1];
       const spy = sinon.spy(item, 'focus');
-      fire(subMenu.$.overlay.$.overlay, 'keydown', {}, { keyCode: 38, key: 'ArrowUp' });
+      arrowUpKeyDown(subMenu.$.overlay.$.overlay);
       expect(spy.calledOnce).to.be.true;
     });
 

packages/vaadin-context-menu/test/items.test.js

@@ -1,6 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync, nextFrame, oneEvent } from '@open-wc/testing-helpers';
-import { fire, isIOS } from './common.js';
+import { fire, fixtureSync, isIOS, nextFrame, oneEvent } from '@vaadin/testing-helpers';
 import './not-animated-styles.js';
 import '../vaadin-context-menu.js';
 

packages/vaadin-context-menu/test/overlay.test.js

@@ -1,6 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync } from '@open-wc/testing-helpers';
-import { fire } from './common.js';
+import { fire, fixtureSync } from '@vaadin/testing-helpers';
 import './not-animated-styles.js';
 import '../vaadin-context-menu.js';
 

packages/vaadin-context-menu/test/properties.test.js

@@ -1,7 +1,6 @@
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
-import { fixtureSync } from '@open-wc/testing-helpers';
-import { fire } from './common.js';
+import { fire, fixtureSync } from '@vaadin/testing-helpers';
 import './not-animated-styles.js';
 import '../vaadin-context-menu.js';
 

packages/vaadin-context-menu/test/renderer.test.js

@@ -1,9 +1,8 @@
 import { expect } from '@esm-bundle/chai';
-import { aTimeout, fixtureSync, nextFrame, oneEvent } from '@open-wc/testing-helpers';
-import { tap, pressAndReleaseKeyOn } from '@polymer/iron-test-helpers/mock-interactions.js';
+import sinon from 'sinon';
+import { click, enter, fire, fixtureSync, isIOS, nextRender, oneEvent } from '@vaadin/testing-helpers';
 import '@vaadin/vaadin-list-box/vaadin-list-box.js';
 import '@vaadin/vaadin-item/vaadin-item.js';
-import { fire, isIOS } from './common.js';
 import './not-animated-styles.js';
 import '../vaadin-context-menu.js';
 
@@ -25,38 +24,43 @@ describe('selection', () => {
   });
 
   describe('selection', () => {
-    it('should close on item tap', async () => {
+    it('should close on item click', async () => {
       menu._setOpened(true);
       await oneEvent(menu.$.overlay, 'vaadin-overlay-open');
+      await nextRender(menu.$.overlay);
 
       const listBox = menu.$.overlay.content.querySelector('#menu');
-      await nextFrame();
-      tap(listBox.items[0]);
-      expect(menu.opened).to.be.false;
+      click(listBox.items[0]);
+      expect(menu.opened).to.eql(false);
     });
 
     it('should close on keyboard selection', async () => {
       menu._setOpened(true);
       await oneEvent(menu.$.overlay, 'vaadin-overlay-open');
+      await nextRender(menu.$.overlay);
+
+      const spy = sinon.spy();
+      menu.addEventListener('opened-changed', spy);
 
       const item = menu.$.overlay.content.querySelector('#menu vaadin-item');
-      pressAndReleaseKeyOn(item, 13, [], 'Enter');
-      await aTimeout(1);
-      expect(menu.opened).to.be.false;
+      enter(item);
+      expect(spy.calledOnce).to.be.true;
     });
 
     it('should focus the child element', async () => {
       menu._setOpened(true);
       await oneEvent(menu.$.overlay, 'vaadin-overlay-open');
-      await aTimeout(0);
+      await nextRender(menu.$.overlay);
+
       const item = menu.$.overlay.content.querySelector('#menu vaadin-item');
       expect(document.activeElement).to.eql(item);
     });
 
     (isIOS ? it.skip : it)('should focus the child element on `contextmenu` event', async () => {
       fire(menu, 'contextmenu');
       await oneEvent(menu.$.overlay, 'vaadin-overlay-open');
-      await aTimeout(0);
+      await nextRender(menu.$.overlay);
+
       const item = menu.$.overlay.content.querySelector('#menu vaadin-item');
       expect(document.activeElement).to.eql(item);
     });