Skip to content

Commit fc28b9a

Browse files
nadbmnadbm
committed
Add test for component move
1 parent da6d658 commit fc28b9a

1 file changed

Lines changed: 98 additions & 38 deletions

File tree

‎test/Datasheet.js‎

Lines changed: 98 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,11 @@ const triggerKeyDownEvent = (wrapper, keyCode, options = {}) => {
2525
wrapper.simulate('keydown', { keyCode, ...options })
2626
}
2727

28+
const triggerEvent = (node, keyCode) => {
29+
node.dispatchEvent(new Event('focus'))
30+
node.dispatchEvent(new KeyboardEvent('keydown', { keyCode }))
31+
}
32+
2833
const triggerMouseEvent = (node, eventType) => {
2934
const clickEvent = document.createEvent('MouseEvents')
3035
clickEvent.initEvent(eventType, true, true)
@@ -87,7 +92,7 @@ describe('Component', () => {
8792
selected: false,
8893
cell: {
8994
value: 5,
90-
data: 5,
95+
data: 5
9196
},
9297
row: 1,
9398
col: 1,
@@ -158,7 +163,7 @@ describe('Component', () => {
158163
selected: false,
159164
cell: {
160165
value: '2',
161-
data: '5',
166+
data: '5'
162167
},
163168
row: 1,
164169
col: 2,
@@ -226,7 +231,7 @@ describe('Component', () => {
226231
const onNavigate = sinon.spy()
227232
const onChange = sinon.spy()
228233
const onRevert = sinon.spy()
229-
const cell= {
234+
const cell = {
230235
foo: 'bar',
231236
readOnly: false,
232237
forceComponent: true,
@@ -262,12 +267,12 @@ describe('Component', () => {
262267
wrapper.setProps({cell: {...cell, forceComponent: false}})
263268
expect(wrapper.html()).toEqual(
264269
mount(<td className='test cell' colSpan={5} rowSpan={4} style={{width: '200px'}}>
265-
<span className="value-viewer">5</span>
270+
<span className='value-viewer'>5</span>
266271
</td>).html())
267272
wrapper.setProps({ cell: {...cell, forceComponent: false, value: 7}})
268273
expect(wrapper.html()).toEqual(
269274
mount(<td className='test cell updated' colSpan={5} rowSpan={4} style={{width: '200px'}}>
270-
<span className="value-viewer">7</span>
275+
<span className='value-viewer'>7</span>
271276
</td>).html())
272277
wrapper.simulate('mousedown')
273278
wrapper.simulate('doubleclick')
@@ -503,6 +508,61 @@ describe('Component', () => {
503508
expect(customWrapper.find('td').text()).toEqual('COMPONENT RENDERED')
504509
})
505510

511+
it('handles a custom editable component and exits on ENTER_KEY', (done) => {
512+
customWrapper = mount(<DataSheet
513+
data={[[{value: 1}, {component: <input className={'custom-component'} />}, {value: 2}]]}
514+
valueRenderer={(cell) => 'VALUE RENDERED'}
515+
onChange={(cell, i, j, value) => data[i][j].data = value}
516+
/>)
517+
const cell = customWrapper.find('td').at(1)
518+
cell.simulate('mouseDown')
519+
cell.simulate('doubleClick')
520+
521+
expect(customWrapper.state('start')).toEqual({i: 0, j: 1})
522+
cell.find('.custom-component').first().simulate('doubleClick')
523+
triggerEvent(customWrapper.find('.data-grid-container').node, TAB_KEY)
524+
setTimeout(() => {
525+
expect(customWrapper.state('start')).toEqual({i: 0, j: 2})
526+
done()
527+
}, 50)
528+
})
529+
530+
it('handles a custom editable component and exits', (done) => {
531+
customWrapper = mount(<DataSheet
532+
data={[[{value: 1}, {component: <input className={'custom-component'} />}, {value: 2}]]}
533+
valueRenderer={(cell) => 'VALUE RENDERED'}
534+
onChange={(cell, i, j, value) => data[i][j].data = value}
535+
/>)
536+
const cell = customWrapper.find('td').at(1)
537+
538+
const selectCell = () => {
539+
cell.simulate('mouseDown')
540+
cell.simulate('doubleClick')
541+
}
542+
543+
const checkEnterKey = (callback) => {
544+
selectCell()
545+
expect(customWrapper.state('start')).toEqual({i: 0, j: 1})
546+
cell.find('.custom-component').first().simulate('doubleClick')
547+
triggerEvent(customWrapper.find('.data-grid-container').node, ENTER_KEY)
548+
setTimeout(() => {
549+
expect(customWrapper.state('start')).toEqual({i: 0, j: 1})
550+
callback()
551+
}, 50)
552+
}
553+
const checkTabKey = (callback) => {
554+
selectCell()
555+
expect(customWrapper.state('start')).toEqual({i: 0, j: 1})
556+
cell.find('.custom-component').first().simulate('doubleClick')
557+
triggerEvent(customWrapper.find('.data-grid-container').node, TAB_KEY)
558+
setTimeout(() => {
559+
expect(customWrapper.state('start')).toEqual({i: 0, j: 2})
560+
callback()
561+
}, 50)
562+
}
563+
checkEnterKey(() => checkTabKey(done))
564+
})
565+
506566
it('renders a cell with readOnly field properly', () => {
507567
customWrapper = mount(<DataSheet
508568
data={[[{data: 12, readOnly: true}, {data: 24, readOnly: false}]]}
@@ -1169,32 +1229,32 @@ describe('Component', () => {
11691229
})
11701230

11711231
it('renders a custom header', () => {
1172-
component = <DataSheet
1173-
className={'test'}
1174-
data={data}
1175-
valueRenderer={(cell) => cell.data}
1176-
onChange={(cell, i, j, value) => data[i][j].data = value}
1177-
sheetRenderer={props => {
1178-
return (
1179-
<table className={props.className}>
1180-
<thead>
1181-
<tr>
1182-
{columns.map(col => <th key={col}>{col}</th>)}
1183-
</tr>
1184-
</thead>
1185-
<tbody>
1186-
{props.children}
1187-
</tbody>
1188-
</table>
1189-
)
1190-
}}
1232+
component = <DataSheet
1233+
className={'test'}
1234+
data={data}
1235+
valueRenderer={(cell) => cell.data}
1236+
onChange={(cell, i, j, value) => data[i][j].data = value}
1237+
sheetRenderer={props => {
1238+
return (
1239+
<table className={props.className}>
1240+
<thead>
1241+
<tr>
1242+
{columns.map(col => <th key={col}>{col}</th>)}
1243+
</tr>
1244+
</thead>
1245+
<tbody>
1246+
{props.children}
1247+
</tbody>
1248+
</table>
1249+
)
1250+
}}
11911251
/>
1192-
wrapper = mount(component)
1252+
wrapper = mount(component)
11931253
// extra row for header
1194-
expect(wrapper.find('tr').length).toEqual(3)
1195-
expect(wrapper.find('th').nodes.map(n => n.innerHTML)).toEqual(columns)
1196-
expect(wrapper.find('td span').nodes.map(n => n.innerHTML)).toEqual(['4', '2', '3', '5'])
1197-
})
1254+
expect(wrapper.find('tr').length).toEqual(3)
1255+
expect(wrapper.find('th').nodes.map(n => n.innerHTML)).toEqual(columns)
1256+
expect(wrapper.find('td span').nodes.map(n => n.innerHTML)).toEqual(['4', '2', '3', '5'])
1257+
})
11981258

11991259
// custom tr
12001260
// custom td
@@ -1228,8 +1288,8 @@ describe('Component', () => {
12281288
wrapper = mount(component)
12291289
expect(wrapper.find('ul.data-grid li').length).toEqual(2)
12301290
expect(wrapper.find('ul.data-grid li div.cell span').nodes.map(n => n.innerHTML)).toEqual(['4', '2', '3', '5'])
1231-
expect(wrapper.find('DataCell').at(1).key()).toEqual('custom_key')
1232-
expect(wrapper.find('ul.data-grid li div.cell').at(3).hasClass('test4')).toBe(true)
1291+
expect(wrapper.find('DataCell').at(1).key()).toEqual('custom_key')
1292+
expect(wrapper.find('ul.data-grid li div.cell').at(3).hasClass('test4')).toBe(true)
12331293
})
12341294

12351295
it('renders custom valueViewers', () => {
@@ -1256,11 +1316,11 @@ describe('Component', () => {
12561316
data[0][0].dataEditor = props => {
12571317
const {value, onKeyDown, onChange} = props
12581318
return (
1259-
<select
1260-
className='data-editor'
1261-
value={value}
1262-
onChange={e => onChange(e.target.value)}
1263-
onKeyDown={onKeyDown}
1319+
<select
1320+
className='data-editor'
1321+
value={value}
1322+
onChange={e => onChange(e.target.value)}
1323+
onKeyDown={onKeyDown}
12641324
>
12651325
<option value='1'>1</option>
12661326
<option value='2'>2</option>
@@ -1302,15 +1362,15 @@ describe('Component', () => {
13021362
cells.at(0).simulate('doubleClick')
13031363
expect(wrapper.find('td.cell.selected select').node.value).toEqual('4')
13041364

1305-
wrapper.find('td.cell.selected select').simulate('change', {target: { value : '5'}})
1365+
wrapper.find('td.cell.selected select').simulate('change', {target: { value: '5'}})
13061366
wrapper.find('td.cell.selected select').simulate('keydown', {keyCode: ENTER_KEY})
13071367
expect(data[0][0].data).toEqual(5)
13081368

13091369
// should have gone down one cell on ENTER
13101370
triggerKeyDownEvent(wrapper, ENTER_KEY)
13111371
const input = cells.at(2).find('input')
13121372
expect(input.node.value).toEqual('3')
1313-
input.simulate('change', {target: { value : '1'}})
1373+
input.simulate('change', {target: { value: '1'}})
13141374
triggerKeyDownEvent(input, ENTER_KEY)
13151375
expect(data[1][0].data).toEqual('1')
13161376
})

0 commit comments

Comments
 (0)