t.equal(ref.getAttribute('drawer'), 'true')} />)
139 | })
140 |
141 | test('react-polymer adds classes to Polymer elements', t => {
142 | t.plan(1)
143 | t.timeoutAfter(2000)
144 |
145 | renderContainer(
t.equal(ref.className, expectedClass('blue', 'x-scope paper-checkbox-1')))} />)
146 | })
147 |
148 | test('react-polymer keeps Polymer classes when React classes change', t => {
149 | t.plan(2)
150 | t.timeoutAfter(2000)
151 |
152 | var checkBox
153 | var Wrapper = React.createClass({
154 | getInitialState () {
155 | return {lamp: 'red'}
156 | },
157 | componentDidMount () {
158 | setImmediate(() => {
159 | t.equal(checkBox.className, expectedClass('red', 'x-scope paper-checkbox-1'))
160 |
161 | this.setState({lamp: 'green'})
162 | setImmediate(() => {
163 | t.equal(checkBox.className, expectedClass('green', ' x-scope paper-checkbox-2'))
164 | })
165 | })
166 | },
167 | render () {
168 | return (checkBox = ref)} />
169 | }
170 | })
171 | renderContainer()
172 | })
173 |
174 | test('react-polymer removes classes', t => {
175 | t.plan(1)
176 | t.timeoutAfter(2000)
177 |
178 | var checkBox
179 | var Wrapper = React.createClass({
180 | getInitialState () {
181 | return {hasClass: true}
182 | },
183 | componentDidMount () {
184 | setImmediate(() => {
185 | this.setState({hasClass: false})
186 | setImmediate(() => {
187 | t.equal(checkBox.className, expectedClass('', ' x-scope paper-checkbox-2'))
188 | })
189 | })
190 | },
191 | render () {
192 | if (this.state.hasClass) return (checkBox = ref)} />
193 | return (checkBox = ref)} />
194 | }
195 | })
196 | renderContainer()
197 | })
198 |
199 | // ### Polymer input wrapper ###
200 |
201 | function generalInputTest ({name, element, valueProp, valueBefore, valueAfter, interact}) {
202 | test(`${name} is a controlled component`, t => {
203 | t.plan(1)
204 | t.timeoutAfter(2000)
205 |
206 | var input = renderContainer(React.cloneElement(element, {[valueProp]: valueBefore, onChange: () => {}}))
207 |
208 | setImmediate(() => {
209 | interact(input)
210 | setImmediate(() => {
211 | t.equal(input[valueProp], valueBefore)
212 | })
213 | })
214 | })
215 |
216 | test(`${name} updates correctly`, t => {
217 | t.plan(2)
218 | t.timeoutAfter(2000)
219 |
220 | var ready = false
221 |
222 | var Wrapper = React.createClass({
223 | getInitialState () {
224 | return {value: valueBefore}
225 | },
226 | handleChange (event) {
227 | if (!ready) return
228 | t.equal(event.target[valueProp], valueAfter, 'in event')
229 | this.setState({value: event.target[valueProp]})
230 | },
231 | render () {
232 | return React.cloneElement(element, {[valueProp]: this.state.value, onChange: this.handleChange})
233 | }
234 | })
235 |
236 | var input = renderContainer()
237 |
238 | setImmediate(() => {
239 | ready = true
240 | interact(input)
241 | setImmediate(() => {
242 | t.equal(input[valueProp], valueAfter)
243 | })
244 | })
245 | })
246 |
247 | test(`${name} is not a controlled component without ${valueProp} prop`, t => {
248 | t.plan(1)
249 | t.timeoutAfter(2000)
250 |
251 | var input = renderContainer(React.cloneElement(element))
252 |
253 | setImmediate(() => {
254 | interact(input)
255 | setImmediate(() => {
256 | t.equal(input[valueProp], valueAfter)
257 | })
258 | })
259 | })
260 | }
261 |
262 | // toggle
263 |
264 | function testToggle (name, Checkbox) {
265 | generalInputTest({
266 | name,
267 | element: ,
268 | valueProp: 'checked',
269 | valueBefore: false,
270 | valueAfter: true,
271 | interact: checkbox => checkbox.click()
272 | })
273 | }
274 |
275 | testToggle('PaperCheckbox', PaperCheckbox)
276 | testToggle('PaperToggleButton', PaperToggleButton)
277 |
278 | // text
279 |
280 | function testText (name, Text, nativeName) {
281 | function findNative (text) {
282 | if (name === 'PaperTextarea') text = text.shadowRoot.querySelector('iron-autogrow-textarea')
283 | return text.shadowRoot.querySelector(nativeName)
284 | }
285 | generalInputTest({
286 | name,
287 | element: ,
288 | valueProp: 'value',
289 | valueBefore: 'Hello',
290 | valueAfter: 'Hello world!',
291 | interact: text => {
292 | var nativeText = findNative(text)
293 | nativeText.value = 'Hello world!'
294 | nativeText.dispatchEvent(new Event('input', {bubbles: true, composed: true}))
295 | // no change event, update should happen on every keystroke
296 | }
297 | })
298 |
299 | test(`${name} wrapper supports value`, t => {
300 | t.plan(2)
301 | t.timeoutAfter(2000)
302 |
303 | var text = renderContainer()
304 |
305 | setImmediate(() => {
306 | var nativeText = findNative(text)
307 | t.ok(nativeText)
308 | t.equal(nativeText.value, 'Hello world!')
309 | })
310 | })
311 | }
312 |
313 | testText('PaperInput', PaperInput, 'input')
314 | testText('PaperTextarea', PaperTextarea, 'textarea')
315 | testText('IronAutogrowTextarea', IronAutogrowTextarea, 'textarea')
316 |
317 | // slider
318 |
319 | generalInputTest({
320 | name: 'PaperSlider',
321 | element: ,
322 | valueProp: 'value',
323 | valueBefore: 20,
324 | valueAfter: 100,
325 | interact: slider => {
326 | var sliderKnob = slider.shadowRoot.querySelector('#sliderKnob')
327 | sliderKnob.dispatchEvent(new CustomEvent('track', {detail: {state: 'track', dx: 1000}}))
328 | }
329 | })
330 |
331 | // selector
332 |
333 | function testSelector (name, Selector, Item) {
334 | generalInputTest({
335 | name,
336 | element: (
337 |
338 | - Small
339 | - Medium
340 |
341 | ),
342 | valueProp: 'selected',
343 | valueBefore: 'medium',
344 | valueAfter: 'small',
345 | interact: selector => selector.querySelector(Item).click()
346 | })
347 | }
348 |
349 | testSelector('PaperListbox', PaperListbox, 'paper-item')
350 | testSelector('PaperRadioGroup', PaperRadioGroup, 'paper-radio-button')
351 | testSelector('PaperTabs', PaperTabs, 'paper-tab')
352 | testSelector('IronSelector', IronSelector, 'div')
353 |
--------------------------------------------------------------------------------
/test/transform-build.js:
--------------------------------------------------------------------------------
1 | // This is used in package.json pretest script, it transforms Vulcanize output
2 | const readline = require('readline')
3 | const rl = readline.createInterface(process.stdin, process.stdout)
4 |
5 | rl.on('line', line => {
6 | process.stdout.write(line
7 | .replace('', '')
8 | .replace('', '')
9 | .replace('', '') + '\n')
10 | })
11 |
--------------------------------------------------------------------------------