kempo-ui 0.4.5 → 0.4.7

package/tests/components/Markdown.browser-test.js

@@ -0,0 +1,292 @@
+import Markdown from '../../src/components/Markdown.js';
+import LightComponent from '../../src/components/LightComponent.js';
+
+const createMarkdown = async (innerHTML = '', attrs = {}) => {
+  const container = document.createElement('div');
+  const el = document.createElement('k-markdown');
+  for(const [key, value] of Object.entries(attrs)){
+    el.setAttribute(key, value);
+  }
+  if(innerHTML) el.innerHTML = innerHTML;
+  container.appendChild(el);
+  document.body.appendChild(container);
+  await el.updateComplete;
+  return { container, el };
+};
+
+const cleanup = (container) => {
+  if(container && container.parentNode){
+    container.parentNode.removeChild(container);
+  }
+};
+
+export default {
+  /*
+    Element Creation
+  */
+  'should create k-markdown element': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown();
+    if(!(el instanceof Markdown)){
+      cleanup(container);
+      return fail('Element should be instance of Markdown');
+    }
+    cleanup(container);
+    pass('k-markdown element created correctly');
+  },
+
+  'should extend LightComponent': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown();
+    if(!(el instanceof LightComponent)){
+      cleanup(container);
+      return fail('Markdown should extend LightComponent');
+    }
+    cleanup(container);
+    pass('Markdown extends LightComponent');
+  },
+
+  /*
+    Default Properties
+  */
+  'should have empty default value': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown();
+    if(el.value !== ''){
+      cleanup(container);
+      return fail(`Expected value to be '', got '${el.value}'`);
+    }
+    cleanup(container);
+    pass('Default value is empty string');
+  },
+
+  'should have breaks default false': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown();
+    if(el.breaks !== false){
+      cleanup(container);
+      return fail(`Expected breaks to be false, got ${el.breaks}`);
+    }
+    cleanup(container);
+    pass('Default breaks is false');
+  },
+
+  /*
+    Children → value capture
+  */
+  'should capture markdown from child text content': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('# Hello');
+    if(el.value !== '# Hello'){
+      cleanup(container);
+      return fail(`Expected value '# Hello', got '${el.value}'`);
+    }
+    cleanup(container);
+    pass('Captures markdown from children');
+  },
+
+  'should dedent indented child markdown': async ({pass, fail}) => {
+    const container = document.createElement('div');
+    container.innerHTML = `<k-markdown>
+      # Title
+
+      Some text
+    </k-markdown>`;
+    document.body.appendChild(container);
+    const el = container.querySelector('k-markdown');
+    await el.updateComplete;
+    const expected = '# Title\n\nSome text';
+    if(el.value !== expected){
+      cleanup(container);
+      return fail(`Expected dedented value '${expected}', got '${el.value}'`);
+    }
+    cleanup(container);
+    pass('Indented child markdown is dedented');
+  },
+
+  'value attribute takes precedence over children': async ({pass, fail}) => {
+    const container = document.createElement('div');
+    container.innerHTML = `<k-markdown value="from attr"># From children</k-markdown>`;
+    document.body.appendChild(container);
+    const el = container.querySelector('k-markdown');
+    await el.updateComplete;
+    if(el.value !== 'from attr'){
+      cleanup(container);
+      return fail(`Expected value 'from attr', got '${el.value}'`);
+    }
+    cleanup(container);
+    pass('value attribute beats children');
+  },
+
+  /*
+    Rendering
+  */
+  'should render markdown to HTML in light DOM': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('# Heading');
+    const heading = el.querySelector('h1');
+    if(!heading){
+      cleanup(container);
+      return fail(`Expected h1 in rendered output, got: ${el.innerHTML}`);
+    }
+    if(heading.textContent !== 'Heading'){
+      cleanup(container);
+      return fail(`Expected h1 text 'Heading', got '${heading.textContent}'`);
+    }
+    cleanup(container);
+    pass('Renders markdown heading as h1 in light DOM');
+  },
+
+  'should render bold and italic': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('This is **bold** and *italic*.');
+    const strong = el.querySelector('strong');
+    const em = el.querySelector('em');
+    if(!strong || strong.textContent !== 'bold'){
+      cleanup(container);
+      return fail(`Expected <strong>bold</strong>, got: ${el.innerHTML}`);
+    }
+    if(!em || em.textContent !== 'italic'){
+      cleanup(container);
+      return fail(`Expected <em>italic</em>, got: ${el.innerHTML}`);
+    }
+    cleanup(container);
+    pass('Bold and italic render correctly');
+  },
+
+  'should render lists': async ({pass, fail}) => {
+    const container = document.createElement('div');
+    container.innerHTML = `<k-markdown>
+      - one
+      - two
+      - three
+    </k-markdown>`;
+    document.body.appendChild(container);
+    const el = container.querySelector('k-markdown');
+    await el.updateComplete;
+    const items = el.querySelectorAll('ul > li');
+    if(items.length !== 3){
+      cleanup(container);
+      return fail(`Expected 3 li elements, got ${items.length}: ${el.innerHTML}`);
+    }
+    cleanup(container);
+    pass('Lists render with three items');
+  },
+
+  'should clear original child markdown source': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('# Hello');
+    if(el.textContent.includes('# Hello')){
+      cleanup(container);
+      return fail(`Original markdown source should be removed, got textContent: '${el.textContent}'`);
+    }
+    cleanup(container);
+    pass('Original child markdown is cleared');
+  },
+
+  /*
+    Re-rendering on value change
+  */
+  'should re-render when value property changes': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('first');
+    el.value = '## Updated';
+    await el.updateComplete;
+    const h2 = el.querySelector('h2');
+    if(!h2 || h2.textContent !== 'Updated'){
+      cleanup(container);
+      return fail(`Expected h2 'Updated' after value change, got: ${el.innerHTML}`);
+    }
+    cleanup(container);
+    pass('Re-renders on value change');
+  },
+
+  /*
+    breaks attribute
+  */
+  'breaks=false joins single newlines (CommonMark)': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown();
+    el.value = 'one\ntwo';
+    await el.updateComplete;
+    const br = el.querySelector('br');
+    if(br){
+      cleanup(container);
+      return fail(`Expected no <br> when breaks=false, got: ${el.innerHTML}`);
+    }
+    cleanup(container);
+    pass('breaks=false joins single newlines');
+  },
+
+  'breaks=true converts single newlines to <br>': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('', { breaks: '' });
+    el.value = 'one\ntwo';
+    await el.updateComplete;
+    const br = el.querySelector('br');
+    if(!br){
+      cleanup(container);
+      return fail(`Expected <br> when breaks=true, got: ${el.innerHTML}`);
+    }
+    cleanup(container);
+    pass('breaks=true converts single newlines to <br>');
+  },
+
+  /*
+    Sanitization
+  */
+  'should strip <script> tags by default': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown();
+    el.value = 'safe <script>alert(1)</script> text';
+    await el.updateComplete;
+    if(el.querySelector('script')){
+      cleanup(container);
+      return fail(`Expected no <script>, got: ${el.innerHTML}`);
+    }
+    if(el.textContent.includes('alert(1)')){
+      cleanup(container);
+      return fail(`Script content should be stripped completely, got textContent: '${el.textContent}'`);
+    }
+    cleanup(container);
+    pass('Script tags stripped by default');
+  },
+
+  'allowed-tags="*" allows everything': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('', { 'allowed-tags': '*' });
+    el.value = '<details><summary>open</summary>hi</details>';
+    await el.updateComplete;
+    if(!el.querySelector('details') || !el.querySelector('summary')){
+      cleanup(container);
+      return fail(`Expected details+summary preserved, got: ${el.innerHTML}`);
+    }
+    cleanup(container);
+    pass('allowed-tags="*" allows custom tags');
+  },
+
+  'disallowed-tags drops listed tags but keeps text': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('', { 'disallowed-tags': 'h1' });
+    el.value = '# Heading\n\nA paragraph.';
+    await el.updateComplete;
+    if(el.querySelector('h1')){
+      cleanup(container);
+      return fail(`Expected no <h1>, got: ${el.innerHTML}`);
+    }
+    if(!el.textContent.includes('Heading')){
+      cleanup(container);
+      return fail(`Expected heading text preserved, got textContent: '${el.textContent}'`);
+    }
+    if(!el.querySelector('p')){
+      cleanup(container);
+      return fail(`Expected paragraph preserved, got: ${el.innerHTML}`);
+    }
+    cleanup(container);
+    pass('disallowed-tags drops listed tags but keeps text');
+  },
+
+  /*
+    renderedHtml getter
+  */
+  'renderedHtml getter returns sanitized HTML string': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('# Title');
+    const out = el.renderedHtml;
+    if(typeof out !== 'string'){
+      cleanup(container);
+      return fail(`Expected string, got ${typeof out}`);
+    }
+    if(!out.includes('<h1') || !out.includes('Title')){
+      cleanup(container);
+      return fail(`Expected '<h1...>Title' in renderedHtml, got '${out}'`);
+    }
+    cleanup(container);
+    pass('renderedHtml returns expected HTML string');
+  }
+};

package/tests/utils/sanitizeHtml.browser-test.js

@@ -0,0 +1,179 @@
+import sanitizeHtml from '../../src/utils/sanitizeHtml.js';
+
+export default {
+  /*
+    Basic safety
+  */
+  'should remove <script> tags entirely': async ({pass, fail}) => {
+    const out = sanitizeHtml('Hello<script>alert(1)</script>world');
+    if(/script/i.test(out) || out.includes('alert')){
+      return fail(`Expected scripts removed, got "${out}"`);
+    }
+    if(!out.includes('Hello') || !out.includes('world')){
+      return fail(`Expected user text preserved, got "${out}"`);
+    }
+    pass('<script> removed and surrounding text preserved');
+  },
+
+  'should remove <style> tags entirely': async ({pass, fail}) => {
+    const out = sanitizeHtml('text<style>body{display:none}</style>more');
+    if(/style/i.test(out) || out.includes('display')){
+      return fail(`Expected style removed, got "${out}"`);
+    }
+    pass('<style> removed');
+  },
+
+  'should remove <iframe> tags entirely': async ({pass, fail}) => {
+    const out = sanitizeHtml('<iframe src="evil.com"></iframe>safe');
+    if(/iframe/i.test(out) || out.includes('evil')){
+      return fail(`Expected iframe removed, got "${out}"`);
+    }
+    if(!out.includes('safe')){
+      return fail(`Expected following text preserved, got "${out}"`);
+    }
+    pass('<iframe> removed');
+  },
+
+  'should strip event-handler attributes': async ({pass, fail}) => {
+    const out = sanitizeHtml('<p onclick="alert(1)" onmouseover="x">hi</p>');
+    if(/onclick|onmouseover/i.test(out)){
+      return fail(`Expected event handlers stripped, got "${out}"`);
+    }
+    if(!out.includes('hi')){
+      return fail(`Expected text preserved, got "${out}"`);
+    }
+    pass('Event-handler attributes stripped');
+  },
+
+  'should reject javascript: URLs in href': async ({pass, fail}) => {
+    const out = sanitizeHtml('<a href="javascript:alert(1)">click</a>');
+    if(/javascript:/i.test(out)){
+      return fail(`Expected javascript: scheme rejected, got "${out}"`);
+    }
+    pass('javascript: URL stripped from href');
+  },
+
+  'should reject data: URLs in href': async ({pass, fail}) => {
+    const out = sanitizeHtml('<a href="data:text/html,<script>alert(1)</script>">click</a>');
+    if(/data:/i.test(out)){
+      return fail(`Expected data: scheme rejected, got "${out}"`);
+    }
+    pass('data: URL stripped from href');
+  },
+
+  /*
+    Allowed content
+  */
+  'should preserve common formatting tags': async ({pass, fail}) => {
+    const out = sanitizeHtml('<p><b>bold</b> <i>italic</i> <u>under</u></p>');
+    if(!out.includes('<b>') || !out.includes('<i>') || !out.includes('<u>') || !out.includes('<p>')){
+      return fail(`Expected b/i/u/p preserved, got "${out}"`);
+    }
+    pass('Common formatting tags preserved');
+  },
+
+  'should preserve safe https links': async ({pass, fail}) => {
+    const out = sanitizeHtml('<a href="https://example.com">link</a>');
+    if(!out.includes('href="https://example.com"')){
+      return fail(`Expected https link preserved, got "${out}"`);
+    }
+    pass('https link preserved');
+  },
+
+  'should preserve mailto: links': async ({pass, fail}) => {
+    const out = sanitizeHtml('<a href="mailto:hi@example.com">email</a>');
+    if(!out.includes('mailto:hi@example.com')){
+      return fail(`Expected mailto preserved, got "${out}"`);
+    }
+    pass('mailto: link preserved');
+  },
+
+  'should preserve relative URLs': async ({pass, fail}) => {
+    const out = sanitizeHtml('<a href="/about">about</a>');
+    if(!out.includes('href="/about"')){
+      return fail(`Expected relative URL preserved, got "${out}"`);
+    }
+    pass('Relative URL preserved');
+  },
+
+  /*
+    target=_blank rel-noopener auto-fix
+  */
+  'should add rel="noopener noreferrer" to target="_blank" links': async ({pass, fail}) => {
+    const out = sanitizeHtml('<a href="https://example.com" target="_blank">x</a>');
+    if(!out.includes('target="_blank"') || !out.includes('rel="noopener noreferrer"')){
+      return fail(`Expected target+rel auto-fixed, got "${out}"`);
+    }
+    pass('rel="noopener noreferrer" forced on target="_blank" links');
+  },
+
+  /*
+    Disallowed-tag fallback (preserve children)
+  */
+  'should unwrap unknown tags but keep their text': async ({pass, fail}) => {
+    const out = sanitizeHtml('<custom>hello <b>world</b></custom>');
+    if(/custom/i.test(out)){
+      return fail(`Expected <custom> unwrapped, got "${out}"`);
+    }
+    if(!out.includes('hello') || !out.includes('<b>world</b>')){
+      return fail(`Expected children preserved, got "${out}"`);
+    }
+    pass('Disallowed tag unwrapped, children kept');
+  },
+
+  /*
+    Comments
+  */
+  'should remove HTML comments': async ({pass, fail}) => {
+    const out = sanitizeHtml('hi<!-- evil --><b>there</b>');
+    if(out.includes('evil')){
+      return fail(`Expected comment removed, got "${out}"`);
+    }
+    pass('HTML comments removed');
+  },
+
+  /*
+    Edge cases
+  */
+  'should handle null/undefined/empty input': async ({pass, fail}) => {
+    if(sanitizeHtml(null) !== '') return fail('null should produce ""');
+    if(sanitizeHtml(undefined) !== '') return fail('undefined should produce ""');
+    if(sanitizeHtml('') !== '') return fail('empty string should produce ""');
+    pass('null/undefined/empty all produce ""');
+  },
+
+  'should preserve plain text': async ({pass, fail}) => {
+    const out = sanitizeHtml('just some text');
+    if(out !== 'just some text'){
+      return fail(`Expected pass-through plain text, got "${out}"`);
+    }
+    pass('Plain text untouched');
+  },
+
+  'should keep data-* attributes': async ({pass, fail}) => {
+    const out = sanitizeHtml('<span data-id="42">x</span>');
+    if(!out.includes('data-id="42"')){
+      return fail(`Expected data-id preserved, got "${out}"`);
+    }
+    pass('data-* attributes preserved');
+  },
+
+  /*
+    Custom whitelist
+  */
+  'should respect a custom allowedTags whitelist': async ({pass, fail}) => {
+    const out = sanitizeHtml('<b>bold</b><i>italic</i>', {
+      allowedTags: new Set(['B'])
+    });
+    if(!out.includes('<b>bold</b>')){
+      return fail(`Expected <b> kept, got "${out}"`);
+    }
+    if(out.includes('<i>')){
+      return fail(`Expected <i> stripped, got "${out}"`);
+    }
+    if(!out.includes('italic')){
+      return fail(`Expected italic text preserved (unwrapped), got "${out}"`);
+    }
+    pass('Custom whitelist honored');
+  }
+};