[Emotion] Fix/regression test more css props

src/components/accordion/accordion.test.tsx

@@ -17,10 +17,9 @@ let id = 0;
 const getId = () => `${id++}`;
 
 describe('EuiAccordion', () => {
-  shouldRenderCustomStyles(<EuiAccordion id="styles" />, [
-    'buttonProps',
-    'arrowProps',
-  ]);
+  shouldRenderCustomStyles(<EuiAccordion id="styles" />, {
+    childProps: ['buttonProps', 'arrowProps'],
+  });
 
   test('is rendered', () => {
     const component = render(<EuiAccordion id={getId()} {...requiredProps} />);

src/components/badge/badge.test.tsx

@@ -14,7 +14,14 @@ import { shouldRenderCustomStyles } from '../../test/internal';
 import { EuiBadge, COLORS, ICON_SIDES } from './badge';
 
 describe('EuiBadge', () => {
-  shouldRenderCustomStyles(<EuiBadge {...requiredProps} />);
+  shouldRenderCustomStyles(
+    <EuiBadge
+      iconType="cross"
+      iconOnClick={() => {}}
+      iconOnClickAriaLabel="Close"
+    />,
+    { childProps: ['closeButtonProps'] }
+  );
 
   test('is rendered', () => {
     const component = render(<EuiBadge {...requiredProps}>Content</EuiBadge>);

src/components/badge/beta_badge/beta_badge.test.tsx

@@ -9,10 +9,16 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../../test';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiBetaBadge, COLORS, SIZES } from './beta_badge';
 
 describe('EuiBetaBadge', () => {
+  shouldRenderCustomStyles(
+    <EuiBetaBadge label="Hello" tooltipContent="World" />,
+    { childProps: ['anchorProps'] }
+  );
+
   test('is rendered', () => {
     const component = render(<EuiBetaBadge label="Beta" {...requiredProps} />);
 

src/components/button/button.test.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import { render, mount } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiButton, COLORS, SIZES } from './button';
 
@@ -18,6 +19,10 @@ import {
 } from './button_display/_button_display_content';
 
 describe('EuiButton', () => {
+  shouldRenderCustomStyles(<EuiButton>Content</EuiButton>, {
+    childProps: ['contentProps'],
+  });
+
   test('is rendered', () => {
     const component = render(<EuiButton {...requiredProps}>Content</EuiButton>);
 

src/components/button/button_display/__snapshots__/_button_display.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiButtonDisplay renders 1`] = `
+<button
+  aria-label="aria-label"
+  class="testClass1 testClass2 emotion-euiButtonDisplay-m-m"
+  data-test-subj="test subject string"
+  type="button"
+>
+  <span
+    class="emotion-euiButtonDisplayContent"
+  >
+    <span
+      class="eui-textTruncate"
+    >
+      Content
+    </span>
+  </span>
+</button>
+`;

src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiButtonDisplayContent renders 1`] = `
+<span
+  aria-label="aria-label"
+  class="testClass1 testClass2 emotion-euiButtonDisplayContent"
+  data-test-subj="test subject string"
+>
+  <span
+    class="eui-textTruncate"
+  >
+    Content
+  </span>
+</span>
+`;

src/components/button/button_display/_button_display.test.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { requiredProps } from '../../../test/required_props';
+import { shouldRenderCustomStyles } from '../../../test/internal';
+
+import { EuiButtonDisplay } from './_button_display';
+
+describe('EuiButtonDisplay', () => {
+  shouldRenderCustomStyles(<EuiButtonDisplay>Text</EuiButtonDisplay>, {
+    childProps: ['textProps'],
+  });
+
+  it('renders', () => {
+    const { container } = render(
+      <EuiButtonDisplay {...requiredProps}>Content</EuiButtonDisplay>
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

src/components/button/button_display/_button_display_content.test.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { requiredProps } from '../../../test/required_props';
+import { shouldRenderCustomStyles } from '../../../test/internal';
+
+import { EuiButtonDisplayContent } from './_button_display_content';
+
+describe('EuiButtonDisplayContent', () => {
+  shouldRenderCustomStyles(
+    <EuiButtonDisplayContent>Text</EuiButtonDisplayContent>,
+    { childProps: ['textProps'] }
+  );
+
+  it('renders', () => {
+    const { container } = render(
+      <EuiButtonDisplayContent {...requiredProps}>
+        Content
+      </EuiButtonDisplayContent>
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

src/components/button/button_display/_button_display_content.tsx

@@ -109,7 +109,7 @@ export const EuiButtonDisplayContent: FunctionComponent<
   const isText = typeof children === 'string';
 
   return (
-    <span {...contentProps} css={cssStyles}>
+    <span css={cssStyles} {...contentProps}>
       {icon}
       {isText ? (
         <span

src/components/button/button_empty/button_empty.test.tsx

@@ -16,6 +16,10 @@ import { ICON_SIDES } from '../_button_content_deprecated';
 import { BUTTON_COLORS } from '../../../themes/amsterdam/global_styling/mixins';
 
 describe('EuiButtonEmpty', () => {
+  shouldRenderCustomStyles(<EuiButtonEmpty>Content</EuiButtonEmpty>, {
+    childProps: ['contentProps'],
+  });
+
   test('is rendered', () => {
     const component = render(
       <EuiButtonEmpty {...requiredProps}>Content</EuiButtonEmpty>
@@ -24,10 +28,6 @@ describe('EuiButtonEmpty', () => {
     expect(component).toMatchSnapshot();
   });
 
-  shouldRenderCustomStyles(
-    <EuiButtonEmpty {...requiredProps}>Content</EuiButtonEmpty>
-  );
-
   describe('props', () => {
     describe('isDisabled', () => {
       it('is rendered', () => {

src/components/card/card.test.tsx

@@ -30,7 +30,10 @@ describe('EuiCard', () => {
     expect(component).toMatchSnapshot();
   });
 
-  shouldRenderCustomStyles(<EuiCard title="Card title" />);
+  shouldRenderCustomStyles(
+    <EuiCard title="Card title" betaBadgeProps={{ label: 'beta' }} />,
+    { childProps: ['betaBadgeProps'] }
+  );
 
   describe('props', () => {
     test('icon', () => {

src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.test.tsx

@@ -9,10 +9,16 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiCollapsibleNavGroup, BACKGROUNDS } from './collapsible_nav_group';
 
 describe('EuiCollapsibleNavGroup', () => {
+  shouldRenderCustomStyles(
+    <EuiCollapsibleNavGroup iconType="logoElastic" title="Test" />,
+    { childProps: ['iconProps'] }
+  );
+
   test('is rendered', () => {
     const component = render(
       <EuiCollapsibleNavGroup id="id" {...requiredProps} />

src/components/description_list/description_list.test.tsx

@@ -19,7 +19,7 @@ describe('EuiDescriptionList', () => {
     <EuiDescriptionList
       listItems={[{ title: 'hello', description: 'world' }]}
     />,
-    ['titleProps', 'descriptionProps']
+    { childProps: ['titleProps', 'descriptionProps'] }
   );
 
   test('is rendered', () => {

src/components/expression/expression.test.tsx

@@ -16,7 +16,7 @@ import { EuiExpression, COLORS } from './expression';
 describe('EuiExpression', () => {
   shouldRenderCustomStyles(
     <EuiExpression description="the answer is" value="42" />,
-    ['descriptionProps', 'valueProps']
+    { childProps: ['descriptionProps', 'valueProps'] }
   );
 
   test('renders', () => {

src/components/flyout/flyout.test.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import { render, mount } from 'enzyme';
 import { requiredProps, takeMountedSnapshot } from '../../test';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiFlyout, SIZES, PADDING_SIZES, SIDES } from './flyout';
 
@@ -23,6 +24,11 @@ jest.mock('../portal', () => ({
 }));
 
 describe('EuiFlyout', () => {
+  shouldRenderCustomStyles(
+    <EuiFlyout {...requiredProps} onClose={() => {}} />,
+    { childProps: ['closeButtonProps', 'maskProps'] }
+  );
+
   test('is rendered', () => {
     const component = mount(
       <EuiFlyout {...requiredProps} onClose={() => {}} />

src/components/flyout/flyout.tsx

@@ -351,13 +351,13 @@ export const EuiFlyout = forwardRef(
         {...focusTrapProps}
       >
         <Element
+          css={cssStyles}
           {...(rest as ComponentPropsWithRef<T>)}
           role={role}
           className={classes}
           tabIndex={-1}
           style={newStyle}
           ref={setRef}
-          css={cssStyles}
         >
           {closeButton}
           {children}

src/components/form/described_form_group/described_form_group.test.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { requiredProps } from '../../../test';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiFormRow } from '../form_row';
 import { EuiDescribedFormGroup } from './described_form_group';
@@ -19,6 +20,10 @@ describe('EuiDescribedFormGroup', () => {
     description: 'Test description',
   };
 
+  shouldRenderCustomStyles(<EuiDescribedFormGroup {...props} />, {
+    childProps: ['descriptionFlexItemProps', 'fieldFlexItemProps'],
+  });
+
   test('is rendered', () => {
     const component = shallow(
       <EuiDescribedFormGroup {...requiredProps} {...props}>

src/components/form/field_password/field_password.test.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import { render, mount } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiFieldPassword, EuiFieldPasswordProps } from './field_password';
 
@@ -23,6 +24,10 @@ const TYPES: Array<EuiFieldPasswordProps['type']> = [
 ];
 
 describe('EuiFieldPassword', () => {
+  shouldRenderCustomStyles(<EuiFieldPassword type="dual" />, {
+    childProps: ['dualToggleProps'],
+  });
+
   test('is rendered', () => {
     const component = render(
       <EuiFieldPassword

src/components/form/radio/radio.test.tsx

@@ -9,10 +9,16 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../../test';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiRadio } from './radio';
 
 describe('EuiRadio', () => {
+  shouldRenderCustomStyles(
+    <EuiRadio onChange={() => {}} id="id" label="test" />,
+    { childProps: ['labelProps'] }
+  );
+
   test('is rendered', () => {
     const component = render(
       <EuiRadio id="id" onChange={() => {}} {...requiredProps} />

src/components/form/super_select/super_select.test.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
 import { requiredProps, takeMountedSnapshot } from '../../../test';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiSuperSelect } from './super_select';
 
@@ -22,6 +23,11 @@ const options = [
 ];
 
 describe('EuiSuperSelect', () => {
+  shouldRenderCustomStyles(
+    <EuiSuperSelect options={options} onChange={() => {}} />,
+    { childProps: ['popoverProps'] }
+  );
+
   test('is rendered', () => {
     const component = render(
       <EuiSuperSelect

src/components/image/image.test.tsx

@@ -22,7 +22,9 @@ describe('EuiImage', () => {
     src: '/cat.jpg',
   };
 
-  shouldRenderCustomStyles(<EuiImage {...requiredProps} />, ['wrapperProps']);
+  shouldRenderCustomStyles(<EuiImage {...requiredProps} />, {
+    childProps: ['wrapperProps'],
+  });
 
   test('is rendered', () => {
     const component = render(<EuiImage {...requiredProps} />);

src/components/markdown_editor/markdown_editor.test.tsx

@@ -9,12 +9,24 @@
 import React from 'react';
 import { render, mount, ReactWrapper } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
+
 import { EuiMarkdownEditor } from './markdown_editor';
 import * as MarkdownTooltip from './plugins/markdown_tooltip';
 import MarkdownActions from './markdown_actions';
 import { getDefaultEuiMarkdownPlugins } from './plugins/markdown_default_plugins';
 
 describe('EuiMarkdownEditor', () => {
+  shouldRenderCustomStyles(
+    <EuiMarkdownEditor
+      {...requiredProps}
+      onChange={() => {}}
+      value="Test"
+      initialViewMode="viewing"
+    />,
+    { childProps: ['markdownFormatProps'] }
+  );
+
   test('is rendered', () => {
     const component = render(
       <EuiMarkdownEditor

src/components/notification/__snapshots__/notification_event.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`EuiNotificationEvent is rendered 1`] = `
 <article
   aria-label="aria-label"
   aria-labelledby="generated-id"
-  class="euiNotificationEvent className"
+  class="euiNotificationEvent testClass1 testClass2"
   data-test-subj="test subject string"
 >
   <div