37 |
62 | `;
63 |
64 | export const svg = `
65 |
80 | `;
81 |
82 | export const svgWithCssVariables = `
83 |
84 |
85 |
125 | `;
126 |
127 | export const svgWithStyleAndScript = `
128 |
158 | `;
159 |
160 | export const utf8 = `
161 |
164 | `;
165 |
--------------------------------------------------------------------------------
/test/__setup__/global.d.ts:
--------------------------------------------------------------------------------
1 | import 'jest-extended';
2 | import 'vitest/globals';
3 |
--------------------------------------------------------------------------------
/test/__setup__/vitest.setup.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom';
2 |
3 | import * as matchers from 'jest-extended';
4 |
5 | expect.extend(matchers);
6 |
--------------------------------------------------------------------------------
/test/__snapshots__/index.spec.tsx.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`react-from-dom > should convert a fragment 1`] = `
4 |
38 |
40 | Title
39 |
41 | ![]()
EMPTY
54 |
58 |
61 | -
42 |
- line 1 43 |
- line 2 44 |
46 | This Element has a style attribute.
47 | It also shows how to use the parser-argument
48 |
50 |
51 | This is the second paragraph 52 |
53 |This is a test55 |
throw new Error('Fail');
56 | - Text
7 | Hello, world!
8 |
12 | `;
13 |
14 | exports[`react-from-dom > should convert a search form from a string 1`] = `
15 |
9 | I'm inside a \`div\`.
10 |
11 |
18 |
87 |
88 | `;
89 |
90 | exports[`react-from-dom > should convert a text node 1`] = `
91 |
94 | test
95 |
96 | `;
97 |
98 | exports[`react-from-dom > should convert an SVG from a string 1`] = `
99 |
178 | `;
179 |
180 | exports[`react-from-dom > should convert an SVG from a string 2`] = `
181 |
184 |
235 |
236 | `;
237 |
238 | exports[`react-from-dom > should convert an SVG with CSS variable from a string 1`] = `
239 |
242 |
265 |
266 | `;
267 |
268 | exports[`react-from-dom > should convert an SVG with style and script from a string 1`] = `
269 |
272 |
328 |
329 | `;
330 |
331 | exports[`react-from-dom > should convert an audio from Node 1`] = `
332 |
335 |
341 |
342 | `;
343 |
344 | exports[`react-from-dom > should convert an iframe from a string 1`] = `
345 |
348 |
356 |
357 | `;
358 |
359 | exports[`react-from-dom > should convert markup with spaces 1`] = `
360 |
363 |
364 | link 1
365 |
366 |
367 |
368 | link 2
369 |
370 |
371 | `;
372 |
373 | exports[`react-from-dom > should convert multiple nodes > nodeList 1`] = `
374 | NodeList [
375 | 1,
376 |
377 | 2
378 | ,
379 | 3,
380 | ]
381 | `;
382 |
383 | exports[`react-from-dom > should convert multiple nodes > reactNode 1`] = `
384 |
387 | 1
388 |
389 | 2
390 |
391 | 3
392 |
393 | `;
394 |
395 | exports[`react-from-dom > should handle UTF8 text 1`] = `
396 |
399 |
410 |
411 | `;
412 |
413 | exports[`react-from-dom > should handle actions 1`] = `
414 |
417 |
473 | `;
474 |
475 | exports[`react-from-dom > should handle broken markup 1`] = `
476 |
420 |
472 |
423 |
427 | 424 | Title 425 |
426 |
430 | ![]()
463 | EMPTY
464 |
465 |
466 |
471 | -
431 |
- 432 | line 1 433 | 434 |
- 435 | line 2 436 | 437 |
439 |
440 | This Element has a
441 |
442 | style
443 |
444 | attribute.
445 |
446 |
447 | It also shows how to use the
448 |
449 | parser
450 |
451 | -argument
452 |
453 |
455 | 456 |
457 |458 | 459 | This is the second paragraph 460 | 461 |
462 |
467 | throw new Error('Fail');
468 |
469 |
479 |
485 | `;
486 |
--------------------------------------------------------------------------------
/test/helpers.spec.ts:
--------------------------------------------------------------------------------
1 | import { randomString, styleToObject } from '../src/helpers';
2 |
3 | describe('randomString', () => {
4 | it('should return a random string', () => {
5 | expect(randomString()).toHaveLength(6);
6 | });
7 | it('should return a 20 characters random string', () => {
8 | expect(randomString(20)).toHaveLength(20);
9 | });
10 | });
11 |
12 | describe('styleToObject', () => {
13 | it('should return an object', () => {
14 | expect(styleToObject('')).toEqual({});
15 | expect(
16 | styleToObject(
17 | 'stroke-width: 0;stroke-dasharray: none;stroke-linecap: butt;stroke-dashoffset: 0;stroke-linejoin: miter;stroke-miterlimit: 4;fill: var(--my-css-var);fill-rule: nonzero;opacity: 1;--my-css-var: yellow;',
18 | ),
19 | ).toEqual({
20 | '--my-css-var': 'yellow',
21 | fill: 'var(--my-css-var)',
22 | fillRule: 'nonzero',
23 | opacity: 1,
24 | strokeDasharray: 'none',
25 | strokeDashoffset: 0,
26 | strokeLinecap: 'butt',
27 | strokeLinejoin: 'miter',
28 | strokeMiterlimit: 4,
29 | strokeWidth: 0,
30 | });
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/test/index.spec.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { render, screen } from '@testing-library/react';
3 |
4 | import convert, { convertFromNode, convertFromString } from '../src/index';
5 |
6 | import {
7 | audio,
8 | form,
9 | iframe,
10 | links,
11 | panel,
12 | svg,
13 | svgWithCssVariables,
14 | svgWithStyleAndScript,
15 | utf8,
16 | } from './__fixtures__/data';
17 |
18 | vi.mock('../src/helpers', async () => {
19 | const helpers = await vi.importActual('../src/helpers');
20 |
21 | return {
22 | ...helpers,
23 | randomString: () => 'ABCDE',
24 | };
25 | });
26 |
27 | function ReactMarkdown({ children }: React.PropsWithChildren
480 |
481 | los
482 |
483 |
484 | {children}
;
29 | }
30 |
31 | describe('react-from-dom', () => {
32 | beforeAll(() => {
33 | vi.spyOn(console, 'error').mockImplementation(() => {});
34 | vi.spyOn(console, 'warn').mockImplementation(() => {});
35 | });
36 |
37 | it('should convert an SVG from a string', () => {
38 | const node = convertFromString(svg, { nodeOnly: true });
39 |
40 | expect(node).toMatchSnapshot();
41 |
42 | const element = convert(node as Node) as React.ReactNode;
43 |
44 | render({element}
);
45 |
46 | expect(screen.getByTestId('wrapper')).toMatchSnapshot();
47 | });
48 |
49 | it('should convert an SVG with CSS variable from a string', () => {
50 | const element = convertFromString(svgWithCssVariables) as React.ReactNode;
51 |
52 | render({element}
);
53 |
54 | expect(screen.getByTestId('wrapper')).toMatchSnapshot();
55 | });
56 |
57 | it('should convert an SVG with style and script from a string', () => {
58 | const element = convert(svgWithStyleAndScript, {
59 | selector: 'svg',
60 | }) as React.ReactNode;
61 |
62 | render({element}
);
63 |
64 | expect(screen.getByTestId('wrapper')).toMatchSnapshot();
65 | });
66 |
67 | it('should handle UTF8 text', () => {
68 | const element = convert(utf8) as React.ReactNode;
69 |
70 | render({element}
);
71 |
72 | expect(screen.getByTestId('wrapper')).toMatchSnapshot();
73 | });
74 |
75 | it('should convert a search form from a string', () => {
76 | const element = convert(form) as React.ReactNode;
77 |
78 | render({element}
);
79 |
80 | expect(screen.getByTestId('wrapper')).toMatchSnapshot();
81 | });
82 |
83 | it('should convert an iframe from a string', () => {
84 | const element = convert(iframe) as React.ReactNode;
85 |
86 | render({element}
);
87 |
88 | expect(screen.getByTestId('wrapper')).toMatchSnapshot();
89 | });
90 |
91 | it('should convert an audio from Node', () => {
92 | const element = convert(audio as Node) as React.ReactNode;
93 |
94 | render({element}
);
95 |
96 | expect(screen.getByTestId('wrapper')).toMatchSnapshot();
97 | });
98 |
99 | it('should convert a fragment', () => {
100 | const fragment = document.createDocumentFragment();
101 | const div = document.createElement('div');
102 |
103 | div.appendChild(document.createTextNode("I'm inside a `div`."));
104 | fragment.appendChild(document.createTextNode('Hello, world!'));
105 | fragment.appendChild(div);
106 |
107 | const element = convert(fragment) as React.ReactNode;
108 |
109 | render({element}
);
110 |
111 | expect(screen.getByTestId('wrapper')).toMatchSnapshot();
112 | });
113 |
114 | it('should convert markup with spaces', () => {
115 | const element = convert(links, {
116 | allowWhiteSpaces: true,
117 | includeAllNodes: true,
118 | }) as React.ReactNode;
119 |
120 | render({element}
);
121 |
122 | expect(screen.getByTestId('wrapper')).toMatchSnapshot();
123 | });
124 |
125 | it('should convert a text node', () => {
126 | const element = convert('test') as React.ReactNode;
127 |
128 | render({element}
);
129 |
130 | expect(screen.getByTestId('wrapper')).toMatchSnapshot();
131 | });
132 |
133 | it('should convert multiple nodes', () => {
134 | const reactNode = convert('123', { includeAllNodes: true }) as React.ReactNode;
135 |
136 | render({reactNode}
);
137 | expect(screen.getByTestId('wrapper')).toMatchSnapshot('reactNode');
138 |
139 | const nodeList = convert('123', { includeAllNodes: true, nodeOnly: true });
140 |
141 | expect(nodeList).toMatchSnapshot('nodeList');
142 | });
143 |
144 | it('should handle actions', () => {
145 | const element = convert(panel, {
146 | actions: [
147 | {
148 | condition: node => node.nodeName.toLowerCase() === 'code',
149 | // @ts-ignore
150 | pre: () => null,
151 | },
152 | {
153 | condition: node => node.nodeName.toLowerCase() === 'pre',
154 | post: (node, key) => (
155 | // @ts-ignore
156 | {element}
);
192 |
193 | expect(screen.getByTestId('wrapper')).toMatchSnapshot();
194 | });
195 |
196 | it('should handle broken markup', () => {
197 | const element = convert('los', {
198 | selector: 'div',
199 | }) as React.ReactNode;
200 |
201 | render(
{element}
);
202 |
203 | expect(screen.getByTestId('wrapper')).toMatchSnapshot();
204 | });
205 |
206 | it('should handle missing or invalid parameters', () => {
207 | // @ts-ignore
208 | expect(convert()).toBeNull();
209 |
210 | // @ts-ignore
211 | expect(convert(() => ({}))).toBeNull();
212 |
213 | // @ts-ignore
214 | expect(convertFromNode()).toBeNull();
215 |
216 | // @ts-ignore
217 | expect(convertFromNode('This is not a test')).toBeNull();
218 |
219 | // @ts-ignore
220 | expect(convertFromString()).toBeNull();
221 |
222 | // @ts-ignore
223 | expect(convertFromString([])).toBeNull();
224 |
225 | expect(convertFromString('This is a test')).toBe('This is a test');
226 |
227 | expect(convert('', { includeAllNodes: true })).toBeNull();
228 | });
229 | });
230 |
--------------------------------------------------------------------------------
/test/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig",
3 | "compilerOptions": {
4 | "noUnusedLocals": false,
5 | "esModuleInterop": true,
6 | "module": "esnext"
7 | },
8 | "include": ["**/*"]
9 | }
10 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@gilbarbara/tsconfig",
3 | "compilerOptions": {
4 | "downlevelIteration": true,
5 | "lib": ["dom", "dom.iterable", "esnext"],
6 | "noEmit": true,
7 | "target": "ES2022"
8 | },
9 | "include": ["src/**/*"]
10 | }
11 |
--------------------------------------------------------------------------------
/vitest.config.mts:
--------------------------------------------------------------------------------
1 | import react from '@vitejs/plugin-react-swc';
2 | import { defineConfig } from 'vitest/config';
3 |
4 | export default defineConfig({
5 | plugins: [react()],
6 | test: {
7 | coverage: {
8 | all: true,
9 | include: ['src/**/*.ts?(x)'],
10 | reporter: ['text', 'lcov'],
11 | thresholds: {
12 | statements: 90,
13 | branches: 90,
14 | functions: 90,
15 | lines: 90,
16 | },
17 | },
18 | environment: 'jsdom',
19 | globals: true,
20 | setupFiles: ['./test/__setup__/vitest.setup.ts'],
21 | },
22 | });
23 |
--------------------------------------------------------------------------------