diff --git a/.babelrc b/.babelrc index 23c7dacf7..4aa3c3cdd 100644 --- a/.babelrc +++ b/.babelrc @@ -5,7 +5,7 @@ "browsers": ["last 2 versions"] } }], - "@babel/react" + "@babel/preset-react" ], "plugins": ["@babel/plugin-proposal-class-properties"] } diff --git a/packages/markdown/README.md b/packages/markdown/README.md index cd23b7430..b8f84cb47 100644 --- a/packages/markdown/README.md +++ b/packages/markdown/README.md @@ -1,12 +1,17 @@ -@ReadMe Markdown +@readme/markdown === [![Build](https://github.com/readmeio/api-explorer/workflows/CI/badge.svg)](https://github.com/readmeio/api-explorer/tree/master/packages/markdown) [![](https://d3vv6lp55qjaqc.cloudfront.net/items/1M3C3j0I0s0j3T362344/Untitled-2.png)](https://readme.io) +## Installation + +[![Build](https://github.com/readmeio/api-explorer/workflows/CI/badge.svg)](https://github.com/readmeio/api-explorer/tree/master/packages/markdown) + + ## Installation ``` @@ -89,7 +94,7 @@ Most of our magic blocks render neatly to pure markdown representations. In some Callouts are very similar to blockquotes in both display and syntax. They are defined by a title with an initial emoji, which determines the callout's theme: > ❗️ Watch Out - > + > > This is a callout using the error theme. There are five potential themes: diff --git a/packages/markdown/__tests__/flavored-compilers.test.js b/packages/markdown/__tests__/flavored-compilers.test.js index 634a10b4d..0369dacb7 100644 --- a/packages/markdown/__tests__/flavored-compilers.test.js +++ b/packages/markdown/__tests__/flavored-compilers.test.js @@ -50,6 +50,7 @@ describe('ReadMe-Flavored Markdown Compilers', () => { const out = compile(ast); expect(out).toMatchSnapshot(); }); + it('Callouts', () => { const txt = `[block:callout] { @@ -58,7 +59,7 @@ describe('ReadMe-Flavored Markdown Compilers', () => { "body": "Vitae reprehenderit at aliquid error voluptates eum dignissimos." } [/block] - + And this is a paragraph! `; const ast = parse(txt); diff --git a/packages/markdown/__tests__/flavored-parsers.test.js b/packages/markdown/__tests__/flavored-parsers.test.js index cc1af3ed0..ec9938f71 100644 --- a/packages/markdown/__tests__/flavored-parsers.test.js +++ b/packages/markdown/__tests__/flavored-parsers.test.js @@ -19,16 +19,18 @@ const process = (text, opts = options) => describe('Parse ReadMe-Flavored Markdown Syntax', () => { it('Callouts', () => { const text = `> ℹ️ Info Callout - > + > > Lorem ipsum dolor sit amet consectetur adipisicing elit.`; expect(process(text)).toMatchSnapshot(); }); + it('Multi-Block', () => { const text = "\n\n```javascript multiple.js\nconsole.log('a multi-file code block');\n```\n```javascript\nconsole.log('an unnamed sample snippet');\n```\n\n "; const ast = process(text); expect(ast).toMatchSnapshot(); }); + it('Single Block', () => { const text = "\n\n```javascript multiple.js\nconsole.log('a multi-file code block');\n```\n\n "; diff --git a/packages/markdown/__tests__/index.test.js b/packages/markdown/__tests__/index.test.js index 29d96eb4f..f6b1bbb47 100644 --- a/packages/markdown/__tests__/index.test.js +++ b/packages/markdown/__tests__/index.test.js @@ -233,18 +233,23 @@ describe('export multiple Markdown renderers', () => { }, ], }; + it('renders plain markdown as React', () => { expect(markdown.plain(text, settings)).toMatchSnapshot(); }); + it('renders custom React components', () => { expect(markdown.react(text, settings)).toMatchSnapshot(); }); + it('renders AST', () => { expect(markdown.ast(text, settings)).toMatchSnapshot(); }); + it('renders MD', () => { expect(markdown.md(tree, settings)).toMatchSnapshot(); }); + it('renders HTML', () => { expect(markdown.html(text, settings)).toMatchSnapshot(); }); diff --git a/packages/markdown/__tests__/magic-block-parser.test.js b/packages/markdown/__tests__/magic-block-parser.test.js index 932f78b43..29af12812 100644 --- a/packages/markdown/__tests__/magic-block-parser.test.js +++ b/packages/markdown/__tests__/magic-block-parser.test.js @@ -30,6 +30,7 @@ describe('Parse Magic Blocks', () => { [/block]`; expect(process(text)).toMatchSnapshot(); }); + it('Image Blocks', () => { const text = `[block:image] { @@ -51,6 +52,7 @@ describe('Parse Magic Blocks', () => { [/block]`; expect(process(text)).toMatchSnapshot(); }); + it('Code Blocks', () => { const text = `[block:code] { @@ -69,6 +71,7 @@ describe('Parse Magic Blocks', () => { [/block]`; expect(process(text)).toMatchSnapshot(); }); + it('Table Blocks', () => { const text = `[block:parameters] { @@ -92,6 +95,7 @@ describe('Parse Magic Blocks', () => { [/block]`; expect(process(text)).toMatchSnapshot(); }); + it('Embed Blocks', () => { const text = `[block:embed] { @@ -104,6 +108,7 @@ describe('Parse Magic Blocks', () => { [/block]`; expect(process(text)).toMatchSnapshot(); }); + it('Callout Blocks', () => { const text = `[block:callout] { @@ -114,6 +119,7 @@ describe('Parse Magic Blocks', () => { [/block]`; expect(process(text)).toMatchSnapshot(); }); + it('Unrecognized Blocks', () => { const text = `[block:unrecognized] { diff --git a/packages/markdown/components/Callout/index.jsx b/packages/markdown/components/Callout/index.jsx index 63460401c..501fd752b 100644 --- a/packages/markdown/components/Callout/index.jsx +++ b/packages/markdown/components/Callout/index.jsx @@ -1,4 +1,11 @@ -require('./style.scss'); +// There's a bug in jsdom where Jest spits out heaps of errors from it not being able to interpret +// this file, so let's not include this when running tests since we aren't doing visual testing +// anyways. +// https://github.com/jsdom/jsdom/issues/217 +if (process.env.NODE_ENV !== 'test') { + // eslint-disable-next-line global-require + require('./style.scss'); +} const React = require('react'); const PropTypes = require('prop-types'); diff --git a/packages/markdown/components/CodeTabs/index.jsx b/packages/markdown/components/CodeTabs/index.jsx index eb9d428ad..63076c5e3 100644 --- a/packages/markdown/components/CodeTabs/index.jsx +++ b/packages/markdown/components/CodeTabs/index.jsx @@ -1,4 +1,11 @@ -require('./style.scss'); +// There's a bug in jsdom where Jest spits out heaps of errors from it not being able to interpret +// this file, so let's not include this when running tests since we aren't doing visual testing +// anyways. +// https://github.com/jsdom/jsdom/issues/217 +if (process.env.NODE_ENV !== 'test') { + // eslint-disable-next-line global-require + require('./style.scss'); +} const React = require('react'); const PropTypes = require('prop-types'); diff --git a/packages/markdown/components/Heading/index.jsx b/packages/markdown/components/Heading/index.jsx index f76362332..4a4118d16 100644 --- a/packages/markdown/components/Heading/index.jsx +++ b/packages/markdown/components/Heading/index.jsx @@ -1,4 +1,11 @@ -require('./style.scss'); +// There's a bug in jsdom where Jest spits out heaps of errors from it not being able to interpret +// this file, so let's not include this when running tests since we aren't doing visual testing +// anyways. +// https://github.com/jsdom/jsdom/issues/217 +if (process.env.NODE_ENV !== 'test') { + // eslint-disable-next-line global-require + require('./style.scss'); +} const React = require('react'); const PropTypes = require('prop-types'); @@ -6,10 +13,12 @@ const PropTypes = require('prop-types'); let count = {}; document.addEventListener('DOMContentLoaded', () => { - if ('$' in window) + if ('$' in window) { + // eslint-disable-next-line no-undef $(document).on('pjax:start', () => { count = {}; }); + } }); function generateHeadingId(e) { diff --git a/packages/markdown/package.json b/packages/markdown/package.json index 3df55d4a1..3114d0a92 100644 --- a/packages/markdown/package.json +++ b/packages/markdown/package.json @@ -25,7 +25,7 @@ "scripts": { "build": "webpack --config webpack.config.js", "watch": "webpack -w --progress", - "lint": "eslint -f unix . --ext .jsx --ext .js", + "lint": "eslint . --ext .jsx --ext .js", "inspect": "jsinspect", "pretest": "npm run lint && npm run inspect && npm run prettier", "prettier": "prettier --list-different --write \"./**/**.{js,jsx}\"",