Skip to content

Commit

Permalink
test: improve unit tests for useRemark hook
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChristianMurphy
ChristianMurphy committed Jul 8, 2021
1 parent 71489d7 commit ba2d147
Show file tree
Hide file tree
Showing 4 changed files with 292 additions and 5 deletions.
6 changes: 2 additions & 4 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,9 +155,8 @@ import rehypeAutoLinkHeadings from 'rehype-autolink-headings';
// ...

const [reactContent, setMarkdownSource] = useRemark({
remarkParseOptions: { commonmark: true },
remarkPlugins: [remarkGemoji],
remarkToRehypeOptions: { commonmark: true },
remarkToRehypeOptions: { allowDangerous: true },
rehypePlugins: [rehypeSlug, rehypeAutoLinkHeadings],
rehypeReactOptions: {
components: {
Expand All @@ -179,9 +178,8 @@ import rehypeAutoLinkHeadings from 'rehype-autolink-headings';
// ...

<Remark
remarkParseOptions={{ commonmark: true }}
remarkPlugins={[remarkGemoji]}
remarkToRehypeOptions={{ commonmark: true }}
remarkToRehypeOptions={{ allowDangerous: true }}
rehypePlugins={[rehypeSlug, rehypeAutoLinkHeadings]}
rehypeReactOptions={{
components: {
Expand Down
2 changes: 1 addition & 1 deletion src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import rehypeReact, { Options as RehypeReactOptions } from 'rehype-react';
type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

export interface UseRemarkSyncOptions {
remarkParseOptions?: Partial<RemarkParseOptions>;
remarkParseOptions?: RemarkParseOptions;
remarkToRehypeOptions?: RemarkRehypeOptions;
rehypeReactOptions?: PartialBy<
RehypeReactOptions<typeof createElement>,
Expand Down
223 changes: 223 additions & 0 deletions test/__snapshots__/remark-hook.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,226 @@ exports[`useRemark should render content 1`] = `
</h1>
</React.Fragment>
`;

exports[`useRemark should support element renderer 1`] = `
<React.Fragment>
<h1>
heading
</h1>
</React.Fragment>
`;

exports[`useRemark should support gfm through remark plugins 1`] = `
<React.Fragment>
<p>
<a
href="https://example.com"
>
https://example.com
</a>
</p>
</React.Fragment>
`;

exports[`useRemark should support html through rehype plugins 1`] = `
<React.Fragment>
<p>
<span>
example
</span>
</p>
</React.Fragment>
`;

exports[`useRemark should support math through remark and rehype plugins 1`] = `
<React.Fragment>
<p>
Lift(
<span
className="math math-inline"
>
<span
className="katex"
>
<span
className="katex-mathml"
>
<math
xmlns="http://www.w3.org/1998/Math/MathML"
>
<semantics>
<mrow>
<mi>
L
</mi>
</mrow>
<annotation
encoding="application/x-tex"
>
L
</annotation>
</semantics>
</math>
</span>
<span
aria-hidden="true"
className="katex-html"
>
<span
className="base"
>
<span
className="strut"
style={
Object {
"height": "0.68333em",
"verticalAlign": "0em",
}
}
/>
<span
className="mord mathnormal"
>
L
</span>
</span>
</span>
</span>
</span>
) can be determined by Lift Coefficient (
<span
className="math math-inline"
>
<span
className="katex"
>
<span
className="katex-mathml"
>
<math
xmlns="http://www.w3.org/1998/Math/MathML"
>
<semantics>
<mrow>
<msub>
<mi>
C
</mi>
<mi>
L
</mi>
</msub>
</mrow>
<annotation
encoding="application/x-tex"
>
C_L
</annotation>
</semantics>
</math>
</span>
<span
aria-hidden="true"
className="katex-html"
>
<span
className="base"
>
<span
className="strut"
style={
Object {
"height": "0.83333em",
"verticalAlign": "-0.15em",
}
}
/>
<span
className="mord"
>
<span
className="mord mathnormal"
style={
Object {
"marginRight": "0.07153em",
}
}
>
C
</span>
<span
className="msupsub"
>
<span
className="vlist-t vlist-t2"
>
<span
className="vlist-r"
>
<span
className="vlist"
style={
Object {
"height": "0.32833099999999993em",
}
}
>
<span
style={
Object {
"marginLeft": "-0.07153em",
"marginRight": "0.05em",
"top": "-2.5500000000000003em",
}
}
>
<span
className="pstrut"
style={
Object {
"height": "2.7em",
}
}
/>
<span
className="sizing reset-size6 size3 mtight"
>
<span
className="mord mathnormal mtight"
>
L
</span>
</span>
</span>
</span>
<span
className="vlist-s"
>
​
</span>
</span>
<span
className="vlist-r"
>
<span
className="vlist"
style={
Object {
"height": "0.15em",
}
}
>
<span />
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
) like the following equation.
</p>
</React.Fragment>
`;
66 changes: 66 additions & 0 deletions test/remark-hook.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import { createElement } from 'react';
import type { ComponentPropsWithoutNode } from 'rehype-react';
import { renderHook, act } from '@testing-library/react-hooks';
import '@testing-library/jest-dom/extend-expect';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import rehypeSanitize from 'rehype-sanitize';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import { useRemark } from '../src';

describe('useRemark', () => {
Expand All @@ -11,4 +18,63 @@ describe('useRemark', () => {
await waitForNextUpdate();
expect(result.current[0]).toMatchSnapshot();
});

it('should support gfm through remark plugins', async () => {
const { result, waitForNextUpdate } = renderHook(() =>
useRemark({ remarkPlugins: [remarkGfm] })
);
act(() => {
result.current[1]('https://example.com');
});
await waitForNextUpdate();
expect(result.current[0]).toMatchSnapshot();
});

it('should support html through rehype plugins', async () => {
const { result, waitForNextUpdate } = renderHook(() =>
useRemark({
remarkToRehypeOptions: { allowDangerousHtml: true },
rehypePlugins: [rehypeRaw, rehypeSanitize],
})
);
act(() => {
result.current[1]('<span>example</span>');
});
await waitForNextUpdate();
expect(result.current[0]).toMatchSnapshot();
});

it('should support math through remark and rehype plugins', async () => {
const { result, waitForNextUpdate } = renderHook(() =>
useRemark({
remarkPlugins: [remarkMath],
rehypePlugins: [rehypeKatex],
})
);
act(() => {
result.current[1](
'Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following equation.'
);
});
await waitForNextUpdate();
expect(result.current[0]).toMatchSnapshot();
});

it('should support custom element renderer', async () => {
const { result, waitForNextUpdate } = renderHook(() =>
useRemark({
rehypeReactOptions: {
components: {
h1: (props: ComponentPropsWithoutNode) =>
createElement('h2', props),
},
},
})
);
act(() => {
result.current[1]('# heading');
});
await waitForNextUpdate();
expect(result.current[0]).toMatchSnapshot();
});
});

0 comments on commit ba2d147

Please sign in to comment.