Skip to content

Commit

Permalink
Remove Material UI dependency from Base UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaldudak
michaldudak committed Dec 19, 2023
1 parent 2808693 commit 24fb280
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 66 deletions.
1 change: 0 additions & 1 deletion packages/mui-base/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@
"@mui-internal/babel-macros": "workspace:^",
"@mui-internal/test-utils": "workspace:^",
"@mui/base": "workspace:*",
"@mui/material": "workspace:^",
"@testing-library/react": "^14.1.2",
"@testing-library/user-event": "^14.5.1",
"@types/chai": "^4.3.11",
Expand Down
122 changes: 60 additions & 62 deletions packages/mui-base/src/TablePagination/TablePagination.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ import {
createRenderer,
createMount,
} from '@mui-internal/test-utils';
import TableFooter from '@mui/material/TableFooter';
import TableRow from '@mui/material/TableRow';
import {
TablePagination,
tablePaginationClasses as classes,
Expand Down Expand Up @@ -86,8 +84,8 @@ describe('<TablePagination />', () => {

const { container } = render(
<table>
<TableFooter>
<TableRow>
<tfoot>
<tr>
<TablePagination
count={42}
page={1}
Expand All @@ -96,8 +94,8 @@ describe('<TablePagination />', () => {
rowsPerPage={10}
labelDisplayedRows={labelDisplayedRows}
/>
</TableRow>
</TableFooter>
</tr>
</tfoot>
</table>,
);
expect(labelDisplayedRowsCalled).to.equal(true);
Expand All @@ -109,8 +107,8 @@ describe('<TablePagination />', () => {
it('labels the select for the current page', () => {
const { container } = render(
<table>
<TableFooter>
<TableRow>
<tfoot>
<tr>
<TablePagination
count={1}
page={0}
Expand All @@ -119,8 +117,8 @@ describe('<TablePagination />', () => {
rowsPerPage={10}
labelRowsPerPage="lines per page:"
/>
</TableRow>
</TableFooter>
</tr>
</tfoot>
</table>,
);

Expand All @@ -131,8 +129,8 @@ describe('<TablePagination />', () => {
it('accepts React nodes', () => {
const { container } = render(
<table>
<TableFooter>
<TableRow>
<tfoot>
<tr>
<TablePagination
count={1}
page={0}
Expand All @@ -145,8 +143,8 @@ describe('<TablePagination />', () => {
</React.Fragment>
}
/>
</TableRow>
</TableFooter>
</tr>
</tfoot>
</table>,
);

Expand All @@ -160,17 +158,17 @@ describe('<TablePagination />', () => {
it('should disable the back button on the first page', () => {
const { getByRole } = render(
<table>
<TableFooter>
<TableRow>
<tfoot>
<tr>
<TablePagination
count={11}
page={0}
onPageChange={noop}
onRowsPerPageChange={noop}
rowsPerPage={10}
/>
</TableRow>
</TableFooter>
</tr>
</tfoot>
</table>,
);

Expand All @@ -183,17 +181,17 @@ describe('<TablePagination />', () => {
it('should disable the next button on the last page', () => {
const { getByRole } = render(
<table>
<TableFooter>
<TableRow>
<tfoot>
<tr>
<TablePagination
count={11}
page={1}
onPageChange={noop}
onRowsPerPageChange={noop}
rowsPerPage={10}
/>
</TableRow>
</TableFooter>
</tr>
</tfoot>
</table>,
);

Expand All @@ -209,8 +207,8 @@ describe('<TablePagination />', () => {
let page = 1;
const { getByRole } = render(
<table>
<TableFooter>
<TableRow>
<tfoot>
<tr>
<TablePagination
count={30}
page={page}
Expand All @@ -220,8 +218,8 @@ describe('<TablePagination />', () => {
onRowsPerPageChange={noop}
rowsPerPage={10}
/>
</TableRow>
</TableFooter>
</tr>
</tfoot>
</table>,
);

Expand All @@ -234,8 +232,8 @@ describe('<TablePagination />', () => {
let page = 1;
const { getByRole } = render(
<table>
<TableFooter>
<TableRow>
<tfoot>
<tr>
<TablePagination
count={30}
page={page}
Expand All @@ -245,8 +243,8 @@ describe('<TablePagination />', () => {
onRowsPerPageChange={noop}
rowsPerPage={10}
/>
</TableRow>
</TableFooter>
</tr>
</tfoot>
</table>,
);

Expand All @@ -260,17 +258,17 @@ describe('<TablePagination />', () => {
it('should display 0 as start number if the table is empty ', () => {
const { container } = render(
<table>
<TableFooter>
<TableRow>
<tfoot>
<tr>
<TablePagination
count={0}
page={0}
rowsPerPage={10}
onPageChange={noop}
onRowsPerPageChange={noop}
/>
</TableRow>
</TableFooter>
</tr>
</tfoot>
</table>,
);
expect(container.querySelectorAll('p')[1]).to.have.text('0–0 of 0');
Expand All @@ -279,8 +277,8 @@ describe('<TablePagination />', () => {
it('should hide the rows per page selector if there are less than two options', () => {
const { container, queryByRole } = render(
<table>
<TableFooter>
<TableRow>
<tfoot>
<tr>
<TablePagination
page={0}
rowsPerPage={5}
Expand All @@ -289,8 +287,8 @@ describe('<TablePagination />', () => {
onRowsPerPageChange={noop}
count={10}
/>
</TableRow>
</TableFooter>
</tr>
</tfoot>
</table>,
);

Expand All @@ -305,8 +303,8 @@ describe('<TablePagination />', () => {
const [page, setPage] = React.useState(0);
return (
<table>
<TableFooter>
<TableRow>
<tfoot>
<tr>
<TablePagination
page={page}
rowsPerPage={10}
Expand All @@ -320,8 +318,8 @@ describe('<TablePagination />', () => {
} as any,
}}
/>
</TableRow>
</TableFooter>
</tr>
</tfoot>
</table>
);
}
Expand All @@ -339,8 +337,8 @@ describe('<TablePagination />', () => {
const handleChangePage = spy();
const { getByRole } = render(
<table>
<TableFooter>
<TableRow>
<tfoot>
<tr>
<TablePagination
page={1}
rowsPerPage={10}
Expand All @@ -352,8 +350,8 @@ describe('<TablePagination />', () => {
} as any,
}}
/>
</TableRow>
</TableFooter>
</tr>
</tfoot>
</table>,
);

Expand All @@ -367,8 +365,8 @@ describe('<TablePagination />', () => {
const handleChangePage = spy();
const { getByRole } = render(
<table>
<TableFooter>
<TableRow>
<tfoot>
<tr>
<TablePagination
page={0}
rowsPerPage={10}
Expand All @@ -380,8 +378,8 @@ describe('<TablePagination />', () => {
} as any,
}}
/>
</TableRow>
</TableFooter>
</tr>
</tfoot>
</table>,
);

Expand Down Expand Up @@ -420,8 +418,8 @@ describe('<TablePagination />', () => {
it('does allow manual label ids', () => {
const { container } = render(
<table>
<TableFooter>
<TableRow>
<tfoot>
<tr>
<TablePagination
count={1}
page={0}
Expand All @@ -431,8 +429,8 @@ describe('<TablePagination />', () => {
selectId="foo"
labelId="bar"
/>
</TableRow>
</TableFooter>
</tr>
</tfoot>
</table>,
);

Expand All @@ -446,17 +444,17 @@ describe('<TablePagination />', () => {
it('should display max number of rows text when prop is -1', () => {
const { container } = render(
<table>
<TableFooter>
<TableRow>
<tfoot>
<tr>
<TablePagination
rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
count={25}
page={0}
rowsPerPage={-1}
onPageChange={noop}
/>
</TableRow>
</TableFooter>
</tr>
</tfoot>
</table>,
);

Expand All @@ -469,8 +467,8 @@ describe('<TablePagination />', () => {
it('should not raise a warning due to duplicated keys', () => {
render(
<table>
<TableFooter>
<TableRow>
<tfoot>
<tr>
<TablePagination
rowsPerPageOptions={[5, 10, { label: 'All', value: 10 }]}
count={10}
Expand All @@ -481,8 +479,8 @@ describe('<TablePagination />', () => {
select: { 'aria-label': 'rows per page' },
}}
/>
</TableRow>
</TableFooter>
</tr>
</tfoot>
</table>,
);
});
Expand Down
3 changes: 0 additions & 3 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 24fb280

Please sign in to comment.