395 lines
14 KiB
TypeScript
395 lines
14 KiB
TypeScript
import React from 'react';
|
|
import { act } from '@testing-library/react';
|
|
import { HotTable } from '../src/hotTable';
|
|
import { HotColumn } from '../src/hotColumn';
|
|
import { registerAllModules } from 'handsontable/registry';
|
|
import {
|
|
createSpreadsheetData,
|
|
RendererComponent,
|
|
mockElementDimensions,
|
|
sleep,
|
|
EditorComponent,
|
|
simulateKeyboardEvent,
|
|
simulateMouseEvent,
|
|
mountComponentWithRef
|
|
} from './_helpers';
|
|
|
|
// register Handsontable's modules
|
|
registerAllModules();
|
|
|
|
describe('Passing column settings using HotColumn', () => {
|
|
it('should apply the Handsontable settings passed as HotColumn arguments to the Handsontable instance', async () => {
|
|
const hotInstance = mountComponentWithRef((
|
|
<HotTable
|
|
licenseKey="non-commercial-and-evaluation"
|
|
id="test-hot" data={[[2]]}
|
|
readOnly={false}
|
|
>
|
|
<HotColumn title="test title"></HotColumn>
|
|
<HotColumn readOnly={true}></HotColumn>
|
|
</HotTable>
|
|
)).hotInstance;
|
|
|
|
expect(hotInstance.getSettings().columns[0].title).toEqual('test title');
|
|
expect(hotInstance.getCellMeta(0, 0).readOnly).toEqual(false);
|
|
|
|
expect(hotInstance.getSettings().columns[1].title).toEqual(void 0);
|
|
expect(hotInstance.getCellMeta(0, 1).readOnly).toEqual(true);
|
|
|
|
expect(hotInstance.getSettings().licenseKey).toEqual('non-commercial-and-evaluation');
|
|
});
|
|
|
|
it('should allow to use data option as a string', async () => {
|
|
const dataKeyCellValue = 'Value of key1 in row 0';
|
|
const hotInstance = mountComponentWithRef((
|
|
<HotTable
|
|
licenseKey="non-commercial-and-evaluation"
|
|
id="test-hot" data={[{ key1: dataKeyCellValue }]}
|
|
readOnly={false}
|
|
>
|
|
<HotColumn data="key1"></HotColumn>
|
|
</HotTable>
|
|
)).hotInstance;
|
|
|
|
expect(hotInstance.getCell(0, 0).innerHTML).toEqual(dataKeyCellValue);
|
|
});
|
|
|
|
it('should apply column settings through the `settings` prop', async () => {
|
|
const hotInstance = mountComponentWithRef((
|
|
<HotTable
|
|
licenseKey="non-commercial-and-evaluation"
|
|
colHeaders={true}
|
|
>
|
|
<HotColumn settings={{ title: 'test', readOnly: true }}></HotColumn>
|
|
</HotTable>
|
|
)).hotInstance;
|
|
|
|
expect(hotInstance.getCellMeta(0, 0).readOnly).toBe(true);
|
|
expect(hotInstance.getCell(-1, 0).querySelector('span').innerHTML).toBe('test');
|
|
});
|
|
});
|
|
|
|
describe('Renderer configuration using React components', () => {
|
|
it('should use the renderer component as Handsontable renderer, when it\'s nested under HotColumn and assigned the \'hot-renderer\' attribute', async () => {
|
|
const hotInstance = mountComponentWithRef((
|
|
<HotTable licenseKey="non-commercial-and-evaluation"
|
|
id="test-hot"
|
|
data={createSpreadsheetData(100, 2)}
|
|
width={300}
|
|
height={300}
|
|
rowHeights={23}
|
|
colWidths={50}
|
|
autoRowSize={false}
|
|
autoColumnSize={false}
|
|
init={function () {
|
|
mockElementDimensions(this.rootElement, 300, 300);
|
|
}}>
|
|
<HotColumn/>
|
|
<HotColumn>
|
|
<RendererComponent hot-renderer></RendererComponent>
|
|
</HotColumn>
|
|
</HotTable>
|
|
)).hotInstance;
|
|
|
|
expect(hotInstance.getCell(0, 0).innerHTML).toEqual('A1');
|
|
expect(hotInstance.getCell(0, 1).innerHTML).toEqual('<div>value: B1</div>');
|
|
|
|
await act(async() => {
|
|
hotInstance.scrollViewportTo({
|
|
row: 99,
|
|
col: 0,
|
|
});
|
|
hotInstance.render();
|
|
});
|
|
|
|
await sleep(300);
|
|
|
|
expect(hotInstance.getCell(99, 0).innerHTML).toEqual('A100');
|
|
expect(hotInstance.getCell(99, 1).innerHTML).toEqual('<div>value: B100</div>');
|
|
});
|
|
});
|
|
|
|
describe('Editor configuration using React components', () => {
|
|
it('should use the editor component as Handsontable editor, when it\'s nested under HotTable and assigned the \'hot-editor\' attribute', async () => {
|
|
const hotInstance = mountComponentWithRef((
|
|
<HotTable licenseKey="non-commercial-and-evaluation"
|
|
id="test-hot"
|
|
data={createSpreadsheetData(3, 2)}
|
|
width={300}
|
|
height={300}
|
|
rowHeights={23}
|
|
colWidths={50}
|
|
init={function () {
|
|
mockElementDimensions(this.rootElement, 300, 300);
|
|
}}>
|
|
<HotColumn/>
|
|
<HotColumn>
|
|
<EditorComponent hot-editor></EditorComponent>
|
|
</HotColumn>
|
|
</HotTable>
|
|
)).hotInstance;
|
|
|
|
expect((document.querySelector('#editorComponentContainer') as any).style.display).toEqual('none');
|
|
|
|
await act(async () => {
|
|
hotInstance.selectCell(0, 1);
|
|
simulateKeyboardEvent('keydown', 13);
|
|
});
|
|
|
|
expect((document.querySelector('#editorComponentContainer') as any).style.display).toEqual('block');
|
|
expect(hotInstance.getDataAtCell(0, 1)).toEqual('B1');
|
|
|
|
await act(async () => {
|
|
simulateMouseEvent(document.querySelector('#editorComponentContainer button'), 'click');
|
|
});
|
|
|
|
expect(hotInstance.getDataAtCell(0, 1)).toEqual('new-value');
|
|
|
|
hotInstance.getActiveEditor().close();
|
|
|
|
expect((document.querySelector('#editorComponentContainer') as any).style.display).toEqual('none');
|
|
|
|
await act(async () => {
|
|
hotInstance.selectCell(0, 0);
|
|
simulateKeyboardEvent('keydown', 13);
|
|
});
|
|
|
|
expect((document.querySelector('#editorComponentContainer') as any).style.display).toEqual('none');
|
|
});
|
|
|
|
it('should be possible to reuse editor components between columns with different props passed to them', async () => {
|
|
class ReusableEditor extends EditorComponent {
|
|
prepare(row, col, prop, TD, originalValue, cellProperties): any {
|
|
super.prepare(row, col, prop, TD, originalValue, cellProperties);
|
|
|
|
this.mainElementRef.current.style.backgroundColor = this.props.background;
|
|
}
|
|
}
|
|
|
|
const hotInstance = mountComponentWithRef((
|
|
<HotTable licenseKey="non-commercial-and-evaluation"
|
|
id="test-hot"
|
|
data={createSpreadsheetData(3, 2)}
|
|
width={300}
|
|
height={300}
|
|
rowHeights={23}
|
|
colWidths={50}
|
|
init={function () {
|
|
mockElementDimensions(this.rootElement, 300, 300);
|
|
}}>
|
|
<HotColumn>
|
|
<ReusableEditor background='red' hot-editor></ReusableEditor>
|
|
</HotColumn>
|
|
<HotColumn>
|
|
<ReusableEditor background='yellow' hot-editor></ReusableEditor>
|
|
</HotColumn>
|
|
</HotTable>
|
|
)).hotInstance;
|
|
|
|
await act(async () => {
|
|
hotInstance.selectCell(0, 0);
|
|
});
|
|
|
|
expect((document.querySelectorAll('#editorComponentContainer')[0] as any).style.backgroundColor).toEqual('red');
|
|
|
|
await act(async () => {
|
|
simulateKeyboardEvent('keydown', 13);
|
|
});
|
|
|
|
expect(hotInstance.getActiveEditor().editorComponent.mainElementRef.current.style.backgroundColor).toEqual('red');
|
|
|
|
await act(async () => {
|
|
hotInstance.getActiveEditor().close();
|
|
hotInstance.selectCell(0, 1);
|
|
});
|
|
|
|
expect((document.querySelectorAll('#editorComponentContainer')[1] as any).style.backgroundColor).toEqual('yellow');
|
|
|
|
await act(async () => {
|
|
simulateKeyboardEvent('keydown', 13);
|
|
});
|
|
|
|
expect(hotInstance.getActiveEditor().editorComponent.mainElementRef.current.style.backgroundColor).toEqual('yellow');
|
|
|
|
await act(async () => {
|
|
hotInstance.selectCell(0, 0);
|
|
simulateKeyboardEvent('keydown', 13);
|
|
});
|
|
|
|
expect(hotInstance.getActiveEditor().editorComponent.mainElementRef.current.style.backgroundColor).toEqual('red');
|
|
|
|
hotInstance.getActiveEditor().close();
|
|
});
|
|
});
|
|
|
|
describe('Dynamic HotColumn configuration changes', () => {
|
|
it('should be possible to rearrange and change the column + editor + renderer configuration dynamically', async () => {
|
|
function RendererComponent2(props) {
|
|
return (
|
|
<>r2: {props.value}</>
|
|
);
|
|
}
|
|
|
|
class WrapperComponent extends React.Component<any, any> {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
setup: [
|
|
<RendererComponent hot-renderer key={'1'}/>,
|
|
<HotColumn title="test title" className="first-column-class-name" key={'2'}>
|
|
<EditorComponent className="editor-className-1" id="editor-id-1" style={{background: 'red'}} hot-editor/>
|
|
</HotColumn>,
|
|
<HotColumn title="test title 2" key={'3'}>
|
|
<RendererComponent2 hot-renderer></RendererComponent2>
|
|
</HotColumn>
|
|
]
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<HotTable licenseKey="non-commercial-and-evaluation" id="test-hot"
|
|
data={createSpreadsheetData(3, 2)}
|
|
width={300}
|
|
height={300}
|
|
rowHeights={23}
|
|
colWidths={50}
|
|
readOnly={false}
|
|
autoRowSize={false}
|
|
autoColumnSize={false}
|
|
init={function () {
|
|
mockElementDimensions(this.rootElement, 300, 300);
|
|
}}
|
|
ref={hotTableInstanceRef}>
|
|
{this.state.setup}
|
|
</HotTable>
|
|
);
|
|
};
|
|
}
|
|
|
|
let hotTableInstanceRef = React.createRef();
|
|
|
|
const wrapperComponentInstance = mountComponentWithRef((
|
|
<WrapperComponent/>
|
|
));
|
|
|
|
let hotInstance = (hotTableInstanceRef.current as any).hotInstance;
|
|
let editorElement = document.querySelector('#editorComponentContainer');
|
|
|
|
expect(hotInstance.getSettings().columns[0].title).toEqual('test title');
|
|
expect(hotInstance.getSettings().columns[0].className).toEqual('first-column-class-name');
|
|
expect(hotInstance.getCell(0, 0).innerHTML).toEqual('<div>value: A1</div>');
|
|
expect(hotInstance.getCell(1, 0).innerHTML).toEqual('<div>value: A2</div>');
|
|
|
|
await act(async () => {
|
|
hotInstance.selectCell(0, 0);
|
|
hotInstance.getActiveEditor().open();
|
|
});
|
|
|
|
expect(hotInstance.getActiveEditor().constructor.name).toEqual('CustomEditor');
|
|
expect(hotInstance.getActiveEditor().editorComponent.__proto__.constructor.name).toEqual('EditorComponent');
|
|
expect(editorElement.style.display).toEqual('block');
|
|
expect(editorElement.parentNode.style.background).toEqual('red');
|
|
expect(editorElement.parentNode.id).toEqual('editor-id-1');
|
|
expect(editorElement.parentNode.className.includes('editor-className-1')).toBe(true);
|
|
|
|
await act(async () => {
|
|
hotInstance.getActiveEditor().close();
|
|
});
|
|
|
|
expect(hotInstance.getSettings().columns[1].title).toEqual('test title 2');
|
|
expect(hotInstance.getSettings().columns[1].className).toEqual(void 0);
|
|
expect(hotInstance.getCell(0, 1).innerHTML).toEqual('<div>r2: B1</div>');
|
|
expect(hotInstance.getCell(1, 1).innerHTML).toEqual('<div>r2: B2</div>');
|
|
hotInstance.selectCell(0, 1);
|
|
expect(hotInstance.getActiveEditor().constructor.name).toEqual('TextEditor');
|
|
expect(hotInstance.getActiveEditor().editorComponent).toEqual(void 0);
|
|
expect((document.querySelector('#editorComponentContainer') as any).style.display).toEqual('none');
|
|
|
|
await act(async() => {
|
|
wrapperComponentInstance.setState({
|
|
setup: [
|
|
<EditorComponent className="editor-className-2" id="editor-id-2" style={{background: 'blue'}} hot-editor key={'1'}/>,
|
|
<HotColumn title="test title 2" key={'2'}>
|
|
<RendererComponent2 hot-renderer></RendererComponent2>
|
|
</HotColumn>,
|
|
<HotColumn title="test title" className="first-column-class-name" key={'3'}>
|
|
<RendererComponent hot-renderer/>
|
|
</HotColumn>
|
|
]
|
|
});
|
|
});
|
|
|
|
await sleep(100);
|
|
|
|
editorElement = document.querySelector('#editorComponentContainer');
|
|
|
|
expect(hotInstance.getSettings().columns[0].title).toEqual('test title 2');
|
|
expect(hotInstance.getSettings().columns[0].className).toEqual(void 0);
|
|
expect(hotInstance.getCell(0, 0).innerHTML).toEqual('<div>r2: A1</div>');
|
|
expect(hotInstance.getCell(1, 0).innerHTML).toEqual('<div>r2: A2</div>');
|
|
|
|
await act(async () => {
|
|
hotInstance.selectCell(0, 0);
|
|
hotInstance.getActiveEditor().open();
|
|
});
|
|
|
|
expect(hotInstance.getActiveEditor().constructor.name).toEqual('CustomEditor');
|
|
expect(hotInstance.getActiveEditor().editorComponent.__proto__.constructor.name).toEqual('EditorComponent');
|
|
expect(editorElement.style.display).toEqual('block');
|
|
expect(editorElement.parentNode.style.background).toEqual('blue');
|
|
expect(editorElement.parentNode.id).toEqual('editor-id-2');
|
|
expect(editorElement.parentNode.className.includes('editor-className-2')).toBe(true);
|
|
|
|
await act(async () => {
|
|
hotInstance.getActiveEditor().close();
|
|
});
|
|
|
|
expect(hotInstance.getSettings().columns[1].title).toEqual('test title');
|
|
expect(hotInstance.getSettings().columns[1].className).toEqual('first-column-class-name');
|
|
expect(hotInstance.getCell(0, 1).innerHTML).toEqual('<div>value: B1</div>');
|
|
expect(hotInstance.getCell(1, 1).innerHTML).toEqual('<div>value: B2</div>');
|
|
|
|
await act(async () => {
|
|
hotInstance.selectCell(0, 1);
|
|
hotInstance.getActiveEditor().open();
|
|
});
|
|
|
|
expect(hotInstance.getActiveEditor().constructor.name).toEqual('CustomEditor');
|
|
expect(hotInstance.getActiveEditor().editorComponent.__proto__.constructor.name).toEqual('EditorComponent');
|
|
expect((document.querySelector('#editorComponentContainer') as any).style.display).toEqual('block');
|
|
|
|
await act(async () => {
|
|
hotInstance.getActiveEditor().close();
|
|
});
|
|
|
|
expect(hotInstance.getSettings().licenseKey).toEqual('non-commercial-and-evaluation');
|
|
});
|
|
});
|
|
|
|
describe('Miscellaneous scenarios with `HotColumn` config', () => {
|
|
it('should validate all cells correctly in a `dropdown`-typed column after populating data through it', async () => {
|
|
const onAfterValidate = jasmine.createSpy('warn');
|
|
const hotInstance = mountComponentWithRef((
|
|
<HotTable licenseKey="non-commercial-and-evaluation"
|
|
data={[['yellow'], ['white'], ['orange']]}
|
|
afterValidate={onAfterValidate}
|
|
>
|
|
<HotColumn type="dropdown" source={['yellow', 'red', 'orange']}/>
|
|
</HotTable>
|
|
)).hotInstance;
|
|
|
|
await act(async () => {
|
|
hotInstance.populateFromArray(0, 0, [['test'], ['test2'], ['test3']]);
|
|
});
|
|
|
|
await sleep(300);
|
|
|
|
expect(onAfterValidate).toHaveBeenCalledTimes(3);
|
|
expect(onAfterValidate).toHaveBeenCalledWith(false, 'test3', 2, 0, 'populateFromArray');
|
|
expect(onAfterValidate).toHaveBeenCalledWith(false, 'test2', 1, 0, 'populateFromArray');
|
|
expect(onAfterValidate).toHaveBeenCalledWith(false, 'test', 0, 0, 'populateFromArray');
|
|
});
|
|
});
|