/
index.test.tsx
87 lines (78 loc) · 2.82 KB
/
index.test.tsx
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
/* eslint-disable jest/no-conditional-expect */
import React, { useEffect, useRef } from 'react';
import renderer from 'react-test-renderer';
import { render, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
// import '@testing-library/jest-dom';
// import userEvent from '@testing-library/user-event';
import CodeMirror, { ReactCodeMirrorRef } from '../src';
it('CodeMirror', async () => {
const component = renderer.create(<CodeMirror />);
let tree = component.toJSON();
if (tree && !Array.isArray(tree)) {
expect(tree.type).toEqual('div');
expect(tree.props.className).toEqual('cm-theme-light');
}
});
it('CodeMirror onChange', async () => {
const handleChange = jest.fn((value) => {
expect(value).toEqual('# title');
return Array.isArray(value) ? value.join() : value;
});
const { findByRole, queryByText } = render(
<CodeMirror autoFocus value="console.log('Hello world!')" onChange={handleChange} />,
);
const input = await findByRole('textbox');
fireEvent.change(input, { target: { textContent: '# title' } });
const elm = queryByText('# title');
expect((elm as any).cmView.dom.innerHTML).toEqual('# title');
});
it('CodeMirror onUpdate', async () => {
render(
<CodeMirror
value="console.log('Hello world!')"
autoFocus
onUpdate={(viewUpdate) => {
expect(viewUpdate.state.doc.length).toEqual(27);
}}
/>,
);
});
it('CodeMirror ref', async () => {
function Demo() {
const ref = useRef<ReactCodeMirrorRef>(null);
useEffect(() => {
expect(Object.keys(ref.current!)).toEqual(['editor', 'state', 'view']);
}, [ref]);
return <CodeMirror ref={ref} value="console.log('Hello world!')" />;
}
render(<Demo />);
});
it('CodeMirror theme', async () => {
const component = renderer.create(<CodeMirror theme="dark" />);
let tree = component.toJSON();
if (tree && !Array.isArray(tree)) {
expect(tree.type).toEqual('div');
expect(tree.props.className).toEqual('cm-theme-dark');
}
});
it('CodeMirror className', async () => {
const component = renderer.create(<CodeMirror className="test" />);
let tree = component.toJSON();
if (tree && !Array.isArray(tree)) {
expect(tree.type).toEqual('div');
expect(tree.props.className).toEqual('cm-theme-light test');
}
});
it('CodeMirror placeholder', async () => {
const { findByText } = render(<CodeMirror placeholder="Hello World" className="test" />);
const text = await findByText('Hello World');
expect(text.className).toEqual('cm-placeholder');
expect(text.contentEditable).toEqual('false');
});
it('CodeMirror editable', async () => {
const { getByRole } = render(<CodeMirror editable={false} className="test" />);
const text = getByRole('textbox');
expect(text.className).toEqual('cm-content');
expect(text.tagName).toEqual('DIV');
});