diff --git a/src/components/notification/bl-notification.test.ts b/src/components/notification/bl-notification.test.ts index a0ae5b57..d7beb2f1 100644 --- a/src/components/notification/bl-notification.test.ts +++ b/src/components/notification/bl-notification.test.ts @@ -503,7 +503,7 @@ describe("bl-notification", () => { expect(notificationEl.style.transform).to.equal(""); }); - it("should update transform style when users touch moves up or down", async () => { + it("should update transform style when users touch moves up", async () => { // FIXME: Cant emulate touch events in web test runner if (!window.navigator.userAgent.includes("Chrome")) { return; @@ -523,17 +523,38 @@ describe("bl-notification", () => { const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!; - sendTouchEvent(100, 50, notificationEl, "touchmove"); + sendTouchEvent(100, -50, notificationEl, "touchmove"); await el.updateComplete; - assert.equal(notificationEl.style.transform, "translateY(50px)"); + assert.equal(notificationEl.style.transform, "translateY(-50px)"); + }); - sendTouchEvent(100, -50, notificationEl, "touchmove"); + it("should not allow user to move notification down", async () => { + // FIXME: Cant emulate touch events in web test runner + if (!window.navigator.userAgent.includes("Chrome")) { + return; + } + + const el = await fixture(html``); + + el.addNotification({ + caption: "test", + description: "test", + variant: "info", + duration: 5, + icon: "academy", + }); await el.updateComplete; - assert.equal(notificationEl.style.transform, "translateY(-50px)"); + const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!; + + sendTouchEvent(100, 590, notificationEl, "touchmove"); + + await el.updateComplete; + + assert.equal(notificationEl.style.transform, "translateY(0px)"); }); it("should do nothing if device is not mobile", async () => { diff --git a/src/components/notification/bl-notification.ts b/src/components/notification/bl-notification.ts index ce950f68..672fa3e3 100644 --- a/src/components/notification/bl-notification.ts +++ b/src/components/notification/bl-notification.ts @@ -145,8 +145,10 @@ export default class BlNotification extends LitElement { const currentTarget = event.currentTarget as BlNotificationCard; const currentY = event.touches[0].clientY; - const movedY = currentY - this.touchStartY; + // Allow only moving up + const movedY = Math.min(currentY - this.touchStartY, 0); + console.log(movedY); currentTarget.style.transform = `translateY(${movedY}px)`; }