[Emotion] Fix/regression test last batch of misc components with chil…

…dProps (#6255) * [EuiColorStops] Fix unmerged `style`s, `data-test-subj`s, and missing required props + of course, regression styles and childProps * [EuiDatePopoverButton] Add it renders unit test and shouldRenderCustomStyles * [EuiHeader] Add shouldRenderCustomStyles regression tests * [EuiResizablePanel] Add unit tests, fix location of passed `style` prop - the current merging of `styles` doesn't make sense given `wrapperProps` and the location of `...rest` + have to export `customStyles` to support EuiResizableWrapper's context requirement - nb - the context isn't actually _required_ per se and seems to have a legit fallback, but we added a manual throw detection, so alas * fix changelog id
elastic · Sep 21, 2022 · b3327d7 · b3327d7
1 parent deabfa9
commit b3327d7
Show file tree

Hide file tree

Showing 15 changed files with 221 additions and 14 deletions.
diff --git a/src/components/color_picker/color_stops/__snapshots__/color_stop_thumb.test.tsx.snap b/src/components/color_picker/color_stops/__snapshots__/color_stop_thumb.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`renders EuiColorStopThumb 1`] = `
 <div
   class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
+  data-test-subj="test subject string"
   style="left:0%"
 >
   <div
@@ -29,6 +30,7 @@ exports[`renders EuiColorStopThumb 1`] = `
 exports[`renders disabled EuiColorStopThumb 1`] = `
 <div
   class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
+  data-test-subj="test subject string"
   style="left:0%"
 >
   <div
@@ -56,6 +58,7 @@ exports[`renders disabled EuiColorStopThumb 1`] = `
 exports[`renders picker-only EuiColorStopThumb 1`] = `
 <div
   class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
+  data-test-subj="test subject string"
   style="left:0%"
 >
   <div
@@ -82,6 +85,7 @@ exports[`renders picker-only EuiColorStopThumb 1`] = `
 exports[`renders readOnly EuiColorStopThumb 1`] = `
 <div
   class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
+  data-test-subj="test subject string"
   style="left:0%"
 >
   <div
@@ -108,6 +112,7 @@ exports[`renders readOnly EuiColorStopThumb 1`] = `
 exports[`renders swatch-only EuiColorStopThumb 1`] = `
 <div
   class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
+  data-test-subj="test subject string"
   style="left:0%"
 >
   <div

diff --git a/src/components/color_picker/color_stops/__snapshots__/color_stops.test.tsx.snap b/src/components/color_picker/color_stops/__snapshots__/color_stops.test.tsx.snap
@@ -2,8 +2,9 @@
 
 exports[`renders EuiColorStops 1`] = `
 <div
+  aria-label="aria-label"
   class="euiRangeWrapper euiColorStops testClass1 testClass2"
-  data-test-subj="euiColorStops"
+  data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
   <p
@@ -113,8 +114,9 @@ exports[`renders EuiColorStops 1`] = `
 
 exports[`renders compressed EuiColorStops 1`] = `
 <div
+  aria-label="aria-label"
   class="euiRangeWrapper euiColorStops testClass1 testClass2"
-  data-test-subj="euiColorStops"
+  data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
   <p
@@ -224,8 +226,9 @@ exports[`renders compressed EuiColorStops 1`] = `
 
 exports[`renders disabled EuiColorStops 1`] = `
 <div
+  aria-label="aria-label"
   class="euiRangeWrapper euiColorStops euiColorStops-isDisabled testClass1 testClass2"
-  data-test-subj="euiColorStops"
+  data-test-subj="euiColorStops test subject string"
   tabindex="-1"
 >
   <p
@@ -338,8 +341,9 @@ exports[`renders disabled EuiColorStops 1`] = `
 
 exports[`renders empty EuiColorStops 1`] = `
 <div
+  aria-label="aria-label"
   class="euiRangeWrapper euiColorStops testClass1 testClass2"
-  data-test-subj="euiColorStops"
+  data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
   <p
@@ -374,8 +378,9 @@ exports[`renders empty EuiColorStops 1`] = `
 
 exports[`renders fixed stop EuiColorStops 1`] = `
 <div
+  aria-label="aria-label"
   class="euiRangeWrapper euiColorStops testClass1 testClass2"
-  data-test-subj="euiColorStops"
+  data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
   <p
@@ -485,8 +490,9 @@ exports[`renders fixed stop EuiColorStops 1`] = `
 
 exports[`renders free-range EuiColorStops 1`] = `
 <div
+  aria-label="aria-label"
   class="euiRangeWrapper euiColorStops testClass1 testClass2"
-  data-test-subj="euiColorStops"
+  data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
   <p
@@ -521,8 +527,9 @@ exports[`renders free-range EuiColorStops 1`] = `
 
 exports[`renders fullWidth EuiColorStops 1`] = `
 <div
+  aria-label="aria-label"
   class="euiRangeWrapper euiRangeWrapper--fullWidth euiColorStops testClass1 testClass2"
-  data-test-subj="euiColorStops"
+  data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
   <p
@@ -632,8 +639,9 @@ exports[`renders fullWidth EuiColorStops 1`] = `
 
 exports[`renders max-only EuiColorStops 1`] = `
 <div
+  aria-label="aria-label"
   class="euiRangeWrapper euiColorStops testClass1 testClass2"
-  data-test-subj="euiColorStops"
+  data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
   <p
@@ -668,8 +676,9 @@ exports[`renders max-only EuiColorStops 1`] = `
 
 exports[`renders min-only EuiColorStops 1`] = `
 <div
+  aria-label="aria-label"
   class="euiRangeWrapper euiColorStops testClass1 testClass2"
-  data-test-subj="euiColorStops"
+  data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
   <p
@@ -704,8 +713,9 @@ exports[`renders min-only EuiColorStops 1`] = `
 
 exports[`renders readOnly EuiColorStops 1`] = `
 <div
+  aria-label="aria-label"
   class="euiRangeWrapper euiColorStops euiColorStops-isReadOnly testClass1 testClass2"
-  data-test-subj="euiColorStops"
+  data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
   <p

diff --git a/src/components/color_picker/color_stops/color_stop_thumb.test.tsx b/src/components/color_picker/color_stops/color_stop_thumb.test.tsx
@@ -12,6 +12,7 @@ import { render } from 'enzyme';
 import { EuiColorStopThumb } from './color_stop_thumb';
 
 import { requiredProps } from '../../../test';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 jest.mock('../../portal', () => ({
   EuiPortal: ({ children }: { children: any }) => children,
@@ -21,6 +22,24 @@ const onChange = jest.fn();
 
 // Note: Unit/interaction tests can be found in ./color_stops.test
 
+shouldRenderCustomStyles(
+  <EuiColorStopThumb
+    onChange={onChange}
+    stop={0}
+    color="#FF0000"
+    localMin={0}
+    localMax={24}
+    globalMin={0}
+    globalMax={100}
+    colorPickerMode="default"
+    isPopoverOpen={true}
+    openPopover={() => {}}
+    closePopover={() => {}}
+    {...requiredProps}
+  />,
+  { childProps: ['valueInputProps'] }
+);
+
 test('renders EuiColorStopThumb', () => {
   const thumb = render(
     <EuiColorStopThumb

diff --git a/src/components/color_picker/color_stops/color_stop_thumb.tsx b/src/components/color_picker/color_stops/color_stop_thumb.tsx
@@ -8,6 +8,7 @@
 
 import React, {
   FunctionComponent,
+  CSSProperties,
   ReactChild,
   useEffect,
   useMemo,
@@ -65,6 +66,7 @@ interface EuiColorStopThumbProps extends CommonProps, ColorStop {
   closePopover: () => void;
   'data-index'?: string;
   'aria-valuetext'?: string;
+  style?: CSSProperties;
   valueInputProps?: Partial<EuiFieldNumberProps>;
 }
 
@@ -94,7 +96,9 @@ export const EuiColorStopThumb: FunctionComponent<EuiColorStopThumbProps> = ({
   closePopover,
   'data-index': dataIndex,
   'aria-valuetext': ariaValueText,
+  style,
   valueInputProps = {},
+  ...rest
 }) => {
   const background = useMemo(() => {
     const chromaColor = getChromaColor(color, colorPickerShowAlpha);
@@ -248,6 +252,7 @@ export const EuiColorStopThumb: FunctionComponent<EuiColorStopThumbProps> = ({
 
   return (
     <EuiPopover
+      {...rest}
       ref={popoverRef}
       className={classes}
       anchorClassName="euiColorStopPopover__anchor"
@@ -260,6 +265,7 @@ export const EuiColorStopThumb: FunctionComponent<EuiColorStopThumbProps> = ({
         numberInputRef ? undefined : 'euiColorStopPopover-isLoadingPanel'
       }
       style={{
+        ...style,
         left: `${getPositionFromStopFn(stop)}%`,
       }}
       button={

diff --git a/src/components/color_picker/color_stops/color_stops.test.tsx b/src/components/color_picker/color_stops/color_stops.test.tsx
@@ -17,6 +17,7 @@ import {
   keys,
 } from '../../../services';
 import { requiredProps, findTestSubject } from '../../../test';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 import { EuiFieldNumber } from '../../form/field_number';
 
 jest.mock('../../portal', () => ({
@@ -35,6 +36,17 @@ const colorStopsArray = [
 // - Tab to bypass thumbs (tabindex="-1" not respected)
 // - Drag to reposition thumb (we can't get real page position info)
 
+shouldRenderCustomStyles(
+  <EuiColorStops
+    label="Test"
+    onChange={onChange}
+    colorStops={colorStopsArray}
+    min={0}
+    max={100}
+    {...requiredProps}
+  />
+);
+
 test('renders EuiColorStops', () => {
   const colorStops = render(
     <EuiColorStops

diff --git a/src/components/color_picker/color_stops/color_stops.tsx b/src/components/color_picker/color_stops/color_stops.tsx
@@ -164,6 +164,7 @@ export const EuiColorStops: FunctionComponent<EuiColorStopsProps> = ({
   swatches,
   showAlpha = false,
   valueInputProps,
+  ...rest
 }) => {
   const sortedStops = useMemo(() => sortStops(colorStops), [colorStops]);
   const rangeMax: number = useMemo(() => {
@@ -494,7 +495,8 @@ export const EuiColorStops: FunctionComponent<EuiColorStopsProps> = ({
 
   return (
     <EuiRangeWrapper
-      data-test-subj="euiColorStops"
+      {...rest}
+      data-test-subj={classNames('euiColorStops', rest['data-test-subj'])}
       ref={setWrapperRef}
       className={classes}
       fullWidth={fullWidth}

diff --git a/...ate_picker/super_date_picker/date_popover/__snapshots__/date_popover_button.test.tsx.snap b/...ate_picker/super_date_picker/date_popover/__snapshots__/date_popover_button.test.tsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiSuperUpdateButton renders 1`] = `
+<div>
+  <div
+    class="euiPopover testClass1 testClass2 emotion-euiPopover"
+    data-test-subj="test subject string"
+  >
+    <div
+      class="euiPopover__anchor css-zih94u-render"
+    >
+      <button
+        class="euiDatePopoverButton euiDatePopoverButton--start"
+        data-test-subj="superDatePickerstartDatePopoverButton"
+        title=""
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.test.tsx b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.test.tsx
@@ -0,0 +1,49 @@
+/*
+ * 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';
+import { shouldRenderCustomStyles } from '../../../../test/internal';
+
+import { EuiDatePopoverButton } from './date_popover_button';
+
+const noop = () => {};
+
+describe('EuiSuperUpdateButton', () => {
+  const props = {
+    ...requiredProps,
+    value: '',
+    dateFormat: '',
+    timeFormat: '',
+    timeOptions: {
+      timeTenseOptions: [],
+      timeUnitsOptions: [],
+      relativeOptions: [],
+      relativeRoundingLabels: {} as any,
+      refreshUnitsOptions: [],
+      commonDurationRanges: [],
+    },
+    onChange: noop,
+    onPopoverClose: noop,
+    onPopoverToggle: noop,
+    position: 'start' as const,
+    isOpen: false,
+  };
+
+  shouldRenderCustomStyles(<EuiDatePopoverButton {...props} />, {
+    childProps: ['buttonProps'],
+  });
+
+  it('renders', () => {
+    const { container } = render(<EuiDatePopoverButton {...props} />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/header/header.test.tsx b/src/components/header/header.test.tsx
@@ -9,10 +9,20 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiHeader } from './header';
 
 describe('EuiHeader', () => {
+  shouldRenderCustomStyles(<EuiHeader />);
+  shouldRenderCustomStyles(
+    <EuiHeader sections={[{ breadcrumbs: [{ text: 'test' }] }]} />,
+    {
+      childProps: ['sections[0].breadcrumbProps'],
+      skipParentTest: true,
+    }
+  );
+
   test('is rendered', () => {
     const component = render(<EuiHeader {...requiredProps} />);
 

diff --git a/src/components/header/header_links/header_links.test.tsx b/src/components/header/header_links/header_links.test.tsx
@@ -9,10 +9,15 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../../test';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiHeaderLinks, GUTTER_SIZES } from './header_links';
 
 describe('EuiHeaderLinks', () => {
+  shouldRenderCustomStyles(<EuiHeaderLinks popoverBreakpoints="all" />, {
+    childProps: ['popoverButtonProps', 'popoverProps'],
+  });
+
   test('is rendered', () => {
     const component = render(<EuiHeaderLinks {...requiredProps} />);
 

diff --git a/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap b/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiResizablePanel renders 1`] = `
+<div>
+  <div
+    class="euiResizablePanel euiResizablePanel--middle"
+    id="resizable-panel_generated-id"
+    style="width: 100%; height: 0%;"
+  >
+    <div
+      aria-label="aria-label"
+      class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiResizablePanel__content euiResizablePanel__content--scrollable testClass1 testClass2 emotion-euiPanel-grow-none-m-transparent"
+      data-test-subj="test subject string"
+    >
+      Content
+    </div>
+  </div>
+</div>
+`;