EuiButtonGroup: sets data-test-subj in the input element of the button (

#2573)

* Sets `data-test-subj` in the `input` element of the `EuiButtonGroup` instead of the `button` one

* Fixes some of what was asked in the PR's review

* Changes datagrid test as requested

src/components/button/button.tsx

@@ -177,11 +177,12 @@ export const EuiButton: FunctionComponent<Props> = ({
     );
   }
 
+  let buttonType: ButtonHTMLAttributes<HTMLButtonElement>['type'];
   return (
     <button
       disabled={isDisabled}
       className={classes}
-      type={type as ButtonHTMLAttributes<HTMLButtonElement>['type']}
+      type={type as typeof buttonType}
       ref={buttonRef as Ref<HTMLButtonElement>}
       {...rest as ButtonHTMLAttributes<HTMLButtonElement>}>
       {innerNode}

src/components/button/button_group/__snapshots__/button_group.test.tsx.snap

@@ -7,7 +7,6 @@ exports[`EuiButtonGroup is rendered 1`] = `
   <div
     aria-label="aria-label"
     class="euiButtonGroup euiButtonGroup--s testClass1 testClass2"
-    data-test-subj="test subject string"
   />
 </fieldset>
 `;
@@ -1458,12 +1457,12 @@ exports[`EuiButtonGroup props options can pass down data-test-subj 1`] = `
       <input
         aria-label="Option one"
         class="euiToggle__input euiButtonToggle__input"
+        data-test-subj="test"
         title="Option one"
         type="radio"
       />
       <button
         class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        data-test-subj="test"
         id="button00"
         tabindex="-1"
         type="button"

src/components/button/button_group/button_group.tsx

@@ -26,7 +26,7 @@ export interface EuiButtonGroupOption extends CommonProps {
   iconType?: IconType;
 }
 
-export interface EuiButtonGroupProps {
+export interface EuiButtonGroupProps extends CommonProps {
   options?: EuiButtonGroupOption[];
   onChange: (id: string, value?: any) => void;
   /**
@@ -62,6 +62,7 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
   onChange,
   options = [],
   type = 'single',
+  'data-test-subj': dataTestSubj,
   ...rest
 }) => {
   const classes = classNames(
@@ -136,6 +137,7 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
               onChange={() => onChange(id, value)}
               size={buttonSize === 'compressed' ? 's' : buttonSize}
               type={type}
+              data-test-subj={dataTestSubj}
               {...rest}
             />
           );

src/components/button/button_icon/button_icon.tsx

@@ -132,12 +132,13 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
     );
   }
 
+  let buttonType: ButtonHTMLAttributes<HTMLButtonElement>['type'];
   return (
     <button
       tabIndex={isAriaHidden ? -1 : undefined}
       disabled={isDisabled}
       className={classes}
-      type={type as ButtonHTMLAttributes<HTMLButtonElement>['type']}
+      type={type as typeof buttonType}
       ref={buttonRef as Ref<HTMLButtonElement>}
       {...rest as ButtonHTMLAttributes<HTMLButtonElement>}>
       {buttonIcon}

src/components/button/button_toggle/__snapshots__/button_toggle.test.tsx.snap

@@ -7,13 +7,13 @@ exports[`EuiButtonToggle is rendered 1`] = `
   <input
     aria-label="Label me"
     class="euiToggle__input euiButtonToggle__input"
+    data-test-subj="test subject string"
     title="Label me"
     type="checkbox"
   />
   <button
     aria-label="aria-label"
     class="euiButton euiButton--primary euiButtonToggle testClass1 testClass2"
-    data-test-subj="test subject string"
     tabindex="-1"
     type="button"
   >

src/components/button/button_toggle/button_toggle.tsx

@@ -7,13 +7,13 @@ import React, {
   ReactNode,
 } from 'react';
 import classNames from 'classnames';
+import { CommonProps, ExclusiveUnion } from '../../common';
 
-import { ExclusiveUnion } from '../../common';
 import { EuiToggle, ToggleType } from '../../toggle';
 import { EuiButton, EuiButtonProps } from '../button';
 import { useRenderToText } from '../../inner_text/render_to_text';
 
-export interface EuiButtonToggleProps extends EuiButtonProps {
+export interface EuiButtonToggleProps extends EuiButtonProps, CommonProps {
   /**
    * Simulates a `EuiButtonEmpty`
    */
@@ -80,6 +80,7 @@ export const EuiButtonToggle: FunctionComponent<Props> = ({
   toggleClassName,
   type,
   value,
+  'data-test-subj': dataTestSubj,
   ...rest
 }) => {
   const classes = classNames(
@@ -116,7 +117,8 @@ export const EuiButtonToggle: FunctionComponent<Props> = ({
       onChange={onChange}
       type={type}
       title={labelText}
-      value={value}>
+      value={value}
+      data-test-subj={dataTestSubj}>
       <EuiButton
         tabIndex={-1} // prevents double focus from input to button
         className={classes}

src/components/datagrid/data_grid.test.tsx

@@ -145,9 +145,11 @@ function getColumnSortDirection(
   }
 
   expect(columnSorter.length).toBe(1);
-  const activeSort = columnSorter.find(
-    'button[className*="euiButtonGroup__button--selected"]'
-  );
+  const activeSort = columnSorter
+    .find('button[className*="euiButtonGroup__button--selected"]')
+    .closest('EuiToggle')
+    .find('input[className*="euiButtonToggle__input"]');
+
   const sortDirection = (activeSort.props() as {
     'data-test-subj': string;
   })['data-test-subj'].match(/(?<direction>[^-]+)$/)!.groups!.direction;
@@ -206,16 +208,10 @@ function sortByColumn(
 
   if (currentSortDirection !== direction) {
     const sortButton = columnSorter.find(
-      `button[data-test-subj="euiDataGridColumnSorting-sortColumn-${columnId}-${direction}"]`
+      `input[data-test-subj="euiDataGridColumnSorting-sortColumn-${columnId}-${direction}"]`
     );
     expect(sortButton.length).toBe(1);
-    act(() =>
-      sortButton.parents('EuiButtonGroup').props().onChange!(
-        undefined,
-        // @ts-ignore TS wants to use react's onChange definition instead of the EuiButtonGroup one
-        direction
-      )
-    );
+    sortButton.simulate('change', [undefined, direction]);
   }
 
   // close popover

src/components/toggle/__snapshots__/toggle.test.tsx.snap

@@ -4,11 +4,11 @@ exports[`EuiToggle is rendered 1`] = `
 <div
   aria-label="aria-label"
   class="euiToggle testClass1 testClass2"
-  data-test-subj="test subject string"
 >
   <input
     aria-label="Is toggle on?"
     class="euiToggle__input"
+    data-test-subj="test subject string"
     type="checkbox"
   />
 </div>

src/components/toggle/toggle.tsx

@@ -52,6 +52,7 @@ export const EuiToggle: React.SFC<EuiToggleProps> = ({
   title,
   type,
   value,
+  'data-test-subj': dataTestSubj,
   ...rest
 }) => {
   const classes = classNames(
@@ -75,6 +76,7 @@ export const EuiToggle: React.SFC<EuiToggleProps> = ({
         title={title}
         type={type ? typeToInputTypeMap[type] : undefined}
         value={value}
+        data-test-subj={dataTestSubj}
       />
 
       {children}