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
108
109
110
111
|
import React from 'react';
import ReactDOM from 'react-dom';
import ReactTestUtils from 'react-dom/test-utils';
import Input from 'settings/components/ui/Input'
describe("settings/ui/Input", () => {
let container;
beforeEach(() => {
container = document.createElement('div');
document.body.appendChild(container);
});
afterEach(() => {
document.body.removeChild(container);
container = null;
});
context("type=text", () => {
it('renders text input', () => {
ReactTestUtils.act(() => {
ReactDOM.render(
<Input type='text' name='myname' label='myfield' value='myvalue'/>,
container);
});
const label = document.querySelector('label');
const input = document.querySelector('input');
expect(label.textContent).to.contain('myfield');
expect(input.type).to.contain('text');
expect(input.name).to.contain('myname');
expect(input.value).to.contain('myvalue');
});
it('invoke onChange', (done) => {
ReactTestUtils.act(() => {
ReactDOM.render(<Input type='text' name='myname' label='myfield' value='myvalue' onChange={(e) => {
expect(e.target.value).to.equal('newvalue');
done();
}}/>, container);
});
const input = document.querySelector('input');
input.value = 'newvalue';
ReactTestUtils.Simulate.change(input);
});
});
context("type=radio", () => {
it('renders radio button', () => {
ReactTestUtils.act(() => {
ReactDOM.render(
<Input type='radio' name='myname' label='myfield' value='myvalue'/>,
container);
});
const label = document.querySelector('label');
const input = document.querySelector('input');
expect(label.textContent).to.contain('myfield');
expect(input.type).to.contain('radio');
expect(input.name).to.contain('myname');
expect(input.value).to.contain('myvalue');
});
it('invoke onChange', (done) => {
ReactTestUtils.act(() => {
ReactDOM.render(<Input type='text' name='radio' label='myfield' value='myvalue' onChange={(e) => {
expect(e.target.checked).to.be.true;
done();
}}/>,
container);
});
const input = document.querySelector('input');
input.checked = true;
ReactTestUtils.Simulate.change(input);
});
});
context("type=textarea", () => {
it('renders textarea button', () => {
ReactTestUtils.act(() => {
ReactDOM.render(
<Input type='textarea' name='myname' label='myfield' value='myvalue' error='myerror' />,
container);
});
const label = document.querySelector('label');
const textarea = document.querySelector('textarea');
const error = document.querySelector('.settings-ui-input-error');
expect(label.textContent).to.contain('myfield');
expect(textarea.nodeName).to.contain('TEXTAREA');
expect(textarea.name).to.contain('myname');
expect(textarea.value).to.contain('myvalue');
expect(error.textContent).to.contain('myerror');
});
it('invoke onChange', (done) => {
ReactTestUtils.act(() => {
ReactDOM.render(<Input type='textarea' name='myname' label='myfield' value='myvalue' onChange={(e) => {
expect(e.target.value).to.equal('newvalue');
done();
}}/>, container);
});
const input = document.querySelector('textarea');
input.value = 'newvalue'
ReactTestUtils.Simulate.change(input);
});
});
});
|
