1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
import { describe, expect, it } from '@jest/globals';
import { renderHook } from '@testing-library/react';
import type { PropsWithChildren, ReactElement } from 'react';
import { type IntlConfig, IntlProvider } from 'react-intl';
import {
type PrismLanguage,
usePrism,
type PrismAvailablePlugin,
type PrismAttributes,
type PrismToolbarAttributes,
} from './use-prism';
type WrapperProps = {
children: ReactElement<unknown>;
};
const createWrapper = (
Wrapper: typeof IntlProvider,
props: PropsWithChildren<IntlConfig>
) =>
function CreatedWrapper({ children }: WrapperProps) {
return <Wrapper {...props}>{children}</Wrapper>;
};
const toolbarAttributes: PrismToolbarAttributes = {
'data-prismjs-color-scheme-dark': 'Dark Theme 🌙',
'data-prismjs-color-scheme-light': 'Light Theme 🌞',
'data-prismjs-copy': 'Copy',
'data-prismjs-copy-error': 'Use Ctrl+c to copy',
'data-prismjs-copy-success': 'Copied!',
};
describe('usePrism', () => {
it('returns the className and the attributes', () => {
const { result } = renderHook(() => usePrism({}), {
wrapper: createWrapper(IntlProvider, { locale: 'en' }),
});
expect(result.current.className).toStrictEqual('');
expect(result.current.attributes).toStrictEqual(toolbarAttributes);
});
it('can return a className based on the given language', () => {
const language: PrismLanguage = 'docker';
const { result } = renderHook(() => usePrism({ language }), {
wrapper: createWrapper(IntlProvider, { locale: 'en' }),
});
expect(result.current.className).toStrictEqual(`language-${language}`);
});
it('can return a className based on the given plugins', () => {
const pluginWithClass: PrismAvailablePlugin = 'diff-highlight';
const { result } = renderHook(
() => usePrism({ plugins: [pluginWithClass] }),
{
wrapper: createWrapper(IntlProvider, { locale: 'en' }),
}
);
expect(result.current.className).toMatch(pluginWithClass);
});
it('can return a className based on the given language and plugins', () => {
const language: PrismLanguage = 'javascript';
const pluginWithClass: PrismAvailablePlugin = 'diff-highlight';
const { result } = renderHook(
() => usePrism({ language, plugins: [pluginWithClass] }),
{
wrapper: createWrapper(IntlProvider, { locale: 'en' }),
}
);
expect(result.current.className).toMatch(`language-diff-${language}`);
expect(result.current.className).toMatch(pluginWithClass);
});
it('can return the default attributes with the given owns', () => {
const attributes: Partial<PrismAttributes> = {
'data-filter-output': '(out)',
};
const { result } = renderHook(() => usePrism({ attributes }), {
wrapper: createWrapper(IntlProvider, { locale: 'en' }),
});
expect(result.current.attributes).toStrictEqual({
...toolbarAttributes,
...attributes,
});
});
});
|
