140 lines
3.7 KiB
TypeScript
140 lines
3.7 KiB
TypeScript
import React from 'react';
|
|
import { act } from '@testing-library/react';
|
|
import { createStore, combineReducers, AnyAction } from 'redux';
|
|
import { Provider, connect } from 'react-redux';
|
|
import { HotTable } from '../src/hotTable';
|
|
import {
|
|
createSpreadsheetData,
|
|
mockElementDimensions,
|
|
sleep,
|
|
RendererComponent,
|
|
EditorComponent,
|
|
mountComponent
|
|
} from './_helpers';
|
|
|
|
const initialReduxStoreState = {
|
|
hexColor: '#fff'
|
|
};
|
|
|
|
const appReducer = (state = initialReduxStoreState, action: AnyAction) => {
|
|
switch (action.type) {
|
|
case 'updateColor':
|
|
const newColor = action.hexColor;
|
|
|
|
return Object.assign({}, state, {
|
|
hexColor: newColor
|
|
});
|
|
default:
|
|
return state;
|
|
}
|
|
};
|
|
const actionReducers = combineReducers({appReducer});
|
|
const reduxStore = createStore(actionReducers);
|
|
|
|
beforeEach(() => {
|
|
reduxStore.dispatch({
|
|
type: 'updateColor',
|
|
hexColor: '#fff'
|
|
});
|
|
});
|
|
|
|
describe('Using Redux store within HotTable renderers and editors', () => {
|
|
it('should be possible to use redux-enabled components as renderers', async () => {
|
|
const ReduxEnabledRenderer = connect(function (state: any) {
|
|
return {
|
|
bgColor: state.appReducer.hexColor
|
|
}
|
|
}, () => {
|
|
return {};
|
|
})(RendererComponent);
|
|
|
|
const rendererInstances = new Map();
|
|
|
|
mountComponent((
|
|
<Provider store={reduxStore}>
|
|
<HotTable licenseKey="non-commercial-and-evaluation"
|
|
id="test-hot"
|
|
data={createSpreadsheetData(3, 3)}
|
|
width={300}
|
|
height={300}
|
|
rowHeights={23}
|
|
colWidths={50}
|
|
autoRowSize={false}
|
|
autoColumnSize={false}
|
|
init={function () {
|
|
mockElementDimensions(this.rootElement, 300, 300);
|
|
}}
|
|
renderer={(props) => <ReduxEnabledRenderer {...props} tap={(props) => {
|
|
rendererInstances.set(`${props.row}-${props.col}`, props);
|
|
}
|
|
} />} />
|
|
</Provider>
|
|
));
|
|
|
|
expect(rendererInstances.size).not.toEqual(0);
|
|
|
|
rendererInstances.forEach((props, key, map) => {
|
|
expect(props.bgColor).toEqual('#fff');
|
|
});
|
|
|
|
await act(async () => {
|
|
reduxStore.dispatch({
|
|
type: 'updateColor',
|
|
hexColor: '#B57267'
|
|
});
|
|
});
|
|
|
|
rendererInstances.forEach((props) => {
|
|
expect(props.bgColor).toEqual('#B57267');
|
|
});
|
|
});
|
|
|
|
it('should be possible to use redux-enabled components as editors', async () => {
|
|
const ReduxEnabledEditor = connect(function (state: any) {
|
|
return {
|
|
bgColor: state.appReducer.hexColor
|
|
}
|
|
}, () => {
|
|
return {};
|
|
},
|
|
null,
|
|
{
|
|
forwardRef: true
|
|
})(EditorComponent);
|
|
|
|
let editorProps: any;
|
|
|
|
mountComponent((
|
|
<Provider store={reduxStore}>
|
|
<HotTable licenseKey="non-commercial-and-evaluation"
|
|
id="test-hot"
|
|
data={createSpreadsheetData(3, 3)}
|
|
width={300}
|
|
height={300}
|
|
rowHeights={23}
|
|
colWidths={50}
|
|
init={function () {
|
|
mockElementDimensions(this.rootElement, 300, 300);
|
|
}}
|
|
editor={() => <ReduxEnabledEditor tap={(props) => {
|
|
editorProps = props
|
|
}
|
|
} />} />
|
|
</Provider>
|
|
));
|
|
|
|
await sleep(100);
|
|
|
|
expect(editorProps.bgColor).toEqual('#fff');
|
|
|
|
await act(async () => {
|
|
reduxStore.dispatch({
|
|
type: 'updateColor',
|
|
hexColor: '#B57267'
|
|
});
|
|
});
|
|
|
|
expect(editorProps.bgColor).toEqual('#B57267');
|
|
});
|
|
});
|