Skip to content

Commit

Permalink
[core] Unify tests (mui#4368)
Browse files Browse the repository at this point in the history
  • Loading branch information
@flaviendelangle @alexfauquette
flaviendelangle authored and alexfauquette committed Aug 26, 2022
1 parent f4eb3b1 commit 8fa0c1d
Show file tree
Hide file tree
Showing 21 changed files with 213 additions and 218 deletions.
8 changes: 4 additions & 4 deletions packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,15 +222,15 @@ export const useGridColumnResize = (

colDefRef.current = colDef as GridStateColDef;
colElementRef.current =
apiRef.current.columnHeadersContainerElementRef?.current!.querySelector(
apiRef.current.columnHeadersContainerElementRef?.current!.querySelector<HTMLDivElement>(
`[data-field="${colDef.field}"]`,
) as HTMLDivElement;
)!;

colCellElementsRef.current = findGridCellElementsFromCol(
colElementRef.current,
) as NodeListOf<Element>;

const doc = ownerDocument(apiRef.current.rootElementRef!.current as HTMLElement);
const doc = ownerDocument(apiRef.current.rootElementRef!.current);
doc.body.style.cursor = 'col-resize';

separatorSide.current = getSeparatorSide(event.currentTarget);
Expand Down Expand Up @@ -350,7 +350,7 @@ export const useGridColumnResize = (
});

const stopListening = React.useCallback(() => {
const doc = ownerDocument(apiRef.current.rootElementRef!.current as HTMLElement);
const doc = ownerDocument(apiRef.current.rootElementRef!.current);
doc.body.style.removeProperty('cursor');
doc.removeEventListener('mousemove', handleResizeMouseMove);
doc.removeEventListener('mouseup', handleResizeMouseUp);
Expand Down
66 changes: 33 additions & 33 deletions packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,9 +107,9 @@ describe('<DataGridPro /> - Column pinning', () => {
this.skip();
}
render(<TestCase initialState={{ pinnedColumns: { left: ['id'] } }} />);
const renderZone = document.querySelector(
const renderZone = document.querySelector<HTMLDivElement>(
`.${gridClasses.virtualScrollerRenderZone}`,
) as HTMLDivElement;
)!;
expect(renderZone).toHaveInlineStyle({ transform: 'translate3d(100px, 0px, 0px)' });
const columnHeader = getColumnHeaderCell(0);
const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`);
Expand All @@ -126,9 +126,9 @@ describe('<DataGridPro /> - Column pinning', () => {
this.skip();
}
render(<TestCase initialState={{ pinnedColumns: { left: ['id'] } }} />);
const columnHeadersInner = document.querySelector(
const columnHeadersInner = document.querySelector<HTMLDivElement>(
`.${gridClasses.columnHeadersInner}`,
) as HTMLDivElement;
)!;
expect(columnHeadersInner).toHaveInlineStyle({ transform: 'translate3d(100px, 0px, 0px)' });
const columnHeader = getColumnHeaderCell(0);
const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`);
Expand Down Expand Up @@ -220,7 +220,7 @@ describe('<DataGridPro /> - Column pinning', () => {
expect(getColumnHeadersTextContent()).to.deep.equal(['id', '', 'Currency Pair']);
});

describe('props: onPinnedColumnsChange', () => {
describe('prop: onPinnedColumnsChange', () => {
it('should call when a column is pinned', () => {
const handlePinnedColumnsChange = spy();
render(<TestCase onPinnedColumnsChange={handlePinnedColumnsChange} />);
Expand Down Expand Up @@ -258,12 +258,12 @@ describe('<DataGridPro /> - Column pinning', () => {
});
});

describe('props: pinnedColumns', () => {
describe('prop: pinnedColumns', () => {
it('should pin the columns specified', () => {
render(<TestCase pinnedColumns={{ left: ['currencyPair'] }} />);
const leftColumns = document.querySelector(
const leftColumns = document.querySelector<HTMLDivElement>(
`.${gridClasses['pinnedColumns--left']}`,
) as HTMLDivElement;
)!;
expect(leftColumns.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
});

Expand All @@ -284,15 +284,15 @@ describe('<DataGridPro /> - Column pinning', () => {

it('should filter our duplicated columns', () => {
render(<TestCase pinnedColumns={{ left: ['currencyPair'], right: ['currencyPair'] }} />);
const leftColumns = document.querySelector(
const leftColumns = document.querySelector<HTMLDivElement>(
`.${gridClasses['pinnedColumns--left']}`,
) as HTMLDivElement;
)!;
expect(leftColumns.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
expect(document.querySelector(`.${gridClasses['pinnedColumns--right']}`)).to.equal(null);
});
});

describe('props: disableColumnPinning', () => {
describe('prop: disableColumnPinning', () => {
it('should not add any button to the column menu', () => {
render(<TestCase disableColumnPinning />);
const columnCell = document.querySelector('[role="columnheader"][data-field="id"]')!;
Expand Down Expand Up @@ -331,12 +331,12 @@ describe('<DataGridPro /> - Column pinning', () => {
describe('apiRef', () => {
it('should reorder the columns to render the left pinned columns before all other columns', () => {
render(<TestCase initialState={{ pinnedColumns: { left: ['currencyPair', 'price1M'] } }} />);
const leftColumns = document.querySelector(
const leftColumns = document.querySelector<HTMLDivElement>(
`.${gridClasses['pinnedColumns--left']}`,
) as HTMLDivElement;
const renderZone = document.querySelector(
)!;
const renderZone = document.querySelector<HTMLDivElement>(
`.${gridClasses.virtualScrollerRenderZone}`,
) as HTMLDivElement;
)!;
expect(leftColumns.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
expect(leftColumns.querySelector('[data-field="price1M"]')).not.to.equal(null);
expect(renderZone.querySelector('[data-field="currencyPair"]')).to.equal(null);
Expand All @@ -345,12 +345,12 @@ describe('<DataGridPro /> - Column pinning', () => {

it('should reorder the columns to render the right pinned columns after all other columns', () => {
render(<TestCase initialState={{ pinnedColumns: { right: ['price16M', 'price17M'] } }} />);
const rightColumns = document.querySelector(
const rightColumns = document.querySelector<HTMLDivElement>(
`.${gridClasses['pinnedColumns--right']}`,
) as HTMLDivElement;
const renderZone = document.querySelector(
)!;
const renderZone = document.querySelector<HTMLDivElement>(
`.${gridClasses.virtualScrollerRenderZone}`,
) as HTMLDivElement;
)!;
expect(rightColumns.querySelector('[data-field="price16M"]')).not.to.equal(null);
expect(rightColumns.querySelector('[data-field="price17M"]')).not.to.equal(null);
expect(renderZone.querySelector('[data-field="price16M"]')).to.equal(null);
Expand All @@ -367,47 +367,47 @@ describe('<DataGridPro /> - Column pinning', () => {
describe('pinColumn', () => {
it('should pin the given column', () => {
render(<TestCase />);
const renderZone = document.querySelector(
const renderZone = document.querySelector<HTMLDivElement>(
`.${gridClasses.virtualScrollerRenderZone}`,
) as HTMLDivElement;
)!;
expect(renderZone.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left);
const leftColumns = document.querySelector(
const leftColumns = document.querySelector<HTMLDivElement>(
`.${gridClasses['pinnedColumns--left']}`,
) as HTMLDivElement;
)!;
expect(leftColumns.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
expect(renderZone.querySelector('[data-field="currencyPair"]')).to.equal(null);
});

it('should change the side when called on a pinned column', () => {
render(<TestCase />);
const renderZone = document.querySelector(
const renderZone = document.querySelector<HTMLDivElement>(
`.${gridClasses.virtualScrollerRenderZone}`,
) as HTMLDivElement;
)!;
expect(renderZone.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
expect(renderZone.querySelector('[data-field="currencyPair"]')).not.to.equal(null);

apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left);
const leftColumns = document.querySelector(
const leftColumns = document.querySelector<HTMLDivElement>(
`.${gridClasses['pinnedColumns--left']}`,
) as HTMLDivElement;
)!;
expect(leftColumns.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
expect(renderZone.querySelector('[data-field="currencyPair"]')).to.equal(null);

apiRef.current.pinColumn('currencyPair', GridPinnedPosition.right);
const rightColumns = document.querySelector(
const rightColumns = document.querySelector<HTMLDivElement>(
`.${gridClasses['pinnedColumns--right']}`,
) as HTMLDivElement;
)!;
expect(document.querySelector(`.${gridClasses['pinnedColumns--left']}`)).to.equal(null);
expect(rightColumns.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
});

it('should not change the columns when called on a pinned column with the same side ', () => {
render(<TestCase />);
apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left);
const leftColumns = document.querySelector(
const leftColumns = document.querySelector<HTMLDivElement>(
`.${gridClasses['pinnedColumns--left']}`,
) as HTMLDivElement;
)!;
expect(leftColumns.querySelector('[data-id="0"]')?.children).to.have.length(1);
apiRef.current.pinColumn('currencyPair', GridPinnedPosition.left);
expect(leftColumns.querySelector('[data-id="0"]')?.children).to.have.length(1);
Expand All @@ -421,9 +421,9 @@ describe('<DataGridPro /> - Column pinning', () => {
expect(document.querySelector(`.${gridClasses['pinnedColumns--left']}`)).not.to.equal(null);
apiRef.current.unpinColumn('currencyPair');
expect(document.querySelector(`.${gridClasses['pinnedColumns--left']}`)).to.equal(null);
const renderZone = document.querySelector(
const renderZone = document.querySelector<HTMLDivElement>(
`.${gridClasses.virtualScrollerRenderZone}`,
) as HTMLDivElement;
)!;
expect(renderZone.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
});
});
Expand Down
4 changes: 2 additions & 2 deletions packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,7 @@ describe('<DataGridPro /> - Detail panel', () => {
expect(handleSelectionModelChange.callCount).to.equal(0);
});

describe('props: onDetailPanelsExpandedRowIds', () => {
describe('prop: onDetailPanelsExpandedRowIds', () => {
it('shoull call when a row is expanded or closed', () => {
const handleDetailPanelsExpandedRowIdsChange = spy();
render(
Expand Down Expand Up @@ -326,7 +326,7 @@ describe('<DataGridPro /> - Detail panel', () => {
});
});

describe('props: detailPanelExpandedRowIds', () => {
describe('prop: detailPanelExpandedRowIds', () => {
it('should open the detail panel of the specified rows', () => {
render(
<TestCase
Expand Down
24 changes: 12 additions & 12 deletions packages/grid/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ describe('<DataGridPro /> - Filter', () => {
it('should apply the filterModel prop correctly', () => {
render(<TestCase filterModel={filterModel} />);

expect(getColumnValues()).to.deep.equal(['Adidas', 'Puma']);
expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Puma']);
});

it('should apply the filterModel prop correctly on GridApiRef setRows', () => {
Expand All @@ -93,14 +93,14 @@ describe('<DataGridPro /> - Filter', () => {
},
];
apiRef.current.setRows(newRows);
expect(getColumnValues()).to.deep.equal(['Asics']);
expect(getColumnValues(0)).to.deep.equal(['Asics']);
});

it('should apply the filterModel prop correctly on GridApiRef update row data', () => {
render(<TestCase filterModel={filterModel} />);
apiRef.current.updateRows([{ id: 1, brand: 'Fila' }]);
apiRef.current.updateRows([{ id: 0, brand: 'Patagonia' }]);
expect(getColumnValues()).to.deep.equal(['Patagonia', 'Fila', 'Puma']);
expect(getColumnValues(0)).to.deep.equal(['Patagonia', 'Fila', 'Puma']);
});

it('should allow apiRef to setFilterModel', () => {
Expand All @@ -114,7 +114,7 @@ describe('<DataGridPro /> - Filter', () => {
},
],
});
expect(getColumnValues()).to.deep.equal(['Adidas']);
expect(getColumnValues(0)).to.deep.equal(['Adidas']);
});

it('should allow multiple filter and default to AND', () => {
Expand All @@ -135,7 +135,7 @@ describe('<DataGridPro /> - Filter', () => {
],
};
render(<TestCase filterModel={newModel} />);
expect(getColumnValues()).to.deep.equal(['Puma']);
expect(getColumnValues(0)).to.deep.equal(['Puma']);
});

it('should allow multiple filter via apiRef', () => {
Expand All @@ -157,7 +157,7 @@ describe('<DataGridPro /> - Filter', () => {
],
};
apiRef.current.setFilterModel(newModel);
expect(getColumnValues()).to.deep.equal(['Adidas']);
expect(getColumnValues(0)).to.deep.equal(['Adidas']);
});

it('should allow multiple filter and changing the linkOperator', () => {
Expand All @@ -179,7 +179,7 @@ describe('<DataGridPro /> - Filter', () => {
linkOperator: GridLinkOperator.Or,
};
render(<TestCase filterModel={newModel} />);
expect(getColumnValues()).to.deep.equal(['Adidas', 'Puma']);
expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Puma']);
});

it('should trigger onFilterModelChange when the link operator changes but not change the state', () => {
Expand Down Expand Up @@ -210,7 +210,7 @@ describe('<DataGridPro /> - Filter', () => {
/>,
);
expect(onFilterModelChange.callCount).to.equal(0);
expect(getColumnValues()).to.deep.equal([]);
expect(getColumnValues(0)).to.deep.equal([]);

// The first combo is hidden and we include hidden elements to make the query faster
// https://github.com/testing-library/dom-testing-library/issues/820#issuecomment-726936225
Expand All @@ -219,7 +219,7 @@ describe('<DataGridPro /> - Filter', () => {
];
fireEvent.change(select, { target: { value: 'or' } });
expect(onFilterModelChange.callCount).to.equal(1);
expect(getColumnValues()).to.deep.equal([]);
expect(getColumnValues(0)).to.deep.equal([]);
});

it('should call onFilterModelChange when the value is emptied', () => {
Expand Down Expand Up @@ -276,9 +276,9 @@ describe('<DataGridPro /> - Filter', () => {
],
};
const { setProps } = render(<TestCase filterModel={newModel} />);
expect(getColumnValues()).to.deep.equal(['Adidas']);
expect(getColumnValues(0)).to.deep.equal(['Adidas']);
setProps({ filterModel: { items: [] } });
expect(getColumnValues()).to.deep.equal(['Nike', 'Adidas', 'Puma']);
expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']);
});

it('should show the latest visibleRows', () => {
Expand All @@ -296,7 +296,7 @@ describe('<DataGridPro /> - Filter', () => {
const input = screen.getByPlaceholderText('Filter value');
fireEvent.change(input, { target: { value: 'ad' } });
clock.tick(SUBMIT_FILTER_STROKE_TIME);
expect(getColumnValues()).to.deep.equal(['Adidas']);
expect(getColumnValues(0)).to.deep.equal(['Adidas']);

expect(apiRef.current.getVisibleRowModels().size).to.equal(1);
expect(apiRef.current.getVisibleRowModels().get(1)).to.deep.equal({ id: 1, brand: 'Adidas' });
Expand Down
12 changes: 6 additions & 6 deletions packages/grid/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,12 @@ describe('<DataGridPro /> - Pagination', () => {

render(<GridTest />);

expect(getColumnValues()).to.deep.equal(['0']);
expect(getColumnValues(0)).to.deep.equal(['0']);
act(() => {
apiRef.current.setPage(1);
});

expect(getColumnValues()).to.deep.equal(['1']);
expect(getColumnValues(0)).to.deep.equal(['1']);
});

it('should apply last page if trying to go to a non-existing page', () => {
Expand All @@ -61,12 +61,12 @@ describe('<DataGridPro /> - Pagination', () => {

render(<GridTest />);

expect(getColumnValues()).to.deep.equal(['0']);
expect(getColumnValues(0)).to.deep.equal(['0']);
act(() => {
apiRef.current.setPage(50);
});

expect(getColumnValues()).to.deep.equal(['19']);
expect(getColumnValues(0)).to.deep.equal(['19']);
});
});

Expand Down Expand Up @@ -96,12 +96,12 @@ describe('<DataGridPro /> - Pagination', () => {
render(<GridTest />);
clock.runToLast();

expect(getColumnValues()).to.deep.equal(['0', '1', '2', '3', '4']);
expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4']);
act(() => {
apiRef.current.setPageSize(2);
});

expect(getColumnValues()).to.deep.equal(['0', '1']);
expect(getColumnValues(0)).to.deep.equal(['0', '1']);
});
});
});
Loading

0 comments on commit 8fa0c1d

Please sign in to comment.