hbm-react-components

<!doctype html> <html lang="en"> <head> <title>Code coverage report for select/__tests__/Select-test.js</title> <meta charset="utf-8" /> <link rel="stylesheet" href="../../prettify.css" /> <link rel="stylesheet" href="../../base.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type='text/css'> .coverage-summary .sorter { background-image: url(../../sort-arrow-sprite.png); } </style> </head> <body> <div class='wrapper'> <div class='pad1'> <h1> <a href="../../index.html">All files</a> / <a href="index.html">select/__tests__</a> Select-test.js </h1> <div class='clearfix'> <div class='fl pad1y space-right2'> 100% Statements 58/58 </div> <div class='fl pad1y space-right2'> 100% Branches 0/0 </div> <div class='fl pad1y space-right2'> 93.33% Functions 14/15 </div> <div class='fl pad1y space-right2'> 100% Lines 58/58 </div> </div> </div> <div class='status-line high'></div> <pre><table class="coverage"> <tr><td class="line-count quiet">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</td><td class="line-coverage quiet">    1x 1x 1x 1x   1x   1x 1x 1x 1x     1x 1x 1x 1x     1x 1x 1x     1x 1x             1x     1x 1x 1x     1x 1x 1x 1x     1x 1x   1x 1x   1x 1x   1x     1x 1x 1x   1x 1x   1x 1x 1x   1x     1x 1x               1x       1x     1x 1x               1x           1x     1x 1x             1x 1x     1x 1x             1x 1x      </td><td class="text"><pre class="prettyprint lang-js">/* global it, describe, MouseEvent */   import assert from 'assert' import React from 'react' import {mount} from 'enzyme' import Select from '../'   const noop = () => {}   describe('Select', () => { it('should render a simple example', () => { const wrapper = mount(<Select onChange={noop} />) assert(wrapper.find('.Select')) })   it('should render some default items', () => { const wrapper = mount(<Select onChange={noop} />) wrapper.find('.Select-body').simulate('click') assert.equal(wrapper.find('.Select-listItem').length, 3) })   it('should render a default placeholder', () => { const wrapper = mount(<Select onChange={noop} />) assert.equal(wrapper.find('.Select-placeholder').text(), 'Placeholder') })   it('should render a given value instead of placeholder', () => { const wrapper = mount( <Select onChange={noop} selectedIndex={2} items={['Fox', 'Rabbit', 'Dog']} /> ) assert.equal(wrapper.find('.Select-body').text(), 'Dog') })   it('should render a label', () => { const wrapper = mount(<Select label='Animals' onChange={noop} />) assert.equal(wrapper.find('.Select-label').text(), 'Animals') })   it('should open the list when clicked', () => { const wrapper = mount(<Select onChange={noop} />) wrapper.find('.Select-body').simulate('click') assert(wrapper.find('.Select-list')) })   it('should close the list when it is open and click outside happenend', () => { const wrapper = mount(<Select onChange={noop} />) // open list wrapper.find('.Select-body').simulate('click') assert.equal(wrapper.find('.Select-list').length, 1) // simulate click somewhere var event = new MouseEvent('click') document.dispatchEvent(event) // make sure list is closed assert.equal(wrapper.find('.Select-list').length, 0) })   it('should close the list on click on an item', () => { const callback = () => {} const wrapper = mount(<Select items={['Fox', 'Rabbit', 'Dog']} onChange={callback} />) // open list wrapper.find('.Select-body').simulate('click') assert.equal(wrapper.find('.Select-list').length, 1) // click on list item wrapper.find('.Select-listItemLink').at(1).simulate('click') var event = new MouseEvent('click') document.dispatchEvent(event) // make sure list is closed assert.equal(wrapper.find('.Select-list').length, 0) })   it('should render the list directly above the selected item', () => { const wrapper = mount( <Select selectedIndex={1} items={['Fox', 'Rabbit', 'Dog', 'Horse', 'Mouse', 'Dragon', 'Unicorn', 'Wookiee']} onChange={noop} /> ) // open list wrapper.find('.Select-body').simulate('click') // single list item has height of 48px // whole list has a padding top and bottom of 12px // check the position for the second element => 48px + 12px = 60px assert.equal(wrapper.find('.Select-list').node.style.top, '-60px') })   it('should render a list item always in the middle of the list when list is too large', () => { const wrapper = mount( <Select selectedIndex={6} items={['Fox', 'Cat', 'Rabbit', 'Dog', 'Horse', 'Mouse', 'Dragon', 'Unicorn', 'Wookiee']} onChange={noop} /> ) // open list wrapper.find('.Select-body').simulate('click') // single list item = 48px // padding top = 8px // sixth list item = 5 * 48px + 8px = 248px // but!!!! list should not move all the way up -> keep list item centered and scroll // element is on 'third' position -> 2 * 48px + 12px = 108px assert.equal(wrapper.find('.Select-list').node.style.top, '-108px') })   it('should not show the second last item in the center of the list', () => { const wrapper = mount( <Select selectedIndex={7} items={['Fox', 'Cat', 'Rabbit', 'Dog', 'Horse', 'Mouse', 'Dragon', 'Unicorn', 'Wookiee']} onChange={noop} /> ) wrapper.find('.Select-body').simulate('click') assert.equal(wrapper.find('.Select-list').node.style.top, '-156px') })   it('should show the last item at the end of the list', () => { const wrapper = mount( <Select selectedIndex={8} items={['Fox', 'Cat', 'Rabbit', 'Dog', 'Horse', 'Mouse', 'Dragon', 'Unicorn', 'Wookiee']} onChange={noop} /> ) wrapper.find('.Select-body').simulate('click') assert.equal(wrapper.find('.Select-list').node.style.top, '-204px') }) })  </pre></td></tr> </table></pre> <div class='push'></div> </div> <div class='footer quiet pad2 space-top1 center small'> Code coverage generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Tue Aug 23 2016 15:23:34 GMT+0200 (CEST) </div> </div> <script src="../../prettify.js"></script> <script> window.onload = function () { if (typeof prettyPrint === 'function') { prettyPrint(); } }; </script> <script src="../../sorter.js"></script> </body> </html>