@api-client/ui 0.5.39 → 0.5.41

package/test/elements/code-editor/code-editor.test.ts

@@ -1,574 +0,0 @@
-import { fixture, assert, html, oneEvent, nextFrame, aTimeout } from '@open-wc/testing'
-import sinon from 'sinon'
-
-import { CodeEditorElement } from '../../../src/elements/code-editor/code-editor.js'
-import '../../../src/elements/code-editor/code-editor.js' // Registers the element
-
-import type { Suggestion } from '../../../src/elements/code-editor/internals/types.js'
-import type { FunctionSchema } from '@pawel-up/jexl/schemas/types.js'
-
-describe('CodeEditor', () => {
-  // Sample test data
-  const sampleFunctionSchemas: FunctionSchema[] = [
-    {
-      name: 'testFunction',
-      description: 'A test function',
-      category: 'test',
-      parameters: [
-        {
-          name: 'param1',
-          required: true,
-          schema: {
-            type: 'string',
-            description: 'First parameter',
-          },
-        },
-        {
-          name: 'param2',
-          required: false,
-          schema: {
-            type: 'number',
-            description: 'Second parameter',
-          },
-        },
-      ],
-      returns: {
-        type: 'string',
-        description: 'Returns a string',
-      },
-    },
-    {
-      name: 'anotherFunction',
-      description: 'Another test function',
-      category: 'test',
-      parameters: [],
-      returns: {
-        type: 'boolean',
-      },
-    },
-  ]
-
-  const sampleSuggestions: Suggestion[] = [
-    {
-      id: 'suggestion-1',
-      label: 'First Suggestion',
-      description: 'Description for first suggestion',
-      suffix: 'string',
-    },
-    {
-      id: 'suggestion-2',
-      label: 'Second Suggestion',
-      description: 'Description for second suggestion',
-      suffix: 'number',
-    },
-    {
-      id: 'suggestion with spaces',
-      label: 'Suggestion With Spaces',
-      description: 'A suggestion with spaces in ID',
-      suffix: 'object',
-    },
-  ]
-
-  async function basicFixture(): Promise<CodeEditorElement> {
-    return fixture(html`<code-editor></code-editor>`)
-  }
-
-  async function configuredFixture(): Promise<CodeEditorElement> {
-    return fixture(html`
-      <code-editor
-        label="Test Editor"
-        supportingtext="Enter your code here"
-        placeholder="Type here..."
-        .functionSchemas="${sampleFunctionSchemas}"
-        .suggestions="${sampleSuggestions}"
-      ></code-editor>
-    `)
-  }
-
-  async function documentationFixture(): Promise<CodeEditorElement> {
-    return fixture(html`
-      <code-editor
-        showdocumentation
-        .functionSchemas="${sampleFunctionSchemas}"
-        .suggestions="${sampleSuggestions}"
-      ></code-editor>
-    `)
-  }
-
-  describe('Basic Properties', () => {
-    it('should render with default properties', async () => {
-      const el = await basicFixture()
-
-      assert.equal(el.label, '')
-      assert.equal(el.supportingText, '')
-      assert.isFalse(el.disabled)
-      assert.isFalse(el.invalid)
-      assert.isFalse(el.required)
-      assert.equal(el.placeholder, '')
-      assert.equal(el.value, '')
-      assert.equal(el.language, 'javascript')
-      assert.isFalse(el.showDocumentation)
-      assert.deepEqual(el.functionSchemas, [])
-      assert.deepEqual(el.suggestions, [])
-    })
-
-    it('should set and get properties correctly', async () => {
-      const el = await basicFixture()
-
-      el.label = 'Test Label'
-      el.supportingText = 'Test Support'
-      el.disabled = true
-      el.invalid = true
-      el.required = true
-      el.placeholder = 'Test Placeholder'
-      el.value = 'test code'
-      el.language = 'python'
-      el.showDocumentation = true
-      el.functionSchemas = sampleFunctionSchemas
-      el.suggestions = sampleSuggestions
-
-      await nextFrame()
-
-      assert.equal(el.label, 'Test Label')
-      assert.equal(el.supportingText, 'Test Support')
-      assert.isTrue(el.disabled)
-      assert.isTrue(el.invalid)
-      assert.isTrue(el.required)
-      assert.equal(el.placeholder, 'Test Placeholder')
-      assert.equal(el.value, 'test code')
-      assert.equal(el.language, 'python')
-      assert.isTrue(el.showDocumentation)
-      assert.deepEqual(el.functionSchemas, sampleFunctionSchemas)
-      assert.deepEqual(el.suggestions, sampleSuggestions)
-    })
-
-    it('should reflect disabled and invalid properties to attributes', async () => {
-      const el = await basicFixture()
-
-      el.disabled = true
-      el.invalid = true
-      await nextFrame()
-
-      assert.isTrue(el.hasAttribute('disabled'))
-      assert.isTrue(el.hasAttribute('invalid'))
-
-      el.disabled = false
-      el.invalid = false
-      await nextFrame()
-
-      assert.isFalse(el.hasAttribute('disabled'))
-      assert.isFalse(el.hasAttribute('invalid'))
-    })
-  })
-
-  describe('DOM Structure', () => {
-    it('should render label when provided', async () => {
-      const el = await configuredFixture()
-      await nextFrame()
-
-      const label = el.shadowRoot!.querySelector('.label')
-      assert.exists(label)
-      assert.equal(label!.textContent, 'Test Editor')
-    })
-
-    it('should render supporting text when provided', async () => {
-      const el = await configuredFixture()
-      await nextFrame()
-
-      const supportingText = el.shadowRoot!.querySelector('.supporting-text')
-      assert.exists(supportingText)
-      assert.equal(supportingText!.textContent, 'Enter your code here')
-    })
-
-    it('should not render label when not provided', async () => {
-      const el = await basicFixture()
-      await nextFrame()
-
-      const label = el.shadowRoot!.querySelector('.label')
-      assert.notExists(label)
-    })
-
-    it('should not render supporting text when not provided', async () => {
-      const el = await basicFixture()
-      await nextFrame()
-
-      const supportingText = el.shadowRoot!.querySelector('.supporting-text')
-      assert.notExists(supportingText)
-    })
-
-    it('should have editor container', async () => {
-      const el = await basicFixture()
-      await nextFrame()
-
-      const editorContainer = el.shadowRoot!.querySelector('.editor-container')
-      assert.exists(editorContainer)
-    })
-
-    it('should apply invalid class when invalid', async () => {
-      const el = await basicFixture()
-      el.invalid = true
-      await nextFrame()
-
-      const surface = el.shadowRoot!.querySelector('.surface')
-      assert.isTrue(surface!.classList.contains('invalid'))
-    })
-  })
-
-  describe('Value Management', () => {
-    it('should update value programmatically', async () => {
-      const el = await basicFixture()
-      await nextFrame()
-
-      el.value = 'new value'
-      await nextFrame()
-
-      assert.equal(el.value, 'new value')
-    })
-
-    it('should dispatch input event when content changes', async () => {
-      const el = await basicFixture()
-      await nextFrame()
-
-      setTimeout(() => {
-        el.insertText('test input')
-      })
-
-      await oneEvent(el, 'input')
-      assert.include(el.value, 'test input')
-    })
-
-    it('should dispatch change event when focus is lost and value changed', async () => {
-      const el = await basicFixture()
-      await nextFrame()
-
-      el.focus()
-      el.insertText('test change')
-
-      setTimeout(() => {
-        el.blur()
-      })
-
-      const event = await oneEvent(el, 'change')
-      assert.exists(event)
-    })
-  })
-
-  describe('Active Suggestions', () => {
-    it('should return empty array when no placeholders in value', async () => {
-      const el = await configuredFixture()
-      await nextFrame()
-
-      el.value = 'some regular text'
-      await nextFrame()
-
-      assert.deepEqual(el.activeSuggestions, [])
-    })
-
-    it('should return matching suggestions for placeholders', async () => {
-      const el = await configuredFixture()
-      await nextFrame()
-
-      el.value = 'text {{suggestion-1}} more text {{suggestion-2}}'
-      await nextFrame()
-
-      const activeSuggestions = el.activeSuggestions
-      assert.lengthOf(activeSuggestions, 2)
-      assert.deepEqual(
-        activeSuggestions.map((s) => s.id),
-        ['suggestion-1', 'suggestion-2']
-      )
-    })
-
-    it('should handle suggestions with spaces in ID', async () => {
-      const el = await configuredFixture()
-      await nextFrame()
-
-      el.value = 'text {{suggestion with spaces}} more text'
-      await nextFrame()
-
-      const activeSuggestions = el.activeSuggestions
-      assert.lengthOf(activeSuggestions, 1)
-      assert.equal(activeSuggestions[0].id, 'suggestion with spaces')
-    })
-
-    it('should ignore placeholders without matching suggestions', async () => {
-      const el = await configuredFixture()
-      await nextFrame()
-
-      el.value = 'text {{unknown-suggestion}} {{suggestion-1}}'
-      await nextFrame()
-
-      const activeSuggestions = el.activeSuggestions
-      assert.lengthOf(activeSuggestions, 1)
-      assert.equal(activeSuggestions[0].id, 'suggestion-1')
-    })
-  })
-
-  describe('Public Methods', () => {
-    // This sometimes fails in CI but works locally
-    it.skip('should focus the editor', async () => {
-      const el = await basicFixture()
-      await nextFrame()
-
-      el.focus()
-      await nextFrame()
-
-      const surface = el.shadowRoot!.querySelector('.surface')
-      assert.isTrue(surface!.classList.contains('has-focus'))
-    })
-
-    it('should get current selection', async () => {
-      const el = await basicFixture()
-      await nextFrame()
-
-      const selection = el.getSelection()
-      assert.exists(selection)
-      assert.property(selection, 'from')
-      assert.property(selection, 'to')
-    })
-
-    it('should insert text at cursor position', async () => {
-      const el = await basicFixture()
-      await nextFrame()
-
-      el.insertText('inserted text')
-      await nextFrame()
-
-      assert.include(el.value, 'inserted text')
-    })
-  })
-
-  describe('Function Events', () => {
-    it('should dispatch functioninsert event through user interaction', async () => {
-      const el = await configuredFixture()
-      await nextFrame()
-
-      // Wait for editor to be ready
-      await aTimeout(100)
-
-      // Create a spy to capture the event
-      const eventSpy = sinon.spy()
-      el.addEventListener('functioninsert', eventSpy)
-
-      // Note: In a real test, this would be triggered by CodeMirror autocompletion
-      // For now, we test that the event listener is properly set up
-      assert.isFalse(eventSpy.called)
-    })
-
-    it('should dispatch suggestioninsert event through user interaction', async () => {
-      const el = await configuredFixture()
-      await nextFrame()
-
-      // Create a spy to capture the event
-      const eventSpy = sinon.spy()
-      el.addEventListener('suggestioninsert', eventSpy)
-
-      // Note: In a real test, this would be triggered by CodeMirror autocompletion
-      // For now, we test that the event listener is properly set up
-      assert.isFalse(eventSpy.called)
-    })
-
-    it('should have docsrequest event listener when showDocumentation is true', async () => {
-      const el = await documentationFixture()
-      await nextFrame()
-
-      // Create a spy to capture the event
-      const eventSpy = sinon.spy()
-      el.addEventListener('docsrequest', eventSpy)
-
-      // Test that the element is configured to dispatch this event
-      assert.isTrue(el.showDocumentation)
-      assert.isFalse(eventSpy.called)
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('should have delegatesFocus enabled', async () => {
-      const el = await basicFixture()
-
-      // The shadowRoot should delegate focus
-      assert.isTrue(el.shadowRoot!.delegatesFocus)
-    })
-
-    it('should set aria-placeholder when placeholder is provided', async () => {
-      const el = await configuredFixture()
-      await nextFrame()
-
-      // Wait for CodeMirror to initialize
-      await aTimeout(100)
-
-      // Check if aria-placeholder is set on the editor
-      const editorElement = el.shadowRoot!.querySelector('.cm-editor')
-      if (editorElement) {
-        const contentElement = editorElement.querySelector('.cm-content')
-        assert.equal(contentElement?.getAttribute('aria-placeholder'), 'Type here...')
-      }
-    })
-  })
-
-  describe('Error Handling', () => {
-    it('should handle empty function schemas gracefully', async () => {
-      const el = await basicFixture()
-      el.functionSchemas = []
-      await nextFrame()
-
-      assert.deepEqual(el.functionSchemas, [])
-      assert.doesNotThrow(() => el.activeSuggestions)
-    })
-
-    it('should handle empty suggestions gracefully', async () => {
-      const el = await basicFixture()
-      el.suggestions = []
-      await nextFrame()
-
-      assert.deepEqual(el.suggestions, [])
-      assert.doesNotThrow(() => el.activeSuggestions)
-    })
-
-    it('should handle malformed placeholders gracefully', async () => {
-      const el = await configuredFixture()
-      await nextFrame()
-
-      el.value = 'text {{incomplete} {{}} {{valid-suggestion}}'
-      await nextFrame()
-
-      assert.doesNotThrow(() => el.activeSuggestions)
-    })
-  })
-
-  describe('Disabled State', () => {
-    it('should apply readonly state when disabled', async () => {
-      const el = await basicFixture()
-      el.disabled = true
-      await el.updateComplete
-
-      // Wait for CodeMirror to update
-      await aTimeout(100)
-
-      assert.isTrue(el.disabled)
-
-      // The editor should be readonly when disabled
-      const editorElement = el.shadowRoot!.querySelector('.cm-editor [aria-readonly="true"]')
-      assert.ok(editorElement)
-    })
-
-    it('should remove readonly state when enabled', async () => {
-      const el = await basicFixture()
-      el.disabled = true
-      await el.updateComplete
-
-      el.disabled = false
-      await el.updateComplete
-
-      const editorElement = el.shadowRoot!.querySelector('.cm-editor [aria-readonly="true"]')
-      assert.notOk(editorElement)
-    })
-  })
-
-  describe('Documentation Button', () => {
-    it('should have showDocumentation property', async () => {
-      const el = await basicFixture()
-
-      assert.isFalse(el.showDocumentation)
-
-      el.showDocumentation = true
-      assert.isTrue(el.showDocumentation)
-    })
-
-    it('should be configured for documentation features', async () => {
-      const el = await documentationFixture()
-      await nextFrame()
-
-      // Test setup is correct for documentation features
-      assert.isTrue(el.showDocumentation)
-      assert.isAtLeast(el.functionSchemas.length, 1)
-    })
-
-    it('should dispatch docsrequest event when documentation is enabled', async () => {
-      const el = await documentationFixture()
-      await nextFrame()
-      await aTimeout(100) // Wait for CodeMirror initialization
-
-      const eventSpy = sinon.spy()
-      el.addEventListener('docsrequest', eventSpy)
-
-      // Access the private method through bracket notation to avoid TypeScript errors
-      const functionSchema = sampleFunctionSchemas[0]
-      const infoElement = el['createFunctionInfoElement'](functionSchema)
-
-      // Should contain a documentation button when showDocumentation is true
-      const docButton = infoElement.querySelector('.documentation-button')
-      assert.exists(docButton)
-      assert.equal(docButton?.textContent, 'Show documentation')
-
-      // Simulate button click
-      ;(docButton as HTMLElement).click()
-
-      // Event should be dispatched
-      assert.isTrue(eventSpy.called)
-      assert.equal(eventSpy.callCount, 1)
-
-      const eventDetail = eventSpy.firstCall.args[0].detail
-      assert.exists(eventDetail.functionSchema)
-      assert.equal(eventDetail.functionSchema.name, functionSchema.name)
-    })
-
-    it('should not include documentation button when showDocumentation is false', async () => {
-      const el = await configuredFixture()
-      await nextFrame()
-      await aTimeout(100)
-
-      // Access the private method through bracket notation
-      const functionSchema = sampleFunctionSchemas[0]
-      const infoElement = el['createFunctionInfoElement'](functionSchema)
-
-      // Should not contain a documentation button when showDocumentation is false
-      const docButton = infoElement.querySelector('.documentation-button')
-      assert.notExists(docButton)
-    })
-  })
-
-  describe('CodeMirror Integration', () => {
-    it('should initialize CodeMirror editor', async () => {
-      const el = await basicFixture()
-      await nextFrame()
-
-      // Wait for CodeMirror to initialize
-      await aTimeout(100)
-
-      const editorContainer = el.shadowRoot!.querySelector('.editor-container')
-      assert.exists(editorContainer)
-
-      // CodeMirror should create a .cm-editor element
-      const cmEditor = editorContainer!.querySelector('.cm-editor')
-      assert.exists(cmEditor)
-    })
-  })
-
-  describe('Accessibility Features', () => {
-    it('should have proper ARIA attributes', async () => {
-      const el = await configuredFixture()
-      await el.updateComplete
-
-      // Wait for CodeMirror to initialize
-      await aTimeout(100)
-
-      // Test that the element has proper accessibility setup
-      assert.isTrue(el.shadowRoot!.delegatesFocus)
-    })
-
-    // This test is skipped because it fails in the CI environment
-    // but it works fine locally.
-    it.skip('should be keyboard navigable', async () => {
-      const el = await basicFixture()
-      await nextFrame()
-
-      // Element should be focusable
-      el.focus()
-      await nextFrame()
-
-      const surface = el.shadowRoot!.querySelector('.surface')
-      assert.isTrue(surface!.classList.contains('has-focus'))
-    })
-  })
-})