Skip to content

Commit

Permalink
address comments and fix tests
Browse files Browse the repository at this point in the history
  • Loading branch information
Lingzhi Xu committed Sep 20, 2023
1 parent f47dcd2 commit 5859dc3
Show file tree
Hide file tree
Showing 5 changed files with 30 additions and 26 deletions.
22 changes: 12 additions & 10 deletions packages/mui-material-next/src/TablePagination/TablePagination.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,8 @@ describe('<TablePagination />', () => {
);

// will be `getByRole('combobox')` in aria 1.2
const [combobox] = getAllByRole('button');
expect(combobox).toHaveAccessibleName('lines per page: 10');
const [combobox] = getAllByRole('combobox');
expect(combobox).toHaveAccessibleName('lines per page:');
});

it('accepts React nodes', () => {
Expand All @@ -128,14 +128,14 @@ describe('<TablePagination />', () => {
);

// will be `getByRole('combobox')` in aria 1.2
const [combobox] = getAllByRole('button');
expect(combobox).toHaveAccessibleName('lines per page: 10');
const [combobox] = getAllByRole('combobox');
expect(combobox).toHaveAccessibleName('lines per page:');
});
});

describe('prop: page', () => {
it('should disable the back button on the first page', () => {
const { getAllByRole } = render(
const { getByRole } = render(
<table>
<TableFooter>
<TableRow>
Expand All @@ -151,13 +151,14 @@ describe('<TablePagination />', () => {
</table>,
);

const [, backButton, nextButton] = getAllByRole('button');
const backButton = getByRole('button', { name: 'Go to previous page' });
const nextButton = getByRole('button', { name: 'Go to next page' });
expect(backButton).to.have.property('disabled', true);
expect(nextButton).to.have.property('disabled', false);
});

it('should disable the next button on the last page', () => {
const { getAllByRole } = render(
const { getByRole } = render(
<table>
<TableFooter>
<TableRow>
Expand All @@ -173,7 +174,8 @@ describe('<TablePagination />', () => {
</table>,
);

const [, backButton, nextButton] = getAllByRole('button');
const backButton = getByRole('button', { name: 'Go to previous page' });
const nextButton = getByRole('button', { name: 'Go to next page' });
expect(backButton).to.have.property('disabled', false);
expect(nextButton).to.have.property('disabled', true);
});
Expand Down Expand Up @@ -398,8 +400,8 @@ describe('<TablePagination />', () => {
);

// will be `getByRole('combobox')` in aria 1.2
const [combobox] = getAllByRole('button');
expect(combobox).toHaveAccessibleName('Rows per page: 10');
const [combobox] = getAllByRole('combobox');
expect(combobox).toHaveAccessibleName('Rows per page:');
});
});

Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/Select/Select.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -482,7 +482,7 @@ describe('<Select />', () => {
const { getByRole } = render(<Select open value="" />);
const listboxId = getByRole('listbox').id;

expect(getByRole('combobox')).to.have.attribute('aria-controls', listboxId);
expect(getByRole('combobox', { hidden: true })).to.have.attribute('aria-controls', listboxId);
});

specify('the listbox is focusable', () => {
Expand Down
4 changes: 2 additions & 2 deletions packages/mui-material/src/Select/SelectInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
import clsx from 'clsx';
import MuiError from '@mui/utils/macros/MuiError.macro';
import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
import { refType } from '@mui/utils';
import { refType, unstable_useId as useId } from '@mui/utils';
import ownerDocument from '../utils/ownerDocument';
import capitalize from '../utils/capitalize';
import Menu from '../Menu/Menu';
Expand Down Expand Up @@ -487,7 +487,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
...MenuProps.slotProps?.paper,
};

const listboxId = React.useId();
const listboxId = useId();

return (
<React.Fragment>
Expand Down
24 changes: 13 additions & 11 deletions packages/mui-material/src/TablePagination/TablePagination.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,8 @@ describe('<TablePagination />', () => {
);

// will be `getByRole('combobox')` in aria 1.2
const [combobox] = getAllByRole('button');
expect(combobox).toHaveAccessibleName('lines per page: 10');
const [combobox] = getAllByRole('combobox');
expect(combobox).toHaveAccessibleName('lines per page:');
});

it('accepts React nodes', () => {
Expand All @@ -129,14 +129,14 @@ describe('<TablePagination />', () => {
);

// will be `getByRole('combobox')` in aria 1.2
const [combobox] = getAllByRole('button');
expect(combobox).toHaveAccessibleName('lines per page: 10');
const [combobox] = getAllByRole('combobox');
expect(combobox).toHaveAccessibleName('lines per page:');
});
});

describe('prop: page', () => {
it('should disable the back button on the first page', () => {
const { getAllByRole } = render(
const { getByRole } = render(
<table>
<TableFooter>
<TableRow>
Expand All @@ -152,13 +152,14 @@ describe('<TablePagination />', () => {
</table>,
);

const [, backButton, nextButton] = getAllByRole('button');
const backButton = getByRole('button', { name: 'Go to previous page' });
const nextButton = getByRole('button', { name: 'Go to next page' });
expect(backButton).to.have.property('disabled', true);
expect(nextButton).to.have.property('disabled', false);
});

it('should disable the next button on the last page', () => {
const { getAllByRole } = render(
const { getByRole } = render(
<table>
<TableFooter>
<TableRow>
Expand All @@ -174,7 +175,8 @@ describe('<TablePagination />', () => {
</table>,
);

const [, backButton, nextButton] = getAllByRole('button');
const backButton = getByRole('button', { name: 'Go to previous page' });
const nextButton = getByRole('button', { name: 'Go to next page' });
expect(backButton).to.have.property('disabled', false);
expect(nextButton).to.have.property('disabled', true);
});
Expand Down Expand Up @@ -399,8 +401,8 @@ describe('<TablePagination />', () => {
);

// will be `getByRole('combobox')` in aria 1.2
const [combobox] = getAllByRole('button');
expect(combobox).toHaveAccessibleName('Rows per page: 10');
const [combobox] = getAllByRole('combobox');
expect(combobox).toHaveAccessibleName('Rows per page:');
});

['standard', 'outlined', 'filled'].forEach((variant) => {
Expand All @@ -422,7 +424,7 @@ describe('<TablePagination />', () => {
</table>,
);

const [combobox] = getAllByRole('button');
const [combobox] = getAllByRole('combobox');
const comboboxContainer = combobox.parentElement;

if (variant === 'standard') {
Expand Down
4 changes: 2 additions & 2 deletions packages/mui-material/src/TextField/TextField.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ describe('<TextField />', () => {
</TextField>,
);

expect(getByRole('button')).toHaveAccessibleName('Release: Stable');
expect(getByRole('combobox')).toHaveAccessibleName('Release:');
});

it('creates an input[hidden] that has no accessible properties', () => {
Expand All @@ -224,7 +224,7 @@ describe('<TextField />', () => {
</TextField>,
);

expect(getByRole('button')).toHaveAccessibleDescription('Foo bar');
expect(getByRole('combobox')).toHaveAccessibleDescription('Foo bar');
});
});

Expand Down

0 comments on commit 5859dc3

Please sign in to comment.