@api-client/ui 0.5.6 → 0.5.8

package/test/elements/mention-textarea/MentionTextArea.test.ts

@@ -0,0 +1,321 @@
+import { assert, fixture, html, nextFrame } from '@open-wc/testing'
+import type { MentionSuggestion } from '../../../src/elements/mention-textarea/ui-mention-textarea.js'
+import '../../../src/elements/mention-textarea/ui-mention-textarea.js'
+
+type MentionTextAreaElement =
+  import('../../../src/elements/mention-textarea/ui-mention-textarea.js').MentionTextAreaElement
+
+describe('MentionTextArea', () => {
+  const mockSuggestions: MentionSuggestion[] = [
+    { id: 'user1', label: 'John Doe', description: 'Software Engineer' },
+    { id: 'user2', label: 'Jane Smith', description: 'Product Manager' },
+    { id: 'user3', label: 'Bob Johnson', description: 'Designer', suffix: 'Design Team' },
+  ]
+
+  async function basicFixture(): Promise<MentionTextAreaElement> {
+    return fixture(html`<mention-textarea></mention-textarea>`)
+  }
+
+  async function withSuggestionsFixture(): Promise<MentionTextAreaElement> {
+    return fixture(html`<mention-textarea .suggestions="${mockSuggestions}"></mention-textarea>`)
+  }
+
+  async function labeledFixture(): Promise<MentionTextAreaElement> {
+    return fixture(html`
+      <mention-textarea
+        label="Message"
+        placeholder="Type your message..."
+        .suggestions="${mockSuggestions}"
+      ></mention-textarea>
+    `)
+  }
+
+  function getEditor(element: MentionTextAreaElement): HTMLElement {
+    return element.shadowRoot!.querySelector('.editor')!
+  }
+
+  function getSuggestionsPopover(element: MentionTextAreaElement): HTMLElement {
+    return element.shadowRoot!.querySelector('.suggestions-popover')!
+  }
+
+  function getSuggestionItems(element: MentionTextAreaElement): NodeListOf<Element> {
+    return element.shadowRoot!.querySelectorAll('.suggestion-item')
+  }
+
+  function simulateInput(element: MentionTextAreaElement, text: string): void {
+    const editor = getEditor(element)
+    editor.textContent = text
+    editor.dispatchEvent(new Event('input', { bubbles: true }))
+  }
+
+  function simulatePaste(element: MentionTextAreaElement, text: string): void {
+    const editor = getEditor(element)
+    const clipboardData = new DataTransfer()
+    clipboardData.setData('text/plain', text)
+
+    const pasteEvent = new ClipboardEvent('paste', {
+      bubbles: true,
+      clipboardData,
+    })
+
+    editor.dispatchEvent(pasteEvent)
+  }
+
+  describe('basic functionality', () => {
+    it('should render with default properties', async () => {
+      const element = await basicFixture()
+
+      assert.isNotNull(element)
+      assert.equal(element.label, '')
+      assert.equal(element.value, '')
+      assert.equal(element.mentionTrigger, '@')
+      assert.equal(element.minQueryLength, 0)
+      assert.isFalse(element.disabled)
+      assert.isFalse(element.required)
+    })
+
+    it('should have proper shadow DOM structure', async () => {
+      const element = await labeledFixture()
+
+      const container = element.shadowRoot!.querySelector('.container')
+      const editor = getEditor(element)
+      const label = element.shadowRoot!.querySelector('.label')
+
+      assert.isNotNull(container)
+      assert.isNotNull(editor)
+      assert.isNotNull(label)
+      assert.equal(editor.getAttribute('contenteditable'), 'true')
+      assert.equal(editor.getAttribute('role'), 'textbox')
+    })
+
+    it('should display label and placeholder', async () => {
+      const element = await labeledFixture()
+
+      const label = element.shadowRoot!.querySelector('.label')
+      const editor = getEditor(element)
+
+      assert.equal(label!.textContent!.trim(), 'Message')
+      assert.equal(editor.getAttribute('data-placeholder'), 'Type your message...')
+    })
+  })
+
+  describe('value property', () => {
+    it('should update value when set programmatically', async () => {
+      const element = await basicFixture()
+
+      element.value = 'Programmatic value'
+      await nextFrame()
+
+      assert.equal(element.value, 'Programmatic value')
+      const editor = getEditor(element)
+      assert.equal(editor.textContent, 'Programmatic value')
+    })
+
+    it('should sync value when editor content changes', async () => {
+      const element = await basicFixture()
+
+      simulateInput(element, 'Hello world')
+      await nextFrame()
+
+      assert.equal(element.value, 'Hello world')
+    })
+
+    it('should handle mentions in value', async () => {
+      const element = await withSuggestionsFixture()
+
+      element.value = 'Hello @{user1} how are you?'
+      await nextFrame()
+
+      const editor = getEditor(element)
+      const mentionChip = editor.querySelector('.mention-chip')
+      assert.isNotNull(mentionChip)
+      assert.equal(mentionChip!.getAttribute('data-mention-id'), 'user1')
+    })
+  })
+
+  describe('disabled state', () => {
+    it('should disable editor when disabled', async () => {
+      const element = await basicFixture()
+      element.disabled = true
+      await nextFrame()
+
+      const editor = getEditor(element)
+      assert.equal(editor.getAttribute('contenteditable'), 'false')
+      assert.equal(editor.getAttribute('tabindex'), '-1')
+    })
+  })
+
+  describe('mention suggestions', () => {
+    it('should show suggestions container when created', async () => {
+      const element = await withSuggestionsFixture()
+
+      // Check if suggestions container exists
+      const popover = getSuggestionsPopover(element)
+      assert.isNotNull(popover)
+    })
+
+    it('should create mention chip in value format', async () => {
+      const element = await withSuggestionsFixture()
+
+      element.value = 'Hello @{user1}'
+      await nextFrame()
+
+      const editor = getEditor(element)
+      const mentionChip = editor.querySelector('.mention-chip')
+
+      assert.isNotNull(mentionChip)
+      assert.equal(mentionChip!.getAttribute('data-mention-id'), 'user1')
+      assert.equal(mentionChip!.getAttribute('contenteditable'), 'false')
+    })
+  })
+
+  describe('paste functionality', () => {
+    it('should handle pasting plain text', async () => {
+      const element = await basicFixture()
+
+      // Focus editor and set up selection
+      const editor = getEditor(element)
+      editor.focus()
+
+      // Create a range at the beginning
+      const range = document.createRange()
+      const selection = window.getSelection()!
+      range.setStart(editor, 0)
+      range.setEnd(editor, 0)
+      selection.removeAllRanges()
+      selection.addRange(range)
+
+      simulatePaste(element, 'Pasted content')
+      await nextFrame()
+
+      assert.equal(element.value, 'Pasted content')
+    })
+
+    it('should insert pasted text in editor', async () => {
+      const element = await basicFixture()
+
+      // Focus editor and set up selection
+      const editor = getEditor(element)
+      editor.focus()
+
+      // Create a range at the beginning
+      const range = document.createRange()
+      const selection = window.getSelection()!
+      range.setStart(editor, 0)
+      range.setEnd(editor, 0)
+      selection.removeAllRanges()
+      selection.addRange(range)
+
+      simulatePaste(element, 'Test paste')
+      await nextFrame()
+
+      const editorAfter = getEditor(element)
+      assert.equal(editorAfter.textContent, 'Test paste')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('should have proper ARIA attributes', async () => {
+      const element = await labeledFixture()
+
+      const editor = getEditor(element)
+
+      assert.equal(editor.getAttribute('role'), 'textbox')
+      assert.equal(editor.getAttribute('aria-multiline'), 'true')
+      assert.equal(editor.getAttribute('aria-label'), 'Message')
+    })
+
+    it('should set aria-required when required', async () => {
+      const element = await basicFixture()
+      element.required = true
+      await nextFrame()
+
+      const editor = getEditor(element)
+      assert.equal(editor.getAttribute('aria-required'), 'true')
+    })
+
+    it('should set aria-invalid when invalid', async () => {
+      const element = await basicFixture()
+      element.invalid = true
+      await nextFrame()
+
+      const editor = getEditor(element)
+      assert.equal(editor.getAttribute('aria-invalid'), 'true')
+    })
+
+    it('should be focusable with proper tabindex', async () => {
+      const element = await basicFixture()
+
+      const editor = getEditor(element)
+      assert.equal(editor.getAttribute('tabindex'), '0')
+    })
+
+    it('should not be focusable when disabled', async () => {
+      const element = await basicFixture()
+      element.disabled = true
+      await nextFrame()
+
+      const editor = getEditor(element)
+      assert.equal(editor.getAttribute('tabindex'), '-1')
+    })
+  })
+
+  describe('form integration', () => {
+    it('should have proper name attribute', async () => {
+      const element = (await fixture(
+        html`<mention-textarea name="message"></mention-textarea>`
+      )) as MentionTextAreaElement
+
+      assert.equal(element.name, 'message')
+    })
+
+    it('should integrate with form validation', async () => {
+      const element = await basicFixture()
+      element.required = true
+      await nextFrame()
+
+      // Element should be invalid when empty and required
+      assert.isTrue(element.required)
+      assert.equal(element.value, '')
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle empty suggestions array', async () => {
+      const element = (await fixture(
+        html`<mention-textarea .suggestions="${[]}"></mention-textarea>`
+      )) as MentionTextAreaElement
+
+      simulateInput(element, '@test')
+      await nextFrame()
+
+      const suggestions = getSuggestionItems(element)
+      assert.equal(suggestions.length, 0)
+    })
+
+    it('should handle malformed mention in value', async () => {
+      const element = await withSuggestionsFixture()
+
+      element.value = 'Hello @{nonexistent} user'
+      await nextFrame()
+
+      const editor = getEditor(element)
+      // Should fallback to text when mention is not found
+      assert.include(editor.textContent!, '@{nonexistent}')
+    })
+
+    it('should handle multiple mentions in one text', async () => {
+      const element = await withSuggestionsFixture()
+
+      element.value = 'Hello @{user1} and @{user2}!'
+      await nextFrame()
+
+      const editor = getEditor(element)
+      const mentionChips = editor.querySelectorAll('.mention-chip')
+
+      assert.equal(mentionChips.length, 2)
+      assert.equal(mentionChips[0].getAttribute('data-mention-id'), 'user1')
+      assert.equal(mentionChips[1].getAttribute('data-mention-id'), 'user2')
+    })
+  })
+})

package/tsconfig.json

@@ -32,7 +32,7 @@
     "resolveJsonModule": true,
     "plugins": [
       {
-        "name": "ts-lit-plugin"
+        "name": "@jarrodek/ts-lit-plugin"
       }
     ]
   },