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 index b749caeeccd..cb4b94140e5 100644 --- 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`] = `

({ 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( + {}} + closePopover={() => {}} + {...requiredProps} + />, + { childProps: ['valueInputProps'] } +); + test('renders EuiColorStopThumb', () => { const thumb = render( void; 'data-index'?: string; 'aria-valuetext'?: string; + style?: CSSProperties; valueInputProps?: Partial; } @@ -94,7 +96,9 @@ export const EuiColorStopThumb: FunctionComponent = ({ 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 = ({ return ( = ({ 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 index 156d79def3d..96f4646fb15 100644 --- 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( + +); + test('renders EuiColorStops', () => { const colorStops = render( = ({ swatches, showAlpha = false, valueInputProps, + ...rest }) => { const sortedStops = useMemo(() => sortStops(colorStops), [colorStops]); const rangeMax: number = useMemo(() => { @@ -494,7 +495,8 @@ export const EuiColorStops: FunctionComponent = ({ return ( +

+
+
+
+
+`; 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 new file mode 100644 index 00000000000..9db20bb5a7c --- /dev/null +++ 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(, { + childProps: ['buttonProps'], + }); + + it('renders', () => { + const { container } = render(); + + expect(container).toMatchSnapshot(); + }); +}); diff --git a/src/components/header/header.test.tsx b/src/components/header/header.test.tsx index 798ada77d5f..24a9a60387f 100644 --- 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(); + shouldRenderCustomStyles( + , + { + childProps: ['sections[0].breadcrumbProps'], + skipParentTest: true, + } + ); + test('is rendered', () => { const component = render(); diff --git a/src/components/header/header_links/header_links.test.tsx b/src/components/header/header_links/header_links.test.tsx index 74a3736595b..0764f87d6cf 100644 --- 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(, { + childProps: ['popoverButtonProps', 'popoverProps'], + }); + test('is rendered', () => { const component = render(); diff --git a/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap b/src/components/resizable_container/__snapshots__/resizable_panel.test.tsx.snap new file mode 100644 index 00000000000..af9ae37832e --- /dev/null +++ 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`] = ` +
+
+
+ Content +
+
+
+`; diff --git a/src/components/resizable_container/resizable_panel.test.tsx b/src/components/resizable_container/resizable_panel.test.tsx new file mode 100644 index 00000000000..5e9aaaeee78 --- /dev/null +++ b/src/components/resizable_container/resizable_panel.test.tsx @@ -0,0 +1,47 @@ +/* + * 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, customStyles } from '../../test/internal'; + +import { EuiResizableContainerContextProvider } from './context'; +import { EuiResizablePanel } from './resizable_panel'; + +describe('EuiResizablePanel', () => { + const mockRegistry = { panels: {}, resizers: {} }; + + // Note: We have to pass `customStyles` manually to the custom style tests due to the required context wrapper + shouldRenderCustomStyles( + + Test + + ); + shouldRenderCustomStyles( + + + Test + + , + { + childProps: ['wrapperProps'], // See above note - this isn't doing anything but triggering a test + skipParentTest: true, + } + ); + + it('renders', () => { + const { container } = render( + + Content + + ); + + expect(container).toMatchSnapshot(); + }); +}); diff --git a/src/components/resizable_container/resizable_panel.tsx b/src/components/resizable_container/resizable_panel.tsx index dab97c2104d..bc4b8854436 100644 --- a/src/components/resizable_container/resizable_panel.tsx +++ b/src/components/resizable_container/resizable_panel.tsx @@ -167,7 +167,6 @@ export const EuiResizablePanel: FunctionComponent = ({ initialSize, minSize = '0px', // Actual minSize is calculated in `./helpers.ts` scrollable = true, - style = {}, mode, registration, onToggleCollapsed, @@ -276,7 +275,7 @@ export const EuiResizablePanel: FunctionComponent = ({ } const styles = { - ...style, + ...wrapperProps?.style, ...dimensions, }; diff --git a/src/test/internal/render_custom_styles.tsx b/src/test/internal/render_custom_styles.tsx index 58600d042d2..553d8e11b40 100644 --- a/src/test/internal/render_custom_styles.tsx +++ b/src/test/internal/render_custom_styles.tsx @@ -11,7 +11,7 @@ import { render } from '@testing-library/react'; import { css } from '@emotion/react'; import { get, set } from 'lodash'; -const customStyles = { +export const customStyles = { className: 'hello', css: css` color: red; diff --git a/upcoming_changelogs/6255.md b/upcoming_changelogs/6255.md new file mode 100644 index 00000000000..22155f6bb45 --- /dev/null +++ b/upcoming_changelogs/6255.md @@ -0,0 +1,4 @@ +**Bug fixes** + +- Fixed `EuiColorStops` not correctly merging in passed `data-test-subj`s, `style`s, or `...rest` +- Fixed `EuiResizablePanel` incorrectly passing `style` to the wrapper instead of the panel. Use `wrapperProps.style` to pass styles to the wrapper.