feat: Replace data-test-id by data-testid on some components

BREAKING CHANGE: If you were using `data-test-id` prop to test `NestedSelect` or `UploadQueue` components, you should now use `data-testid`. Besides if something fail on `CozyDialog` components, take a look at our helpers in `react/CozyDialogs` to know how to test these components.
cozy · Jan 14, 2022 · 8087cb1 · 8087cb1
1 parent c9f191f
commit 8087cb1
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 26 deletions.
diff --git a/react/CozyDialogs/ConfirmDialog.jsx b/react/CozyDialogs/ConfirmDialog.jsx
@@ -26,18 +26,18 @@ const ConfirmDialog = props => {
       {!fullScreen && onClose && (
         <DialogCloseButton
           onClick={onClose}
-          data-test-id={`modal-close-button-${id}`}
+          data-testid={`modal-close-button-${id}`}
         />
       )}
       {!fullScreen && onBack && (
         <DialogBackButton
-          data-test-id={`modal-back-button-${id}`}
+          data-testid={`modal-back-button-${id}`}
           onClick={onBack}
         />
       )}
       {fullScreen && onBackOrClose && (
         <DialogBackButton
-          data-test-id={`modal-backclose-button-${id}`}
+          data-testid={`modal-backclose-button-${id}`}
           onClick={onBackOrClose}
         />
       )}

diff --git a/react/CozyDialogs/Dialog.jsx b/react/CozyDialogs/Dialog.jsx
@@ -27,18 +27,18 @@ const Dialog = props => {
       {!fullScreen && onClose && (
         <DialogCloseButton
           onClick={onClose}
-          data-test-id={`modal-close-button-${id}`}
+          data-testid={`modal-close-button-${id}`}
         />
       )}
       {!fullScreen && onBack && (
         <DialogBackButton
           onClick={onBack}
-          data-test-id={`modal-back-button-${id}`}
+          data-testid={`modal-back-button-${id}`}
         />
       )}
       {fullScreen && onBackOrClose && (
         <DialogBackButton
-          data-test-id={`modal-backclose-button-${id}`}
+          data-testid={`modal-backclose-button-${id}`}
           onClick={onBackOrClose}
         />
       )}

diff --git a/react/CozyDialogs/FixedActionsDialog.jsx b/react/CozyDialogs/FixedActionsDialog.jsx
@@ -26,19 +26,19 @@ const FixedActionsDialog = props => {
     <Dialog {...dialogProps}>
       {!fullScreen && onClose && (
         <DialogCloseButton
-          data-test-id={`modal-close-button-${id}`}
+          data-testid={`modal-close-button-${id}`}
           onClick={onClose}
         />
       )}
       {!fullScreen && onBack && (
         <DialogBackButton
-          data-test-id={`modal-back-button-${id}`}
+          data-testid={`modal-back-button-${id}`}
           onClick={onBack}
         />
       )}
       {fullScreen && onBackOrClose && (
         <DialogBackButton
-          data-test-id={`modal-backclose-button-${id}`}
+          data-testid={`modal-backclose-button-${id}`}
           onClick={onBackOrClose}
         />
       )}

diff --git a/react/CozyDialogs/FixedDialog.jsx b/react/CozyDialogs/FixedDialog.jsx
@@ -26,19 +26,19 @@ const FixedDialog = props => {
     <Dialog {...dialogProps}>
       {!fullScreen && onClose && (
         <DialogCloseButton
-          data-test-id={`modal-close-button-${id}`}
+          data-testid={`modal-close-button-${id}`}
           onClick={onClose}
         />
       )}
       {!fullScreen && onBack && (
         <DialogBackButton
-          data-test-id={`modal-back-button-${id}`}
+          data-testid={`modal-back-button-${id}`}
           onClick={onBack}
         />
       )}
       {fullScreen && onBackOrClose && (
         <DialogBackButton
-          data-test-id={`modal-backclose-button-${id}`}
+          data-testid={`modal-backclose-button-${id}`}
           onClick={onBackOrClose}
         />
       )}

diff --git a/react/CozyDialogs/IllustrationDialog.jsx b/react/CozyDialogs/IllustrationDialog.jsx
@@ -25,19 +25,19 @@ const IllustrationDialog = props => {
     <Dialog {...dialogProps}>
       {!fullScreen && onClose && (
         <DialogCloseButton
-          data-test-id={`modal-close-button-${id}`}
+          data-testid={`modal-close-button-${id}`}
           onClick={onClose}
         />
       )}
       {!fullScreen && onBack && (
         <DialogBackButton
           onClick={onBack}
-          data-test-id={`modal-back-button-${id}`}
+          data-testid={`modal-back-button-${id}`}
         />
       )}
       {fullScreen && onBackOrClose && (
         <DialogBackButton
-          data-test-id={`modal-backclose-button-${id}`}
+          data-testid={`modal-backclose-button-${id}`}
           onClick={onBackOrClose}
         />
       )}

diff --git a/react/CozyDialogs/Readme.md b/react/CozyDialogs/Readme.md
@@ -242,7 +242,7 @@ initialState = {
   {dialogs.map(dialog => (
     <button
       key={`open-btn-${dialog.name}`}
-      data-test-id={`open-btn-${dialog.name}`}
+      data-testid={`open-btn-${dialog.name}`}
       onClick={() => toggleDialog(dialog)}
     >
       Open {dialog.name}

diff --git a/react/CozyDialogs/e2e.js b/react/CozyDialogs/e2e.js
@@ -8,8 +8,8 @@ module.exports = async (page, screenshot) => {
   ]) {
     console.log(`Screenshotting dialog type ${dialogType}`)
 
-    const openBtnSel = `[data-test-id=open-btn-${dialogType}]`
-    const closeBtnSel = '[data-test-id*=modal-close-button]'
+    const openBtnSel = `[data-testid=open-btn-${dialogType}]`
+    const closeBtnSel = '[data-testid*=modal-close-button]'
     await page.waitForSelector(openBtnSel)
     await page.click(openBtnSel)
     await page.waitForSelector(closeBtnSel)

diff --git a/react/CozyDialogs/testing.js b/react/CozyDialogs/testing.js
@@ -20,20 +20,20 @@ export const getDialog = root => {
 export const getCloseButton = dialogRoot => {
   const buttons = within(dialogRoot).getAllByRole('button')
   return buttons.find(
-    x => x.dataset.testId && x.dataset.testId.includes('modal-close-button')
+    x => x.dataset.testid && x.dataset.testid.includes('modal-close-button')
   )
 }
 
 export const getBackButton = dialogRoot => {
   const buttons = within(dialogRoot).getAllByRole('button')
   return buttons.find(
-    x => x.dataset.testId && x.dataset.testId.includes('modal-back-button')
+    x => x.dataset.testid && x.dataset.testid.includes('modal-back-button')
   )
 }
 
 export const getBackCloseButton = dialogRoot => {
   const buttons = within(dialogRoot).getAllByRole('button')
   return buttons.find(
-    x => x.dataset.testId && x.dataset.testId.includes('modal-backclose-button')
+    x => x.dataset.testid && x.dataset.testid.includes('modal-backclose-button')
   )
 }
diff --git a/react/NestedSelect/Modal.jsx b/react/NestedSelect/Modal.jsx
@@ -52,7 +52,7 @@ const NestedSelectModal = props => {
     >
       <DialogCloseButton
         onClick={props.onClose}
-        data-test-id={`modal-close-button-nested-select`}
+        data-testid={`modal-close-button-nested-select`}
       />
       <NestedSelect
         HeaderComponent={NestedSelectDialogHeader}

diff --git a/react/UploadQueue/index.jsx b/react/UploadQueue/index.jsx
@@ -171,7 +171,7 @@ const Item = translate()(
     return (
       <ListItem
         divider
-        data-test-id="upload-queue-item"
+        data-testid="upload-queue-item"
         className={cx('u-ph-1', {
           [styles['upload-queue-item--done']]: done,
           [styles['upload-queue-item--error']]: error
@@ -187,7 +187,7 @@ const Item = translate()(
           </ListItemIcon>
         ) : null}
         <ListItemText disableTypography>
-          <div data-test-id="upload-queue-item-name" className="u-ellipsis">
+          <div data-testid="upload-queue-item-name" className="u-ellipsis">
             <Typography variant="body1" className="u-ellipsis">
               {filename}
               {extension && (
@@ -233,7 +233,7 @@ class UploadQueue extends Component {
     const { collapsed } = this.state
     return (
       <div
-        data-test-id="upload-queue"
+        data-testid="upload-queue"
         className={cx(styles['upload-queue'], {
           [styles['upload-queue--visible']]: queue.length !== 0,
           [styles['upload-queue--collapsed']]: collapsed,
@@ -263,7 +263,7 @@ class UploadQueue extends Component {
           )}
           {doneCount >= queue.length && (
             <div
-              data-test-id="upload-queue-success"
+              data-testid="upload-queue-success"
               className={styles['upload-queue-header-inner']}
             >
               <Typography variant="h6">