@dile/ui 2.27.1 → 2.27.2

package/components/toast/toast.spec.js

@@ -0,0 +1,86 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './toast.js';
+
+describe('dile-toast', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderToast(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-toast');
+    await el.updateComplete;
+    return el;
+  }
+
+  async function openAndGetItem(el, text, toastType) {
+    el.open(text, toastType);
+    await el.updateComplete;
+    const item = el.shadowRoot.querySelector('dile-toast-item');
+    await item.updateComplete;
+    return item;
+  }
+
+  function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  it('does not render a close icon by default', async () => {
+    const el = await renderToast('<dile-toast duration="10000"></dile-toast>');
+    const item = await openAndGetItem(el, 'Hello');
+
+    expect(item.shadowRoot.querySelector('.closeicon')).toBeNull();
+  });
+
+  it('renders the message text and status class', async () => {
+    const el = await renderToast('<dile-toast duration="10000"></dile-toast>');
+    const item = await openAndGetItem(el, 'Saved!', 'success');
+
+    expect(item.shadowRoot.querySelector('.text').textContent.trim()).toBe('Saved!');
+    expect(item.shadowRoot.querySelector('div').classList.contains('success')).toBe(true);
+  });
+
+  it('renders a close icon when showCloseIcon is set', async () => {
+    const el = await renderToast('<dile-toast duration="10000" showCloseIcon></dile-toast>');
+    const item = await openAndGetItem(el, 'Hello');
+
+    expect(item.shadowRoot.querySelector('dile-icon.closeicon')).toBeTruthy();
+  });
+
+  it('closing a toast dispatches dile-toast-closed-by-user with the message detail', async () => {
+    const el = await renderToast('<dile-toast duration="10000" showCloseIcon></dile-toast>');
+    const item = await openAndGetItem(el, 'Dismiss me', 'error');
+
+    let detail = null;
+    el.addEventListener('dile-toast-closed-by-user', (e) => { detail = e.detail; });
+
+    item.shadowRoot.querySelector('dile-icon.closeicon').click();
+    await el.updateComplete;
+
+    expect(detail).toBeTruthy();
+    expect(detail.message.text).toBe('Dismiss me');
+    expect(detail.message.toastType).toBe('error');
+  });
+
+  it('removes the closed toast from the DOM shortly after, without waiting for its duration', async () => {
+    const el = await renderToast('<dile-toast duration="10000" showCloseIcon></dile-toast>');
+    const item = await openAndGetItem(el, 'Dismiss me');
+
+    item.shadowRoot.querySelector('dile-icon.closeicon').click();
+    await el.updateComplete;
+    expect(item.shadowRoot.querySelector('div').classList.contains('hidden')).toBe(true);
+
+    await wait(600);
+
+    expect(el.shadowRoot.querySelector('dile-toast-item')).toBeNull();
+  });
+
+  it('still auto-hides and cleans up a toast on its own after duration elapses', async () => {
+    const el = await renderToast('<dile-toast duration="50"></dile-toast>');
+    await openAndGetItem(el, 'Auto dismiss');
+
+    await wait(1200);
+
+    expect(el.shadowRoot.querySelector('dile-toast-item')).toBeNull();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.27.1",
+  "version": "2.27.2",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -27,5 +27,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fec5662d02ad55763620b92b5748e45217f31b11"
+  "gitHead": "f096749bccd6d56731d9f8509182686c05175348"
 }

package/styles/colors.css

@@ -34,6 +34,8 @@
   --dile-on-terciary-dark-color: #ffffff;
   --dile-gray-dark-color: #555555;
   --dile-on-gray-dark-color: #ffffff;
+  --dile-gray-very-light-color: #f5f5f5;
+  --dile-on-gray-very-light-color: #303030;
 }
 
 :root.dark-theme {
@@ -78,4 +80,6 @@
 
   --dile-gray-dark-color: #cccccc;
   --dile-on-gray-dark-color: #1e1e1e;
+  --dile-gray-very-light-color: #404040;
+  --dile-on-gray-very-light-color: #ffffff;
 }