154 lines
4.1 KiB
TypeScript
154 lines
4.1 KiB
TypeScript
import React from 'react';
|
|
import { act } from '@testing-library/react';
|
|
import { HotTable } from '../src/hotTable';
|
|
import { HotColumn } from '../src/hotColumn';
|
|
import {
|
|
createSpreadsheetData,
|
|
mockElementDimensions,
|
|
mountComponentWithRef,
|
|
renderHotTableWithProps,
|
|
sleep,
|
|
} from './_helpers';
|
|
import { HOT_DESTROYED_WARNING } from "../src/helpers";
|
|
import { HotTableProps, HotRendererProps, HotTableRef } from '../src/types'
|
|
|
|
describe('Component lifecyle', () => {
|
|
it('renderer components should trigger their lifecycle methods', async () => {
|
|
function RendererComponent2(props: HotRendererProps) {
|
|
React.useEffect(() => {
|
|
rendererCounters.set(`${props.row}-${props.col}`, {
|
|
didMount: 1,
|
|
willUnmount: 0
|
|
});
|
|
|
|
return () => {
|
|
const counters = rendererCounters.get(`${props.row}-${props.col}`);
|
|
counters.willUnmount++;
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
test
|
|
</>
|
|
);
|
|
}
|
|
|
|
const rendererCounters = new Map();
|
|
|
|
const hotInstance = mountComponentWithRef<HotTableRef>((
|
|
<HotTable licenseKey="non-commercial-and-evaluation"
|
|
id="test-hot"
|
|
data={createSpreadsheetData(3, 2)}
|
|
width={300}
|
|
height={300}
|
|
rowHeights={23}
|
|
colWidths={50}
|
|
autoRowSize={false}
|
|
autoColumnSize={false}
|
|
init={function () {
|
|
mockElementDimensions(this.rootElement, 300, 300);
|
|
}}
|
|
renderer={(props) => <RendererComponent2 {...props} />}>
|
|
<HotColumn/>
|
|
<HotColumn renderer={(props) => <RendererComponent2 {...props} />}/>
|
|
</HotTable>
|
|
), false).hotInstance!;
|
|
|
|
expect(rendererCounters.size).toEqual(3 * 2);
|
|
|
|
rendererCounters.forEach((counters) => {
|
|
expect(counters.didMount).toEqual(1);
|
|
expect(counters.willUnmount).toEqual(0);
|
|
});
|
|
|
|
await act(async () => {
|
|
hotInstance.render();
|
|
});
|
|
|
|
await sleep(300);
|
|
|
|
rendererCounters.forEach((counters) => {
|
|
expect(counters.didMount).toEqual(1);
|
|
expect(counters.willUnmount).toEqual(0);
|
|
});
|
|
});
|
|
|
|
it('editor components should trigger their lifecycle methods', async () => {
|
|
const editorCounters = {
|
|
didMount: 0,
|
|
willUnmount: 0
|
|
};
|
|
|
|
const EditorComponent2 = () => {
|
|
React.useEffect(() => {
|
|
editorCounters.didMount++;
|
|
|
|
return () => {
|
|
editorCounters.willUnmount++;
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<>test</>
|
|
);
|
|
};
|
|
|
|
const props: HotTableProps = {
|
|
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);
|
|
},
|
|
editor: (props) => <EditorComponent2 {...props} key={Math.random()} />
|
|
};
|
|
|
|
renderHotTableWithProps(props, false);
|
|
|
|
expect(editorCounters.didMount).toEqual(1);
|
|
expect(editorCounters.willUnmount).toEqual(0);
|
|
|
|
// rerender
|
|
renderHotTableWithProps({ ...props, editor: undefined }, false);
|
|
|
|
expect(editorCounters.didMount).toEqual(1);
|
|
expect(editorCounters.willUnmount).toEqual(1);
|
|
});
|
|
|
|
it('should display a warning and not throw any errors, when the underlying Handsontable instance ' +
|
|
'has been destroyed', async () => {
|
|
const warnFunc = console.warn;
|
|
const warnCalls: string[] = [];
|
|
|
|
const componentInstance = mountComponentWithRef<HotTableRef>((
|
|
<HotTable
|
|
id="test-hot"
|
|
data={[[2]]}
|
|
licenseKey="non-commercial-and-evaluation"
|
|
/>
|
|
));
|
|
|
|
console.warn = (warningMessage: string) => {
|
|
warnCalls.push(warningMessage);
|
|
};
|
|
|
|
expect(componentInstance.hotInstance!.isDestroyed).toEqual(false);
|
|
|
|
componentInstance.hotInstance!.destroy();
|
|
|
|
expect(componentInstance.hotInstance).toEqual(null);
|
|
|
|
expect(warnCalls.length).toBeGreaterThan(0);
|
|
warnCalls.forEach((message) => {
|
|
expect(message).toEqual(HOT_DESTROYED_WARNING);
|
|
});
|
|
|
|
console.warn = warnFunc;
|
|
});
|
|
});
|