testing container

packages/uui-toast-notification-container/lib/uui-toast-notification-container.element.ts

@@ -52,14 +52,22 @@ export class UUIToastNotificationContainerElement extends LitElement {
   }
   public set autoClose(value: number | null) {
     this._autoClose = value;
+    this._toasts?.forEach(el => (el.autoClose = value));
   }
 
   private _autoClosePause = false;
-  private _onInteractionEnter = () => {
+
+  /**
+   * pause all auto close timer, including later coming.
+   */
+  public pauseAutoClose = () => {
     this._autoClosePause = true;
     this._toasts?.forEach(el => el.pauseAutoClose());
   };
-  private _onInteractionLeave = () => {
+  /**
+   * resume the auto close timers.
+   */
+  public resumeAutoClose = () => {
     // Only reset autoClose if we have it and if one of the children does not have focus.
     if (
       this._autoClose &&
@@ -124,10 +132,10 @@ export class UUIToastNotificationContainerElement extends LitElement {
         UUIToastNotificationEvent.CLOSED,
         this.onToastClosed as any
       );
-      toast.removeEventListener('mouseover', this._onInteractionEnter);
-      toast.removeEventListener('mouseout', this._onInteractionLeave);
-      toast.removeEventListener('focus', this._onInteractionEnter);
-      toast.removeEventListener('blur', this._onInteractionLeave);
+      toast.removeEventListener('mouseover', this.pauseAutoClose);
+      toast.removeEventListener('mouseout', this.resumeAutoClose);
+      toast.removeEventListener('focus', this.pauseAutoClose);
+      toast.removeEventListener('blur', this.resumeAutoClose);
     });
 
     const newToasts = this._toasts.filter(
@@ -139,14 +147,17 @@ export class UUIToastNotificationContainerElement extends LitElement {
         this.onToastClosed as any
       );
 
-      toast.addEventListener('mouseover', this._onInteractionEnter);
-      toast.addEventListener('mouseout', this._onInteractionLeave);
-      toast.addEventListener('focus', this._onInteractionEnter);
-      toast.addEventListener('blur', this._onInteractionLeave);
+      toast.addEventListener('mouseover', this.pauseAutoClose);
+      toast.addEventListener('mouseout', this.resumeAutoClose);
+      toast.addEventListener('focus', this.pauseAutoClose);
+      toast.addEventListener('blur', this.resumeAutoClose);
 
-      if (this._autoClose && this._autoClosePause === false) {
+      if (this._autoClose) {
         toast.autoClose = this._autoClose;
       }
+      if (this._autoClosePause === true) {
+        toast.pauseAutoClose();
+      }
       toast.open = true;
     });
   };

packages/uui-toast-notification-container/lib/uui-toast-notification-container.test.ts

@@ -1,16 +1,33 @@
-import { html, fixture, expect } from '@open-wc/testing';
+import {
+  html,
+  fixture,
+  expect,
+  elementUpdated,
+  oneEvent,
+} from '@open-wc/testing';
 import { UUIToastNotificationContainerElement } from './uui-toast-notification-container.element';
 import '.';
+import { UUIToastNotificationElement } from '@umbraco-ui/uui-toast-notification/lib/uui-toast-notification.element';
+import '@umbraco-ui/uui-toast-notification/lib/index';
+import { UUIToastNotificationEvent } from '@umbraco-ui/uui-toast-notification/lib/UUIToastNotificationEvent';
+
+function sleep(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
 
 describe('UUIToastNotificationContainerElement', () => {
   let element: UUIToastNotificationContainerElement;
+  let toastElement: UUIToastNotificationElement;
 
   beforeEach(async () => {
     element = await fixture(
       html`
         <uui-toast-notification-container></uui-toast-notification-container>
       `
     );
+    toastElement = await fixture(
+      html` <uui-toast-notification></uui-toast-notification> `
+    );
   });
 
   it('passes the a11y audit', async () => {
@@ -44,10 +61,148 @@ describe('UUIToastNotificationContainerElement', () => {
   });
 
   // Test appending a toast will open automatically.
+  describe('child toast notifications', () => {
+    it('appended toast notification will open automatically', async () => {
+      element.appendChild(toastElement);
+
+      await elementUpdated(element);
+
+      //await sleep(100); // wait a bit.
+      expect(toastElement.open).to.be.true;
+    });
+
+    it('appended toast notification will be removed automatically', async () => {
+      element.autoClose = 20;
+      await elementUpdated(element);
+
+      element.appendChild(toastElement);
+
+      const event = await oneEvent(
+        toastElement,
+        UUIToastNotificationEvent.CLOSED
+      );
+      expect(event).to.exist;
+      expect(event.type).to.equal(UUIToastNotificationEvent.CLOSED);
 
-  // Auto close timer is set on toast
+      expect(toastElement.parentElement).to.be.null;
+    });
+
+    it('pausing autoClose before appended', async () => {
+      element.autoClose = 20;
+      element.pauseAutoClose();
+
+      await elementUpdated(element);
+
+      element.appendChild(toastElement);
+
+      await sleep(600); // Enough time to cover if it did happen that the element opened and auto-closed.
+
+      // Check that its open.
+      expect(toastElement.open).to.be.true;
+    });
+
+    it('pausing autoClose while opening', async () => {
+      element.autoClose = 20;
+      await elementUpdated(element);
+
+      element.appendChild(toastElement);
+
+      await elementUpdated(element);
+      await sleep(100);
+
+      element.pauseAutoClose();
+
+      await sleep(500); // Enough time to cover if it did happen that the element opened and auto-closed.
+
+      // Check that its still open, pause actually did work.
+      expect(toastElement.open).to.be.true;
+    });
+
+    it('pausing autoClose when open', async () => {
+      element.autoClose = 200;
+      await elementUpdated(element);
+
+      element.appendChild(toastElement);
+
+      await elementUpdated(element);
+      await sleep(500);
+
+      element.pauseAutoClose();
+
+      await sleep(300); // Enough time to cover if it did happen that the element auto-closed.
+
+      // Check that its still open, pause actually did work.
+      expect(toastElement.open).to.be.true;
+    });
 
-  // auto close timer is paused on focus.
+    it('pausing and resuming autoClose', async () => {
+      element.autoClose = 20;
+      element.pauseAutoClose();
 
-  // auto close timer is paused on mouseover.
+      element.appendChild(toastElement);
+
+      await sleep(100); // Enough time to cover if it did happen that the element opened and auto-closed.
+
+      // Check that its still open, pause actually did work.
+      expect(toastElement.open).to.be.true;
+
+      const listener = oneEvent(toastElement, UUIToastNotificationEvent.CLOSED);
+
+      element.resumeAutoClose();
+
+      const event = await listener;
+      expect(event).to.exist;
+      expect(event.type).to.equal(UUIToastNotificationEvent.CLOSED);
+
+      expect(toastElement.parentElement).to.be.null;
+    });
+
+    it('focus on child item will pause and resume autoClose', async () => {
+      element.autoClose = 20;
+
+      element.appendChild(toastElement);
+
+      await elementUpdated(element);
+      await sleep(100);
+
+      toastElement.dispatchEvent(new Event('focus'));
+
+      await sleep(400); // Enough time to cover if it did happen that the element opened and auto-closed.
+
+      // Check that its still open, pause actually did work.
+      expect((toastElement as any)._animate).to.be.false; // Checking private _animate to ensure that guessed animation time was good.
+      expect(toastElement.open).to.be.true;
+
+      toastElement.dispatchEvent(new Event('blur'));
+
+      await sleep(40); // Enough time to cover if it did happen that the element opened and auto-closed.
+
+      // Check that its still open, pause actually did work.
+      expect(toastElement.open).to.be.false;
+    });
+
+    it('mouseover on child item will pause and resume autoClose', async () => {
+      element.autoClose = 20;
+
+      element.appendChild(toastElement);
+
+      await elementUpdated(element);
+      await sleep(100);
+
+      toastElement.dispatchEvent(new Event('mouseover'));
+
+      await sleep(400); // Enough time to cover if it did happen that the element opened and auto-closed.
+
+      // Check that its still open, pause actually did work.
+      expect((toastElement as any)._animate).to.be.false; // Checking private _animate to ensure that guessed animation time was good.
+      expect(toastElement.open).to.be.true;
+
+      toastElement.dispatchEvent(new Event('mouseout'));
+
+      await sleep(40); // Enough time to cover if it did happen that the element opened and auto-closed.
+
+      // Check that its still open, pause actually did work.
+      expect(toastElement.open).to.be.false;
+    });
+  });
 });