From 6a4dc61c7f5635db022dc1e4d7d7ed9948a1064b Mon Sep 17 00:00:00 2001 From: jennspencer Date: Wed, 15 May 2024 14:46:20 -0700 Subject: [PATCH 01/10] ts-ify component --- components/Embed/index.jsx | 89 -------------------------------------- components/Embed/index.tsx | 66 ++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+), 89 deletions(-) delete mode 100644 components/Embed/index.jsx create mode 100644 components/Embed/index.tsx diff --git a/components/Embed/index.jsx b/components/Embed/index.jsx deleted file mode 100644 index d7138c78f..000000000 --- a/components/Embed/index.jsx +++ /dev/null @@ -1,89 +0,0 @@ -/* eslint-disable react/jsx-props-no-spreading, jsx-a11y/iframe-has-title */ -const propTypes = require('prop-types'); -const React = require('react'); - -const Favicon = ({ src, alt = 'favicon', ...attr }) => {alt}; -Favicon.propTypes = { - alt: propTypes.string, - src: propTypes.string, -}; - -class Embed extends React.Component { - render() { - const { lazy = true, provider, url, title, html, iframe, image, favicon, ...attrs } = this.props; - - if (!url) { - return
; - } - - if ('iframe' in this.props) { - return ", - "url": "https://www.youtube.com/watch?v=J3-uKv1DShQ&feature=youtu.be", - "title": "Funny Solidier Drop Kick", - "favicon": "https://s.ytimg.com/yts/img/favicon-vfl8qSV2F.ico", - "image": "https://i.ytimg.com/vi/J3-uKv1DShQ/hqdefault.jpg" -} -[/block] - -
Magic Block (iFrame)
-[block:embed] -{ - "html": "", - "url": "https://www.google.com/maps/place/Mama's+Royal+Cafe/@37.829698,-122.258166,16z/data=!4m13!1m7!3m6!1s0x80857dfb145a04ff:0x96b17d967421636f!2s4126+Opal+St,+Oakland,+CA+94609!3b1!8m2!3d37.8296978!4d-122.2581661!3m4!1s0x0:0x722326b6c2ac7642!8m2!3d37.8277961!4d-122.2563006?hl=en", - "title": "Mama's Royal Cafe", - "favicon": "https://www.google.com/images/branding/product/ico/maps15_bnuw3a_32dp.ico", - "image": "http://maps-api-ssl.google.com/maps/api/staticmap?center=37.829698,-122.258166&zoom=15&size=250x250&sensor=false" -} -[/block] -
-
Markdown Block
+## Syntax +Simple embedded content is written as a Markdown link, with a title of "@embed", like so: + +``` [Embed Title](https://youtu.be/8bh238ekw3 "@embed") +``` +More robust embedded content is written as a JSX component: + +``` + +``` + +## Examples + + + + + + +### Embed Component (Embedly) -
+ -## Known Issues -At the moment, embed links written in the new ReadMe-flavored markdown syntax will simply display the link. (Magic block embeds will continue to work, though!) We're aware of the shortcoming, and plan to refactor this component as we move forward. -[block:html] -{ - "html": "" -} -[/block] + +### Embed Component (iFrame) + + + + +### Markdown Block + +[Embed Title](https://youtu.be/8bh238ekw3 "@embed") diff --git a/enums.ts b/enums.ts index a8e849ef0..422052abd 100644 --- a/enums.ts +++ b/enums.ts @@ -4,4 +4,5 @@ export enum NodeTypes { i = 'i', image = 'image', htmlBlock = 'html-block', + embed = 'rdme-embed' } diff --git a/processor/compile/embed.js b/processor/compile/embed.js deleted file mode 100644 index 8f597390d..000000000 --- a/processor/compile/embed.js +++ /dev/null @@ -1,18 +0,0 @@ -function EmbedCompiler(node) { - const data = node.data.hProperties; - let { provider = 'embed' } = data; - provider = provider.replace(/^@/, ''); - - return ` -[block:embed] -${JSON.stringify({ ...data, provider }, null, 2)} -[/block] -`; -} - -module.exports = function () { - const { Compiler } = this; - const { visitors } = Compiler.prototype; - - visitors.embed = EmbedCompiler; -}; diff --git a/processor/compile/embed.ts b/processor/compile/embed.ts new file mode 100644 index 000000000..10f78e975 --- /dev/null +++ b/processor/compile/embed.ts @@ -0,0 +1,11 @@ +import type { Embed } from "types"; + +const embed = (node: Embed) => { + const { image, favicon, iframe, title, url } = node.data?.hProperties || {}; + const complexEmbed: boolean = Boolean(image) || Boolean(favicon) || iframe; + if (complexEmbed) return ``; + + return `[${title}](${url} "@embed")'}`; +} + +export default embed; diff --git a/processor/compile/index.ts b/processor/compile/index.ts index 81cbf5377..0b6211e7c 100644 --- a/processor/compile/index.ts +++ b/processor/compile/index.ts @@ -1,7 +1,8 @@ import gemoji from './gemoji'; import codeTabs from './code-tabs'; -import image from './image'; +import embed from './embed'; import htmlBlock from './html-block'; +import image from './image'; import { NodeTypes } from '../../enums'; function compilers() { @@ -12,8 +13,9 @@ function compilers() { const handlers = { [NodeTypes.emoji]: gemoji, [NodeTypes.codeTabs]: codeTabs, - [NodeTypes.image]: image, + [NodeTypes.embed]: embed, [NodeTypes.htmlBlock]: htmlBlock, + [NodeTypes.image]: image, }; toMarkdownExtensions.push({ extensions: [{ handlers }] }); diff --git a/processor/parse/flavored/embed.js b/processor/parse/flavored/embed.js deleted file mode 100644 index b39d01c27..000000000 --- a/processor/parse/flavored/embed.js +++ /dev/null @@ -1,47 +0,0 @@ -const rgx = /^\[([^\]]*)\]\((\S*) ["'](@\w+)"\)/; - -function tokenizer(eat, value) { - if (!rgx.test(value)) return true; - - // eslint-disable-next-line prefer-const - let [match, title, url, provider] = rgx.exec(value); - - return eat(match)({ - type: 'embed', - title, - url, - provider, - data: { - title, - url, - provider, - hProperties: { title, url, provider }, - hName: 'rdme-embed', - }, - children: [ - { - type: 'link', - url, - title: provider, - children: [{ type: 'text', value: title }], - }, - ], - }); -} - -function parser() { - const { Parser } = this; - const tokenizers = Parser.prototype.blockTokenizers; - const methods = Parser.prototype.blockMethods; - - tokenizers.embed = tokenizer; - methods.splice(methods.indexOf('newline'), 0, 'embed'); -} - -module.exports = parser; - -module.exports.sanitize = sanitizeSchema => { - const tags = sanitizeSchema.tagNames; - tags.push('embed'); - return parser; -}; diff --git a/processor/transform/callouts.ts b/processor/transform/callouts.ts index f72af65f6..61e967a9b 100644 --- a/processor/transform/callouts.ts +++ b/processor/transform/callouts.ts @@ -1,6 +1,7 @@ import { visit } from 'unist-util-visit'; import emojiRegex from 'emoji-regex'; -import { Blockquote, BlockContent, Parent, DefinitionContent } from 'mdast'; +import { Blockquote } from 'mdast'; +import { Callout } from 'types'; const regex = `^(${emojiRegex().source}|⚠)(\\s+|$)`; @@ -25,17 +26,11 @@ const toString = (node: Node): string => { return ''; }; -interface Callout extends Parent { - type: 'rdme-callout'; - children: Array; -} - const calloutTransformer = () => { return (tree: any) => { visit(tree, 'blockquote', (node: Blockquote | Callout) => { try { if (!(node.children[0].type === 'paragraph' && node.children[0].children[0].type === 'text')) return; - const startText = node.children[0].children[0].value; const [match, icon] = startText.match(regex) || []; diff --git a/processor/transform/code-tabs.ts b/processor/transform/code-tabs.ts index 9ae3b44ef..800319087 100644 --- a/processor/transform/code-tabs.ts +++ b/processor/transform/code-tabs.ts @@ -3,7 +3,7 @@ import { CodeTabs } from 'types'; import { visit } from 'unist-util-visit'; import { NodeTypes } from '../../enums'; -const codeTabs = () => tree => { +const codeTabsTransformer = () => tree => { visit(tree, 'code', (node: Code) => { const { lang, meta, value } = node; @@ -54,4 +54,4 @@ const codeTabs = () => tree => { return tree; }; -export default codeTabs; +export default codeTabsTransformer; diff --git a/processor/transform/embeds.ts b/processor/transform/embeds.ts new file mode 100644 index 000000000..e158c6fc4 --- /dev/null +++ b/processor/transform/embeds.ts @@ -0,0 +1,25 @@ +import { visit } from 'unist-util-visit'; + +import { NodeTypes } from '../../enums'; + +const embedTransformer = () => { + return (tree: any) => { + visit(tree, 'link', (node, _, parent) => { + if (parent.type !== 'paragraph' || parent.children.length > 1 || node.title !== '@embed') return node; + try { + const { children, url } = node; + const title = children[0].value; + node.type = NodeTypes.embed; + node.data = { + hProperties: { title, url, provider: url }, + hName: 'Embed', + }; + node.children.shift(); + } catch (e) { + console.log(e); + } + }); + }; +}; + +export default embedTransformer; \ No newline at end of file diff --git a/processor/transform/index.ts b/processor/transform/index.ts index acbbe71a0..bfa199bb3 100644 --- a/processor/transform/index.ts +++ b/processor/transform/index.ts @@ -1,5 +1,6 @@ import calloutTransformer from './callouts'; import codeTabsTransfromer from './code-tabs'; +import embedTransformer from './embeds'; import gemojiTransformer from './gemoji+'; -export default [calloutTransformer, codeTabsTransfromer, gemojiTransformer]; +export default [calloutTransformer, codeTabsTransfromer, embedTransformer, gemojiTransformer]; diff --git a/types.d.ts b/types.d.ts index f890fc74d..77f649484 100644 --- a/types.d.ts +++ b/types.d.ts @@ -1,6 +1,21 @@ -import { Code, Data, Literal, Table, Parent } from 'mdast'; +import { + BlockContent, + Blockquote, + Code, + Data, + DefinitionContent, + Link, + Literal, + Node, + Parent, + Table, +} from 'mdast'; import { NodeTypes } from './enums'; +type Callout = Omit & { + type: 'rdme-callout'; +} + interface CodeTabs extends Parent { type: NodeTypes.codeTabs; children: Code[]; @@ -9,7 +24,22 @@ interface CodeTabs extends Parent { }; } -interface HTMLBlock extends Parent { +interface Embed extends Parent { + type: NodeTypes.embed; + children: Link[]; + data: Data & { + hName: 'Embed'; + hProperties: { + title: string; + url: string; + image?: string; + favicon?: string; + iframe?: boolean; + }; + }; +} + +interface HTMLBlock extends Node { type: NodeTypes.htmlBlock; data: Data & { hName: 'html-block'; @@ -31,6 +61,8 @@ interface FaEmoji extends Literal { declare module 'mdast' { interface BlockContentMap { [NodeTypes.codeTabs]: CodeTabs; + [NodeTypes.embed]: Embed; + [NodeTypes.htmlBlock]: HTMLBlock; } interface PhrasingContentMap { From f04126437abe34074290203671ad9b54fcb7aa86 Mon Sep 17 00:00:00 2001 From: jennspencer Date: Fri, 17 May 2024 15:52:05 -0700 Subject: [PATCH 03/10] tweaks and tests --- ...rs.test.js.snap => compilers.test.ts.snap} | 2 +- __tests__/__snapshots__/index.test.js.snap | 2 +- __tests__/browser/markdown.test.js | 2 +- .../{compilers.test.js => compilers.test.ts} | 2 +- .../{Callout.test.jsx => Callout.test.tsx} | 7 +- .../{Code.test.jsx => Code.test.tsx} | 20 +++--- __tests__/components/CodeTabs.test.jsx | 16 ----- __tests__/components/CodeTabs.test.tsx | 21 ++++++ .../{Image.test.jsx => Image.test.tsx} | 0 .../__snapshots__/index.test.ts.snap | 8 +++ __tests__/components/index.test.ts | 68 ++++++++----------- __tests__/helpers.js | 13 ---- __tests__/helpers.ts | 17 +++++ __tests__/index.test.js | 13 ++-- components/Callout/index.tsx | 2 +- components/Code/index.tsx | 5 +- components/Image/index.tsx | 38 +++++++---- processor/compile/embed.ts | 2 +- processor/transform/embeds.ts | 18 ++--- types.d.ts | 3 - 20 files changed, 141 insertions(+), 118 deletions(-) rename __tests__/__snapshots__/{compilers.test.js.snap => compilers.test.ts.snap} (64%) rename __tests__/{compilers.test.js => compilers.test.ts} (97%) rename __tests__/components/{Callout.test.jsx => Callout.test.tsx} (77%) rename __tests__/components/{Code.test.jsx => Code.test.tsx} (61%) delete mode 100644 __tests__/components/CodeTabs.test.jsx create mode 100644 __tests__/components/CodeTabs.test.tsx rename __tests__/components/{Image.test.jsx => Image.test.tsx} (100%) delete mode 100644 __tests__/helpers.js create mode 100644 __tests__/helpers.ts diff --git a/__tests__/__snapshots__/compilers.test.js.snap b/__tests__/__snapshots__/compilers.test.ts.snap similarity index 64% rename from __tests__/__snapshots__/compilers.test.js.snap rename to __tests__/__snapshots__/compilers.test.ts.snap index ab0fd6806..b8522bf29 100644 --- a/__tests__/__snapshots__/compilers.test.js.snap +++ b/__tests__/__snapshots__/compilers.test.ts.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`ReadMe Flavored Blocks > Embed 1`] = ` -"[Embedded meta links.](https://nyti.me/s/gzoa2xb2v3 "@nyt") +"[Embedded meta links.](https://nyti.me/s/gzoa2xb2v3 "@embed") " `; diff --git a/__tests__/__snapshots__/index.test.js.snap b/__tests__/__snapshots__/index.test.js.snap index 9b0fad1ac..034b28108 100644 --- a/__tests__/__snapshots__/index.test.js.snap +++ b/__tests__/__snapshots__/index.test.js.snap @@ -345,4 +345,4 @@ exports[`list items 1`] = ` exports[`prefix anchors with "section-" > should add a section- prefix to heading anchors 1`] = `undefined`; -exports[`tables 1`] = `"
TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1
"`; +exports[`tables 1`] = `"
TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1
"`; diff --git a/__tests__/browser/markdown.test.js b/__tests__/browser/markdown.test.js index 5c3536d16..b3f08256a 100644 --- a/__tests__/browser/markdown.test.js +++ b/__tests__/browser/markdown.test.js @@ -14,7 +14,7 @@ describe('visual regression tests', () => { // 'callouts', 'calloutTests', 'codeBlocks', - // 'embeds', + 'embeds', //'features', // 'headings', 'images', diff --git a/__tests__/compilers.test.js b/__tests__/compilers.test.ts similarity index 97% rename from __tests__/compilers.test.js rename to __tests__/compilers.test.ts index cbb6054a2..dc8be67d4 100644 --- a/__tests__/compilers.test.js +++ b/__tests__/compilers.test.ts @@ -2,7 +2,7 @@ import { mdast, mdx } from '../index'; describe('ReadMe Flavored Blocks', () => { it('Embed', () => { - const txt = '[Embedded meta links.](https://nyti.me/s/gzoa2xb2v3 "@nyt")'; + const txt = '[Embedded meta links.](https://nyti.me/s/gzoa2xb2v3 "@embed")'; const ast = mdast(txt); const out = mdx(ast); expect(out).toMatchSnapshot(); diff --git a/__tests__/components/Callout.test.jsx b/__tests__/components/Callout.test.tsx similarity index 77% rename from __tests__/components/Callout.test.jsx rename to __tests__/components/Callout.test.tsx index 1d1a513db..29f42f143 100644 --- a/__tests__/components/Callout.test.jsx +++ b/__tests__/components/Callout.test.tsx @@ -3,16 +3,15 @@ import React from 'react'; import Callout from '../../components/Callout'; -describe.skip('Callout', () => { +describe('Callout', () => { it('render _all_ its children', () => { render( - +

Title

First Paragraph

Second Paragraph

- + , ); - expect(screen.getByText('Second Paragraph')).toBeVisible(); }); }); diff --git a/__tests__/components/Code.test.jsx b/__tests__/components/Code.test.tsx similarity index 61% rename from __tests__/components/Code.test.jsx rename to __tests__/components/Code.test.tsx index dce16c7ed..cde76524b 100644 --- a/__tests__/components/Code.test.jsx +++ b/__tests__/components/Code.test.tsx @@ -1,12 +1,14 @@ import React from 'react'; import { vi } from 'vitest'; -import CreateCode from '../../components/Code'; +import Code from '../../components/Code'; -const { fireEvent, render, screen } = require('@testing-library/react'); -const copy = require('copy-to-clipboard'); +import { fireEvent, render, screen } from '@testing-library/react'; +import copy from 'copy-to-clipboard'; -const Code = CreateCode({ attributes: {} }, { copyButtons: true }); +const codeProps = { + copyButtons: true, +}; vi.mock('@readme/syntax-highlighter', () => ({ default: code => { @@ -15,13 +17,13 @@ vi.mock('@readme/syntax-highlighter', () => ({ canonical: lang => lang, })); -describe.skip('Code', () => { - it('copies the variable interpolated code', () => { +describe('Code', () => { + it.skip('copies the variable interpolated code', () => { const props = { children: ['console.log("<>");'], }; - const { container } = render(); + const { container } = render(); expect(container).toHaveTextContent(/VARIABLE_SUBSTITUTED/); fireEvent.click(screen.getByRole('button')); @@ -30,10 +32,10 @@ describe.skip('Code', () => { }); it('does not nest the button inside the code block', () => { - render({'console.log("hi");'}); + render({'console.log("hi");'}); const btn = screen.getByRole('button'); - expect(btn.parentNode.nodeName.toLowerCase()).not.toBe('code'); + expect(btn.parentNode?.nodeName.toLowerCase()).not.toBe('code'); }); it('allows undefined children?!', () => { diff --git a/__tests__/components/CodeTabs.test.jsx b/__tests__/components/CodeTabs.test.jsx deleted file mode 100644 index c4075a1dc..000000000 --- a/__tests__/components/CodeTabs.test.jsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render } from '@testing-library/react'; - -import { compile, run } from '../../index'; - -describe.skip('Callout', () => { - it('render _all_ its children', () => { - const md = ` -\`\`\` -assert('theme', 'dark'); -\`\`\` - `; - const { container } = render(run(compile(md, { theme: 'dark' }))); - - expect(container.querySelector('code.theme-dark')).toBeVisible(); - }); -}); diff --git a/__tests__/components/CodeTabs.test.tsx b/__tests__/components/CodeTabs.test.tsx new file mode 100644 index 000000000..0b0d7e70f --- /dev/null +++ b/__tests__/components/CodeTabs.test.tsx @@ -0,0 +1,21 @@ +import { render } from '@testing-library/react'; +import React from 'react'; +import { compile, run } from '../../index'; + +describe('CodeTabs', () => { + it('render _all_ its children', async () => { + const md = ` +\`\`\` +assert('theme', 'dark'); +\`\`\` +\`\`\` +assert('theme', 'light'); +\`\`\` + `; + const Component = await run(compile(md)); + const { container } = render(); + + expect(container).toHaveTextContent(`assert('theme', 'dark')`); + expect(container).toHaveTextContent(`assert('theme', 'light')`); + }); +}); diff --git a/__tests__/components/Image.test.jsx b/__tests__/components/Image.test.tsx similarity index 100% rename from __tests__/components/Image.test.jsx rename to __tests__/components/Image.test.tsx diff --git a/__tests__/components/__snapshots__/index.test.ts.snap b/__tests__/components/__snapshots__/index.test.ts.snap index 2dd5a4377..980a79dbf 100644 --- a/__tests__/components/__snapshots__/index.test.ts.snap +++ b/__tests__/components/__snapshots__/index.test.ts.snap @@ -2,4 +2,12 @@ exports[`Components > Callout 1`] = `"

❗️Error Callout

Lorem ipsum dolor.

"`; +exports[`Components > Embed 1`] = `"
"`; + +exports[`Components > Embed 2`] = `""`; + +exports[`Components > Embed 3`] = `"
George W. Bush Calls for End to Pandemic Partisanship
nytimes.comnytimes.com
George W. Bush Calls for End to Pandemic Partisanship
"`; + +exports[`Components > Embed 4`] = `"

rdmd

"`; + exports[`Components > Image 1`] = `"

Bro eats pizza and makes an OK gesture.

"`; diff --git a/__tests__/components/index.test.ts b/__tests__/components/index.test.ts index 2c27de17f..9b768cc3d 100644 --- a/__tests__/components/index.test.ts +++ b/__tests__/components/index.test.ts @@ -4,8 +4,6 @@ import { vi } from 'vitest'; import { compile, run, utils } from '../../index'; -import { silenceConsole } from '../helpers'; - describe.skip('Data Replacements', () => { it('Variables', () => { const { container } = render( @@ -87,46 +85,38 @@ describe('Components', () => { expect(container.querySelectorAll('pre')[1]).toHaveClass('CodeTabs_active'); }); - it.skip('Embed', () => { + it('Embed', () => { const fixtures = { - html: `[block:embed] - { - "html": "", - "url": "https://www.google.com/maps/place/4126+Opal+St,+Oakland,+CA+94609/@37.829698,-122.258166,16z/data=!4m5!3m4!1s0x80857dfb145a04ff:0x96b17d967421636f!8m2!3d37.8296978!4d-122.2581661?hl=en", - "title": "4126 Opal St, Oakland, CA 94609", - "favicon": "https://www.google.com/images/branding/product/ico/maps15_bnuw3a_32dp.ico", - "image": "http://maps-api-ssl.google.com/maps/api/staticmap?center=37.829698,-122.258166&zoom=15&size=250x250&sensor=false" - } - [/block]`, - iframe: `[block:embed] - { - "html": false, - "url": "https://consent-manager.metomic.io/placeholder-demo.html?example=reddit", - "title": null, - "favicon": null, - "iframe": true, - "height": "550" - } - [/block]`, - meta: `[block:embed] - { - "html": false, - "url": "https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html", - "title": "George W. Bush Calls for End to Pandemic Partisanship", - "favicon": "https://www.nytimes.com/vi-assets/static-assets/favicon-4bf96cb6a1093748bf5b3c429accb9b4.ico", - "image": "https://static01.nyt.com/images/2020/05/02/world/02dc-virus-bush-2/merlin_171999921_e857a690-fb9b-462d-a20c-28c8161107c9-facebookJumbo.jpg" - } - [/block]`, - rdmd: '[](https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html "@embed")', + html: ``, + iframe: ``, + meta: ``, + rdmd: '[rdmd](https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html "@embed")', }; - silenceConsole()(error => { - Object.values(fixtures).map(fx => { - const { container } = render(compile(fx)); - return expect(container.innerHTML).toMatchSnapshot(); - }); - - expect(error).toHaveBeenCalledTimes(1); + Object.values(fixtures).map(async fx => { + const component = await run(compile(fx)); + const { container } = render(React.createElement(component)); + console.log(container.innerHTML); + return expect(container.innerHTML).toMatchSnapshot(); }); }); diff --git a/__tests__/helpers.js b/__tests__/helpers.js deleted file mode 100644 index 553270a18..000000000 --- a/__tests__/helpers.js +++ /dev/null @@ -1,13 +0,0 @@ -module.exports.silenceConsole = - (prop = 'error', impl = () => {}) => - fn => { - let spy; - - try { - spy = jest.spyOn(console, prop).mockImplementation(impl); - - return fn(spy); - } finally { - spy.mockRestore(); - } - }; diff --git a/__tests__/helpers.ts b/__tests__/helpers.ts new file mode 100644 index 000000000..16aac70e8 --- /dev/null +++ b/__tests__/helpers.ts @@ -0,0 +1,17 @@ +import { vi } from 'vitest'; + +const silenceConsole = + (prop: keyof Console = 'error', impl = () => {}) => + fn => { + let spy; + + try { + spy = vi.spyOn(console, prop).mockImplementation(impl); + + return fn(spy); + } finally { + spy.mockRestore(); + } + }; + +export { silenceConsole }; \ No newline at end of file diff --git a/__tests__/index.test.js b/__tests__/index.test.js index 346836e58..83b2caaf4 100644 --- a/__tests__/index.test.js +++ b/__tests__/index.test.js @@ -55,8 +55,9 @@ test.skip('check list items', () => { expect(container.innerHTML).toMatchSnapshot(); }); -test.skip('gemoji generation', () => { - const { container } = render(run(compile(':sparkles:'))); +test('gemoji generation', async () => { + const component = await run(compile(':sparkles:')); + const { container } = render(React.createElement(component)); expect(container.querySelector('.lightbox')).not.toBeInTheDocument(); }); @@ -65,9 +66,8 @@ test.skip('should strip out inputs', () => { expect(screen.queryByRole('input')).not.toBeInTheDocument(); }); -test.skip('tables', () => { - const { container } = render( - run( +test('tables', async () => { + const component = await run( compile(`| Tables | Are | Cool | | ------------- |:-------------:| -----:| | col 3 is | right-aligned | $1600 | @@ -75,7 +75,8 @@ test.skip('tables', () => { | zebra stripes | are neat | $1 | `) ) - ); + + const { container } = render(React.createElement(component)); expect(container.innerHTML.trim()).toMatchSnapshot(); }); diff --git a/components/Callout/index.tsx b/components/Callout/index.tsx index 10c8b0d23..6b7685de2 100644 --- a/components/Callout/index.tsx +++ b/components/Callout/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; interface Props extends React.PropsWithChildren> { - attributes: {}; + attributes?: {}; icon: string; theme: string; heading?: React.ReactElement; diff --git a/components/Code/index.tsx b/components/Code/index.tsx index 650fc249d..2a101b8ae 100644 --- a/components/Code/index.tsx +++ b/components/Code/index.tsx @@ -31,7 +31,8 @@ function CopyCode({ codeRef, rootClass = 'rdmd-code-copy', className = '' }) { return