@api-client/ui 0.5.38 → 0.5.40

package/test/elements/highlight/MarkedHighlightElement.test.ts

@@ -1,452 +0,0 @@
-import { nextFrame, fixture, expect, assert, html, oneEvent } from '@open-wc/testing'
-import sinon from 'sinon'
-import { MarkedHighlightElement } from '../../../src/index.js'
-import '../../../src/elements/highlight/marked-highlight.js'
-import { Tokens } from 'marked'
-
-describe('MarkedHighlightElement', () => {
-  async function basicFixture(): Promise<MarkedHighlightElement> {
-    return fixture(
-      html`<marked-highlight>
-        <div id="output" slot="markdown-html"></div>
-        <script type="text/markdown">
-          # Test
-        </script>
-      </marked-highlight>`
-    )
-  }
-
-  async function propertyMarkdownFixture(): Promise<MarkedHighlightElement> {
-    return fixture(
-      html`<marked-highlight markdown="# Test">
-        <div id="output" slot="markdown-html"></div>
-      </marked-highlight>`
-    )
-  }
-
-  async function noContentFixture(): Promise<MarkedHighlightElement> {
-    return fixture(
-      html`<marked-highlight>
-        <div id="output" slot="markdown-html"></div>
-        <script type="text/markdown"></script>
-      </marked-highlight>`
-    )
-  }
-
-  async function camelCaseHTMLFixture(): Promise<MarkedHighlightElement> {
-    return fixture(
-      html`<marked-highlight>
-        <div id="output" slot="markdown-html"></div>
-        <script type="text/markdown">
-          \`\`\`html
-          <div camelCase></div>
-          \`\`\`
-        </script>
-      </marked-highlight>`
-    )
-  }
-
-  // async function camelCaseHTMLWithoutChildFixture(): Promise<MarkedHighlightElement> {
-  //   return fixture(
-  //     html`<marked-highlight>
-  //       <div id="output" slot="markdown-html"></div>
-  //       <script type="text/markdown">
-  //         \`\`\`html
-  //         <div camelCase></div>
-  //         \`\`\`
-  //       </script>
-  //     </marked-highlight>`
-  //   )
-  // }
-
-  // async function badHTMLWithoutChildFixture(): Promise<MarkedHighlightElement> {
-  //   return fixture(
-  //     html`<marked-highlight>
-  //       <div id="output" slot="markdown-html"></div>
-  //       <script type="text/markdown">
-  //         \`\`\`html
-  //         <p><div></p></div>
-  //         \`\`\`
-  //       </script>
-  //     </marked-highlight>`
-  //   )
-  // }
-
-  async function rendererFixture(): Promise<MarkedHighlightElement> {
-    return fixture(
-      html`<marked-highlight>
-        <div id="output" slot="markdown-html"></div>
-        <script type="text/markdown">
-          [Link](http://url.com)
-        </script>
-      </marked-highlight>`
-    )
-  }
-
-  // async function sanitizerFixture(): Promise<MarkedHighlightElement> {
-  //   return fixture(
-  //     html`<marked-highlight sanitize>
-  //       <div id="output" slot="markdown-html"></div>
-  //       <script type="text/markdown">
-  //         [Link](http://url.com" onclick="alert(1)")
-  //         <a href="http://url.com" onclick="alert(1)">Link</a>
-
-  //         \`\`\`html
-  //         <a href="http://url.com" onclick="alert(1)">Link</a>
-  //         \`\`\`
-  //       </script>
-  //     </marked-highlight>`
-  //   )
-  // }
-
-  async function remoteContentFixture(): Promise<MarkedHighlightElement> {
-    return fixture(
-      html`<marked-highlight>
-        <div id="output" slot="markdown-html"></div>
-        <script type="text/markdown" src="test/elements/highlight/test.md">
-          # Loading
-          Please wait...
-        </script>
-      </marked-highlight>`
-    )
-  }
-
-  async function badRemoteContentFixture(): Promise<MarkedHighlightElement> {
-    return fixture(
-      html`<marked-highlight>
-        <div id="output" slot="markdown-html"></div>
-        <script type="text/markdown" src="test/elements/highlight/test3.md"></script>
-      </marked-highlight>`
-    )
-  }
-
-  async function sanitizedRemoteContentFixture(): Promise<MarkedHighlightElement> {
-    return fixture(
-      html`<marked-highlight>
-        <div id="output" slot="markdown-html"></div>
-        <script type="text/markdown" src="test/elements/highlight/remoteSanitization.md"></script>
-      </marked-highlight>`
-    )
-  }
-
-  async function unsanitizedRemoteContentFixture(): Promise<MarkedHighlightElement> {
-    return fixture(
-      html`<marked-highlight disableRemoteSanitization>
-        <div id="output" slot="markdown-html"></div>
-        <script type="text/markdown" src="test/elements/highlight/remoteSanitization.md"></script>
-      </marked-highlight>`
-    )
-  }
-
-  async function markedOptionsFixture(): Promise<MarkedHighlightElement> {
-    return fixture(
-      html`<marked-highlight sanitize pedantic breaks>
-        <div id="output" slot="markdown-html"></div>
-        <script type="text/markdown" src="test/elements/highlight/remoteSanitization.md"></script>
-      </marked-highlight>`
-    )
-  }
-
-  // Thanks IE10.
-  function isHidden(element: HTMLElement): boolean {
-    const rect = element.getBoundingClientRect()
-    return rect.width === 0 && rect.height === 0
-  }
-
-  // // Replace reserved HTML characters with their character entity equivalents to
-  // // match the transform done by Markdown.
-  // //
-  // // The Marked library itself is not used because it wraps code blocks in
-  // // `<code><pre>`, which is superfluous for testing purposes.
-  // function escapeHTML(string) {
-  //   const span = document.createElement('span');
-  //   span.textContent = string;
-  //   return span.innerHTML;
-  // }
-
-  describe('Property setters', () => {
-    let element: MarkedHighlightElement
-    beforeEach(async () => {
-      element = await basicFixture()
-    })
-
-    it(`triggers the renderMarkdown() when setting the markdown property`, async () => {
-      const spy = sinon.spy(element, 'renderMarkdown')
-      element.markdown = 'test'
-      await nextFrame()
-      assert.isTrue(spy.called)
-    })
-
-    it(`ignores renderMarkdown() when setting the same value for the markdown property`, async () => {
-      element.markdown = 'test'
-      await nextFrame()
-      const spy = sinon.spy(element, 'renderMarkdown')
-      element.markdown = 'test'
-      await nextFrame()
-      assert.isFalse(spy.called)
-    })
-
-    it(`triggers the renderMarkdown() when setting the breaks property`, async () => {
-      const spy = sinon.spy(element, 'renderMarkdown')
-      element.breaks = true
-      await nextFrame()
-      assert.isTrue(spy.called)
-    })
-
-    it(`ignores renderMarkdown() when setting the same value for the breaks property`, async () => {
-      element.breaks = true
-      await nextFrame()
-      const spy = sinon.spy(element, 'renderMarkdown')
-      element.breaks = true
-      await nextFrame()
-      assert.isFalse(spy.called)
-    })
-
-    it(`triggers the renderMarkdown() when setting the pedantic property`, async () => {
-      const spy = sinon.spy(element, 'renderMarkdown')
-      element.pedantic = true
-      await nextFrame()
-      assert.isTrue(spy.called)
-    })
-
-    it(`ignores renderMarkdown() when setting the same value for the pedantic property`, async () => {
-      element.pedantic = true
-      await nextFrame()
-      const spy = sinon.spy(element, 'renderMarkdown')
-      element.pedantic = true
-      await nextFrame()
-      assert.isFalse(spy.called)
-    })
-
-    it(`triggers the renderMarkdown() when setting the sanitize property`, async () => {
-      const spy = sinon.spy(element, 'renderMarkdown')
-      element.sanitize = true
-      await nextFrame()
-      assert.isTrue(spy.called)
-    })
-
-    it(`ignores renderMarkdown() when setting the same value for the sanitize property`, async () => {
-      element.sanitize = true
-      await nextFrame()
-      const spy = sinon.spy(element, 'renderMarkdown')
-      element.sanitize = true
-      await nextFrame()
-      assert.isFalse(spy.called)
-    })
-
-    it(`triggers the renderMarkdown() when setting the renderer property`, async () => {
-      const spy = sinon.spy(element, 'renderMarkdown')
-      element.renderer = (): void => {
-        /* */
-      }
-      await nextFrame()
-      assert.isTrue(spy.called)
-    })
-
-    it(`triggers the renderMarkdown() when setting the sanitizer property`, async () => {
-      const spy = sinon.spy(element, 'renderMarkdown')
-      element.sanitizer = (): void => {
-        /* */
-      }
-      await nextFrame()
-      assert.isTrue(spy.called)
-    })
-  })
-
-  describe('renders markdown from property setter', () => {
-    let outputElement: HTMLDivElement
-    beforeEach(async () => {
-      await propertyMarkdownFixture()
-      outputElement = document.getElementById('output') as HTMLDivElement
-    })
-
-    it('renders the code', () => {
-      assert.equal(outputElement.innerHTML, '<h1>Test</h1>\n')
-    })
-  })
-
-  describe('has options of marked library', () => {
-    let markedElement: MarkedHighlightElement
-    beforeEach(async () => {
-      markedElement = await markedOptionsFixture()
-    })
-
-    it('has sanitize', () => {
-      expect(markedElement.sanitize).to.equal(true)
-    })
-
-    it('has sanitizer', () => {
-      expect(markedElement.sanitizer).to.equal(undefined)
-    })
-
-    it('has pedantic', () => {
-      expect(markedElement.pedantic).to.equal(true)
-    })
-
-    it('has breaks', () => {
-      expect(markedElement.breaks).to.equal(true)
-    })
-  })
-
-  describe('with .markdown-html child', () => {
-    describe('ignores no content', () => {
-      let markedElement: MarkedHighlightElement
-      let outputElement: HTMLDivElement
-      let proofElement: HTMLDivElement
-      beforeEach(async () => {
-        markedElement = await noContentFixture()
-        proofElement = document.createElement('div')
-        outputElement = document.getElementById('output') as HTMLDivElement
-      })
-
-      it('in code blocks', () => {
-        proofElement.innerHTML = ''
-        assert.equal(outputElement, markedElement.outputElement)
-        assert.isTrue(isHidden(markedElement.shadowRoot!.querySelector('#content')!))
-        assert.equal(markedElement.markdown, undefined)
-        assert.equal(outputElement.innerHTML, proofElement.innerHTML)
-      })
-    })
-  })
-
-  describe('with custom renderer', () => {
-    let markedElement: MarkedHighlightElement
-    let outputElement: HTMLDivElement
-    let proofElement: HTMLDivElement
-
-    beforeEach(async () => {
-      markedElement = await rendererFixture()
-      outputElement = document.getElementById('output') as HTMLDivElement
-      proofElement = document.createElement('div')
-    })
-
-    it('takes custom link renderer', async () => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      markedElement.renderer = (renderer: any): void => {
-        renderer.link = (link: Tokens.Link): string => {
-          return `<a href="${link.href}" target="_blank">${link.text}</a>`
-        }
-      }
-      await nextFrame()
-      proofElement.innerHTML = '<a href="http://url.com" target="_blank">Link</a>'
-      expect(outputElement.innerHTML).to.include(proofElement.innerHTML)
-    })
-  })
-
-  describe('with remote content', () => {
-    let markedElement: MarkedHighlightElement
-    let outputElement: HTMLDivElement
-    let proofElement: HTMLDivElement
-
-    describe('successful fetch', () => {
-      beforeEach(async () => {
-        markedElement = await remoteContentFixture()
-        outputElement = document.getElementById('output') as HTMLDivElement
-        proofElement = document.createElement('div')
-      })
-
-      it('renders remote content', async () => {
-        proofElement.innerHTML = '<h1>Test</h1>\n<p><a href="http://url.com/">Link</a></p>\n'
-        await oneEvent(markedElement, 'markedloaded')
-        await nextFrame()
-        expect(outputElement.innerHTML).to.equal(proofElement.innerHTML)
-      })
-
-      it('renders content while remote content is loading', () => {
-        proofElement.innerHTML = '<h1>Loading</h1>\n<p>Please wait...</p>\n'
-        expect(outputElement.innerHTML).to.equal(proofElement.innerHTML)
-      })
-
-      it('renders new remote content when src changes', async () => {
-        await oneEvent(markedElement, 'markedloaded')
-        await nextFrame()
-        proofElement.innerHTML = '<h1>Test 2</h1>\n'
-        // @ts-expect-error for testing
-        markedElement.querySelector('[type="text/markdown"]').src = 'test/elements/highlight/test2.md'
-        await oneEvent(markedElement, 'markedloaded')
-        await nextFrame()
-        expect(outputElement.innerHTML).to.equal(proofElement.innerHTML)
-      })
-    })
-
-    describe('fails to load', () => {
-      beforeEach(async () => {
-        markedElement = await badRemoteContentFixture()
-        outputElement = document.getElementById('output') as HTMLDivElement
-        proofElement = document.createElement('div')
-      })
-
-      it('renders error message', async () => {
-        proofElement.innerHTML = '<p>Failed loading markdown source</p>\n'
-        await oneEvent(markedElement, 'markedloaderror')
-        await nextFrame()
-        expect(outputElement.innerHTML).to.equal(proofElement.innerHTML)
-      })
-
-      it("doesn't render error message when default is prevented", async () => {
-        proofElement.innerHTML = ''
-        markedElement.addEventListener('markedloaderror', (e) => {
-          e.preventDefault()
-        })
-        await oneEvent(markedElement, 'markedloaderror')
-        await nextFrame()
-        expect(outputElement.innerHTML).to.equal(proofElement.innerHTML)
-      })
-    })
-
-    describe('sanitizing remote content', () => {
-      describe('sanitized', () => {
-        beforeEach(async () => {
-          markedElement = await sanitizedRemoteContentFixture()
-        })
-
-        it('sanitizes remote content', async () => {
-          outputElement = markedElement.querySelector('#output')!
-          proofElement = document.createElement('div')
-          proofElement.innerHTML = '<div></div>\n'
-          await oneEvent(markedElement, 'markedloaded')
-          await nextFrame()
-          assert.isTrue(markedElement.sanitize)
-          assert.isNotTrue(markedElement.disableRemoteSanitization)
-          expect(outputElement.innerHTML).to.equal(proofElement.innerHTML)
-        })
-      })
-
-      describe('unsanitized', () => {
-        beforeEach(async () => {
-          markedElement = await unsanitizedRemoteContentFixture()
-        })
-
-        it('Does not sanitize remote content', async () => {
-          outputElement = markedElement.querySelector('#output')!
-          proofElement = document.createElement('div')
-          proofElement.innerHTML = '<div></div>\n'
-          await oneEvent(markedElement, 'markedloaded')
-          await nextFrame()
-
-          assert.isNotTrue(markedElement.sanitize)
-          assert.isTrue(markedElement.disableRemoteSanitization)
-          expect(outputElement.innerHTML).to.equal(proofElement.innerHTML)
-        })
-      })
-    })
-  })
-
-  describe('events', () => {
-    let markedElement: MarkedHighlightElement
-    let outputElement: HTMLDivElement
-    beforeEach(async () => {
-      markedElement = await camelCaseHTMLFixture()
-      outputElement = document.getElementById('output') as HTMLDivElement
-    })
-
-    it('render() fires markedrendercomplete', async () => {
-      setTimeout(() => {
-        markedElement.renderMarkdown()
-      })
-      await oneEvent(markedElement, 'markedrendercomplete')
-      await nextFrame()
-      expect(outputElement.innerHTML).to.not.equal('')
-    })
-  })
-})

package/test/elements/highlight/PrismHighlightElement.test.ts

@@ -1,79 +0,0 @@
-import { fixture, assert, html, oneEvent, nextFrame, aTimeout } from '@open-wc/testing'
-import sinon from 'sinon'
-import PrismHighlight from '../../../src/elements/highlight/PrismHighlight.js'
-import '../../../src/elements/highlight/prism-highlight.js'
-
-describe('PrismHighlightElement', () => {
-  async function markdownFixture(): Promise<PrismHighlight> {
-    return fixture(html`<prism-highlight lang="markdown"></prism-highlight>`)
-  }
-
-  async function rawFixture(): Promise<PrismHighlight> {
-    return fixture(html`<prism-highlight raw lang="json" code='{"test": true}'></prism-highlight>`)
-  }
-
-  describe('anchors handling', () => {
-    let element: PrismHighlight
-    let code = '# Test highlight\nHello world!\n'
-    code += '[link](https://domain.com/)'
-
-    beforeEach(async () => {
-      element = await markdownFixture()
-      element.code = code
-      // one for the setter
-      await nextFrame()
-      // and one for the highlight debouncer (do we still need it?)
-      await aTimeout(0)
-      await nextFrame()
-    })
-
-    // Not sure why but when executing this file only this works, but in the test run it cannot find the "a" element.
-    it.skip('dispatches the link event', async () => {
-      const anchor = element.outputElement!.querySelector('a')!
-      setTimeout(() => {
-        anchor.click()
-      })
-      const e = await oneEvent(element, 'link')
-      assert.equal(e.detail.url, 'https://domain.com/', 'has the URL value')
-      assert.equal(e.detail.asNew, false, 'has the asNew property')
-    })
-
-    // auto liner is disabled due to some error with dart syntax language.
-    it.skip('dispatches the event when ctrl is set', async () => {
-      const spy = sinon.spy()
-      element.addEventListener('link', spy)
-      const anchor = element.outputElement!.querySelector('a')!
-      anchor.dispatchEvent(
-        new PointerEvent('click', {
-          bubbles: true,
-          cancelable: true,
-          composed: true,
-          ctrlKey: true,
-        })
-      )
-      assert.isTrue(spy.calledOnce)
-      const event = spy.args[0][0] as CustomEvent
-      assert.equal(event.detail.url, 'https://domain.com/', 'has the URL value')
-      assert.equal(event.detail.asNew, true, 'has the asNew property')
-    })
-  })
-
-  describe('#raw', () => {
-    let element: PrismHighlight
-    beforeEach(async () => {
-      element = await rawFixture()
-    })
-
-    it('renders the code without highlighting', () => {
-      const pre = element.shadowRoot!.querySelector('.raw-content')!
-      assert.ok(pre)
-    })
-
-    it('renders back the highlighted document', async () => {
-      element.raw = false
-      await nextFrame()
-      const pre = element.shadowRoot!.querySelector('.parsed-content')
-      assert.ok(pre)
-    })
-  })
-})

package/test/elements/highlight/PrismHighlighter.test.ts

@@ -1,94 +0,0 @@
-import { assert } from '@open-wc/testing'
-import { PrismHighlighter } from '../../../src/index.js'
-
-describe('PrismHighlighter', () => {
-  describe('detectLang()', () => {
-    let instance: PrismHighlighter
-    beforeEach(() => {
-      instance = new PrismHighlighter()
-    })
-
-    it('Returns JS grammar when no lang', () => {
-      const result = instance.detectLang('{}')
-      // @ts-expect-error for testing
-      assert.isTrue(result === Prism.languages.javascript)
-    })
-
-    it('Returns Markup grammar when no lang', () => {
-      const result = instance.detectLang('<html>')
-      // @ts-expect-error for testing
-      assert.isTrue(result === Prism.languages.markup)
-    })
-    ;['js', 'esm', 'mj'].forEach((item) => {
-      it(`Returns JS grammar for ${item}`, () => {
-        const result = instance.detectLang('{}', item)
-        // @ts-expect-error for testing
-        assert.isTrue(result === Prism.languages.javascript)
-      })
-    })
-    ;['c'].forEach((item) => {
-      it(`Returns C grammar for ${item}`, () => {
-        const result = instance.detectLang('{}', item)
-        // @ts-expect-error for testing
-        assert.isTrue(result === Prism.languages.clike)
-      })
-    })
-
-    it('Returns default grammar', () => {
-      const result = instance.detectLang('<html>', 'test')
-      // @ts-expect-error for testing
-      assert.isTrue(result === Prism.languages.markup)
-    })
-  })
-
-  describe('Parsing', () => {
-    let instance: PrismHighlighter
-    beforeEach(() => {
-      instance = new PrismHighlighter()
-    })
-
-    it('parses XML', () => {
-      const code = '<Person>true</Person>'
-      const result = instance.tokenize(code, 'xml')
-      let compare = '<span class="token tag"><span class="token tag">'
-      compare += '<span class="token punctuation">&lt;</span>Person</span>'
-      compare += '<span class="token punctuation">></span></span>true'
-      compare += '<span class="token tag"><span class="token tag">'
-      compare += '<span class="token punctuation">&lt;/</span>'
-      compare += 'Person</span><span class="token punctuation">></span></span>'
-      assert.equal(result, compare)
-    })
-
-    it('renders predefined json', () => {
-      const code = '{"test": true}'
-      const result = instance.tokenize(code, 'json')
-      const c =
-        '<span class="token punctuation">{</span><span class="token property">"test"</span>' +
-        '<span class="token operator">:</span> <span class="token boolean">true</span>' +
-        '<span class="token punctuation">}</span>'
-      assert.equal(result, c)
-    })
-
-    it('renders code with no language', async () => {
-      const code = '007'
-      const result = instance.tokenize(code)
-      const c = '<span class="token number">007</span>'
-      assert.equal(result, c)
-    })
-  })
-
-  describe('debounce()', () => {
-    it('eventually returns the parse result', (done) => {
-      const code = '{"test": true}'
-      const c =
-        '<span class="token punctuation">{</span><span class="token property">"test"</span>' +
-        '<span class="token operator">:</span> <span class="token boolean">true</span>' +
-        '<span class="token punctuation">}</span>'
-      const instance = new PrismHighlighter((result) => {
-        assert.equal(result, c)
-        done()
-      })
-      instance.debounce(code, 'json')
-    })
-  })
-})

package/test/elements/highlight/remoteSanitization.md

@@ -1 +0,0 @@
-<div></div>

package/test/elements/highlight/test.md

@@ -1,3 +0,0 @@
-# Test
-
-[Link](http://url.com/)

package/test/elements/highlight/test1.md

@@ -1,3 +0,0 @@
-# Test Another
-
-[Link](http://url.com/)

package/test/elements/highlight/test2.md

@@ -1 +0,0 @@
-# Test 2