Add data-test-subj support to non-custom table actions (#2353)

* add data-test-subj support around non-custom actions * Add data-test-subj proptype to basic table action * Update data-test-subj prop documentation * changelog * Update src/components/basic_table/collapsed_item_actions.js Co-Authored-By: Caroline Horn <[email protected]> * Update snapshot * changelog
elastic · Sep 24, 2019 · 24b9b12 · 24b9b12
1 parent a448b23
commit 24b9b12
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `data-test-subj` support for basic and in-memory tables' actions ([#2353](https://github.com/elastic/eui/pull/2353))
+
 **Bug fixes**
 
 - Fixed spacing of `EuiFormErrorText` to match `EuiFormHelpText` ([#2354](https://github.com/elastic/eui/pull/2354))

diff --git a/src-docs/src/views/tables/actions/actions.js b/src-docs/src/views/tables/actions/actions.js
@@ -163,6 +163,7 @@ export class Table extends Component {
               description: 'Clone this user',
               icon: 'copy',
               onClick: this.cloneUser,
+              'data-test-subj': 'action-clone',
             },
             {
               name: 'Delete',
@@ -172,6 +173,7 @@ export class Table extends Component {
               type: 'icon',
               onClick: this.deleteUser,
               isPrimary: true,
+              'data-test-subj': 'action-delete',
             },
             {
               name: 'Edit',
@@ -180,6 +182,7 @@ export class Table extends Component {
               icon: 'pencil',
               type: 'icon',
               onClick: () => {},
+              'data-test-subj': 'action-edit',
             },
             {
               name: 'Share',
@@ -188,6 +191,7 @@ export class Table extends Component {
               icon: 'share',
               type: 'icon',
               onClick: () => {},
+              'data-test-subj': 'action-share',
             },
           ];
     } else {
@@ -212,6 +216,7 @@ export class Table extends Component {
               type: 'icon',
               href: 'https://elastic.co',
               target: '_blank',
+              'data-test-subj': 'action-outboundlink',
             },
           ];
     }

diff --git a/src-docs/src/views/tables/basic/props_info.js b/src-docs/src/views/tables/basic/props_info.js
@@ -404,6 +404,12 @@ export const propsInfo = {
           required: false,
           type: { name: 'string (must be one of the supported button colors)' },
         },
+        'data-test-subj': {
+          description:
+            "Applies a data-test-subj attribute to the action's DOM node",
+          required: false,
+          type: { name: 'string' },
+        },
       },
     },
   },

diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap
@@ -14,6 +14,7 @@ exports[`CollapsedItemActions render 1`] = `
       <button
         aria-label="All actions"
         class="euiButtonIcon euiButtonIcon--text"
+        data-test-subj="euiCollapsedItemActionsButton"
         type="button"
       >
         <svg

diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js
@@ -86,6 +86,7 @@ const DefaultItemActionType = PropTypes.shape({
     PropTypes.oneOf(BUTTON_ICON_COLORS),
     PropTypes.func, // (item) => oneOf(ICON_BUTTON_COLORS)
   ]),
+  'data-test-subj': PropTypes.string,
 });
 
 const CustomItemActionType = PropTypes.shape({

diff --git a/src/components/basic_table/collapsed_item_actions.js b/src/components/basic_table/collapsed_item_actions.js
@@ -91,6 +91,7 @@ export class CollapsedItemActions extends Component {
             key={key}
             disabled={!enabled}
             icon={action.icon}
+            data-test-subj={action['data-test-subj']}
             onClick={this.onClickItem.bind(
               null,
               action.onClick.bind(null, item)
@@ -113,6 +114,7 @@ export class CollapsedItemActions extends Component {
             isDisabled={allDisabled}
             onClick={this.togglePopover.bind(this)}
             onFocus={onFocus}
+            data-test-subj="euiCollapsedItemActionsButton"
           />
         )}
       </EuiI18n>

diff --git a/src/components/basic_table/default_item_action.js b/src/components/basic_table/default_item_action.js
@@ -44,6 +44,7 @@ export class DefaultItemAction extends Component {
           onClick={onClick}
           href={action.href}
           target={action.target}
+          data-test-subj={action['data-test-subj']}
         />
       );
     } else {
@@ -57,6 +58,7 @@ export class DefaultItemAction extends Component {
           onClick={onClick}
           href={action.href}
           target={action.target}
+          data-test-subj={action['data-test-subj']}
           flush="right">
           {action.name}
         </EuiButtonEmpty>