test: use vaadin testing helpers

Author: web-padawan

packages/vaadin-radio-button/package.json

@@ -65,9 +65,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.0",
     "@web/dev-server": "^0.1.3",
     "@web/test-runner": "^0.11.7",
     "@web/test-runner-saucelabs": "^0.3.3",

packages/vaadin-radio-button/test/helpers.js

@@ -1,19 +1,3 @@
-import { keyDownOn, keyUpOn } from '@polymer/iron-test-helpers/mock-interactions.js';
-
-/**
- * Helper which mimics the way how Polymer <test-fixture> works.
- * Use `document.importNode` to ensure proper upgrade timings.
- */
-export const fixtureSync = (html) => {
-  const tpl = document.createElement('template');
-  tpl.innerHTML = html;
-  const div = document.createElement('div');
-  div.appendChild(document.importNode(tpl.content, true));
-  const el = div.firstElementChild;
-  document.body.appendChild(el);
-  return el;
-};
-
 export const down = (node) => {
   node.dispatchEvent(new CustomEvent('down'));
 };
@@ -22,36 +6,6 @@ export const up = (node) => {
   node.dispatchEvent(new CustomEvent('up'));
 };
 
-export const focusout = (node, composed = true) => {
-  const event = new CustomEvent('focusout', { bubbles: true, composed });
-  node.dispatchEvent(event);
-};
-
-export const focusin = (node) => {
-  const event = new CustomEvent('focusin', { bubbles: true, composed: true });
-  node.dispatchEvent(event);
-};
-
-export const arrowDown = (target) => {
-  keyDownOn(target, 40);
-  keyUpOn(target, 40);
-};
-
-export const arrowRight = (target) => {
-  keyDownOn(target, 39);
-  keyUpOn(target, 39);
-};
-
-export const arrowLeft = (target) => {
-  keyDownOn(target, 37);
-  keyUpOn(target, 37);
-};
-
-export const arrowUp = (target) => {
-  keyDownOn(target, 38);
-  keyUpOn(target, 38);
-};
-
 export const visible = (e) => {
   const rect = e.getBoundingClientRect();
   return !!(rect.width && rect.height);

packages/vaadin-radio-button/test/radio-button.test.js

@@ -1,7 +1,6 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync, nextFrame } from '@open-wc/testing-helpers';
 import sinon from 'sinon';
-import { keyDownOn, keyUpOn, touchstart, touchend } from '@polymer/iron-test-helpers/mock-interactions.js';
+import { fixtureSync, nextFrame, space, spaceKeyDown, spaceKeyUp, touchstart, touchend } from '@vaadin/testing-helpers';
 import { down, up } from './helpers.js';
 import '../vaadin-radio-button.js';
 
@@ -103,8 +102,7 @@ describe('radio-button', () => {
     });
 
     it('should set checked on space keyup', () => {
-      keyDownOn(radio, 32);
-      keyUpOn(radio, 32);
+      space(radio);
       expect(radio.checked).to.be.true;
     });
   });
@@ -132,21 +130,19 @@ describe('radio-button', () => {
     });
 
     it('should not set checked on space keyup when disabled', () => {
-      keyDownOn(radio, 32);
-      keyUpOn(radio, 32);
+      space(radio);
       expect(radio.checked).to.be.false;
     });
   });
 
   describe('active attribute', () => {
     it('should have active attribute on space keydown', () => {
-      keyDownOn(radio, 32);
+      spaceKeyDown(radio);
       expect(radio.hasAttribute('active')).to.be.true;
     });
 
     it('should not have active attribute on space keyup', () => {
-      keyDownOn(radio, 32);
-      keyUpOn(radio, 32);
+      space(radio);
       expect(radio.hasAttribute('active')).to.be.false;
     });
   });
@@ -179,15 +175,13 @@ describe('radio-button', () => {
     });
 
     it('should be called on space keyup', () => {
-      keyDownOn(radio, 32);
-      keyUpOn(radio, 32);
+      space(radio);
       expect(spy.calledOnce).to.be.true;
     });
 
     it('should not be called on space keyup when disabled', () => {
       radio.disabled = true;
-      keyDownOn(radio, 32);
-      keyUpOn(radio, 32);
+      space(radio);
       expect(spy.called).to.be.false;
     });
   });
@@ -218,9 +212,10 @@ describe('radio-button', () => {
     });
 
     it('should fire on space keyup', () => {
-      keyDownOn(radio, 32);
+      spaceKeyDown(radio);
       expect(spy.called).to.be.false;
-      keyUpOn(radio, 32);
+
+      spaceKeyUp(radio);
       expect(spy.calledOnce).to.be.true;
     });
 

packages/vaadin-radio-button/test/radio-group.test.js

@@ -1,7 +1,17 @@
 import { expect } from '@esm-bundle/chai';
-import { aTimeout, nextFrame } from '@open-wc/testing-helpers';
 import sinon from 'sinon';
-import { arrowDown, arrowLeft, arrowRight, arrowUp, fixtureSync, focusin, focusout, visible } from './helpers.js';
+import {
+  arrowDown,
+  arrowLeft,
+  arrowRight,
+  arrowUp,
+  aTimeout,
+  fixtureSync,
+  focusin,
+  focusout,
+  nextFrame
+} from '@vaadin/testing-helpers';
+import { visible } from './helpers.js';
 import '../vaadin-radio-group.js';
 
 describe('radio-group', () => {
@@ -20,10 +30,6 @@ describe('radio-group', () => {
     buttons = group._radioButtons;
   });
 
-  afterEach(() => {
-    group.remove();
-  });
-
   describe('custom element definition', () => {
     let tagName;
 
@@ -503,7 +509,7 @@ describe('radio-group', () => {
       const spy = sinon.spy();
       group.addEventListener('invalid-changed', spy);
       group.required = true;
-      focusout(group, true);
+      focusout(group);
       expect(spy.calledOnce).to.be.true;
     });
 
@@ -614,10 +620,6 @@ describe('radio-group initial value', () => {
     buttons = group._radioButtons;
   });
 
-  afterEach(() => {
-    group.remove();
-  });
-
   it('should set the value based on the initially checked radio button', () => {
     expect(group.value).to.be.equal('2');
   });
@@ -676,10 +678,6 @@ describe('radio-group helper slot', () => {
     group._observer.flush();
   });
 
-  afterEach(() => {
-    group.remove();
-  });
-
   it('should have has-helper attribute when slotted helper is present', () => {
     expect(group.hasAttribute('has-helper')).to.be.true;
   });

packages/vaadin-radio-button/test/visual/default.html

@@ -45,15 +45,15 @@
   </div>
 
   <script type="module">
-    import { keyDownOn } from '@polymer/iron-test-helpers/mock-interactions.js';
+    import { focusin, keyDownOn } from '@vaadin/testing-helpers';
 
     (async () => {
       const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
 
       await import('../../theme/' + theme + '/vaadin-radio-group.js');
 
       keyDownOn(document.body, 9);
-      document.getElementById('radio').dispatchEvent(new CustomEvent('focusin', { composed: true, bubbles: true }));
+      focusin(document.getElementById('radio'));
 
       window.requestAnimationFrame(() => {
         document.getElementById('tests').dataset.ready = true;