Skip to content

Commit 7cd4b4d

Browse files
brianreavisbrianreavis
committed
Added functional interaction tests.
1 parent 9d6ab92 commit 7cd4b4d

File tree

3 files changed

+2674
-2
lines changed

3 files changed

+2674
-2
lines changed

‎tests/index.html

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,17 @@
99
<link rel="stylesheet" href="../examples/_normalize.css">
1010
<link rel="stylesheet" href="vendor/mocha.css">
1111
<link rel="stylesheet" href="../selectize.css">
12+
<style type="text/css">
13+
#fixture {
14+
background: #fafafa;
15+
padding: 30px;
16+
text-align: center;
17+
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
18+
}
19+
</style>
1220
<!--[if IE 8]><script src="../examples/_es5.js"></script><![endif]-->
1321
<script src="../examples/_jquery.js"></script>
22+
<script src="vendor/syn.js"></script>
1423
<script src="vendor/mocha.js"></script>
1524
<script src="vendor/chai.js"></script>
1625
<script src="/testem.js"></script>
@@ -26,7 +35,7 @@
2635
return !!(elem === document.activeElement);
2736
};
2837
window.setup_test = function(html, options, callback) {
29-
var $select = $(html).appendTo(document.body).selectize(options);
38+
var $select = $(html).appendTo('#fixture').selectize(options);
3039
var instance = $select[0].selectize;
3140
window.test = {
3241
callback: callback,
@@ -40,6 +49,7 @@
4049
}
4150
</script>
4251
<div id="mocha"></div>
52+
<div id="fixture"></div>
4353
<!-- begin tests -->
4454
<script src="setup.js"></script>
4555
<script src="api.js"></script>

‎tests/interaction.js

Lines changed: 173 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,179 @@
11
(function() {
22

3+
// These tests are functional simulations of
4+
// user interaction, using syn.js. For more information:
5+
//
6+
// @see http://v3.javascriptmvc.com/docs.html#&who=Syn
7+
// @see http://bitovi.com/blog/2010/07/syn-a-standalone-synthetic-event-library.html
8+
39
describe('Interaction', function() {
4-
// TODO: write tests
10+
11+
describe('clicking control', function() {
12+
13+
it('should give it focus', function(done) {
14+
test = setup_test('<select>' +
15+
'<option value="a">A</option>' +
16+
'<option value="b">B</option>' +
17+
'</select>', {});
18+
19+
Syn
20+
.click(test.selectize.$control, function() {
21+
expect(test.selectize.isFocused).to.be.equal(true);
22+
test.teardown();
23+
done();
24+
});
25+
});
26+
27+
it('should open dropdown menu', function(done) {
28+
test = setup_test('<select>' +
29+
'<option value="a">A</option>' +
30+
'<option value="b">B</option>' +
31+
'</select>', {});
32+
33+
Syn
34+
.click(test.selectize.$control)
35+
.delay(0, function() {
36+
expect(test.selectize.isOpen).to.be.equal(true);
37+
expect(test.selectize.$dropdown.is(':visible')).to.be.equal(true);
38+
test.teardown();
39+
done();
40+
});
41+
});
42+
43+
});
44+
45+
46+
describe('clicking option', function() {
47+
48+
it('should select it', function(done) {
49+
test = setup_test('<select>' +
50+
'<option value="">Select an option...</option>' +
51+
'<option value="a">A</option>' +
52+
'<option value="b">B</option>' +
53+
'</select>', {});
54+
55+
Syn.click(test.selectize.$control).delay(0, function() {
56+
Syn
57+
.click($('[data-value="b"]', test.selectize.$dropdown))
58+
.delay(0, function() {
59+
expect(test.selectize.$input.val()).to.be.equal('b');
60+
test.teardown();
61+
done();
62+
});
63+
});
64+
});
65+
66+
it('should close dropdown', function(done) {
67+
test = setup_test('<select>' +
68+
'<option value="">Select an option...</option>' +
69+
'<option value="a">A</option>' +
70+
'<option value="b">B</option>' +
71+
'</select>', {});
72+
73+
Syn.click(test.selectize.$control).delay(0, function() {
74+
Syn
75+
.click($('[data-value="b"]', test.selectize.$dropdown))
76+
.delay(0, function() {
77+
expect(test.selectize.isOpen).to.be.equal(false);
78+
expect(test.selectize.$dropdown.is(':visible')).to.be.equal(false);
79+
test.teardown();
80+
done();
81+
});
82+
});
83+
});
84+
85+
});
86+
87+
describe('typing in input', function() {
88+
89+
it('should filter results', function(done) {
90+
test = setup_test('<select>' +
91+
'<option value="">Select an option...</option>' +
92+
'<option value="a">A</option>' +
93+
'<option value="b">B</option>' +
94+
'</select>', {});
95+
96+
Syn
97+
.click(test.selectize.$control)
98+
.type('a', test.selectize.$control_input)
99+
.delay(0, function() {
100+
expect($('[data-value="a"]', test.selectize.$dropdown).length).to.be.equal(1);
101+
expect($('[data-value="b"]', test.selectize.$dropdown).length).to.be.equal(0);
102+
test.teardown();
103+
done();
104+
});
105+
});
106+
107+
it('should hide dropdown if no results present', function(done) {
108+
test = setup_test('<select>' +
109+
'<option value="">Select an option...</option>' +
110+
'<option value="a">A</option>' +
111+
'<option value="b">B</option>' +
112+
'</select>', {});
113+
114+
Syn
115+
.click(test.selectize.$control)
116+
.type('awaw', test.selectize.$control_input)
117+
.delay(0, function() {
118+
expect(test.selectize.isOpen).to.be.equal(false);
119+
expect(test.selectize.$dropdown.is(':visible')).to.be.equal(false);
120+
test.teardown();
121+
done();
122+
});
123+
});
124+
125+
it('should not hide dropdown if "create" option enabled and no results present', function(done) {
126+
test = setup_test('<select>' +
127+
'<option value="">Select an option...</option>' +
128+
'<option value="a">A</option>' +
129+
'<option value="b">B</option>' +
130+
'</select>', {create: true});
131+
132+
Syn
133+
.click(test.selectize.$control)
134+
.type('awaw', test.selectize.$control_input)
135+
.delay(0, function() {
136+
expect(test.selectize.isOpen).to.be.equal(true);
137+
expect(test.selectize.$dropdown.is(':visible')).to.be.equal(true);
138+
test.teardown();
139+
done();
140+
});
141+
});
142+
143+
it('should restore dropdown visibility when backing out of a query without results (backspace)', function(done) {
144+
test = setup_test('<select>' +
145+
'<option value="">Select an option...</option>' +
146+
'<option value="a">A</option>' +
147+
'<option value="b">B</option>' +
148+
'</select>', {});
149+
150+
Syn
151+
.click(test.selectize.$control)
152+
.type('awf', test.selectize.$control_input)
153+
.type('\b\b\b', test.selectize.$control_input)
154+
.delay(0, function() {
155+
expect(test.selectize.isOpen).to.be.equal(true);
156+
expect(test.selectize.$dropdown.is(':visible')).to.be.equal(true);
157+
test.teardown();
158+
done();
159+
});
160+
});
161+
162+
it('should move caret when [left] or [right] pressed', function(done) {
163+
test = setup_test('<input type="text" value="a,b,c,d">', {create: true});
164+
165+
Syn
166+
.click(test.selectize.$control)
167+
.type('[left][left]whatt', test.selectize.$control_input)
168+
.delay(0, function() {
169+
expect(test.selectize.caretPos).to.be.equal(2);
170+
test.teardown();
171+
done();
172+
});
173+
});
174+
175+
});
176+
5177
});
6178

7179
})();

0 commit comments

Comments
 (0)