hbm-react-components

<!doctype html> <html lang="en"> <head> <title>Code coverage report for upload/__tests__/Upload-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">upload/__tests__</a> Upload-test.js </h1> <div class='clearfix'> <div class='fl pad1y space-right2'> 99.03% Statements 102/103 </div> <div class='fl pad1y space-right2'> 100% Branches 0/0 </div> <div class='fl pad1y space-right2'> 92% Functions 23/25 </div> <div class='fl pad1y space-right2'> 99.02% Lines 101/102 </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 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200</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 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 describe, it, Event */   import assert from 'assert' import React from 'react' import {mount} from 'enzyme' import Upload from '../'   const file = { name: 'update.hbg', size: 1234 }   const noop = () => {}   describe('Upload', () => { it('should render component with default text', () => { const wrapper = mount(<Upload onChange={noop} />) assert.equal(wrapper.find('.Upload-textBefore').text(), '') assert.equal(wrapper.find('.Upload-textAfter').text(), 'or drag file in this area') })   it('should render component with custom textBefore', () => { const wrapper = mount(<Upload textBefore={'hello world'} onChange={noop} />) assert.equal(wrapper.find('.Upload-textBefore').text(), 'hello world') })   it('should render component with custom textAfter', () => { const wrapper = mount(<Upload textAfter={'hello world'} onChange={noop} />) assert.equal(wrapper.find('.Upload-textAfter').text(), 'hello world') })   it('should propagate disabled property to input type file and button', () => { const wrapper = mount(<Upload disabled onChange={noop} />) assert(wrapper.find('.Upload-fileInput').props().disabled) assert(wrapper.find('.Button').props().disabled) })   it('should ignore drag and drop events when disabled', () => { const wrapper = mount(<Upload disabled onChange={noop} />) wrapper.find('.Upload').simulate('dragenter', { dataTransfer: { files: [file] } }) assert(wrapper.find('.Upload').hasClass('is-disabled')) assert.equal(wrapper.find('.Upload').hasClass('is-over-dropzone'), false) })   it('should propagate accept property to input type file', () => { const wrapper = mount(<Upload onChange={noop} accept='.jpg' />) assert.equal(wrapper.find('.Upload-fileInput').props().accept, '.jpg') })   it('should not change style for not accepted file types', () => { const wrapper = mount(<Upload onChange={noop} accept='.md' />) wrapper.find('.Upload').simulate('dragenter', { dataTransfer: { files: [{ name: 'image.png', type: 'image/png' }] } }) assert.equal(wrapper.find('.Upload').hasClass('is-over-dropzone'), false) })   it('should change style for accepted file types', () => { const wrapper = mount(<Upload onChange={noop} accept='.png' />) wrapper.find('.Upload').simulate('dragenter', { dataTransfer: { files: [{ name: 'image.png', type: 'image/png' }] } }) assert(wrapper.find('.Upload').hasClass('is-over-dropzone')) })   it('should toggle "is-over-window" css class on document dragenter and dragleave', () => { const wrapper = mount(<Upload onChange={noop} />) document.dispatchEvent(new Event('dragenter')) assert(wrapper.find('.Upload').hasClass('is-over-window')) document.dispatchEvent(new Event('dragleave')) assert.equal(wrapper.find('.Upload').hasClass('is-over-window'), false) })   it('should toggle "is-over-dropzone" css class on dropzone dragenter and dragleave', () => { const wrapper = mount(<Upload onChange={noop} />) wrapper.find('.Upload').simulate('dragenter') assert(wrapper.find('.Upload').hasClass('is-over-dropzone')) wrapper.find('.Upload').simulate('dragleave') assert.equal(wrapper.find('.Upload').hasClass('is-over-dropzone'), false) })   it('should remove dragenter event listener when component is unmounted', () => { const wrapper = mount(<Upload onChange={noop} />) const instance = wrapper.find('.Upload') // simulate unmount by calling method directly wrapper.unmount() // now simulate dragenter event and make sure component does not react anymore document.dispatchEvent(new Event('dragenter')) assert.equal(instance.hasClass('is-over-window'), false) })   it('should remove dragleave event listener when component is unmounted', () => { const wrapper = mount(<Upload onChange={noop} />) const instance = wrapper.find('.Upload') document.dispatchEvent(new Event('dragenter')) // make sure component has correct class assert(instance.hasClass('is-over-window')) // now simulate unmount wrapper.unmount() // now simulate dragleave event and make sure component does not loose its class document.dispatchEvent(new Event('dragleave')) assert(instance.hasClass('is-over-window')) })   it('should propagate button click event to input element', () => { const wrapper = mount(<Upload onChange={noop} />) // attach dummy click event handler to input dom element let clicked = false wrapper.find('.Upload-fileInput').node.addEventListener('click', () => { clicked = true }) // simulate click event on top level node which is the div wrapper.find('.Upload-fileInput').simulate('click') assert.equal(clicked, false) wrapper.find('.Button').simulate('click') assert(clicked) })   it('should not allow dropping multiple files in firefox', () => { const wrapper = mount(<Upload onChange={noop} />) wrapper.find('.Upload').simulate('dragenter', { dataTransfer: { mozItemCount: 2 } }) assert.equal(wrapper.find('.Upload').hasClass('is-over-dropzone'), false) })   it('should not allow dropping multiple files in chrome', () => { const wrapper = mount(<Upload onChange={noop} />) wrapper.find('.Upload').simulate('dragenter', { dataTransfer: { items: [file, file] } }) assert.equal(wrapper.find('.Upload').hasClass('is-over-dropzone'), false) })   it('should allow dropping a single file', () => { const wrapper = mount(<Upload onChange={noop} />) wrapper.find('.Upload').simulate('dragenter', { dataTransfer: { items: [file] } }) assert(wrapper.find('.Upload').hasClass('is-over-dropzone')) })   it('should handle dragover event on dropzone', () => { const wrapper = mount(<Upload onChange={noop} />) let preventDefaultCalled = false wrapper.find('.Upload').simulate('dragover', { preventDefault: () => { preventDefaultCalled = true } }) assert(preventDefaultCalled) })   it('should not allow dragging multiple files over dropzone in firefox', () => { const wrapper = mount(<Upload onChange={noop} />) let preventDefaultCalled = false wrapper.find('.Upload').simulate('dragover', { preventDefault: () => { preventDefaultCalled = true }, dataTransfer: { mozItemCount: 2 } }) assert.equal(preventDefaultCalled, false) })   it('should handle drop event on dropzone', () => { let name = '' const callback = (files) => { name = files[0].name } const wrapper = mount(<Upload onChange={callback} />) wrapper.find('.Upload').simulate('drop', { dataTransfer: { files: [file] } }) assert.equal(name, 'update.hbg') }) })  </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>