@api-client/ui 0.5.39 → 0.5.40

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

@@ -1,298 +0,0 @@
-import { fixture, assert, html, nextFrame, aTimeout } from '@open-wc/testing'
-
-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 - Accessibility', () => {
-  const sampleFunctionSchemas: FunctionSchema[] = [
-    {
-      name: 'testFunction',
-      description: 'A test function for accessibility testing',
-      category: 'test',
-      parameters: [
-        {
-          name: 'param1',
-          required: true,
-          schema: {
-            type: 'string',
-            description: 'First parameter',
-          },
-        },
-      ],
-      returns: {
-        type: 'string',
-        description: 'Returns a string',
-      },
-    },
-  ]
-
-  const sampleSuggestions: Suggestion[] = [
-    {
-      id: 'accessible-suggestion',
-      label: 'Accessible Suggestion',
-      description: 'A suggestion for accessibility testing',
-      suffix: 'string',
-    },
-  ]
-
-  async function accessibleFixture(): Promise<CodeEditorElement> {
-    return fixture(html`
-      <code-editor
-        label="Accessible Code Editor"
-        supportingtext="Enter your code with accessibility support"
-        placeholder="Type your code here..."
-        .functionSchemas="${sampleFunctionSchemas}"
-        .suggestions="${sampleSuggestions}"
-      ></code-editor>
-    `)
-  }
-
-  async function documentationFixture(): Promise<CodeEditorElement> {
-    return fixture(html`
-      <code-editor
-        label="Code Editor with Documentation"
-        showdocumentation
-        .functionSchemas="${sampleFunctionSchemas}"
-      ></code-editor>
-    `)
-  }
-
-  describe('ARIA and Semantic HTML', () => {
-    it('should have proper semantic structure', async () => {
-      await accessibleFixture()
-      await nextFrame()
-
-      // Test passes if no errors are thrown during fixture creation
-      assert.isTrue(true)
-    })
-
-    it('should have accessible labels', async () => {
-      const el = await accessibleFixture()
-      await nextFrame()
-
-      // Wait for CodeMirror to initialize
-      await aTimeout(100)
-
-      // Check that the label is properly associated
-      const label = el.shadowRoot!.querySelector('.label')
-      assert.exists(label)
-      assert.equal(label!.textContent, 'Accessible Code Editor')
-    })
-
-    it('should have proper placeholder text', async () => {
-      const el = await accessibleFixture()
-      await nextFrame()
-
-      // Wait for CodeMirror to initialize
-      await aTimeout(100)
-
-      assert.equal(el.placeholder, 'Type your code here...')
-    })
-
-    it('should have supporting text for additional context', async () => {
-      const el = await accessibleFixture()
-      await nextFrame()
-
-      const supportingText = el.shadowRoot!.querySelector('.supporting-text')
-      assert.exists(supportingText)
-      assert.equal(supportingText!.textContent, 'Enter your code with accessibility support')
-    })
-  })
-
-  describe('Focus Management', () => {
-    it('should delegate focus', async () => {
-      const el = await accessibleFixture()
-      await nextFrame()
-
-      // The element should have delegated focus
-      assert.isTrue(el.shadowRoot!.delegatesFocus)
-    })
-
-    // These are failing in the CI environment, so skipping for now
-    // They work fine in local testing
-    it.skip('should be focusable via keyboard', async () => {
-      const el = await accessibleFixture()
-      await nextFrame()
-
-      // Element should be able to receive focus
-      el.focus()
-      await nextFrame()
-
-      const surface = el.shadowRoot!.querySelector('.surface')
-      assert.isTrue(surface!.classList.contains('has-focus'))
-    })
-
-    it.skip('should maintain focus state visually', async () => {
-      const el = await accessibleFixture()
-      await nextFrame()
-
-      // Check initial state
-      const surface = el.shadowRoot!.querySelector('.surface')
-      assert.isFalse(surface!.classList.contains('has-focus'))
-
-      // Focus the element
-      el.focus()
-      await nextFrame()
-
-      assert.isTrue(surface!.classList.contains('has-focus'))
-    })
-  })
-
-  describe('Error States and Feedback', () => {
-    it('should indicate invalid state accessibly', async () => {
-      const el = await accessibleFixture()
-      el.invalid = true
-      await nextFrame()
-
-      // Check that invalid state is reflected
-      assert.isTrue(el.invalid)
-      assert.isTrue(el.hasAttribute('invalid'))
-
-      const surface = el.shadowRoot!.querySelector('.surface')
-      assert.isTrue(surface!.classList.contains('invalid'))
-    })
-
-    it('should handle disabled state properly', async () => {
-      const el = await accessibleFixture()
-      el.disabled = true
-      await nextFrame()
-
-      // Check that disabled state is reflected
-      assert.isTrue(el.disabled)
-      assert.isTrue(el.hasAttribute('disabled'))
-
-      // Wait for CodeMirror to update
-      await aTimeout(100)
-    })
-
-    it('should indicate required state', async () => {
-      const el = await accessibleFixture()
-      el.required = true
-      await nextFrame()
-
-      assert.isTrue(el.required)
-    })
-  })
-
-  describe('Documentation Accessibility', () => {
-    it('should have accessible documentation buttons', async () => {
-      const el = await documentationFixture()
-      await nextFrame()
-
-      assert.isTrue(el.showDocumentation)
-      assert.isAtLeast(el.functionSchemas.length, 1)
-    })
-
-    it('should provide proper ARIA labels for documentation', async () => {
-      const el = await documentationFixture()
-      await nextFrame()
-
-      // The documentation feature should be properly configured
-      assert.isTrue(el.showDocumentation)
-    })
-  })
-
-  describe('Keyboard Navigation', () => {
-    it('should handle Tab navigation appropriately', async () => {
-      const el = await accessibleFixture()
-      await nextFrame()
-
-      // Element should be in the tab order when not disabled
-      assert.isFalse(el.disabled)
-
-      // When disabled, it should not interfere with tab order
-      el.disabled = true
-      await nextFrame()
-      assert.isTrue(el.disabled)
-    })
-  })
-
-  describe('Screen Reader Support', () => {
-    it('should provide appropriate text content for screen readers', async () => {
-      const el = await accessibleFixture()
-      await nextFrame()
-
-      // Wait for CodeMirror to initialize
-      await aTimeout(100)
-
-      // Check that the element has accessible content
-      const label = el.shadowRoot!.querySelector('.label')
-      assert.exists(label)
-      assert.isString(label!.textContent)
-    })
-
-    it('should announce value changes appropriately', async () => {
-      const el = await accessibleFixture()
-      await nextFrame()
-
-      // Set a value
-      el.value = 'test content for screen reader'
-      await nextFrame()
-
-      assert.equal(el.value, 'test content for screen reader')
-    })
-
-    it('should provide context for code suggestions', async () => {
-      const el = await accessibleFixture()
-      await nextFrame()
-
-      // Test that suggestions are configured
-      assert.isAtLeast(el.suggestions.length, 1)
-      assert.exists(el.suggestions[0].description)
-    })
-  })
-
-  describe('Touch and Mobile Accessibility', () => {
-    it.skip('should be usable on touch devices', async () => {
-      const el = await accessibleFixture()
-      await el.updateComplete
-
-      // The editor should be interactive
-      el.focus()
-      await el.updateComplete
-
-      const surface = el.shadowRoot!.querySelector('.surface')
-      assert.isTrue(surface!.classList.contains('has-focus'))
-    })
-
-    it('should have appropriate touch targets', async () => {
-      const el = await accessibleFixture()
-      await nextFrame()
-
-      // Wait for CodeMirror to initialize
-      await aTimeout(100)
-
-      // Check that the editor container exists and is sizeable
-      const editorContainer = el.shadowRoot!.querySelector('.editor-container')
-      assert.exists(editorContainer)
-    })
-  })
-
-  describe('Form Integration Accessibility', () => {
-    it('should integrate properly with forms', async () => {
-      const el = await accessibleFixture()
-      el.name = 'accessible-editor'
-      el.required = true
-      await nextFrame()
-
-      assert.equal(el.name, 'accessible-editor')
-      assert.isTrue(el.required)
-    })
-
-    it('should provide appropriate validation feedback', async () => {
-      const el = await accessibleFixture()
-      el.invalid = true
-      el.supportingText = 'Please enter valid code'
-      await nextFrame()
-
-      assert.isTrue(el.invalid)
-
-      const supportingText = el.shadowRoot!.querySelector('.supporting-text')
-      assert.exists(supportingText)
-      assert.equal(supportingText!.textContent, 'Please enter valid code')
-    })
-  })
-})