From ddafaa0cb23d3ee86c5084996e5051dcee2084e2 Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Fri, 23 Apr 2021 14:49:23 -0300 Subject: [PATCH] [Button] Rename `pending` prop to `loading` in LoadingButton (#25874) Co-authored-by: Guillermo Pincay --- docs/pages/api-docs/loading-button.json | 22 +++--- .../components/buttons/LoadingButtons.js | 8 +- .../components/buttons/LoadingButtons.tsx | 8 +- .../buttons/LoadingButtonsTransition.js | 26 +++---- .../buttons/LoadingButtonsTransition.tsx | 26 +++---- .../pages/components/buttons/buttons-de.md | 2 +- .../pages/components/buttons/buttons-es.md | 2 +- .../pages/components/buttons/buttons-fr.md | 2 +- .../pages/components/buttons/buttons-ja.md | 2 +- .../pages/components/buttons/buttons-pt.md | 2 +- .../pages/components/buttons/buttons-ru.md | 2 +- docs/src/pages/components/buttons/buttons.md | 2 +- .../pages/guides/migration-v4/migration-v4.md | 22 ++++++ .../loading-button/loading-button.json | 44 +++++------ .../src/LoadingButton/LoadingButton.d.ts | 44 +++++------ .../src/LoadingButton/LoadingButton.js | 78 +++++++++---------- .../src/LoadingButton/LoadingButton.test.js | 18 ++--- 17 files changed, 166 insertions(+), 144 deletions(-) diff --git a/docs/pages/api-docs/loading-button.json b/docs/pages/api-docs/loading-button.json index 2f40fbf015dd9f..4859f672368d9e 100644 --- a/docs/pages/api-docs/loading-button.json +++ b/docs/pages/api-docs/loading-button.json @@ -3,12 +3,12 @@ "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, "disabled": { "type": { "name": "bool" } }, - "pending": { "type": { "name": "bool" } }, - "pendingIndicator": { + "loading": { "type": { "name": "bool" } }, + "loadingIndicator": { "type": { "name": "node" }, "default": "" }, - "pendingPosition": { + "loadingPosition": { "type": { "name": "custom", "description": "'start'
| 'end'
| 'center'" @@ -20,14 +20,14 @@ "styles": { "classes": [ "root", - "pending", - "pendingIndicator", - "pendingIndicatorCenter", - "pendingIndicatorStart", - "pendingIndicatorEnd", - "endIconPendingEnd", - "startIconPendingStart", - "labelPendingCenter" + "loading", + "loadingIndicator", + "loadingIndicatorCenter", + "loadingIndicatorStart", + "loadingIndicatorEnd", + "endIconLoadingEnd", + "startIconLoadingStart", + "labelLoadingCenter" ], "globalClasses": {}, "name": "MuiLoadingButton" diff --git a/docs/src/pages/components/buttons/LoadingButtons.js b/docs/src/pages/components/buttons/LoadingButtons.js index a92d24aecc565c..a32fe565bc1eed 100644 --- a/docs/src/pages/components/buttons/LoadingButtons.js +++ b/docs/src/pages/components/buttons/LoadingButtons.js @@ -10,15 +10,15 @@ export default function LoadingButtons() { '& > :not(style)': { m: 1 }, }} > - + Submit - + Fetch data } variant="outlined" > diff --git a/docs/src/pages/components/buttons/LoadingButtons.tsx b/docs/src/pages/components/buttons/LoadingButtons.tsx index a92d24aecc565c..a32fe565bc1eed 100644 --- a/docs/src/pages/components/buttons/LoadingButtons.tsx +++ b/docs/src/pages/components/buttons/LoadingButtons.tsx @@ -10,15 +10,15 @@ export default function LoadingButtons() { '& > :not(style)': { m: 1 }, }} > - + Submit - + Fetch data } variant="outlined" > diff --git a/docs/src/pages/components/buttons/LoadingButtonsTransition.js b/docs/src/pages/components/buttons/LoadingButtonsTransition.js index f39906f7279a6d..5d04cab62362db 100644 --- a/docs/src/pages/components/buttons/LoadingButtonsTransition.js +++ b/docs/src/pages/components/buttons/LoadingButtonsTransition.js @@ -7,9 +7,9 @@ import SaveIcon from '@material-ui/icons/Save'; import SendIcon from '@material-ui/icons/Send'; export default function LoadingButtonsTransition() { - const [pending, setPending] = React.useState(false); + const [loading, setLoading] = React.useState(false); function handleClick() { - setPending(true); + setLoading(true); } return ( @@ -26,21 +26,21 @@ export default function LoadingButtonsTransition() { }} control={ setPending(!pending)} - name="pending" + checked={loading} + onChange={() => setLoading(!loading)} + name="loading" color="primary" /> } - label="Pending" + label="Loading" /> - + Submit Fetch data @@ -48,8 +48,8 @@ export default function LoadingButtonsTransition() { } - pending={pending} - pendingPosition="end" + loading={loading} + loadingPosition="end" variant="contained" > Send @@ -57,8 +57,8 @@ export default function LoadingButtonsTransition() { } variant="contained" > diff --git a/docs/src/pages/components/buttons/LoadingButtonsTransition.tsx b/docs/src/pages/components/buttons/LoadingButtonsTransition.tsx index f39906f7279a6d..5d04cab62362db 100644 --- a/docs/src/pages/components/buttons/LoadingButtonsTransition.tsx +++ b/docs/src/pages/components/buttons/LoadingButtonsTransition.tsx @@ -7,9 +7,9 @@ import SaveIcon from '@material-ui/icons/Save'; import SendIcon from '@material-ui/icons/Send'; export default function LoadingButtonsTransition() { - const [pending, setPending] = React.useState(false); + const [loading, setLoading] = React.useState(false); function handleClick() { - setPending(true); + setLoading(true); } return ( @@ -26,21 +26,21 @@ export default function LoadingButtonsTransition() { }} control={ setPending(!pending)} - name="pending" + checked={loading} + onChange={() => setLoading(!loading)} + name="loading" color="primary" /> } - label="Pending" + label="Loading" /> - + Submit Fetch data @@ -48,8 +48,8 @@ export default function LoadingButtonsTransition() { } - pending={pending} - pendingPosition="end" + loading={loading} + loadingPosition="end" variant="contained" > Send @@ -57,8 +57,8 @@ export default function LoadingButtonsTransition() { } variant="contained" > diff --git a/docs/src/pages/components/buttons/buttons-de.md b/docs/src/pages/components/buttons/buttons-de.md index 82dc7f9fd4d691..eef0ee9907d818 100644 --- a/docs/src/pages/components/buttons/buttons-de.md +++ b/docs/src/pages/components/buttons/buttons-de.md @@ -93,7 +93,7 @@ Hier einige Beispiele zum Anpassen der Komponente. Mehr dazu erfahren Sie auf de ## Komplexe Buttons -The loading buttons can show pending state and disable interactions. +The loading buttons can show loading state and disable interactions. {{"demo": "pages/components/buttons/LoadingButtons.js"}} diff --git a/docs/src/pages/components/buttons/buttons-es.md b/docs/src/pages/components/buttons/buttons-es.md index cab91cf78938ef..328f4ef64a37ae 100644 --- a/docs/src/pages/components/buttons/buttons-es.md +++ b/docs/src/pages/components/buttons/buttons-es.md @@ -93,7 +93,7 @@ Here are some examples of customizing the component. Puedes aprender más sobre ## Botones Complejos -The loading buttons can show pending state and disable interactions. +The loading buttons can show loading state and disable interactions. {{"demo": "pages/components/buttons/LoadingButtons.js"}} diff --git a/docs/src/pages/components/buttons/buttons-fr.md b/docs/src/pages/components/buttons/buttons-fr.md index ce2d7c6a66685b..a1dce0684ebbfc 100644 --- a/docs/src/pages/components/buttons/buttons-fr.md +++ b/docs/src/pages/components/buttons/buttons-fr.md @@ -93,7 +93,7 @@ Here are some examples of customizing the component. Vous pouvez en savoir plus ## Boutons complexes -The loading buttons can show pending state and disable interactions. +The loading buttons can show loading state and disable interactions. {{"demo": "pages/components/buttons/LoadingButtons.js"}} diff --git a/docs/src/pages/components/buttons/buttons-ja.md b/docs/src/pages/components/buttons/buttons-ja.md index 2f0026db227db9..62d3b189669b21 100644 --- a/docs/src/pages/components/buttons/buttons-ja.md +++ b/docs/src/pages/components/buttons/buttons-ja.md @@ -93,7 +93,7 @@ Sometimes you might want to have icons for certain buttons to enhance the UX of ## 複雑なButton -The loading buttons can show pending state and disable interactions. +The loading buttons can show loading state and disable interactions. {{"demo": "pages/components/buttons/LoadingButtons.js"}} diff --git a/docs/src/pages/components/buttons/buttons-pt.md b/docs/src/pages/components/buttons/buttons-pt.md index 075b2cf6854280..9b890f7b786334 100644 --- a/docs/src/pages/components/buttons/buttons-pt.md +++ b/docs/src/pages/components/buttons/buttons-pt.md @@ -93,7 +93,7 @@ Aqui estão alguns exemplos de customização do componente. Você pode aprender ## Botões de progresso -Os botões de progresso podem mostrar o estado pendente e desativar as interações. +Os botões de progresso podem mostrar o estado de carregamento e desativar as interações. {{"demo": "pages/components/buttons/LoadingButtons.js"}} diff --git a/docs/src/pages/components/buttons/buttons-ru.md b/docs/src/pages/components/buttons/buttons-ru.md index 9d85bae4757222..6a1d8b2434bc43 100644 --- a/docs/src/pages/components/buttons/buttons-ru.md +++ b/docs/src/pages/components/buttons/buttons-ru.md @@ -93,7 +93,7 @@ Sometimes you might want to have icons for certain buttons to enhance the UX of ## Сложные кнопки -The loading buttons can show pending state and disable interactions. +The loading buttons can show loading state and disable interactions. {{"demo": "pages/components/buttons/LoadingButtons.js"}} diff --git a/docs/src/pages/components/buttons/buttons.md b/docs/src/pages/components/buttons/buttons.md index a351a27aecf0bf..8d65044a31a2f9 100644 --- a/docs/src/pages/components/buttons/buttons.md +++ b/docs/src/pages/components/buttons/buttons.md @@ -106,7 +106,7 @@ Here are some examples of customizing the component. You can learn more about th ## Loading buttons -The loading buttons can show pending state and disable interactions. +The loading buttons can show loading state and disable interactions. {{"demo": "pages/components/buttons/LoadingButtons.js"}} diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 56eb611500e947..21c40dc9d571dc 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -787,6 +787,28 @@ As the core components use emotion as a styled engine, the props used by emotion +icon-name ``` +### LoadingButton + +- Rename `pending` prop to `loading`. +- Rename `pendingIndicator` prop to `loadingIndicator`. +- Rename `pendingPosition` prop to `loadingPosition`. + + ```diff + - + + + ``` + +- The following keys of the `classes` prop were also renamed: + + 1. `pending` to `loading` + 1. `pendingIndicator` to `loadingIndicator` + 1. `pendingIndicatorCenter` to `loadingIndicatorCenter` + 1. `pendingIndicatorStart` to `loadingIndicatorStart` + 1. `pendingIndicatorEnd` to `loadingIndicatorEnd` + 1. `endIconPendingEnd` to `endIconLoadingEnd` + 1. `startIconPendingStart` to `startIconLoadingStart` + 1. `labelPendingCenter` to `labelLoadingCenter` + ### Menu - The onE\* transition props were removed. Use TransitionProps instead. diff --git a/docs/translations/api-docs/loading-button/loading-button.json b/docs/translations/api-docs/loading-button/loading-button.json index 1b6d51e03da10b..8eef9bc0fc73fa 100644 --- a/docs/translations/api-docs/loading-button/loading-button.json +++ b/docs/translations/api-docs/loading-button/loading-button.json @@ -4,50 +4,50 @@ "children": "The content of the component.", "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", "disabled": "If true, the component is disabled.", - "pending": "If true, the pending indicator is shown.", - "pendingIndicator": "Element placed before the children if the button is in pending state.", - "pendingPosition": "The pending indicator can be positioned on the start, end, or the center of the button." + "loading": "If true, the loading indicator is shown.", + "loadingIndicator": "Element placed before the children if the button is in loading state.", + "loadingPosition": "The loading indicator can be positioned on the start, end, or the center of the button." }, "classDescriptions": { "root": { "description": "Styles applied to the root element." }, - "pending": { + "loading": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "pending={true}" + "conditions": "loading={true}" }, - "pendingIndicator": { + "loadingIndicator": { "description": "Styles applied to {{nodeName}}.", - "nodeName": "the pendingIndicator element" + "nodeName": "the loadingIndicator element" }, - "pendingIndicatorCenter": { + "loadingIndicatorCenter": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the pendingIndicator element", - "conditions": "pendingPosition=\"center\"" + "nodeName": "the loadingIndicator element", + "conditions": "loadingPosition=\"center\"" }, - "pendingIndicatorStart": { + "loadingIndicatorStart": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the pendingIndicator element", - "conditions": "pendingPosition=\"start\"" + "nodeName": "the loadingIndicator element", + "conditions": "loadingPosition=\"start\"" }, - "pendingIndicatorEnd": { + "loadingIndicatorEnd": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the pendingIndicator element", - "conditions": "pendingPosition=\"end\"" + "nodeName": "the loadingIndicator element", + "conditions": "loadingPosition=\"end\"" }, - "endIconPendingEnd": { + "endIconLoadingEnd": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the endIcon element", - "conditions": "pending={true} and pendingPosition=\"end\"" + "conditions": "loading={true} and loadingPosition=\"end\"" }, - "startIconPendingStart": { + "startIconLoadingStart": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the startIcon element", - "conditions": "pending={true} and pendingPosition=\"start\"" + "conditions": "loading={true} and loadingPosition=\"start\"" }, - "labelPendingCenter": { + "labelLoadingCenter": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the label element", - "conditions": "pending={true} and pendingPosition=\"center\"" + "conditions": "loading={true} and loadingPosition=\"center\"" } } } diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts index 5edb30d84b9b2d..2ff980292a2aea 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts @@ -12,38 +12,38 @@ export type LoadingButtonTypeMap< classes?: { /** Styles applied to the root element. */ root?: string; - /** Styles applied to the root element if `pending={true}`. */ - pending?: string; - /** Styles applied to the pendingIndicator element. */ - pendingIndicator?: string; - /** Styles applied to the pendingIndicator element if `pendingPosition="center"`. */ - pendingIndicatorCenter?: string; - /** Styles applied to the pendingIndicator element if `pendingPosition="start"`. */ - pendingIndicatorStart?: string; - /** Styles applied to the pendingIndicator element if `pendingPosition="end"`. */ - pendingIndicatorEnd?: string; - /** Styles applied to the endIcon element if `pending={true}` and `pendingPosition="end"`. */ - endIconPendingEnd?: string; - /** Styles applied to the startIcon element if `pending={true}` and `pendingPosition="start"`. */ - startIconPendingStart?: string; - /** Styles applied to the label element if `pending={true}` and `pendingPosition="center"`. */ - labelPendingCenter?: string; + /** Styles applied to the root element if `loading={true}`. */ + loading?: string; + /** Styles applied to the loadingIndicator element. */ + loadingIndicator?: string; + /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */ + loadingIndicatorCenter?: string; + /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */ + loadingIndicatorStart?: string; + /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */ + loadingIndicatorEnd?: string; + /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */ + endIconLoadingEnd?: string; + /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */ + startIconLoadingStart?: string; + /** Styles applied to the label element if `loading={true}` and `loadingPosition="center"`. */ + labelLoadingCenter?: string; }; /** - * If `true`, the pending indicator is shown. + * If `true`, the loading indicator is shown. * @default false */ - pending?: boolean; + loading?: boolean; /** - * Element placed before the children if the button is in pending state. + * Element placed before the children if the button is in loading state. * @default */ - pendingIndicator?: React.ReactNode; + loadingIndicator?: React.ReactNode; /** - * The pending indicator can be positioned on the start, end, or the center of the button. + * The loading indicator can be positioned on the start, end, or the center of the button. * @default 'center' */ - pendingPosition?: 'start' | 'end' | 'center'; + loadingPosition?: 'start' | 'end' | 'center'; }; defaultComponent: D; }>; diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js index dc35fd06deaac3..be5f7b9c5877b8 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js @@ -10,42 +10,42 @@ import CircularProgress from '@material-ui/core/CircularProgress'; export const styles = () => ({ /* Styles applied to the root element. */ root: {}, - /* Styles applied to the root element if `pending={true}`. */ - pending: {}, - /* Styles applied to the pendingIndicator element. */ - pendingIndicator: { + /* Styles applied to the root element if `loading={true}`. */ + loading: {}, + /* Styles applied to the loadingIndicator element. */ + loadingIndicator: { position: 'absolute', visibility: 'visible', display: 'flex', }, - /* Styles applied to the pendingIndicator element if `pendingPosition="center"`. */ - pendingIndicatorCenter: { + /* Styles applied to the loadingIndicator element if `loadingPosition="center"`. */ + loadingIndicatorCenter: { left: '50%', transform: 'translate(-50%)', }, - /* Styles applied to the pendingIndicator element if `pendingPosition="start"`. */ - pendingIndicatorStart: { + /* Styles applied to the loadingIndicator element if `loadingPosition="start"`. */ + loadingIndicatorStart: { left: 14, }, - /* Styles applied to the pendingIndicator element if `pendingPosition="end"`. */ - pendingIndicatorEnd: { + /* Styles applied to the loadingIndicator element if `loadingPosition="end"`. */ + loadingIndicatorEnd: { right: 14, }, - /* Styles applied to the endIcon element if `pending={true}` and `pendingPosition="end"`. */ - endIconPendingEnd: { + /* Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */ + endIconLoadingEnd: { visibility: 'hidden', }, - /* Styles applied to the startIcon element if `pending={true}` and `pendingPosition="start"`. */ - startIconPendingStart: { + /* Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */ + startIconLoadingStart: { visibility: 'hidden', }, - /* Styles applied to the label element if `pending={true}` and `pendingPosition="center"`. */ - labelPendingCenter: { + /* Styles applied to the label element if `loading={true}` and `loadingPosition="center"`. */ + labelLoadingCenter: { visibility: 'hidden', }, }); -const PendingIndicator = ; +const LoadingIndicator = ; const LoadingButton = React.forwardRef(function LoadingButton(props, ref) { const { @@ -53,9 +53,9 @@ const LoadingButton = React.forwardRef(function LoadingButton(props, ref) { classes, className, disabled = false, - pending = false, - pendingIndicator = PendingIndicator, - pendingPosition = 'center', + loading = false, + loadingIndicator = LoadingIndicator, + loadingPosition = 'center', ...other } = props; @@ -64,27 +64,27 @@ const LoadingButton = React.forwardRef(function LoadingButton(props, ref) { className={clsx( classes.root, { - [classes.pending]: pending, + [classes.loading]: loading, }, className, )} - disabled={disabled || pending} + disabled={disabled || loading} ref={ref} classes={{ - startIcon: classes[`startIcon${pending ? 'Pending' : ''}${capitalize(pendingPosition)}`], - endIcon: classes[`endIcon${pending ? 'Pending' : ''}${capitalize(pendingPosition)}`], - label: classes[`label${pending ? 'Pending' : ''}${capitalize(pendingPosition)}`], + startIcon: classes[`startIcon${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`], + endIcon: classes[`endIcon${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`], + label: classes[`label${loading ? 'Loading' : ''}${capitalize(loadingPosition)}`], }} {...other} > - {pending && ( + {loading && (
- {pendingIndicator} + {loadingIndicator}
)} @@ -116,28 +116,28 @@ LoadingButton.propTypes /* remove-proptypes */ = { */ disabled: PropTypes.bool, /** - * If `true`, the pending indicator is shown. + * If `true`, the loading indicator is shown. * @default false */ - pending: PropTypes.bool, + loading: PropTypes.bool, /** - * Element placed before the children if the button is in pending state. + * Element placed before the children if the button is in loading state. * @default */ - pendingIndicator: PropTypes.node, + loadingIndicator: PropTypes.node, /** - * The pending indicator can be positioned on the start, end, or the center of the button. + * The loading indicator can be positioned on the start, end, or the center of the button. * @default 'center' */ - pendingPosition: chainPropTypes(PropTypes.oneOf(['start', 'end', 'center']), (props) => { - if (props.pendingPosition === 'start' && !props.startIcon) { + loadingPosition: chainPropTypes(PropTypes.oneOf(['start', 'end', 'center']), (props) => { + if (props.loadingPosition === 'start' && !props.startIcon) { return new Error( - `Material-UI: The pendingPosition="start" should be used in combination with startIcon.`, + `Material-UI: The loadingPosition="start" should be used in combination with startIcon.`, ); } - if (props.pendingPosition === 'end' && !props.endIcon) { + if (props.loadingPosition === 'end' && !props.endIcon) { return new Error( - `Material-UI: The pendingPosition="end" should be used in combination with endIcon.`, + `Material-UI: The loadingPosition="end" should be used in combination with endIcon.`, ); } return null; diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js index 0c9f28600f60bd..67c1fff367bcdd 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js @@ -33,37 +33,37 @@ describe('', () => { expect(screen.getByRole('button')).to.have.property('tabIndex', 0); }); - describe('prop: pending', () => { + describe('prop: loading', () => { it('disables the button', () => { - render(); + render(); const button = screen.getByRole('button'); expect(button).to.have.property('tabIndex', -1); expect(button).to.have.property('disabled', true); }); - it('cannot be enabled while `pending`', () => { - render(); + it('cannot be enabled while `loading`', () => { + render(); expect(screen.getByRole('button')).to.have.property('disabled', true); }); }); - describe('prop: pendingIndicator', () => { + describe('prop: loadingIndicator', () => { it('is not rendered by default', () => { - render(Test); + render(Test); expect(screen.getByRole('button')).to.have.text('Test'); }); - it('is rendered before the children when `pending`', () => { + it('is rendered before the children when `loading`', () => { render( - + Test , ); - expect(screen.getByRole('button')).to.have.text('pending...Test'); + expect(screen.getByRole('button')).to.have.text('loading...Test'); }); }); });