@lion/button - npm Package Compare versions

Comparing version 0.1.33 to 0.1.34

CHANGELOG.md

@@ -6,2 +6,16 @@ # Change Log
 
+## [0.1.34](https://github.com/ing-bank/lion/compare/@lion/button@0.1.33...@lion/button@0.1.34) (2019-07-12)
+
+
+### Bug Fixes
+
+* **button:** make redispatch method protected ([b7eb537](https://github.com/ing-bank/lion/commit/b7eb537))
+* **button:** put host element into click event target (fix [#89](https://github.com/ing-bank/lion/issues/89)) ([59e456e](https://github.com/ing-bank/lion/commit/59e456e))
+* **button:** redispatch click event with all original properties ([b71177f](https://github.com/ing-bank/lion/commit/b71177f))
+* **button:** remove unnecessary instance method bind ([4a8c6eb](https://github.com/ing-bank/lion/commit/4a8c6eb))
+
+
+
+
+
 ## [0.1.33](https://github.com/ing-bank/lion/compare/@lion/button@0.1.32...@lion/button@0.1.33) (2019-07-09)
@@ -8,0 +22,0 @@

package.json

 {
   "name": "@lion/button",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "description": "A button that is easily stylable and accessible in all contexts",
@@ -46,3 +46,3 @@ "author": "ing-bank",
   },
-  "gitHead": "a598a47dabccc92e68f12411b7b613a8e5132762"
+  "gitHead": "9412d6a44f05a57e7c001647c104c8c81083a954"
 }

src/LionButton.js

@@ -143,3 +143,2 @@ import { css, html, DelegateMixin, SlotMixin } from '@lion/core';
     this.tabindex = 0;
-    this.__keydownDelegationHandler = this.__keydownDelegationHandler.bind(this);
   }
@@ -157,7 +156,27 @@
 
+  _redispatchClickEvent(oldEvent) {
+    // replacing `MouseEvent` with `oldEvent.constructor` breaks IE
+    const newEvent = new MouseEvent(oldEvent.type, oldEvent);
+    this.__enforceHostEventTarget(newEvent);
+    this.$$slot('_button').dispatchEvent(newEvent);
+  }
+
+  /**
+   * Prevent click on the fake element and cause click on the native button.
+   */
   __clickDelegationHandler(e) {
-    e.stopPropagation(); // prevent click on the fake element and cause click on the native button
-    this.$$slot('_button').click();
+    e.stopPropagation();
+    this._redispatchClickEvent(e);
   }
 
+  __enforceHostEventTarget(event) {
+    try {
+      // this is for IE11 (and works in others), because `Object.defineProperty` does not give any effect there
+      event.__defineGetter__('target', () => this); // eslint-disable-line no-restricted-properties
+    } catch (error) {
+      // in case `__defineGetter__` is removed from the platform
+      Object.defineProperty(event, 'target', { writable: false, value: this });
+    }
+  }
+
   __setupDelegation() {
@@ -186,3 +205,3 @@ this.addEventListener('keydown', this.__keydownDelegationHandler);
       this.shadowRoot.querySelector('.btn').removeAttribute('active');
-      this.$$slot('_button').click();
+      this.shadowRoot.querySelector('.click-area').click();
     }
@@ -189,0 +208,0 @@ }

test/lion-button.test.js

@@ -1,7 +0,18 @@
-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 {
+  makeMouseEvent,
+  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', () => {
@@ -102,7 +113,3 @@ it('behaves like native `button` in terms of a11y', async () => {
       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();
 
@@ -142,2 +149,61 @@ 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();
+
+      // trying to wait for other possible redispatched events
+      await aTimeout();
+      await aTimeout();
+
+      expect(clickSpy.callCount).to.equal(1);
+    });
+
+    describe('event after redispatching', async () => {
+      async function prepareClickEvent(el, host) {
+        setTimeout(() => {
+          if (host) {
+            // click on host like in native button
+            makeMouseEvent('click', { x: 11, y: 11 }, el);
+          } else {
+            // click on click-area which is then redispatched
+            makeMouseEvent('click', { x: 11, y: 11 }, getTopElement(el));
+          }
+        });
+        return oneEvent(el, 'click');
+      }
+
+      let hostEvent;
+      let redispatchedEvent;
+
+      before(async () => {
+        const el = await fixture('<lion-button></lion-button>');
+        hostEvent = await prepareClickEvent(el, true);
+        redispatchedEvent = await prepareClickEvent(el, false);
+      });
+
+      const sameProperties = [
+        'constructor',
+        'composed',
+        'bubbles',
+        'cancelable',
+        'clientX',
+        'clientY',
+        'target',
+      ];
+
+      sameProperties.forEach(property => {
+        it(`has same value of the property "${property}"`, async () => {
+          expect(redispatchedEvent[property]).to.equal(hostEvent[property]);
+        });
+      });
+    });
+  });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24997

increased by13.3%

Lines of code

409

increased by21.73%

No dependency changes