chore(button): add tests to compare native and lion button click event

packages/button/test/lion-button.test.js

@@ -1,9 +1,16 @@
-import { expect, fixture, html, aTimeout } from '@open-wc/testing';
+import { expect, fixture, html, aTimeout, oneEvent } from '@open-wc/testing';
 import sinon from 'sinon';
 import { pressEnter, pressSpace } from '@polymer/iron-test-helpers/mock-interactions.js';
 
 import '../lion-button.js';
 
+function getTopElement(el) {
+  const { left, top } = el.getBoundingClientRect();
+  // to support elementFromPoint() in polyfilled browsers we have to use document
+  const crossBrowserRoot = el.shadowRoot.elementFromPoint ? el.shadowRoot : document;
+  return crossBrowserRoot.elementFromPoint(left, top);
+}
+
 describe('lion-button', () => {
   it('behaves like native `button` in terms of a11y', async () => {
     const el = await fixture(`<lion-button>foo</lion-button>`);
@@ -99,11 +106,7 @@ describe('lion-button', () => {
       `);
 
       const button = form.querySelector('lion-button');
-      const { left, top } = button.getBoundingClientRect();
-      // to support elementFromPoint() in polyfilled browsers we have to use document
-      const crossBrowserRoot = button.shadowRoot.elementFromPoint ? button.shadowRoot : document;
-      const shadowClickAreaElement = crossBrowserRoot.elementFromPoint(left, top);
-      shadowClickAreaElement.click();
+      getTopElement(button).click();
 
       expect(formSubmitSpy.called).to.be.true;
     });
@@ -138,4 +141,48 @@ describe('lion-button', () => {
       expect(formSubmitSpy.called).to.be.true;
     });
   });
+
+  describe('click event', () => {
+    it('is fired once', async () => {
+      const clickSpy = sinon.spy();
+      const el = await fixture(
+        html`
+          <lion-button @click="${clickSpy}"></lion-button>
+        `,
+      );
+
+      getTopElement(el).click();
+      await aTimeout();
+
+      expect(clickSpy.callCount).to.equal(1);
+    });
+
+    describe('same interface as in the native button', () => {
+      async function prepareClickEvent(native = false) {
+        const template = native ? '<button></button>' : '<lion-button></lion-button>';
+        const el = await fixture(template);
+        setTimeout(() => {
+          if (native) {
+            el.click();
+          } else {
+            getTopElement(el).click();
+          }
+        });
+        return oneEvent(el, 'click');
+      }
+
+      const prepareNativeButtonClickEvent = () => prepareClickEvent();
+      const prepareLionButtonClickEvent = () => prepareClickEvent();
+
+      const sameProperties = ['constructor', 'composed', 'bubbles'];
+
+      sameProperties.forEach(property => {
+        it(`has same property "${property}"`, async () => {
+          const nativeEvent = await prepareNativeButtonClickEvent();
+          const lionEvent = await prepareLionButtonClickEvent();
+          expect(lionEvent[property]).to.equal(nativeEvent[property]);
+        });
+      });
+    });
+  });
 });