96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import { HotTable } from '../src/hotTable';
|
|
import { HotColumn } from '../src/hotColumn';
|
|
import {
|
|
createSpreadsheetData,
|
|
mockElementDimensions,
|
|
mountComponentWithRef
|
|
} from './_helpers';
|
|
import { HotRendererProps, HotTableRef } from '../src/types'
|
|
|
|
describe('React Context', () => {
|
|
it('should be possible to declare a context and use it inside both renderers and editors', async () => {
|
|
let hotTableInstance: HotTableRef = null!;
|
|
const TestContext = React.createContext('def-test-val');
|
|
|
|
function RendererComponent2() {
|
|
return (
|
|
<TestContext.Consumer>
|
|
{(context) => <>{context}</>}
|
|
</TestContext.Consumer>
|
|
);
|
|
}
|
|
|
|
const EditorComponent2 = ({ className }: { className?: string }) => {
|
|
return (
|
|
<div className={className}>
|
|
<TestContext.Consumer>
|
|
{(context) => <>{context}</>}
|
|
</TestContext.Consumer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
class RendererComponent3 extends React.Component<HotRendererProps> {
|
|
render() {
|
|
return (
|
|
<>
|
|
{this.context}
|
|
</>
|
|
)
|
|
}
|
|
}
|
|
RendererComponent3.contextType = TestContext;
|
|
|
|
class EditorComponent3 extends React.Component<{ className: string }> {
|
|
declare context: string;
|
|
|
|
render() {
|
|
return (
|
|
<div className={this.props.className}>
|
|
{this.context}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
EditorComponent3.contextType = TestContext;
|
|
|
|
mountComponentWithRef<HotTableRef>((
|
|
<TestContext.Provider value={'testContextValue'}>
|
|
<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);
|
|
}}
|
|
ref={function (instance) {
|
|
hotTableInstance = instance!;
|
|
}}>
|
|
<HotColumn renderer={RendererComponent2}
|
|
editor={() => <EditorComponent2 className="ec2" />} />
|
|
<HotColumn renderer={RendererComponent3}
|
|
editor={() => <EditorComponent3 className="ec3" />} />
|
|
</HotTable>
|
|
</TestContext.Provider>
|
|
));
|
|
|
|
const hotInstance = hotTableInstance.hotInstance!;
|
|
|
|
expect(hotInstance.getCell(0, 0)!.innerHTML).toEqual('<div>testContextValue</div>');
|
|
expect(hotInstance.getCell(1, 0)!.innerHTML).toEqual('<div>testContextValue</div>');
|
|
|
|
expect(document.querySelector('.ec2')!.innerHTML).toEqual('testContextValue');
|
|
|
|
expect(hotInstance.getCell(0, 1)!.innerHTML).toEqual('<div>testContextValue</div>');
|
|
expect(hotInstance.getCell(1, 1)!.innerHTML).toEqual('<div>testContextValue</div>');
|
|
|
|
expect(document.querySelector('.ec3')!.innerHTML).toEqual('testContextValue');
|
|
});
|
|
});
|