tests & tests & tests

__tests__/browser/markdown.test.js

@@ -18,7 +18,7 @@ describe('visual regression tests', () => {
       //'features',
       // 'headings',
       'images',
-      // 'lists',
+      'htmlTests',
       // 'tables',
       // 'tablesTests',
       'codeBlockTests',

__tests__/components/HTMLBlock.test.jsx → __tests__/components/HTMLBlock.test.tsx

@@ -1,49 +1,43 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, cleanup } from '@testing-library/react';
 import React from 'react';
 import { renderToString } from 'react-dom/server';
 import { vi } from 'vitest';
 
-import createHTMLBlock from '../../components/HTMLBlock';
+import HTMLBlock from '../../components/HTMLBlock';
 import { compile, run } from '../../index';
-import createSchema from '../../sanitize.schema';
 
-const HTMLBlock = createHTMLBlock(createSchema(), {});
-
-describe.skip('HTML Block', () => {
+describe('HTML Block', () => {
   beforeEach(() => {
-    global.window = true;
     global.mockFn = vi.fn();
   });
 
   afterEach(() => {
+    cleanup();
     vi.restoreAllMocks();
   });
 
   it('runs user scripts in compat mode', () => {
-    render(<HTMLBlock html="<script>mockFn()</script>" runScripts={true} />);
+    render(<HTMLBlock runScripts={true}>{`<script>mockFn()</script>`}</HTMLBlock>);
     expect(global.mockFn).toHaveBeenCalledTimes(1);
   });
 
   it("doesn't run user scripts by default", () => {
-    render(<HTMLBlock html="<script>mockFn()</script>" runScripts={false} />);
+    render(<HTMLBlock>{`<script>mockFn()</script>`}</HTMLBlock>);
     expect(global.mockFn).toHaveBeenCalledTimes(0);
   });
 
   it("doesn't render user scripts by default", () => {
-    render(<HTMLBlock html="<script>mockFn()</script>" runScripts={false} />);
-
+    render(<HTMLBlock>{`<script>mockFn()</script>`}</HTMLBlock>);
     expect(screen.queryByText('mockFn()')).not.toBeInTheDocument();
   });
 
   it("doesn't render user scripts with weird endings", () => {
-    render(<HTMLBlock html="<script>mockFn()</script foo='bar'>" runScripts={false} />);
-
+    render(<HTMLBlock>{`<script>mockFn()</script foo='bar'>`}</HTMLBlock>);
     expect(screen.queryByText('mockFn()')).not.toBeInTheDocument();
   });
 
   it("doesn't render user scripts with a malicious string", () => {
-    render(<HTMLBlock html="<scrip<script></script>t>mockFn()</s<script></script>cript>" runScripts={false} />);
-
+    render(<HTMLBlock>{`<scrip<script></script>t>mockFn()</s<script></script>cript>`}</HTMLBlock>);
     expect(screen.queryByText('mockFn()')).not.toBeInTheDocument();
   });
 
@@ -52,24 +46,19 @@ describe.skip('HTML Block', () => {
     <h1>Hello World</h1>
     <script>mockFn()</script>
     `;
-    const elem = <HTMLBlock html={html} runScripts={true} />;
+    const elem = <HTMLBlock runScripts={true}>{html}</HTMLBlock>;
     const view = renderToString(elem);
     expect(elem.props.runScripts).toBe(true);
     expect(view.indexOf('<script>')).toBeLessThan(0);
     expect(view.indexOf('<h1>')).toBeGreaterThanOrEqual(0);
   });
 
-  it('renders the html in a `<pre>` tag if safeMode={true}', () => {
-    const md = `
-[block:html]
-${JSON.stringify({
-  html: '<button onload="alert(\'gotcha!\')"/>',
-})}
-[/block]
-    `;
-
-    expect(renderToString(run(compile(md, { safeMode: true })))).toMatchInlineSnapshot(
-      '"<pre class=\\"html-unsafe\\" data-reactroot=\\"\\"><code>&lt;button onload=&quot;alert(&#39;gotcha!&#39;)&quot;/&gt;</code></pre>"'
+  it('renders the html in a `<pre>` tag if safeMode={true}', async () => {
+    const md = '<HTMLBlock safeMode={true}>{`<button onload="alert(\'gotcha!\')"/>`}</HTMLBlock>';
+    const code = compile(md);
+    const Component = await run(code);
+    expect(renderToString(<Component />)).toMatchInlineSnapshot(
+      '"<pre class="html-unsafe"><code>&lt;button onload=&quot;alert(&#x27;gotcha!&#x27;)&quot;/&gt;</code></pre>"',
     );
   });
 });

components/HTMLBlock/index.tsx

@@ -13,12 +13,9 @@ const extractScripts = (html: string = ''): [string, () => void] => {
   return [cleaned, () => scripts.map(js => window.eval(js))];
 };
 
-const HTMLBlock = props => {
-  const { children, runScripts, safeMode = false } = props;
+const HTMLBlock = ({ children = '', runScripts = false, safeMode = false }) => {
   let html = children;
-
   if (typeof html !== 'string') html = renderToStaticMarkup(html);
-
   const [cleanedHtml, exec] = extractScripts(html);
 
   useEffect(() => {
@@ -28,12 +25,12 @@ const HTMLBlock = props => {
   if (safeMode) {
     return (
       <pre className="html-unsafe">
-        <code>{cleanedHtml}</code>
+        <code>{html}</code>
       </pre>
     );
   }
 
-  return <div className="rdmd-html" dangerouslySetInnerHTML={{ __html: html }} />;
+  return <div className="rdmd-html" dangerouslySetInnerHTML={{ __html: cleanedHtml }} />;
 };
 
 export default HTMLBlock;