@dile/ui 3.4.4 → 3.4.6

package/components/checkbox/checkbox.spec.js

@@ -0,0 +1,235 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './checkbox.js';
+
+describe('dile-checkbox', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderCheckbox(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-checkbox');
+    await el.updateComplete;
+    return el;
+  }
+
+  function getControl(el) {
+    return el.shadowRoot.querySelector('[role="checkbox"]');
+  }
+
+  describe('Rendering', () => {
+    it('starts unchecked by default', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      expect(el.checked).toBe(false);
+      expect(getControl(el).getAttribute('aria-checked')).toBe('false');
+    });
+
+    it('renders the slotted label content', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms">Accept terms</dile-checkbox>');
+      const label = el.shadowRoot.querySelector('label.label');
+      expect(label).toBeTruthy();
+      expect(el.textContent.trim()).toBe('Accept terms');
+    });
+
+    it('does not render a label element when there is no slotted content', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      expect(el.shadowRoot.querySelector('label.label')).toBeNull();
+    });
+
+    it('renders a message when the message property is set', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      el.message = 'You must accept';
+      el.errored = true;
+      await el.updateComplete;
+
+      const message = el.shadowRoot.querySelector('dile-input-message');
+      expect(message).toBeTruthy();
+      expect(message.getAttribute('message')).toBe('You must accept');
+    });
+  });
+
+  describe('Toggling', () => {
+    it('toggles checked state on click', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      el.shadowRoot.querySelector('div').click();
+      await el.updateComplete;
+
+      expect(el.checked).toBe(true);
+    });
+
+    it('toggles checked state on Space key press', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      const control = getControl(el);
+      control.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true, cancelable: true }));
+      await el.updateComplete;
+
+      expect(el.checked).toBe(true);
+    });
+
+    it('does not toggle when disabled', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms" disabled></dile-checkbox>');
+      el.shadowRoot.querySelector('div').click();
+      await el.updateComplete;
+
+      expect(el.checked).toBe(false);
+    });
+
+    it('clears the checked state via clear()', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms" checked></dile-checkbox>');
+      expect(el.checked).toBe(true);
+
+      el.clear();
+      await el.updateComplete;
+
+      expect(el.checked).toBe(false);
+    });
+
+    it('mirrors checked through the value property', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      el.value = true;
+      await el.updateComplete;
+
+      expect(el.checked).toBe(true);
+      expect(el.value).toBe(true);
+    });
+  });
+
+  describe('Events', () => {
+    it('dispatches dile-checkbox-changed with checked and name', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      let detail = null;
+      el.addEventListener('dile-checkbox-changed', (e) => { detail = e.detail; });
+
+      el.shadowRoot.querySelector('div').click();
+      await el.updateComplete;
+
+      expect(detail).toEqual({ checked: true, name: 'terms' });
+    });
+
+    it('dispatches element-changed with name and value', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      let detail = null;
+      el.addEventListener('element-changed', (e) => { detail = e.detail; });
+
+      el.shadowRoot.querySelector('div').click();
+      await el.updateComplete;
+
+      expect(detail).toEqual({ name: 'terms', value: true });
+    });
+
+    it('clears the error state on toggle when hideErrorOnInput is set', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms" hideErrorOnInput></dile-checkbox>');
+      el.message = 'Required';
+      el.errored = true;
+      await el.updateComplete;
+
+      el.shadowRoot.querySelector('div').click();
+      await el.updateComplete;
+
+      expect(el.message).toBe('');
+      expect(el.errored).toBe(false);
+    });
+  });
+
+  describe('Native form submission', () => {
+    it('participates in FormData when name is set as an attribute', async () => {
+      document.body.innerHTML = `
+        <form id="testForm">
+          <dile-checkbox name="terms" checked></dile-checkbox>
+        </form>
+      `;
+      const el = document.body.querySelector('dile-checkbox');
+      await el.updateComplete;
+
+      const data = new FormData(document.getElementById('testForm'));
+      expect(data.get('terms')).toBe('true');
+    });
+
+    it('participates in FormData when name is set as a JS property', async () => {
+      document.body.innerHTML = `
+        <form id="testForm">
+          <dile-checkbox checked></dile-checkbox>
+        </form>
+      `;
+      const el = document.body.querySelector('dile-checkbox');
+      el.name = 'terms';
+      await el.updateComplete;
+
+      expect(el.getAttribute('name')).toBe('terms');
+
+      const data = new FormData(document.getElementById('testForm'));
+      expect(data.get('terms')).toBe('true');
+    });
+
+    it('is excluded from FormData when unchecked', async () => {
+      document.body.innerHTML = `
+        <form id="testForm">
+          <dile-checkbox name="terms"></dile-checkbox>
+        </form>
+      `;
+      const el = document.body.querySelector('dile-checkbox');
+      await el.updateComplete;
+
+      const data = new FormData(document.getElementById('testForm'));
+      expect(data.get('terms')).toBeNull();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('exposes role="checkbox" on the interactive control', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      expect(getControl(el)).toBeTruthy();
+    });
+
+    it('keeps aria-checked in sync with the checked state', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      const control = getControl(el);
+      expect(control.getAttribute('aria-checked')).toBe('false');
+
+      el.checked = true;
+      await el.updateComplete;
+
+      expect(control.getAttribute('aria-checked')).toBe('true');
+    });
+
+    it('is keyboard focusable when enabled', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      const control = getControl(el);
+      expect(control.getAttribute('tabindex')).toBe('0');
+    });
+
+    it('is removed from the tab order and marked aria-disabled when disabled', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms" disabled></dile-checkbox>');
+      const control = getControl(el);
+      expect(control.getAttribute('tabindex')).toBe('-1');
+      expect(control.getAttribute('aria-disabled')).toBe('true');
+    });
+
+    it('links the control to the slotted label via aria-labelledby', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms">Accept terms</dile-checkbox>');
+      const control = getControl(el);
+      const labelledbyId = control.getAttribute('aria-labelledby');
+
+      expect(labelledbyId).toBeTruthy();
+      expect(el.shadowRoot.getElementById(labelledbyId)).toBeTruthy();
+    });
+
+    it('does not set aria-labelledby when there is no slotted label', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      expect(getControl(el).hasAttribute('aria-labelledby')).toBe(false);
+    });
+
+    it('links the control to the message via aria-describedby when a message is set', async () => {
+      const el = await renderCheckbox('<dile-checkbox name="terms"></dile-checkbox>');
+      el.message = 'Required';
+      el.errored = true;
+      await el.updateComplete;
+
+      const control = getControl(el);
+      const describedbyId = control.getAttribute('aria-describedby');
+
+      expect(describedbyId).toBeTruthy();
+      expect(el.shadowRoot.getElementById(describedbyId)).toBeTruthy();
+    });
+  });
+});

package/components/checkbox/src/DileCheckbox.js

@@ -1,5 +1,6 @@
 import { html, css, LitElement } from "lit";
-import { DileEmmitChange } from '../../../mixins/form/index.js'; 
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { DileEmmitChange } from '../../../mixins/form/index.js';
 import { checkboxBlankIcon, checkboxCheckedIcon } from '@dile/icons';
 import '../../icon/icon.js';
 import '../../input/input-message.js';
@@ -10,7 +11,7 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
       checked: { type: Boolean, reflect: true, },
       disabled: { type: Boolean, reflect: true, },
       _hasInner: { type: Boolean },
-      name: { type: String },
+      name: { type: String, reflect: true, },
       message: { type: String },
       errored: { type: Boolean },
       hideErrorOnInput: { type: Boolean },
@@ -24,9 +25,11 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
   constructor() {
     super();
     this.checked = false;
+    this.disabled = false;
     this.name = '';
     this.internals = this.attachInternals();
-    this.message = ''
+    this.message = '';
+    this._id = `dile-checkbox-${Math.random().toString(36).substr(2, 9)}`;
   }
 
   static get styles() {
@@ -50,6 +53,10 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
         align-items: center;
         justify-content: center;
       }
+      .checkbox:focus-visible {
+        outline: var(--dile-checkbox-focus-outline, 2px solid #4A90E2);
+        outline-offset: 2px;
+      }
       .isUnchecked {
         --dile-icon-color: var(--dile-checkbox-unchecked-color, var(--dile-on-background-color, #303030));
       }
@@ -86,13 +93,22 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
   render() {
     return html`
       <div @click="${this.doClick}" class="${this.disabled ? "disabled" : ""}">
-        <a href="#" @click="${this.linkClick}" @keypress="${this.doKeyPress}" class="checkbox ${this.checked ? "isChecked" : "isUnchecked"}">
+        <span
+          role="checkbox"
+          aria-checked="${this.checked}"
+          aria-disabled="${this.disabled ? "true" : "false"}"
+          aria-labelledby="${ifDefined(this._hasInner ? `${this._id}-label` : undefined)}"
+          aria-describedby="${ifDefined(this.message ? `${this._id}-message` : undefined)}"
+          tabindex="${this.disabled ? "-1" : "0"}"
+          @keydown="${this.doKeyDown}"
+          class="checkbox ${this.checked ? "isChecked" : "isUnchecked"}"
+        >
           ${this.checked ? this.checkedIcon : this.unCheckedIcon}
-        </a>
+        </span>
         ${this.innerTemplate}
       </div>
       ${this.message
-        ? html`<dile-input-message message="${this.message}" ?errored=${this.errored}></dile-input-message>`
+        ? html`<dile-input-message id="${this._id}-message" message="${this.message}" ?errored=${this.errored}></dile-input-message>`
         : ''
       }
     `;
@@ -101,14 +117,14 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
   get innerTemplate() {
     return html`
       ${this._hasInner
-        ? html` <label class="label">
+        ? html` <label id="${this._id}-label" class="label">
             <slot></slot>
           </label>`
         : ""
       }
     `
   }
-  
+
   doClick() {
     if (this.disabled) {
       return;
@@ -137,16 +153,12 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
     return html`<dile-icon .icon="${checkboxBlankIcon}"></dile-icon>`;
   }
 
-  doKeyPress(e) {
-    e.preventDefault();
-    if (e.keyCode == 32 || e.code == "Space") {
+  doKeyDown(e) {
+    if (e.key == " " || e.code == "Space" || e.keyCode == 32) {
+      e.preventDefault();
       this.doClick();
     }
   }
-  
-  linkClick(e) {
-    e.preventDefault();
-  }
 
   clear() {
     this.checked = false;

package/components/chip/chip.js

@@ -1,2 +1,4 @@
 import { DileChip } from "./src/DileChip.js";
-customElements.define('dile-chip', DileChip);
+if (!customElements.get('dile-chip')) {
+  customElements.define('dile-chip', DileChip);
+}

package/components/chip/chip.spec.js

@@ -0,0 +1,31 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './chip.js';
+
+describe('dile-chip', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderChip(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-chip');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the slotted content and a close icon', async () => {
+    const el = await renderChip('<dile-chip>Tag</dile-chip>');
+    expect(el.textContent.trim()).toBe('Tag');
+    expect(el.shadowRoot.querySelector('dile-icon')).toBeTruthy();
+  });
+
+  it('dispatches dile-chip-icon-click with the name when the icon is clicked', async () => {
+    const el = await renderChip('<dile-chip name="tag1">Tag</dile-chip>');
+    let detail = null;
+    el.addEventListener('dile-chip-icon-click', (e) => { detail = e.detail; });
+
+    el.shadowRoot.querySelector('dile-icon').click();
+
+    expect(detail).toEqual({ name: 'tag1' });
+  });
+});

package/components/color-picker/color-picker.js

@@ -1,3 +1,5 @@
 import { DileColorPicker } from './src/DileColorPicker.js';
 
-window.customElements.define('dile-color-picker', DileColorPicker);
+if (!customElements.get('dile-color-picker')) {
+  window.customElements.define('dile-color-picker', DileColorPicker);
+}

package/components/color-picker/color-picker.spec.js

@@ -114,4 +114,20 @@ describe('dile-color-picker', () => {
 
     expect(data.get('color')).toBe('#123456');
   });
+
+  it('participates in FormData when name is set as a JS property', async () => {
+    document.body.innerHTML = `
+      <form id="testForm">
+        <dile-color-picker value="#123456"></dile-color-picker>
+      </form>
+    `;
+    const el = document.body.querySelector('dile-color-picker');
+    el.name = 'color';
+    await el.updateComplete;
+
+    expect(el.getAttribute('name')).toBe('color');
+
+    const data = new FormData(document.getElementById('testForm'));
+    expect(data.get('color')).toBe('#123456');
+  });
 });

package/components/color-picker/src/DileColorPicker.js

@@ -26,7 +26,7 @@ export class DileColorPicker extends DileOverlay(
       label: { type: String },
 
       /** Name for this input field */
-      name: { type: String },
+      name: { type: String, reflect: true },
 
       /** Set initial value to the input. Must be a 6-digit hex color, e.g. "#3366ff" */
       value: { type: String },

package/components/confirm/confirm.js

@@ -1,3 +1,5 @@
 import { DileConfirm } from './src/DileConfirm.js';
 
-customElements.define("dile-confirm", DileConfirm);
+if (!customElements.get("dile-confirm")) {
+  customElements.define("dile-confirm", DileConfirm);
+}

package/components/confirm/confirm.spec.js

@@ -0,0 +1,32 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './confirm.js';
+
+describe('dile-confirm', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderConfirm(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-confirm');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a dile-modal with the default action labels', async () => {
+    const el = await renderConfirm('<dile-confirm>Are you sure?</dile-confirm>');
+    expect(el.shadowRoot.querySelector('dile-modal')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('.accept').textContent.trim()).toBe('Accept');
+    expect(el.shadowRoot.querySelector('.cancel').textContent.trim()).toBe('Cancell');
+  });
+
+  it('dispatches dile-confirm-accepted when accept is clicked', async () => {
+    const el = await renderConfirm('<dile-confirm>Are you sure?</dile-confirm>');
+    let accepted = false;
+    el.addEventListener('dile-confirm-accepted', () => { accepted = true; });
+
+    el.shadowRoot.querySelector('.accept').click();
+
+    expect(accepted).toBe(true);
+  });
+});

package/components/confirm-text/confirm-text.js

@@ -1,3 +1,5 @@
 import { DileConfirmText } from './src/DileConfirmText.js';
 
-window.customElements.define('dile-confirm-text', DileConfirmText);
+if (!customElements.get('dile-confirm-text')) {
+  window.customElements.define('dile-confirm-text', DileConfirmText);
+}

package/components/confirm-text/confirm-text.spec.js

@@ -0,0 +1,29 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './confirm-text.js';
+
+describe('dile-confirm-text', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderConfirmText(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-confirm-text');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the title and an input to type the confirmation text', async () => {
+    const el = await renderConfirmText('<dile-confirm-text title="Delete item">This cannot be undone</dile-confirm-text>');
+    expect(el.shadowRoot.querySelector('.title').textContent.trim()).toBe('Delete item');
+    expect(el.shadowRoot.querySelector('dile-input')).toBeTruthy();
+  });
+
+  it('shows negative feedback when accepting with an empty text field', async () => {
+    const el = await renderConfirmText('<dile-confirm-text>Confirm</dile-confirm-text>');
+    el.shadowRoot.querySelector('.accept').click();
+    await el.updateComplete;
+
+    expect(el.feedback.shadowRoot.textContent).toContain(el.emptyTextMessage);
+  });
+});

package/components/copy-markdown-url/copy-markdown-url.spec.js

@@ -0,0 +1,27 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './copy-markdown-url.js';
+
+describe('dile-copy-markdown-url', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderCopyMarkdownUrl(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-copy-markdown-url');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a dile-copy-text with the slotted content', async () => {
+    const el = await renderCopyMarkdownUrl('<dile-copy-markdown-url url="/doc.md">Copy link</dile-copy-markdown-url>');
+    expect(el.shadowRoot.querySelector('dile-copy-text')).toBeTruthy();
+    expect(el.textContent.trim()).toBe('Copy link');
+  });
+
+  it('defaults to an empty url and content', async () => {
+    const el = await renderCopyMarkdownUrl('<dile-copy-markdown-url></dile-copy-markdown-url>');
+    expect(el.url).toBe('');
+    expect(el.content).toBe('');
+  });
+});

package/components/copy-markdown-url/index.js

@@ -1,5 +1,7 @@
 import { DileCopyMarkdownUrl } from './src/DileCopyMarkdownUrl.js';
 
-window.customElements.define('dile-copy-markdown-url', DileCopyMarkdownUrl);
+if (!customElements.get('dile-copy-markdown-url')) {
+  window.customElements.define('dile-copy-markdown-url', DileCopyMarkdownUrl);
+}
 
 export { DileCopyMarkdownUrl };

package/components/copy-text/copy-text.spec.js

@@ -0,0 +1,38 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import './copy-text.js';
+
+describe('dile-copy-text', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderCopyText(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-copy-text');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the slotted content inside a clickable link', async () => {
+    const el = await renderCopyText('<dile-copy-text content="hello">Copy me</dile-copy-text>');
+    const link = el.shadowRoot.querySelector('a');
+    expect(link).toBeTruthy();
+    expect(el.textContent.trim()).toBe('Copy me');
+  });
+
+  it('dispatches dile-text-copied with the content on copy()', async () => {
+    const el = await renderCopyText('<dile-copy-text content="hello">Copy me</dile-copy-text>');
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    vi.stubGlobal('navigator', { ...navigator, clipboard: { writeText } });
+
+    let detail = null;
+    el.addEventListener('dile-text-copied', (e) => { detail = e.detail; });
+
+    await el.copy();
+
+    expect(writeText).toHaveBeenCalledWith('hello');
+    expect(detail).toEqual({ text: 'hello' });
+
+    vi.unstubAllGlobals();
+  });
+});

package/components/copy-text/index.js

@@ -1,5 +1,7 @@
 import { DileCopyText } from './src/DileCopyText.js';
 
-window.customElements.define('dile-copy-text', DileCopyText);
+if (!customElements.get('dile-copy-text')) {
+  window.customElements.define('dile-copy-text', DileCopyText);
+}
 
 export { DileCopyText };

package/components/drop-file/drop-file.js

@@ -1,3 +1,5 @@
 import { DileDropFile } from "./src/DileDropFile.js";
 
-customElements.define('dile-drop-file', DileDropFile);
+if (!customElements.get('dile-drop-file')) {
+  customElements.define('dile-drop-file', DileDropFile);
+}

package/components/drop-file/drop-file.spec.js

@@ -0,0 +1,33 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './drop-file.js';
+
+describe('dile-drop-file', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderDropFile(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-drop-file');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the drop zone with label and file input', async () => {
+    const el = await renderDropFile('<dile-drop-file label="Upload"></dile-drop-file>');
+    expect(el.shadowRoot.querySelector('#dropZone')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('label').textContent.trim()).toBe('Upload');
+    expect(el.shadowRoot.querySelector('input[type="file"]')).toBeTruthy();
+  });
+
+  it('clears the selected file name', async () => {
+    const el = await renderDropFile('<dile-drop-file></dile-drop-file>');
+    el.fileName = 'test.png';
+    await el.updateComplete;
+
+    el.clear();
+    await el.updateComplete;
+
+    expect(el.fileName).toBe('');
+  });
+});

package/components/drop-file/file-preview.js

@@ -1,2 +1,4 @@
 import { DileFilePreview } from "./src/DileFilePreview.js";
-customElements.define('dile-file-preview', DileFilePreview);
+if (!customElements.get('dile-file-preview')) {
+  customElements.define('dile-file-preview', DileFilePreview);
+}

package/components/drop-file/file-preview.spec.js

@@ -0,0 +1,35 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './file-preview.js';
+
+describe('dile-file-preview', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderFilePreview(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-file-preview');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders nothing when there is no fileName', async () => {
+    const el = await renderFilePreview('<dile-file-preview></dile-file-preview>');
+    expect(el.shadowRoot.querySelector('div')).toBeNull();
+  });
+
+  it('renders the file name and a clear link when fileName is set', async () => {
+    const el = await renderFilePreview('<dile-file-preview fileName="report.pdf" selectedFileLabel="Selected"></dile-file-preview>');
+    expect(el.shadowRoot.querySelector('div span').textContent).toContain('report.pdf');
+  });
+
+  it('dispatches dile-file-clear when the clear link is clicked', async () => {
+    const el = await renderFilePreview('<dile-file-preview fileName="report.pdf"></dile-file-preview>');
+    let detail = null;
+    el.addEventListener('dile-file-clear', (e) => { detail = e.detail; });
+
+    el.shadowRoot.querySelector('a').click();
+
+    expect(detail).toEqual({ fileName: 'report.pdf' });
+  });
+});