Skip to content

[code-infra] Remove deprecated data-mui-test in favour of data-testid #14882

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JCQuintas merged 7 commits into from
Oct 9, 2024
Merged

[code-infra] Remove deprecated data-mui-test in favour of data-testid #14882

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
253ce16
Replace usage
JCQuintas Oct 8, 2024
ff2741c
Replace attribute
JCQuintas Oct 8, 2024
bd4df7a
fix unit test
JCQuintas Oct 8, 2024
bf9e303
fix e2e data-testid issue
JCQuintas Oct 8, 2024
52354a9
fix e2e regression
JCQuintas Oct 8, 2024
9a71015
remove unnecessary data-testid from docs
JCQuintas Oct 9, 2024
139d9a0
remove from docs example
JCQuintas Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,6 @@ const defaultAlias = {
packages: resolveAliasPath('./packages'),
};

const productionPlugins = [
['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
];

/** @type {babel.ConfigFunction} */
module.exports = function getBabelConfig(api) {
const useESModules = api.env(['modern', 'stable', 'rollup']);
Expand Down Expand Up @@ -129,7 +125,9 @@ module.exports = function getBabelConfig(api) {
}

if (process.env.NODE_ENV === 'production') {
plugins.push(...productionPlugins);
if (!process.env.E2E_BUILD) {
plugins.push(['babel-plugin-react-remove-properties', { properties: ['data-testid'] }]);

@Janpot Janpot Oct 9, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What causes this to suddenly be necessary? If possible, would be nice to keep parity between babel configs across repos. With the hope of some day just embedding it in our build tooling.

@JCQuintas JCQuintas Oct 9, 2024

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

e2e tests build the source-code using this configuration and they rely on the data-testid

If this plugin is enabled they simply don't work.

@JCQuintas JCQuintas Oct 9, 2024

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For more context, previously it wasn't an issue because in unit tests we were using data-mui-test but e2e were using data-testid, so the data-mui-test could be removed regardless of build.

But since now both use data-testid, the issue appears

@Janpot Janpot Oct 9, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

interestingly, this rename in core was done without altering the babel config mui/material-ui#23498

@JCQuintas JCQuintas Oct 9, 2024

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed material doesn't remove the data-testid from the build, that is why they don't have this problem.

But most of the times they add data-testid in the test themselves, not the source code.

}

if (process.env.BABEL_ENV) {
plugins.push([
Expand Down
2 changes: 0 additions & 2 deletions docs/data/date-pickers/custom-components/ActionBarComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ function CustomActionBar(props) {
case 'clear':
return (
<MenuItem
data-mui-test="clear-action-button"
onClick={() => {
onClear();
setAnchorEl(null);
Expand Down Expand Up @@ -67,7 +66,6 @@ function CustomActionBar(props) {
case 'today':
return (
<MenuItem
data-mui-test="today-action-button"
onClick={() => {
setAnchorEl(null);
onSetToday();
Expand Down
2 changes: 0 additions & 2 deletions docs/data/date-pickers/custom-components/ActionBarComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ function CustomActionBar(props: PickersActionBarProps) {
case 'clear':
return (
<MenuItem
data-mui-test="clear-action-button"
onClick={() => {
onClear();
setAnchorEl(null);
Expand Down Expand Up @@ -64,7 +63,6 @@ function CustomActionBar(props: PickersActionBarProps) {
case 'today':
return (
<MenuItem
data-mui-test="today-action-button"
onClick={() => {
setAnchorEl(null);
onSetToday();
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/x/api/date-pickers/date-calendar.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
},
"renderLoading": {
"type": { "name": "func" },
"default": "() => <span data-mui-test=\"loading-progress\">...</span>",
"default": "() => <span>...</span>",
"signature": {
"type": "function() => React.ReactNode",
"describedArgs": [],
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/x/api/date-pickers/date-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@
},
"renderLoading": {
"type": { "name": "func" },
"default": "() => <span data-mui-test=\"loading-progress\">...</span>",
"default": "() => <span>...</span>",
"signature": {
"type": "function() => React.ReactNode",
"describedArgs": [],
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/x/api/date-pickers/date-time-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@
},
"renderLoading": {
"type": { "name": "func" },
"default": "() => <span data-mui-test=\"loading-progress\">...</span>",
"default": "() => <span>...</span>",
"signature": {
"type": "function() => React.ReactNode",
"describedArgs": [],
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/x/api/date-pickers/desktop-date-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@
},
"renderLoading": {
"type": { "name": "func" },
"default": "() => <span data-mui-test=\"loading-progress\">...</span>",
"default": "() => <span>...</span>",
"signature": {
"type": "function() => React.ReactNode",
"describedArgs": [],
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/x/api/date-pickers/desktop-date-time-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
},
"renderLoading": {
"type": { "name": "func" },
"default": "() => <span data-mui-test=\"loading-progress\">...</span>",
"default": "() => <span>...</span>",
"signature": {
"type": "function() => React.ReactNode",
"describedArgs": [],
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/x/api/date-pickers/mobile-date-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@
},
"renderLoading": {
"type": { "name": "func" },
"default": "() => <span data-mui-test=\"loading-progress\">...</span>",
"default": "() => <span>...</span>",
"signature": {
"type": "function() => React.ReactNode",
"describedArgs": [],
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/x/api/date-pickers/mobile-date-time-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
},
"renderLoading": {
"type": { "name": "func" },
"default": "() => <span data-mui-test=\"loading-progress\">...</span>",
"default": "() => <span>...</span>",
"signature": {
"type": "function() => React.ReactNode",
"describedArgs": [],
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/x/api/date-pickers/static-date-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
},
"renderLoading": {
"type": { "name": "func" },
"default": "() => <span data-mui-test=\"loading-progress\">...</span>",
"default": "() => <span>...</span>",
"signature": {
"type": "function() => React.ReactNode",
"describedArgs": [],
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/x/api/date-pickers/static-date-time-picker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
},
"renderLoading": {
"type": { "name": "func" },
"default": "() => <span data-mui-test=\"loading-progress\">...</span>",
"default": "() => <span>...</span>",
"signature": {
"type": "function() => React.ReactNode",
"describedArgs": [],
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,14 @@
"test:karma:parallel": "cross-env NODE_ENV=test TZ=UTC PARALLEL=true karma start test/karma.conf.js",
"test:unit": "cross-env NODE_ENV=test TZ=UTC mocha -n expose_gc 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
"test:e2e": "cross-env NODE_ENV=production pnpm test:e2e:build && concurrently --success first --kill-others \"pnpm test:e2e:run\" \"pnpm test:e2e:server\"",
"test:e2e:build": "webpack --config test/e2e/webpack.config.js",
"test:e2e:build": "cross-env E2E_BUILD=true webpack --config test/e2e/webpack.config.js",
"test:e2e:dev": "concurrently \"pnpm test:e2e:build --watch\" \"pnpm test:e2e:server\"",
"test:e2e:run": "mocha --config test/e2e/.mocharc.js 'test/e2e/**/*.test.{js,ts,tsx}'",
"test:e2e:server": "serve test/e2e -p 5001",
"test:e2e-website": "npx playwright test test/e2e-website --config test/e2e-website/playwright.config.ts",
"test:e2e-website:dev": "PLAYWRIGHT_TEST_BASE_URL=http://localhost:3001 npx playwright test test/e2e-website --config test/e2e-website/playwright.config.ts",
"test:regressions": "cross-env NODE_ENV=production pnpm test:regressions:build && concurrently --success first --kill-others \"pnpm test:regressions:run\" \"pnpm test:regressions:server\"",
"test:regressions:build": "webpack --config test/regressions/webpack.config.js",
"test:regressions:build": "cross-env E2E_BUILD=true webpack --config test/regressions/webpack.config.js",
"test:regressions:dev": "concurrently \"pnpm test:regressions:build --watch\" \"pnpm test:regressions:server\"",
"test:regressions:run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.js'",
"test:regressions:server": "serve test/regressions -p 5001",
Expand Down
6 changes: 3 additions & 3 deletions packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ describe('<DateRangeCalendar />', () => {
fireEvent.click(getPickerDay('30', 'January 2019'));
fireEvent.click(getPickerDay('19', 'January 2019'));

expect(screen.queryByMuiTest('DateRangeHighlight')).to.equal(null);
expect(screen.queryByTestId('DateRangeHighlight')).to.equal(null);

fireEvent.click(getPickerDay('30', 'January 2019'));

Expand All @@ -102,7 +102,7 @@ describe('<DateRangeCalendar />', () => {
/>,
);

expect(screen.getAllByMuiTest('DateRangeHighlight')).to.have.length(31);
expect(screen.getAllByTestId('DateRangeHighlight')).to.have.length(31);
});

it('prop: disableDragEditing - should not allow dragging range', () => {
Expand Down Expand Up @@ -535,7 +535,7 @@ describe('<DateRangeCalendar />', () => {
it('prop: calendars - should render the provided amount of calendars', () => {
render(<DateRangeCalendar calendars={3} />);

expect(screen.getAllByMuiTest('pickers-calendar')).to.have.length(3);
expect(screen.getAllByTestId('pickers-calendar')).to.have.length(3);
});

describe('Performance', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ function useDateRangeCalendarDefaultizedProps<TDate extends PickerValidDate>(
return {
...themeProps,
renderLoading:
themeProps.renderLoading ?? (() => <span data-mui-test="loading-progress">...</span>),
themeProps.renderLoading ?? (() => <span data-testid="loading-progress">...</span>),
reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
loading: props.loading ?? false,
disablePast: props.disablePast ?? false,
Expand Down
6 changes: 3 additions & 3 deletions packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -346,24 +346,24 @@ const DateRangePickerDayRaw = React.forwardRef(function DateRangePickerDay<

return (
<DateRangePickerDayRoot
data-mui-test={shouldRenderHighlight ? 'DateRangeHighlight' : undefined}
data-testid={shouldRenderHighlight ? 'DateRangeHighlight' : undefined}
className={clsx(classes.root, className)}
ownerState={ownerState}
sx={sx}
>
<DateRangePickerDayRangeIntervalPreview
data-mui-test={shouldRenderPreview ? 'DateRangePreview' : undefined}
data-testid={shouldRenderPreview ? 'DateRangePreview' : undefined}
className={classes.rangeIntervalPreview}
ownerState={ownerState}
>
<DateRangePickerDayDay<TDate>
data-testid="DateRangePickerDay"
{...other}
ref={ref}
disableMargin
day={day}
selected={isVisuallySelected}
outsideCurrentMonth={outsideCurrentMonth}
data-mui-test="DateRangePickerDay"
className={classes.day}
ownerState={ownerState}
draggable={draggable}
Expand Down
2 changes: 1 addition & 1 deletion packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ describe('<StaticDateRangePicker />', () => {

expect(
screen
.getAllByMuiTest('DateRangePickerDay')
.getAllByTestId('DateRangePickerDay')
.filter((day) => day.getAttribute('disabled') !== undefined),
).to.have.length(31);
});
Expand Down
4 changes: 2 additions & 2 deletions packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ function useDateCalendarDefaultizedProps<TDate extends PickerValidDate>(
views: themeProps.views ?? ['year', 'day'],
reduceAnimations: themeProps.reduceAnimations ?? defaultReduceAnimations,
renderLoading:
themeProps.renderLoading ?? (() => <span data-mui-test="loading-progress">...</span>),
themeProps.renderLoading ?? (() => <span data-testid="loading-progress">...</span>),
minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate),
};
Expand Down Expand Up @@ -546,7 +546,7 @@ DateCalendar.propTypes = {
/**
* Component displaying when passed `loading` true.
* @returns {React.ReactNode} The node to render when loading.
* @default () => <span data-mui-test="loading-progress">...</span>
* @default () => <span>...</span>
*/
renderLoading: PropTypes.func,
/**
Expand Down
2 changes: 1 addition & 1 deletion packages/x-date-pickers/src/DateCalendar/DateCalendar.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export interface ExportedDateCalendarProps<TDate extends PickerValidDate>
/**
* Component displaying when passed `loading` true.
* @returns {React.ReactNode} The node to render when loading.
* @default () => <span data-mui-test="loading-progress">...</span>
* @default () => <span>...</span>
*/
renderLoading?: () => React.ReactNode;
/**
Expand Down
4 changes: 2 additions & 2 deletions packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -351,7 +351,7 @@ export function DayCalendar<TDate extends PickerValidDate>(inProps: DayCalendarP
onMonthSwitchingAnimationEnd,
readOnly,
reduceAnimations,
renderLoading = () => <span data-mui-test="loading-progress">...</span>,
renderLoading = () => <span data-testid="loading-progress">...</span>,
slideDirection,
TransitionProps,
disablePast,
Expand Down Expand Up @@ -596,7 +596,7 @@ export function DayCalendar<TDate extends PickerValidDate>(inProps: DayCalendarP
nodeRef={slideNodeRef}
>
<PickersCalendarWeekContainer
data-mui-test="pickers-calendar"
data-testid="pickers-calendar"
ref={slideNodeRef}
role="rowgroup"
className={classes.monthContainer}
Expand Down
8 changes: 4 additions & 4 deletions packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ describe('<DateCalendar />', () => {
render(<DateCalendar defaultValue={adapterToUse.date('2019-01-01')} />);

expect(screen.getByText('January 2019')).toBeVisible();
expect(screen.getAllByMuiTest('day')).to.have.length(31);
expect(screen.getAllByTestId('day')).to.have.length(31);
// It should follow https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/
expect(
document.querySelector(
Expand Down Expand Up @@ -368,7 +368,7 @@ describe('<DateCalendar />', () => {
await user.click(april);

expect(onChange.callCount).to.equal(0);
expect(screen.getByMuiTest('calendar-month-and-year-text')).to.have.text('April 2019');
expect(screen.getByTestId('calendar-month-and-year-text')).to.have.text('April 2019');
});

it('should use `referenceDate` when no value defined', async () => {
Expand Down Expand Up @@ -435,7 +435,7 @@ describe('<DateCalendar />', () => {
it('renders year selection standalone', () => {
render(<DateCalendar defaultValue={adapterToUse.date('2019-01-01')} openTo="year" />);

expect(screen.getAllByMuiTest('year')).to.have.length(200);
expect(screen.getAllByTestId('year')).to.have.length(200);
});

it('should select the closest enabled date in the month if the current date is disabled', async () => {
Expand Down Expand Up @@ -517,7 +517,7 @@ describe('<DateCalendar />', () => {
await user.click(year2022);

expect(onChange.callCount).to.equal(0);
expect(screen.getByMuiTest('calendar-month-and-year-text')).to.have.text('January 2022');
expect(screen.getByTestId('calendar-month-and-year-text')).to.have.text('January 2022');
});

it('should scroll to show the selected year', function test() {
Expand Down
10 changes: 5 additions & 5 deletions packages/x-date-pickers/src/DateCalendar/tests/validation.DateCalendar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,23 +35,23 @@ describe('<DateCalendar /> - Validation', () => {
);

// No date should be disabled in the month before the disabled month
screen.getAllByMuiTest('day').forEach((day) => {
screen.getAllByTestId('day').forEach((day) => {
expect(day).not.to.have.attribute('disabled');
});

fireEvent.click(screen.getByTitle('Next month'));
clock.runToLast();

// All dates should be disabled in disabled month
screen.getAllByMuiTest('day').forEach((day) => {
screen.getAllByTestId('day').forEach((day) => {
expect(day).to.have.attribute('disabled');
});

fireEvent.click(screen.getByTitle('Next month'));
clock.runToLast();

// No date should be disabled in the month after the disabled month
screen.getAllByMuiTest('day').forEach((day) => {
screen.getAllByTestId('day').forEach((day) => {
expect(day).not.to.have.attribute('disabled');
});
});
Expand All @@ -70,15 +70,15 @@ describe('<DateCalendar /> - Validation', () => {
);

// No date should be disabled in the month before the disabled year
screen.getAllByMuiTest('day').forEach((day) => {
screen.getAllByTestId('day').forEach((day) => {
expect(day).not.to.have.attribute('disabled');
});

fireEvent.click(screen.getByTitle('Next month'));
clock.runToLast();

// All dates should be disabled in disabled year
screen.getAllByMuiTest('day').forEach((day) => {
screen.getAllByTestId('day').forEach((day) => {
expect(day).to.have.attribute('disabled');
});
});
Expand Down
2 changes: 1 addition & 1 deletion packages/x-date-pickers/src/DatePicker/DatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,7 @@ DatePicker.propTypes = {
/**
* Component displaying when passed `loading` true.
* @returns {React.ReactNode} The node to render when loading.
* @default () => <span data-mui-test="loading-progress">...</span>
* @default () => <span>...</span>
*/
renderLoading: PropTypes.func,
/**
Expand Down
2 changes: 1 addition & 1 deletion packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export const DatePickerToolbar = React.forwardRef(function DatePickerToolbar<
>
<DatePickerToolbarTitle
variant="h4"
data-mui-test="datepicker-toolbar-date"
data-testid="datepicker-toolbar-date"
align={isLandscape ? 'left' : 'center'}
ownerState={ownerState}
className={classes.title}
Expand Down
2 changes: 1 addition & 1 deletion packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,7 @@ DateTimePicker.propTypes = {
/**
* Component displaying when passed `loading` true.
* @returns {React.ReactNode} The node to render when loading.
* @default () => <span data-mui-test="loading-progress">...</span>
* @default () => <span>...</span>
*/
renderLoading: PropTypes.func,
/**
Expand Down
Loading
Loading