chore(FDS-148): get all *TestID code out of ActionEdit.js

.jest/config.js

@@ -123,15 +123,18 @@ module.exports = {
   // setupFiles: [],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
-  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+  setupFilesAfterEnv: [
+    '@testing-library/jest-dom/extend-expect',
+    '<rootDir>/setup.js',
+  ],
 
   // A list of paths to snapshot serializer modules Jest should use for snapshot testing
   // snapshotSerializers: [],
 
   snapshotResolver: '<rootDir>/snapshotResolver.js',
 
   // The test environment that will be used for testing
-  // testEnvironment: 'jsdom',
+  testEnvironment: 'jest-environment-jsdom-sixteen',
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},

package.json

@@ -23,8 +23,8 @@
     "design-tokens": "yarn workspace @espressive/design-tokens",
     "framer:publish": "dotenv npx framer-cli publish",
     "lint": "eslint ./",
-    "test:watch": "yarn test --watch",
     "test": "jest -c ./.jest/config.js",
+    "test:watch": "yarn test --watch",
     "tokens": "style-dictionary build -c ./tokens.config.json",
     "validate-ci": "circleci config validate"
   },
@@ -64,10 +64,10 @@
     "@rollup/plugin-babel": "5.1.0",
     "@rollup/plugin-json": "4.1.0",
     "@rollup/plugin-node-resolve": "9.0.0",
-    "@testing-library/dom": "7.29.6",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "10.4.7",
-    "@testing-library/user-event": "12.6.0",
+    "@testing-library/dom": "7.30.0",
+    "@testing-library/jest-dom": "5.11.9",
+    "@testing-library/react": "11.2.5",
+    "@testing-library/user-event": "12.8.3",
     "@types/react": "16.8.0",
     "@types/react-dom": "16.8.0",
     "@typescript-eslint/eslint-plugin": "4.16.1",
@@ -89,7 +89,8 @@
     "faker": "5.1.0",
     "husky": "1.3.1",
     "identity-obj-proxy": "3.0.0",
-    "jest": "26.2.2",
+    "jest": "26.6.3",
+    "jest-environment-jsdom-sixteen": "1.0.3",
     "jest-junit": "11.1.0",
     "lerna": "3.22.1",
     "lint-staged": "10.2.11",

packages/cascara/src/modules/ActionEdit/ActionEdit.js

@@ -6,17 +6,19 @@ import { Button } from 'reakit';
 import { Icon } from 'semantic-ui-react';
 
 const propTypes = {
-  cancelLabel: pt.string,
-  dataTestIDs: pt.shape({
-    cancel: pt.string,
-    edit: pt.string,
-    save: pt.string,
-  }),
+  cancelLabel: pt.node,
   editLabel: pt.string,
-  saveLabel: pt.string,
+  saveLabel: pt.node,
 };
 
-const ActionEdit = ({ dataTestIDs, editLabel = 'Edit' }) => {
+const DEFAULT_SAVE = <Icon name='check' />;
+const DEFAULT_CANCEL = <Icon name='delete' />;
+
+const ActionEdit = ({
+  cancelLabel = DEFAULT_CANCEL,
+  editLabel = 'Edit',
+  saveLabel = DEFAULT_SAVE,
+}) => {
   const {
     idOfRecordInEditMode,
     isEditing,
@@ -32,18 +34,6 @@ const ActionEdit = ({ dataTestIDs, editLabel = 'Edit' }) => {
   const recordId = record[uniqueIdAttribute];
   const whenAnotherRowIsEditing = Boolean(idOfRecordInEditMode);
 
-  // this seems like ugly, we need to find a better way
-  // to ease testing..
-  const cancelTestId = {};
-  const editTestId = {};
-  const saveTestId = {};
-
-  if (typeof dataTestIDs === 'object') {
-    cancelTestId['data-testid'] = dataTestIDs['cancel'];
-    editTestId['data-testid'] = dataTestIDs['edit'];
-    saveTestId['data-testid'] = dataTestIDs['save'];
-  }
-
   const handleReset = useCallback(() => {
     onAction(
       // fake target
@@ -103,29 +93,29 @@ const ActionEdit = ({ dataTestIDs, editLabel = 'Edit' }) => {
   return isEditing ? (
     <>
       <Button
-        {...cancelTestId}
         className='ui negative icon button'
         disabled={isSubmitting}
+        name={'edit.cancel'}
         onClick={handleCancel}
         type='button'
       >
-        <Icon name='delete' />
+        {cancelLabel}
       </Button>
       <Button
-        {...saveTestId}
         className='ui positive icon button'
         disabled={!isDirty || isSubmitting}
+        name={'edit.save'}
         onClick={handleSubmit(onSubmit)}
         type='button'
       >
-        <Icon name='check' />
+        {saveLabel}
       </Button>
     </>
   ) : (
     <Button
-      {...editTestId}
       className='ui basic button'
       disabled={whenAnotherRowIsEditing}
+      name={'edit.start'}
       onClick={handleEdit}
       type='button'
     >