Skip to content

Commit

Permalink
feat(editor): brand new react-y editor api
Browse files Browse the repository at this point in the history 
also fix grid creation and destroy and use with much simpler ref implementation, also prettierrc
  • Loading branch information
@scamden
scamden committed Sep 1, 2022
1 parent 6142a59 commit dbf3cd0
Show file tree
Hide file tree
Showing 3 changed files with 167 additions and 116 deletions.
115 changes: 47 additions & 68 deletions src/lib/components/__tests__/grid.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import _merge = require('lodash/merge');

const mockReactDomRender = jest.fn();
jest.mock('react-dom', () => ({
render: mockReactDomRender
render: mockReactDomRender,
}));

const mockDataSet = jest.fn();
Expand All @@ -23,15 +23,15 @@ const makeDescriptor = (): Partial<IRowColDescriptor> => {
const mockDim = () => ({
converters: {
data: {
get: jest.fn(makeDescriptor)
}
get: jest.fn(makeDescriptor),
},
},
rowColModel: {
clear: jest.fn(),
add: jest.fn(),
create: jest.fn(makeDescriptor),
numHeaders: jest.fn()
}
numHeaders: jest.fn(),
},
});
const mockRowDim = _merge({}, mockDim(), { rowColModel: { row: jest.fn() } });
const mockColDim = _merge({}, mockDim(), { rowColModel: { col: jest.fn() } });
Expand All @@ -43,17 +43,22 @@ const mockGridCreate = jest.fn((o: any) => ({
cols: mockColDim,
colModel: {
createBuilder: (render: any, update: any): any => ({
render, update
})
render,
update,
}),
},
rowModel: {
createBuilder: (render: any, update: any): any => ({
render, update
})
render,
update,
}),
},
dataModel: {
handleCachedDataChange: mockDataSetDirty
}
handleCachedDataChange: mockDataSetDirty,
},
eventLoop: {
bind: () => () => {},
},
}));
(grid.create as any) = mockGridCreate;

Expand All @@ -78,9 +83,7 @@ beforeEach(() => {
});

it('should create a container for the grid', () => {
const reactGrid = mount(
<ReactGrid rows={[]} cols={[]} />
);
const reactGrid = mount(<ReactGrid rows={[]} cols={[]} />);
const gridContainer = reactGrid.children().getDOMNode().firstElementChild as HTMLElement;
expect(gridContainer).toBeDefined();
if (gridContainer) {
Expand All @@ -93,49 +96,39 @@ it('should create a container for the grid', () => {
});

it('should keep the container in the DOM on subsequent updates', () => {
const reactGrid = mount(
<ReactGrid rows={[]} cols={[]} />
);
const reactGrid = mount(<ReactGrid rows={[]} cols={[]} />);
expect(reactGrid.children().getDOMNode().firstElementChild).toBeDefined();
reactGrid.setProps({ rows: [{}], cols: [] });
expect(reactGrid.children().getDOMNode().firstElementChild).toBeDefined();
});

it('should create a grid with opts', () => {
const reactGrid = mount(
<ReactGrid rows={[]} cols={[]} snapToCell={true} />
);
const reactGrid = mount(<ReactGrid rows={[]} cols={[]} snapToCell={true} />);
expect(mockGridCreate).toHaveBeenCalledWith({ snapToCell: true });
});

it('should build a grid with the container', () => {
const reactGrid = mount(
<ReactGrid rows={[]} cols={[]} />
);
const reactGrid = mount(<ReactGrid rows={[]} cols={[]} />);
expect(mockGridBuild).toHaveBeenCalledWith((reactGrid.instance() as ReactGrid).gridContainer.current);
});

it('should add the supplied rows and cols to the grid', () => {
const rows = [{ header: true }, { height: 4 }];
const cols = [{ fixed: true }, { width: 4 }];
const reactGrid = mount(
<ReactGrid rows={rows} cols={cols} />
);
const reactGrid = mount(<ReactGrid rows={rows} cols={cols} />);
expect(mockRowDim.rowColModel.add.mock.calls[0][0]).toMatchObject(rows);
expect(mockColDim.rowColModel.add.mock.calls[0][0]).toMatchObject(cols);
});

it('should not call add if the supplied rows and cols havent changed functionally', () => {
const rows = [{ header: true }, { height: 4 }];
const cols = [{ fixed: true }, { width: 4 }];
const reactGrid = mount(
<ReactGrid rows={rows} cols={cols} />
);
const reactGrid = mount(<ReactGrid rows={rows} cols={cols} />);
mockRowDim.rowColModel.add.mockClear();
mockColDim.rowColModel.add.mockClear();
reactGrid.setProps({
rows: JSON.parse(JSON.stringify(rows)),
cols: JSON.parse(JSON.stringify(cols))
cols: JSON.parse(JSON.stringify(cols)),
});
expect(mockRowDim.rowColModel.add).not.toHaveBeenCalled();
expect(mockColDim.rowColModel.add).not.toHaveBeenCalled();
Expand All @@ -144,53 +137,45 @@ it('should not call add if the supplied rows and cols havent changed functionall
it('should not call add if the supplied rows and cols havent changed ref', () => {
const rows = [{ header: true }, { height: 4 }];
const cols = [{ fixed: true }, { width: 4 }];
const reactGrid = mount(
<ReactGrid rows={rows} cols={cols} />
);
const reactGrid = mount(<ReactGrid rows={rows} cols={cols} />);
mockRowDim.rowColModel.add.mockClear();
mockColDim.rowColModel.add.mockClear();
reactGrid.setProps({
rows,
cols
cols,
});
expect(mockRowDim.rowColModel.add).not.toHaveBeenCalled();
expect(mockColDim.rowColModel.add).not.toHaveBeenCalled();
});

it('should supply data to the grid', () => {
const dataRow1 = [{ value: undefined, formatted: '1' }, { value: undefined, formatted: '2' }];
const dataRow2 = [{ value: undefined, formatted: '3' }, { value: undefined, formatted: '4' }];
const reactGrid = mount(
<ReactGrid
rows={[{}, {}]}
cols={[{}, {}]}
data={[
dataRow1,
dataRow2
]}
/>
);
const dataRow1 = [
{ value: undefined, formatted: '1' },
{ value: undefined, formatted: '2' },
];
const dataRow2 = [
{ value: undefined, formatted: '3' },
{ value: undefined, formatted: '4' },
];
const reactGrid = mount(<ReactGrid rows={[{}, {}]} cols={[{}, {}]} data={[dataRow1, dataRow2]} />);
expect(mockRowDim.converters.data.get).toHaveBeenCalledWith(0);
expect(mockRowDim.converters.data.get).toHaveBeenCalledWith(1);
expect(mockDataSet).toHaveBeenCalledWith(dataRow1);
expect(mockDataSet).toHaveBeenCalledWith(dataRow2);
});

it('should re-supply data to the grid IFF the ref has changed', () => {
const dataRow1 = [{ value: undefined, formatted: '1' }, { value: undefined, formatted: '2' }];
const dataRow2 = [{ value: undefined, formatted: '3' }, { value: undefined, formatted: '4' }];
const dataRow1 = [
{ value: undefined, formatted: '1' },
{ value: undefined, formatted: '2' },
];
const dataRow2 = [
{ value: undefined, formatted: '3' },
{ value: undefined, formatted: '4' },
];
const rows = [{}, {}];
const cols = [{}, {}];
const reactGrid = mount(
<ReactGrid
rows={rows}
cols={cols}
data={[
dataRow1,
dataRow2
]}
/>
);
const reactGrid = mount(<ReactGrid rows={rows} cols={cols} data={[dataRow1, dataRow2]} />);
mockRowDim.converters.data.get.mockClear();
mockDataSet.mockClear();
const data = [dataRow1, dataRow2];
Expand All @@ -211,9 +196,7 @@ it('should use a colBuilder to supply React rendered content to the grid via cel
const cols = [{ fixed: true }, { width: 4 }];
const a = <a />;
const cellRenderer = jest.fn().mockReturnValue(a);
const reactGrid = mount(
<ReactGrid rows={rows} cols={cols} cellRenderer={cellRenderer} />
);
const reactGrid = mount(<ReactGrid rows={rows} cols={cols} cellRenderer={cellRenderer} />);
const gridCols = mockColDim.rowColModel.add.mock.calls[0][0];
const cellRendererBuilder = gridCols[0].builder;
const rendered = cellRendererBuilder.render();
Expand All @@ -229,9 +212,7 @@ it('should use a rowBuilder to supply React rendered content to the grid via hea
const cols = [{ fixed: true }, { width: 4 }];
const a = <a />;
const cellRenderer = jest.fn().mockReturnValue(a);
const reactGrid = mount(
<ReactGrid rows={rows} cols={cols} headerCellRenderer={cellRenderer} />
);
const reactGrid = mount(<ReactGrid rows={rows} cols={cols} headerCellRenderer={cellRenderer} />);
const gridRows = mockRowDim.rowColModel.add.mock.calls[0][0];
const cellRendererBuilder = gridRows[0].builder;
const rendered = cellRendererBuilder.render();
Expand All @@ -248,9 +229,7 @@ it('should not call headerCellRenderer prop if its not a header', () => {
const a = <a />;
const cellRenderer = jest.fn().mockReturnValue(a);
mockRowDim.rowColModel.numHeaders.mockReturnValue(1);
const reactGrid = mount(
<ReactGrid rows={rows} cols={cols} headerCellRenderer={cellRenderer} />
);
const reactGrid = mount(<ReactGrid rows={rows} cols={cols} headerCellRenderer={cellRenderer} />);
const gridRows = mockRowDim.rowColModel.add.mock.calls[0][0];
const cellRendererBuilder = gridRows[0].builder;
const rendered = cellRendererBuilder.render();
Expand All @@ -259,4 +238,4 @@ it('should not call headerCellRenderer prop if its not a header', () => {
expect(cellRendererBuilder.update(rendered, { virtualRow: 1, virtualCol: 1, data: { formatted: 'poo' } })).toBe(undefined);
expect(cellRenderer).not.toHaveBeenCalled();
expect(mockReactDomRender).not.toHaveBeenCalled();
});
});
Loading

0 comments on commit dbf3cd0

Please sign in to comment.