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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
import React from "react";
import ReactDOM from "react-dom";
import ReactTestRenderer from "react-test-renderer";
import ReactTestUtils from "react-dom/test-utils";
import SearchForm from "settings/components/form/SearchForm";
import { FormSearch } from "shared/SettingData";
describe("settings/form/SearchForm", () => {
describe("render", () => {
it("renders SearchForm", () => {
const root = ReactTestRenderer.create(
<SearchForm
value={FormSearch.fromJSON({
default: "google",
engines: [
["google", "google.com"],
["yahoo", "yahoo.com"],
],
})}
/>
).root;
const names = root.findAllByProps({ name: "name" });
expect(names).to.have.lengthOf(2);
expect(names[0].props.value).to.equal("google");
expect(names[1].props.value).to.equal("yahoo");
const urls = root.findAllByProps({ name: "url" });
expect(urls).to.have.lengthOf(2);
expect(urls[0].props.value).to.equal("google.com");
expect(urls[1].props.value).to.equal("yahoo.com");
});
});
describe("onChange event", () => {
let container;
beforeEach(() => {
container = document.createElement("div");
document.body.appendChild(container);
});
afterEach(() => {
document.body.removeChild(container);
container = null;
});
it("invokes onChange event on edit", (done) => {
ReactTestUtils.act(() => {
ReactDOM.render(
<SearchForm
value={FormSearch.fromJSON({
default: "google",
engines: [
["google", "google.com"],
["yahoo", "yahoo.com"],
],
})}
onChange={(value) => {
const json = value.toJSON();
expect(json.default).to.equal("louvre");
expect(json.engines).to.have.lengthOf(2);
expect(json.engines).to.have.deep.members([
["louvre", "google.com"],
["yahoo", "yahoo.com"],
]);
done();
}}
/>,
container
);
});
const radio = document.querySelectorAll("input[type=radio]");
radio.checked = true;
const name = document.querySelector("input[name=name]");
name.value = "louvre";
ReactTestUtils.Simulate.change(name);
});
it("invokes onChange event on delete", (done) => {
ReactTestUtils.act(() => {
ReactDOM.render(
<SearchForm
value={FormSearch.fromJSON({
default: "yahoo",
engines: [
["louvre", "google.com"],
["yahoo", "yahoo.com"],
],
})}
onChange={(value) => {
const json = value.toJSON();
expect(json.default).to.equal("yahoo");
expect(json.engines).to.have.lengthOf(1);
expect(json.engines).to.have.deep.members([
["yahoo", "yahoo.com"],
]);
done();
}}
/>,
container
);
});
const button = document.querySelector("input[type=button]");
ReactTestUtils.Simulate.click(button);
});
it("invokes onChange event on add", (done) => {
ReactTestUtils.act(() => {
ReactDOM.render(
<SearchForm
value={FormSearch.fromJSON({
default: "yahoo",
engines: [["google", "google.com"]],
})}
onChange={(value) => {
const json = value.toJSON();
expect(json.default).to.equal("yahoo");
expect(json.engines).to.have.lengthOf(2);
expect(json.engines).to.have.deep.members([
["google", "google.com"],
["", ""],
]);
done();
}}
/>,
container
);
});
const button = document.querySelector("input[type=button].ui-add-button");
ReactTestUtils.Simulate.click(button);
});
});
});
|
