diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Additional_Controls.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Additional_Controls.png new file mode 100644 index 00000000000..1626f0bfd50 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Additional_Controls.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Column_Selector.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Column_Selector.png new file mode 100644 index 00000000000..c5b56b2b0c5 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Column_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Column_Sorting.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Column_Sorting.png new file mode 100644 index 00000000000..2217b20d215 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Column_Sorting.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Display_Selector.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Display_Selector.png new file mode 100644 index 00000000000..5fda52e91cc Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Display_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Full_Screen_Toggle.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Full_Screen_Toggle.png new file mode 100644 index 00000000000..9e95900d542 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Full_Screen_Toggle.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Keyboard_Shortcuts.png new file mode 100644 index 00000000000..6ef1cabff08 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Keyboard_Shortcuts.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Render_Custom_Toolbar.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Render_Custom_Toolbar.png new file mode 100644 index 00000000000..639e1b020ab Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Toolbar_Controls_Render_Custom_Toolbar.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Additional_Controls.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Additional_Controls.png new file mode 100644 index 00000000000..a36901faeaa Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Additional_Controls.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Column_Selector.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Column_Selector.png new file mode 100644 index 00000000000..2684b934912 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Column_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Column_Sorting.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Column_Sorting.png new file mode 100644 index 00000000000..fe992226be5 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Column_Sorting.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Display_Selector.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Display_Selector.png new file mode 100644 index 00000000000..31721b52a4b Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Display_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Full_Screen_Toggle.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Full_Screen_Toggle.png new file mode 100644 index 00000000000..6425b7e09f7 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Full_Screen_Toggle.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Keyboard_Shortcuts.png new file mode 100644 index 00000000000..24a4dd7ad71 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Keyboard_Shortcuts.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Render_Custom_Toolbar.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Render_Custom_Toolbar.png new file mode 100644 index 00000000000..b05d01c489b Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Toolbar_Controls_Render_Custom_Toolbar.png differ diff --git a/packages/eui/.storybook/test.ts b/packages/eui/.storybook/test.ts new file mode 100644 index 00000000000..0cc66d08a92 --- /dev/null +++ b/packages/eui/.storybook/test.ts @@ -0,0 +1,46 @@ +/* + * 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 { queries, within, waitFor, fireEvent, expect } from '@storybook/test'; +import * as dataTestSubjQueries from '../src/test/rtl/data_test_subj_queries'; + +/** + * Custom Storybook within util with EUI query helpers + * + additional chained async/waitFor component utils + * + * @see https://storybook.js.org/docs/writing-stories/play-function#writing-stories-with-the-play-function + * @see https://testing-library.com/docs/dom-testing-library/api-within/ + */ +const customWithin = (canvasElement: HTMLElement) => { + const canvas = within( + canvasElement, + { ...queries, ...dataTestSubjQueries } + ); + + return { + ...canvas, + + /** + * 1. Loki doesn't like userEvent, only fireEvent + * 2. Storybook fires fireEvents too early (esp. on page load), so we add a waitFor + */ + waitForAndClick: async (testSubject: string) => { + await waitFor(() => + expect(canvas.getByTestSubject(testSubject)).toBeInTheDocument() + ); + await fireEvent.click(canvas.getByTestSubject(testSubject)); + }, + + waitForEuiPopoverVisible: async () => + await waitFor(() => + expect(canvasElement.querySelector('[data-popover-open]')).toBeVisible() + ), + }; +}; + +export { customWithin as within }; diff --git a/packages/eui/changelogs/upcoming/7997.md b/packages/eui/changelogs/upcoming/7997.md new file mode 100644 index 00000000000..d215215e21a --- /dev/null +++ b/packages/eui/changelogs/upcoming/7997.md @@ -0,0 +1,4 @@ +**CSS-in-JS conversions** + +- Converted `EuiDataGrid`'s toolbar controls to Emotion + - Removed `$euiDataGridPopoverMaxHeight` diff --git a/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index 6e9976b6c13..c094a70d194 100644 --- a/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap +++ b/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap @@ -465,18 +465,18 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = ` data-test-subj="test subject string" >
- -
-`; - -exports[`useDataGridColumnSelector columnSelector [React 16] renders a toolbar button/popover allowing users to set column visibility and order 2`] = ` - @@ -301,7 +289,8 @@ exports[`EuiDataGridColumnSortingDraggable [React 18] renders an EuiDraggable co role="group" >

-
- -
+
+ +
+
diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap index 64dd49abd84..7392fd625cd 100644 --- a/packages/eui/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap +++ b/packages/eui/src/components/datagrid/controls/__snapshots__/data_grid_toolbar_control.test.tsx.snap @@ -3,7 +3,7 @@ exports[`euiDataGridToolbarControl passes props to the underlying EuiButtonEmpty 1`] = ` + +
+
+
- - - - +
- - - - + +
+
+ `; diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap index 1632f2beee4..7e0d365cc01 100644 --- a/packages/eui/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap +++ b/packages/eui/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap @@ -45,7 +45,7 @@ exports[`useDataGridKeyboardShortcuts [React 16] returns a popover containing a aria-describedby="generated-id" aria-live="off" aria-modal="true" - class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom" + class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-light-isOpen-hasTransform-bottom" data-autofocus="true" data-popover-open="true" data-popover-panel="true" @@ -66,7 +66,7 @@ exports[`useDataGridKeyboardShortcuts [React 16] returns a popover containing a

* + * { - margin-left: $euiSizeS; - } -} - -.euiDataGrid__leftControls { - // Ensure there's sufficient spacing between each toolbar button/popover - > * + * { - margin-left: $euiSizeXS / 2; - } -} - -@include euiDataGridStyles(bordersNone) { - .euiDataGrid__controls { - border: none; - background: $euiColorEmptyShade; - } -} - -@include euiDataGridStyles(bordersHorizontal) { - .euiDataGrid__controls { - border-right: none; - border-left: none; - border-top: none; - background: $euiColorEmptyShade; - } -} - -.euiDataGrid__controlScroll { - @include euiYScroll; - max-height: $euiDataGridPopoverMaxHeight; - padding: $euiSizeS; - margin: -$euiSizeS; // Offset against the panel to make the scrollbar flush scrollbars -} diff --git a/packages/eui/src/components/datagrid/controls/column_selector.styles.ts b/packages/eui/src/components/datagrid/controls/column_selector.styles.ts new file mode 100644 index 00000000000..99f4c070905 --- /dev/null +++ b/packages/eui/src/components/datagrid/controls/column_selector.styles.ts @@ -0,0 +1,38 @@ +/* + * 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 { css } from '@emotion/react'; + +import { UseEuiTheme } from '../../../services'; +import { euiYScroll, logicalCSS, mathWithUnits } from '../../../global_styling'; +import { euiShadowLarge } from '../../../themes'; + +export const euiDataGridColumnSelectorStyles = ( + euiThemeContext: UseEuiTheme +) => { + const { euiTheme } = euiThemeContext; + + const maxStaticHeight = mathWithUnits(euiTheme.size.base, (x) => x * 25); + const maxResponsiveHeight = `min(${maxStaticHeight}, 50vh)`; + + return { + euiDataGridColumnSelector: css` + ${euiYScroll(euiThemeContext)} + ${logicalCSS('max-height', maxResponsiveHeight)} + padding: ${euiTheme.size.s}; + `, + euiDataGridColumnSelector__item: css` + padding: ${euiTheme.size.xs}; + + &.euiDataGridColumnSelector__item-isDragging { + ${euiShadowLarge(euiThemeContext)} + background-color: ${euiTheme.colors.emptyShade}; + } + `, + }; +}; diff --git a/packages/eui/src/components/datagrid/controls/column_selector.test.tsx b/packages/eui/src/components/datagrid/controls/column_selector.test.tsx index 075c38621bd..75ec077a7fa 100644 --- a/packages/eui/src/components/datagrid/controls/column_selector.test.tsx +++ b/packages/eui/src/components/datagrid/controls/column_selector.test.tsx @@ -6,125 +6,110 @@ * Side Public License, v 1. */ -import React from 'react'; -import { act } from '@testing-library/react'; -import { shallow, mount, ReactWrapper } from 'enzyme'; -import { findTestSubject } from '../../../test'; -import { testByReactVersion } from '../../../test/internal'; +import React, { useState } from 'react'; +import { fireEvent } from '@testing-library/react'; +import { render, screen, waitForEuiPopoverOpen } from '../../../test/rtl'; +import { testOnReactVersion } from '../../../test/internal'; import { EuiDataGridToolBarVisibilityOptions } from '../data_grid_types'; import { useDataGridColumnSelector } from './column_selector'; describe('useDataGridColumnSelector', () => { - const availableColumns = [{ id: 'columnA' }, { id: 'columnB' }]; - const setVisibleColumns = jest.fn(); - const defaultVisibleColumns = ['columnA', 'columnB']; - const columnVisibility = { - setVisibleColumns, - visibleColumns: defaultVisibleColumns, + const requiredProps = { + availableColumns: [{ id: 'columnA' }, { id: 'columnB' }], + visibleColumns: ['columnA', 'columnB'], + showColumnSelector: { + allowHide: true, + allowReorder: true, + } as EuiDataGridToolBarVisibilityOptions['showColumnSelector'], + displayValues: {}, + }; + + // Hooks can only be called inside function components + const MockComponent = ({ + renderedReturn = 'columnSelector', + availableColumns = requiredProps.availableColumns, + visibleColumns = requiredProps.visibleColumns, + showColumnSelector = requiredProps.showColumnSelector, + displayValues = requiredProps.displayValues, + children = null as any, + }) => { + const [_visibleColumns, _setVisibleColumns] = useState(visibleColumns); + + const [ + columnSelector, + orderedVisibleColumns, + setVisibleColumns, + switchColumnPos, + ] = useDataGridColumnSelector( + availableColumns, + { + visibleColumns: _visibleColumns, + setVisibleColumns: _setVisibleColumns, + }, + showColumnSelector, + displayValues + ); + + switch (renderedReturn) { + case 'switchColumnPos': + case 'setVisibleColumns': + return children({ + switchColumnPos, + setVisibleColumns, + orderedVisibleColumns, + }); + case 'orderedVisibleColumns': + return <>{JSON.stringify(orderedVisibleColumns)}; + case 'columnSelector': + default: + return <>{columnSelector}; + } }; - setVisibleColumns.mockImplementation( - (newColumns) => (columnVisibility.visibleColumns = newColumns) - ); - const showColumnSelector = { - allowHide: false, - allowReorder: false, - } as EuiDataGridToolBarVisibilityOptions['showColumnSelector']; - const displayValues = {}; - - const requiredArgs = [ - availableColumns, - columnVisibility, - showColumnSelector, - displayValues, - ] as const; - - beforeEach(() => { - jest.clearAllMocks(); - columnVisibility.visibleColumns = defaultVisibleColumns; - }); describe('columnSelector', () => { - // Hooks can only be called inside function components - const MockComponent = ({ - availableColumns = requiredArgs[0], - columnVisibility = requiredArgs[1], - showColumnSelector = requiredArgs[2], - displayValues = requiredArgs[3], - }) => { - const [columnSelector] = useDataGridColumnSelector( - availableColumns, - columnVisibility, - showColumnSelector, - displayValues - ); - return <>{columnSelector}; - }; - const openPopover = (component: ReactWrapper) => { - findTestSubject(component, 'dataGridColumnSelectorButton').simulate( - 'click' - ); - }; - const closePopover = (component: ReactWrapper) => { - const closeFn = component - .find('[data-test-subj="dataGridColumnSelectorPopover"]') - .first() - .prop('closePopover') as Function; - act(() => closeFn()); - }; - const forceUpdate = (component: ReactWrapper) => { - component.setProps({}); + const openPopover = () => { + fireEvent.click(screen.getByTestSubject('dataGridColumnSelectorButton')); + waitForEuiPopoverOpen(); }; - testByReactVersion( + testOnReactVersion(['18'])( 'renders a toolbar button/popover allowing users to set column visibility and order', () => { - const component = mount(); - openPopover(component); - expect(component.render()).toMatchSnapshot(); - expect( - component.find('[data-popover-panel]').first().render() - ).toMatchSnapshot(); - closePopover(component); + const { baseElement } = render( + + ); + openPopover(); + expect(baseElement).toMatchSnapshot(); } ); it('does not render if all valid sub-options are disabled', () => { - const component = shallow( + const { container } = render( ); - expect(component.text()).toEqual(''); + expect(container).toBeEmptyDOMElement(); }); describe('column filtering', () => { const showColumnSelector = { allowHide: true, allowReorder: true }; it('renders a searchbar that filters displayed columns', () => { - const component = mount( + const { getByTestSubject, getAllByRole } = render( ); - openPopover(component); + openPopover(); - expect( - findTestSubject(component, 'dataGridColumnSelectorColumnItem', '^=') - ).toHaveLength(2); + expect(getAllByRole('switch')).toHaveLength(2); - const searchInput = findTestSubject( - component, - 'dataGridColumnSelectorSearch' - ); - (searchInput.getDOMNode() as HTMLInputElement).value = 'A'; - searchInput.simulate('change'); + fireEvent.change(getByTestSubject('dataGridColumnSelectorSearch'), { + target: { value: 'A' }, + }); - expect( - findTestSubject(component, 'dataGridColumnSelectorColumnItem', '^=') - ).toHaveLength(1); + expect(getAllByRole('switch')).toHaveLength(1); }); }); @@ -132,176 +117,170 @@ describe('useDataGridColumnSelector', () => { const showColumnSelector = { allowHide: false, allowReorder: true }; it('renders draggable handles', () => { - const component = mount( - - ); - openPopover(component); + render(); + openPopover(); - expect(component.find('EuiDraggable')).toHaveLength(2); - expect(component.find('EuiIcon[type="grab"]')).toHaveLength(2); + expect( + document.querySelectorAll('[data-euiicon-type="grab"]') + ).toHaveLength(2); }); it('calls setColumns on drag end', () => { - const component = mount( + const { getByTestSubject, getAllByLabelText } = render( ); - openPopover(component); - - const getFirstColumn = () => component.find('EuiDraggable').first(); - expect(getFirstColumn().prop('draggableId')).toEqual('columnA'); - - act(() => { - (component.find('EuiDragDropContext').prop('onDragEnd') as Function)({ - source: { index: 1 }, - destination: { index: 0 }, - }); - }); - forceUpdate(component); - - expect(getFirstColumn().prop('draggableId')).toEqual('columnB'); - }); - - it('handles invalid drags outside the valid droppable area', () => { - const component = mount( - + fireEvent.click(getByTestSubject('dataGridColumnSelectorButton')); + waitForEuiPopoverOpen(); + const getDragHandles = () => getAllByLabelText('Drag handle'); + + const columnA = getDragHandles()[0]!; + expect(columnA).toHaveAttribute( + 'data-rfd-drag-handle-draggable-id', + 'columnA' ); - openPopover(component); - act(() => { - (component.find('EuiDragDropContext').prop('onDragEnd') as Function)({ - source: { index: 0 }, - destination: null, - }); - }); - forceUpdate(component); + // our react dnd library listens for the `keyCode` property in keyboard events, not `key` + const dndKeyCodes = { space: 32, arrowDown: 40 }; + fireEvent.keyDown(columnA, { keyCode: dndKeyCodes.space }); + fireEvent.keyDown(columnA, { keyCode: dndKeyCodes.arrowDown }); + fireEvent.keyDown(columnA, { keyCode: dndKeyCodes.space }); - expect( - component.find('EuiDraggable').first().prop('draggableId') - ).toEqual('columnA'); + expect(getDragHandles()[0]).toHaveAttribute( + 'data-rfd-drag-handle-draggable-id', + 'columnB' + ); }); }); describe('column visibility', () => { const showColumnSelector = { allowHide: true, allowReorder: false }; - const getButtonText = (component: ReactWrapper) => { - return component.find('span.euiDataGridToolbarControl__text').text(); + const getButtonText = () => { + return document.querySelector('.euiDataGridToolbarControl__text') + ?.textContent; }; - const getBadgeText = (component: ReactWrapper) => { - return component.find('span.euiDataGridToolbarControl__badge').text(); + const getBadgeText = () => { + return document.querySelector('.euiDataGridToolbarControl__badge') + ?.textContent; }; it('shows the number of columns hidden as the toolbar button text', () => { - const component = mount( + render( ); - expect(getButtonText(component)).toEqual('Columns'); - expect(getBadgeText(component)).toEqual('0/2'); + expect(getButtonText()).toEqual('Columns'); + expect(getBadgeText()).toEqual('0/2'); }); it('toggles column visibility on switch interaction', () => { - const component = mount( + const { getByTestSubject } = render( ); - openPopover(component); + openPopover(); + expect(getBadgeText()).toEqual('2'); - findTestSubject( - component, - 'dataGridColumnSelectorToggleColumnVisibility-columnB' - ).simulate('click'); - forceUpdate(component); - - expect(getBadgeText(component)).toEqual('1/2'); - - findTestSubject( - component, - 'dataGridColumnSelectorToggleColumnVisibility-columnB' - ).simulate('click'); - forceUpdate(component); + fireEvent.click( + getByTestSubject( + 'dataGridColumnSelectorToggleColumnVisibility-columnB' + ) + ); + expect(getBadgeText()).toEqual('1/2'); - expect(getBadgeText(component)).toEqual('2'); + fireEvent.click( + getByTestSubject( + 'dataGridColumnSelectorToggleColumnVisibility-columnB' + ) + ); + expect(getBadgeText()).toEqual('2'); }); it('toggles all column visibility with the show/hide all buttons', () => { - const component = mount( + const { getByTestSubject } = render( ); - openPopover(component); + openPopover(); - findTestSubject( - component, - 'dataGridColumnSelectorHideAllButton' - ).simulate('click'); - forceUpdate(component); - - expect(getBadgeText(component)).toEqual('0/2'); - - findTestSubject( - component, - 'dataGridColumnSelectorShowAllButton' - ).simulate('click'); - forceUpdate(component); + fireEvent.click( + getByTestSubject('dataGridColumnSelectorHideAllButton') + ); + expect(getBadgeText()).toEqual('0/2'); - expect(getBadgeText(component)).toEqual('2'); + fireEvent.click( + getByTestSubject('dataGridColumnSelectorShowAllButton') + ); + expect(getBadgeText()).toEqual('2'); }); }); }); describe('orderedVisibleColumns', () => { it('returns an array of ordered visible columns', () => { - const MockComponent = () => { - const [, orderedVisibleColumns] = useDataGridColumnSelector( - ...requiredArgs - ); - return <>{JSON.stringify(orderedVisibleColumns)}; - }; - const component = mount(); + const { container } = render( + + ); - expect(component).toMatchInlineSnapshot(` - - [{"id":"columnA"},{"id":"columnB"}] - - `); + expect(container.firstChild).toMatchInlineSnapshot( + `[{"id":"columnA"},{"id":"columnB"}]` + ); }); }); - describe('setVisibleColumns', () => { + describe('setVisibleColumns & switchColumnPos', () => { + const RenderProp = ({ + switchColumnPos, + setVisibleColumns, + orderedVisibleColumns, + }: any) => { + return ( + <> + {JSON.stringify(orderedVisibleColumns)} +