CoCalc -- ReactDOMSelect-test.js

Summer of Sage Days 2015: San Diego (sd64.25), etc.
react / react-0.13.3 / examples / basic-commonjs / node_modules / reactify / node_modules / react-tools / src / browser / ui / dom / components / __tests__ / ReactDOMSelect-test.js
⁸¹¹⁷¹ views
1
/**
2
 * Copyright 2013-2014, Facebook, Inc.
3
 * All rights reserved.
4
 *
5
 * This source code is licensed under the BSD-style license found in the
6
 * LICENSE file in the root directory of this source tree. An additional grant
7
 * of patent rights can be found in the PATENTS file in the same directory.
8
 *
9
 * @emails react-core
10
 */
11

12
"use strict";
13

14
/*jshint evil:true */
15

16
var mocks = require('mocks');
17

18
describe('ReactDOMSelect', function() {
19
  var React;
20
  var ReactLink;
21
  var ReactTestUtils;
22

23
  beforeEach(function() {
24
    React = require('React');
25
    ReactLink = require('ReactLink');
26
    ReactTestUtils = require('ReactTestUtils');
27
  });
28

29
  it('should allow setting `defaultValue`', function() {
30
    var stub =
31
      <select defaultValue="giraffe">
32
        <option value="monkey">A monkey!</option>
33
        <option value="giraffe">A giraffe!</option>
34
        <option value="gorilla">A gorilla!</option>
35
      </select>;
36
    stub = ReactTestUtils.renderIntoDocument(stub);
37
    var node = stub.getDOMNode();
38

39
    expect(node.value).toBe('giraffe');
40

41
    // Changing `defaultValue` should do nothing.
42
    stub.setProps({defaultValue: 'gorilla'});
43
    expect(node.value).toEqual('giraffe');
44
  });
45

46
  it('should not control when using `defaultValue`', function() {
47
    var stub =
48
      <select defaultValue="giraffe">
49
        <option value="monkey">A monkey!</option>
50
        <option value="giraffe">A giraffe!</option>
51
        <option value="gorilla">A gorilla!</option>
52
      </select>;
53
    stub = ReactTestUtils.renderIntoDocument(stub);
54
    var node = stub.getDOMNode();
55

56
    expect(node.value).toBe('giraffe');
57

58
    node.value = 'monkey';
59
    stub.forceUpdate();
60
    // Uncontrolled selects shouldn't change the value after first mounting
61
    expect(node.value).toEqual('monkey');
62
  });
63

64
  it('should allow setting `defaultValue` with multiple', function() {
65
    var stub =
66
      <select multiple={true} defaultValue={['giraffe', 'gorilla']}>
67
        <option value="monkey">A monkey!</option>
68
        <option value="giraffe">A giraffe!</option>
69
        <option value="gorilla">A gorilla!</option>
70
      </select>;
71
    stub = ReactTestUtils.renderIntoDocument(stub);
72
    var node = stub.getDOMNode();
73

74
    expect(node.options[0].selected).toBe(false);  // monkey
75
    expect(node.options[1].selected).toBe(true);  // giraffe
76
    expect(node.options[2].selected).toBe(true);  // gorilla
77

78
    // Changing `defaultValue` should do nothing.
79
    stub.setProps({defaultValue: ['monkey']});
80

81
    expect(node.options[0].selected).toBe(false);  // monkey
82
    expect(node.options[1].selected).toBe(true);  // giraffe
83
    expect(node.options[2].selected).toBe(true);  // gorilla
84
  });
85

86
  it('should allow setting `value`', function() {
87
    var stub =
88
      <select value="giraffe">
89
        <option value="monkey">A monkey!</option>
90
        <option value="giraffe">A giraffe!</option>
91
        <option value="gorilla">A gorilla!</option>
92
      </select>;
93
    stub = ReactTestUtils.renderIntoDocument(stub);
94
    var node = stub.getDOMNode();
95

96
    expect(node.value).toBe('giraffe');
97

98
    // Changing the `value` prop should change the selected option.
99
    stub.setProps({value: 'gorilla'});
100
    expect(node.value).toEqual('gorilla');
101
  });
102

103
  it('should allow setting `value` with multiple', function() {
104
    var stub =
105
      <select multiple={true} value={['giraffe', 'gorilla']}>
106
        <option value="monkey">A monkey!</option>
107
        <option value="giraffe">A giraffe!</option>
108
        <option value="gorilla">A gorilla!</option>
109
      </select>;
110
    stub = ReactTestUtils.renderIntoDocument(stub);
111
    var node = stub.getDOMNode();
112

113
    expect(node.options[0].selected).toBe(false);  // monkey
114
    expect(node.options[1].selected).toBe(true);  // giraffe
115
    expect(node.options[2].selected).toBe(true);  // gorilla
116

117
    // Changing the `value` prop should change the selected options.
118
    stub.setProps({value: ['monkey']});
119

120
    expect(node.options[0].selected).toBe(true);  // monkey
121
    expect(node.options[1].selected).toBe(false);  // giraffe
122
    expect(node.options[2].selected).toBe(false);  // gorilla
123
  });
124

125
  it('should not select other options automatically', function() {
126
    var stub =
127
      <select multiple={true} value={['12']}>
128
        <option value="1">one</option>
129
        <option value="2">two</option>
130
        <option value="12">twelve</option>
131
      </select>;
132
    stub = ReactTestUtils.renderIntoDocument(stub);
133
    var node = stub.getDOMNode();
134

135
    expect(node.options[0].selected).toBe(false);  // one
136
    expect(node.options[1].selected).toBe(false);  // two
137
    expect(node.options[2].selected).toBe(true);  // twelve
138
  });
139

140
  it('should allow setting `value` with `objectToString`', function() {
141
    var objectToString = {
142
      animal: "giraffe",
143
      toString: function() {
144
        return this.animal;
145
      }
146
    };
147

148
    var stub =
149
      <select multiple={true} value={[objectToString]}>
150
        <option value="monkey">A monkey!</option>
151
        <option value="giraffe">A giraffe!</option>
152
        <option value="gorilla">A gorilla!</option>
153
      </select>;
154
    stub = ReactTestUtils.renderIntoDocument(stub);
155
    var node = stub.getDOMNode();
156

157
    expect(node.options[0].selected).toBe(false);  // monkey
158
    expect(node.options[1].selected).toBe(true);  // giraffe
159
    expect(node.options[2].selected).toBe(false);  // gorilla
160

161
    // Changing the `value` prop should change the selected options.
162
    objectToString.animal = "monkey";
163
    stub.forceUpdate();
164

165
    expect(node.options[0].selected).toBe(true);  // monkey
166
    expect(node.options[1].selected).toBe(false);  // giraffe
167
    expect(node.options[2].selected).toBe(false);  // gorilla
168
  });
169

170
  it('should allow switching to multiple', function() {
171
    var stub =
172
      <select defaultValue="giraffe">
173
        <option value="monkey">A monkey!</option>
174
        <option value="giraffe">A giraffe!</option>
175
        <option value="gorilla">A gorilla!</option>
176
      </select>;
177
    stub = ReactTestUtils.renderIntoDocument(stub);
178
    var node = stub.getDOMNode();
179

180
    expect(node.options[0].selected).toBe(false);  // monkey
181
    expect(node.options[1].selected).toBe(true);  // giraffe
182
    expect(node.options[2].selected).toBe(false);  // gorilla
183

184
    // When making it multiple, giraffe should still be selected
185
    stub.setProps({multiple: true, defaultValue: null});
186

187
    expect(node.options[0].selected).toBe(false);  // monkey
188
    expect(node.options[1].selected).toBe(true);  // giraffe
189
    expect(node.options[2].selected).toBe(false);  // gorilla
190
  });
191

192
  it('should allow switching from multiple', function() {
193
    var stub =
194
      <select multiple={true} defaultValue={['giraffe', 'gorilla']}>
195
        <option value="monkey">A monkey!</option>
196
        <option value="giraffe">A giraffe!</option>
197
        <option value="gorilla">A gorilla!</option>
198
      </select>;
199
    stub = ReactTestUtils.renderIntoDocument(stub);
200
    var node = stub.getDOMNode();
201

202
    expect(node.options[0].selected).toBe(false);  // monkey
203
    expect(node.options[1].selected).toBe(true);  // giraffe
204
    expect(node.options[2].selected).toBe(true);  // gorilla
205

206
    // When removing multiple, giraffe should still be selected (but gorilla
207
    // will no longer be)
208
    stub.setProps({multiple: false, defaultValue: null});
209

210
    expect(node.options[0].selected).toBe(false);  // monkey
211
    expect(node.options[1].selected).toBe(true);  // giraffe
212
    expect(node.options[2].selected).toBe(false);  // gorilla
213
  });
214

215
  it('should support ReactLink', function() {
216
    var link = new ReactLink('giraffe', mocks.getMockFunction());
217
    var stub =
218
      <select valueLink={link}>
219
        <option value="monkey">A monkey!</option>
220
        <option value="giraffe">A giraffe!</option>
221
        <option value="gorilla">A gorilla!</option>
222
      </select>;
223
    stub = ReactTestUtils.renderIntoDocument(stub);
224
    var node = stub.getDOMNode();
225

226
    expect(node.options[0].selected).toBe(false);  // monkey
227
    expect(node.options[1].selected).toBe(true);  // giraffe
228
    expect(node.options[2].selected).toBe(false);  // gorilla
229
    expect(link.requestChange.mock.calls.length).toBe(0);
230

231
    node.options[1].selected = false;
232
    node.options[2].selected = true;
233
    ReactTestUtils.Simulate.change(node);
234

235
    expect(link.requestChange.mock.calls.length).toBe(1);
236
    expect(link.requestChange.mock.calls[0][0]).toEqual('gorilla');
237

238
  });
239
});
240

241
Product

Resources

Company
