/
index.test.tsx
107 lines (92 loc) · 3.55 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import React from 'react';
import Mentions from '..';
import focusTest from '../../../tests/shared/focusTest';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { act, render, fireEvent } from '../../../tests/utils';
const { getMentions } = Mentions;
function simulateInput(wrapper: ReturnType<typeof render>, text: string, keyEvent?: Event): void {
const lastChar = text[text.length - 1];
const myKeyEvent = keyEvent || {
which: lastChar.charCodeAt(0),
key: lastChar,
target: {
value: text,
selectionStart: text.length,
},
};
fireEvent.keyDown(wrapper.container.querySelector('textarea')!, myKeyEvent);
const textareaInstance = wrapper.container.querySelector('textarea');
if (textareaInstance) {
textareaInstance.value = text;
textareaInstance.selectionStart = text.length;
textareaInstance.selectionStart = text.length;
}
if (!keyEvent) {
fireEvent.change(wrapper.container.querySelector('textarea')!, { target: { value: text } });
}
fireEvent.keyUp(wrapper.container.querySelector('textarea')!, myKeyEvent);
}
describe('Mentions', () => {
beforeAll(() => {
jest.useFakeTimers();
});
afterAll(() => {
jest.useRealTimers();
});
it('getMentions', () => {
const mentions = getMentions('@light #bamboo cat', { prefix: ['@', '#'] });
expect(mentions).toEqual([
{ prefix: '@', value: 'light' },
{ prefix: '#', value: 'bamboo' },
]);
});
it('focus', () => {
const onFocus = jest.fn();
const onBlur = jest.fn();
const { container } = render(<Mentions onFocus={onFocus} onBlur={onBlur} />);
fireEvent.focus(container.querySelector('textarea')!);
expect(container.querySelector('.ant-mentions')).toHaveClass('ant-mentions-focused');
expect(onFocus).toHaveBeenCalled();
fireEvent.blur(container.querySelector('textarea')!);
act(() => {
jest.runAllTimers();
});
expect(container.querySelector('.ant-mentions')).not.toHaveClass('ant-mentions-focused');
expect(onBlur).toHaveBeenCalled();
});
focusTest(Mentions, { refFocus: true });
mountTest(Mentions);
rtlTest(Mentions);
it('loading', () => {
const wrapper = render(<Mentions loading />);
simulateInput(wrapper, '@');
expect(wrapper.container.querySelectorAll('li.ant-mentions-dropdown-menu-item').length).toBe(1);
expect(wrapper.container.querySelectorAll('.ant-spin').length).toBeTruthy();
});
it('notFoundContent', () => {
const wrapper = render(<Mentions notFoundContent={<span className="bamboo-light" />} />);
simulateInput(wrapper, '@');
expect(wrapper.container.querySelectorAll('li.ant-mentions-dropdown-menu-item').length).toBe(1);
expect(wrapper.container.querySelectorAll('.bamboo-light').length).toBeTruthy();
});
it('do not lose label when use children Option', () => {
const wrapper = render(
<Mentions style={{ width: '100%' }}>
<Mentions.Option value="afc163">Afc163</Mentions.Option>
<Mentions.Option value="zombieJ">ZombieJ</Mentions.Option>
<Mentions.Option value="yesmeck">Yesmeck</Mentions.Option>
</Mentions>,
);
simulateInput(wrapper, '@');
const { container } = wrapper;
fireEvent.mouseEnter(container.querySelector('li.ant-mentions-dropdown-menu-item:last-child')!);
fireEvent.focus(container.querySelector('textarea')!);
act(() => {
jest.runAllTimers();
});
expect(
wrapper.container.querySelector('.ant-mentions-dropdown-menu-item-active')?.textContent,
).toBe('Yesmeck');
});
});