69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import React, { Suspense, lazy } from 'react';
|
|
import { act } from '@testing-library/react';
|
|
import { HotTable } from '../src/hotTable';
|
|
import {
|
|
createSpreadsheetData,
|
|
mockElementDimensions,
|
|
mountComponentWithRef,
|
|
sleep,
|
|
} from './_helpers';
|
|
import { HotRendererProps, HotTableRef } from '../src/types'
|
|
|
|
describe('React.lazy', () => {
|
|
it('should be possible to lazy-load components and utilize Suspend', async () => {
|
|
function RendererComponent2(props: HotRendererProps) {
|
|
return (
|
|
<>
|
|
lazy value: {props.value}
|
|
</>
|
|
);
|
|
}
|
|
|
|
let promiseResolve: (value: unknown) => void = () => undefined;
|
|
|
|
function SuspendedRenderer(props: HotRendererProps) {
|
|
const customImportPromise = new Promise(function (resolve, reject) {
|
|
promiseResolve = resolve;
|
|
}
|
|
) as any;
|
|
|
|
const LazierRenderer = lazy(() => customImportPromise);
|
|
|
|
return (
|
|
<Suspense fallback={<>loading-message</>}>
|
|
<LazierRenderer {...props}></LazierRenderer>
|
|
</Suspense>
|
|
)
|
|
}
|
|
|
|
const hotInstance = mountComponentWithRef<HotTableRef>((
|
|
<HotTable licenseKey="non-commercial-and-evaluation"
|
|
id="test-hot"
|
|
data={createSpreadsheetData(1, 1)}
|
|
width={300}
|
|
height={300}
|
|
rowHeights={23}
|
|
colWidths={50}
|
|
autoRowSize={false}
|
|
autoColumnSize={false}
|
|
init={function () {
|
|
mockElementDimensions(this.rootElement, 300, 300);
|
|
}}
|
|
renderer={SuspendedRenderer}/>
|
|
)).hotInstance!;
|
|
|
|
expect(hotInstance.getCell(0, 0)!.innerHTML).toEqual('<div>loading-message</div>');
|
|
|
|
await act(async () => {
|
|
promiseResolve({
|
|
default: RendererComponent2,
|
|
__esModule: true
|
|
});
|
|
});
|
|
|
|
await sleep(40);
|
|
|
|
expect(hotInstance.getCell(0, 0)!.innerHTML).toEqual('<div>lazy value: A1</div>');
|
|
});
|
|
});
|