test: use vaadin testing helpers

Author: web-padawan

packages/vaadin-date-time-picker/package.json

@@ -66,8 +66,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",
+    "@vaadin/testing-helpers": "^0.1.0",
     "@web/dev-server": "^0.0.29",
     "@web/test-runner": "^0.10.0",
     "@web/test-runner-saucelabs": "^0.2.0",

packages/vaadin-date-time-picker/test/basic.test.js

@@ -1,7 +1,7 @@
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
-import { aTimeout, nextFrame } from '@open-wc/testing-helpers';
-import { changeInputValue, fixtureSync } from './helpers.js';
+import { aTimeout, fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+import { changeInputValue } from './helpers.js';
 import '../vaadin-date-time-picker.js';
 
 const fixtures = {
@@ -44,10 +44,6 @@ describe('Basic features', () => {
     timePicker = customField.inputs[1];
   });
 
-  afterEach(() => {
-    dateTimePicker.remove();
-  });
-
   it('should not expose class name globally', () => {
     expect(window.DateTimePickerElement).not.to.be.ok;
   });
@@ -232,10 +228,6 @@ describe('autofocus', () => {
     await nextFrame();
   });
 
-  afterEach(() => {
-    dateTimePicker.remove();
-  });
-
   it('should focus date picker when autofocus is set', () => {
     expect(datePicker.hasAttribute('focused')).to.be.true;
   });
@@ -250,10 +242,6 @@ describe('Initial value', () => {
     customField = dateTimePicker.$.customField;
   });
 
-  afterEach(() => {
-    dateTimePicker.remove();
-  });
-
   it('should use initial value from attribute without clearing it', () => {
     expect(dateTimePicker.value).to.equal('2019-09-16T15:00');
     expect(customField.value).to.equal('2019-09-16T15:00');
@@ -267,10 +255,6 @@ describe('helperText', () => {
     dateTimePicker = fixtureSync('<vaadin-date-time-picker></vaadin-date-time-picker>');
   });
 
-  afterEach(() => {
-    dateTimePicker.remove();
-  });
-
   it('should display the helper text when provided', () => {
     dateTimePicker.helperText = 'Foo';
     expect(dateTimePicker.$.customField.helperText).to.equal(dateTimePicker.helperText);
@@ -290,10 +274,6 @@ describe('slotted helper', () => {
     customField = dateTimePicker.$.customField;
   });
 
-  afterEach(() => {
-    dateTimePicker.remove();
-  });
-
   it('should display the helper text when slotted helper available', () => {
     expect(customField.querySelector('[slot="helper"]').assignedNodes()[0].textContent).to.eql('foo');
   });
@@ -312,10 +292,6 @@ describe('Theme attribute', () => {
     timePicker = customField.inputs[1];
   });
 
-  afterEach(() => {
-    dateTimePicker.remove();
-  });
-
   it('should propagate theme attribute to custom-field', () => {
     expect(customField.getAttribute('theme')).to.equal('foo');
   });
@@ -350,10 +326,6 @@ describe('Theme attribute', () => {
       }
     });
 
-    afterEach(() => {
-      dateTimePicker.remove();
-    });
-
     it('should have correct inputs set in custom-field', () => {
       expect(customField.inputs[0]).to.equal(datePicker);
       expect(customField.inputs[1]).to.equal(timePicker);
@@ -436,10 +408,6 @@ describe('Theme attribute', () => {
       }
     });
 
-    afterEach(() => {
-      dateTimePicker.remove();
-    });
-
     // This test simulates how DatePicker sets the initial value from server side
     it('should get initial value from slotted inputs', () => {
       expect(customField.value).to.equal('2019-09-16T15:00');

packages/vaadin-date-time-picker/test/helpers.js

@@ -4,17 +4,3 @@ export const changeInputValue = (el, value) => {
   el.value = value;
   dispatchChange(el);
 };
-
-/**
- * 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;
-};

packages/vaadin-date-time-picker/test/i18n.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync } from './helpers.js';
+import { fixtureSync } from '@vaadin/testing-helpers';
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 import '../vaadin-date-time-picker.js';
 
@@ -105,10 +105,6 @@ customElements.define(
       }
     });
 
-    after(() => {
-      dateTimePicker.remove();
-    });
-
     it('should have initial value for i18n', () => {
       expect(dateTimePicker.i18n).to.have.property('clear', 'Tyhjennä');
       expect(datePicker.i18n).to.have.property('clear', 'Tyhjennä');

packages/vaadin-date-time-picker/test/properties.test.js

@@ -1,6 +1,7 @@
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
-import { dispatchChange, fixtureSync } from './helpers.js';
+import { fixtureSync } from '@vaadin/testing-helpers';
+import { dispatchChange } from './helpers.js';
 import '../vaadin-date-time-picker.js';
 
 const fixtures = {
@@ -78,10 +79,6 @@ const fixtures = {
       }
     });
 
-    afterEach(() => {
-      dateTimePicker.remove();
-    });
-
     it('should propagate value to date and time pickers', () => {
       dateTimePicker.value = '2019-09-16T15:00';
       expect(datePicker.value).to.equal('2019-09-16');
@@ -308,10 +305,6 @@ const fixtures = {
       }
     });
 
-    after(() => {
-      dateTimePicker.remove();
-    });
-
     it('should have initial value for errorMessage', () => {
       expect(dateTimePicker.errorMessage).to.equal('error-message');
       expect(customField.errorMessage).to.equal('error-message');

packages/vaadin-date-time-picker/test/validation.test.js

@@ -1,6 +1,6 @@
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
-import { fixtureSync } from './helpers.js';
+import { fixtureSync } from '@vaadin/testing-helpers';
 import '../vaadin-date-time-picker.js';
 
 class DateTimePicker2020Element extends customElements.get('vaadin-date-time-picker') {
@@ -31,10 +31,6 @@ const fixtures = {
       customField = dateTimePicker.$.customField;
     });
 
-    afterEach(() => {
-      dateTimePicker.remove();
-    });
-
     it('should not be required', () => {
       expect(customField.required).to.be.false;
     });
@@ -110,10 +106,6 @@ describe('custom validator', () => {
     dateTimePicker = fixtureSync('<vaadin-date-time-picker-2020></vaadin-date-time-picker-2020>');
   });
 
-  afterEach(() => {
-    dateTimePicker.remove();
-  });
-
   it('should validate correctly with custom validator', () => {
     // Try invalid value.
     dateTimePicker.value = '2030-03-03T20:30';