diff --git a/cypress/support/setup/mount.js b/cypress/support/setup/mount.js deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/cypress/support/setup/mount.tsx b/cypress/support/setup/mount.tsx index 3cc6aaaa9d6..a37ef2555af 100644 --- a/cypress/support/setup/mount.tsx +++ b/cypress/support/setup/mount.tsx @@ -7,7 +7,7 @@ */ import React, { ReactNode } from 'react'; -import { EuiProvider } from '../../../src'; +import { EuiProvider, EuiProviderProps } from '../../../src'; import type { mount } from '@cypress/react18'; // Pick cypress mount function based on which React version is currently being @@ -20,8 +20,16 @@ if (process.env.REACT_VERSION === '18') { cypressMount = require('@cypress/react').mount; } -const mountCommand = (children: ReactNode): ReturnType => { - return cypressMount({children}); +export interface MountOptions { + providerProps?: Partial>; +} + +const mountCommand = ( + children: ReactNode, + options: MountOptions = {} +): ReturnType => { + const { providerProps } = options; + return cypressMount({children}); }; // Export only the type to not confuse code-completion tools diff --git a/scripts/jest/config.js b/scripts/jest/config.js index 7037b61de39..3174d93b6cb 100644 --- a/scripts/jest/config.js +++ b/scripts/jest/config.js @@ -61,6 +61,7 @@ if (['16', '17'].includes(reactVersion)) { '^@testing-library/react((\\\\/.*)?)$' ] = `@testing-library/react-16-17$1`; config.moduleNameMapper['^react((\\/.*)?)$'] = `react-${reactVersion}$1`; + config.moduleNameMapper[ '^react-dom((\\/.*)?)$' ] = `react-dom-${reactVersion}$1`; diff --git a/src-docs/src/views/datagrid/advanced/custom_renderer.tsx b/src-docs/src/views/datagrid/advanced/custom_renderer.tsx index 56c37a1a74c..142df63ec57 100644 --- a/src-docs/src/views/datagrid/advanced/custom_renderer.tsx +++ b/src-docs/src/views/datagrid/advanced/custom_renderer.tsx @@ -169,15 +169,22 @@ export default () => { // Pagination const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 }); - const onChangePage = useCallback((pageIndex) => { - setPagination((pagination) => ({ ...pagination, pageIndex })); - }, []); - const onChangePageSize = useCallback((pageSize) => { + const onChangePage = useCallback( + (pageIndex) => { + setPagination((pagination) => ({ ...pagination, pageIndex })); + }, + [] + ); + const onChangePageSize = useCallback< + EuiDataGridPaginationProps['onChangeItemsPerPage'] + >((pageSize) => { setPagination((pagination) => ({ ...pagination, pageSize })); }, []); // Sorting - const [sortingColumns, setSortingColumns] = useState([]); + const [sortingColumns, setSortingColumns] = useState< + EuiDataGridColumnSortingConfig[] + >([]); const onSort = useCallback((sortingColumns) => { setSortingColumns(sortingColumns); }, []); diff --git a/src-docs/src/views/datagrid/styling/row_height_fixed.tsx b/src-docs/src/views/datagrid/styling/row_height_fixed.tsx index f2a5ebbed9d..ba96749e2d0 100644 --- a/src-docs/src/views/datagrid/styling/row_height_fixed.tsx +++ b/src-docs/src/views/datagrid/styling/row_height_fixed.tsx @@ -149,7 +149,9 @@ export default () => { const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 }); // Sorting - const [sortingColumns, setSortingColumns] = useState([]); + const [sortingColumns, setSortingColumns] = useState< + EuiDataGridColumnSortingConfig[] + >([]); const onSort = useCallback( (sortingColumns) => { setSortingColumns(sortingColumns); @@ -157,7 +159,9 @@ export default () => { [setSortingColumns] ); - const onChangeItemsPerPage = useCallback( + const onChangeItemsPerPage = useCallback< + EuiDataGridPaginationProps['onChangeItemsPerPage'] + >( (pageSize) => setPagination((pagination) => ({ ...pagination, diff --git a/src-docs/src/views/theme/color_mode/inverse.tsx b/src-docs/src/views/theme/color_mode/inverse.tsx index ad636c3499f..30c6fb7992e 100644 --- a/src-docs/src/views/theme/color_mode/inverse.tsx +++ b/src-docs/src/views/theme/color_mode/inverse.tsx @@ -1,8 +1,4 @@ -import React, { - useState, - FC, - PropsWithChildren, -} from 'react'; +import React, { useState, FC, PropsWithChildren } from 'react'; import { EuiThemeProvider, useEuiTheme, diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index 60c773239b2..c54793b46a2 100644 --- a/src-docs/src/views/theme/typography/_typography_js.tsx +++ b/src-docs/src/views/theme/typography/_typography_js.tsx @@ -218,7 +218,7 @@ export const FontScaleJS = () => { }; interface FontScaleDetails { - id: typeof EuiThemeFontScales[number]; + id: (typeof EuiThemeFontScales)[number]; value: string; size: string; lineHeight: string; diff --git a/src-docs/src/views/theme/typography/_typography_sass.tsx b/src-docs/src/views/theme/typography/_typography_sass.tsx index abb08a2263d..2926628c860 100644 --- a/src-docs/src/views/theme/typography/_typography_sass.tsx +++ b/src-docs/src/views/theme/typography/_typography_sass.tsx @@ -166,7 +166,7 @@ export const FontWeightSass: FunctionComponent = ({ }; interface FontWeightDetails { - id: typeof euiFontWeights[number]; + id: (typeof euiFontWeights)[number]; token: string; value: number; } @@ -250,7 +250,7 @@ export const FontScaleSass = () => { }; interface FontSizesDetails { - id: typeof euiFontSizes[number]; + id: (typeof euiFontSizes)[number]; token: string; mixin: string; value: string; diff --git a/src/components/breadcrumbs/breadcrumb.tsx b/src/components/breadcrumbs/breadcrumb.tsx index 6f97b33190f..c54172e336b 100644 --- a/src/components/breadcrumbs/breadcrumb.tsx +++ b/src/components/breadcrumbs/breadcrumb.tsx @@ -58,7 +58,8 @@ export type EuiBreadcrumbProps = Omit< }; // Used internally only by the parent EuiBreadcrumbs -type _EuiBreadcrumbProps = PropsWithChildren & Pick & { +type _EuiBreadcrumbProps = PropsWithChildren & + Pick & { type: 'page' | 'application'; isFirstBreadcrumb?: boolean; isLastBreadcrumb?: boolean; diff --git a/src/components/code/utils.test.tsx b/src/components/code/utils.test.tsx index 8cbd01f4f82..02afbf3cce3 100644 --- a/src/components/code/utils.test.tsx +++ b/src/components/code/utils.test.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { renderHook } from '@testing-library/react-hooks'; +import { renderHook } from '../../test/rtl'; import { useEuiTheme } from '../../services'; import { diff --git a/src/components/combo_box/combo_box.test.tsx b/src/components/combo_box/combo_box.test.tsx index 989eed56b64..eb2bf1624a2 100644 --- a/src/components/combo_box/combo_box.test.tsx +++ b/src/components/combo_box/combo_box.test.tsx @@ -7,10 +7,9 @@ */ import React, { ReactNode } from 'react'; -import { fireEvent } from '@testing-library/react'; +import { act, fireEvent } from '@testing-library/react'; import { shallow, mount } from 'enzyme'; import { render } from '../../test/rtl'; -import { act } from '@testing-library/react'; import { requiredProps, findTestSubject, @@ -139,7 +138,10 @@ describe('props', () => { test('renders in the options dropdown', () => { const component = mount(); - component.setState({ isListOpen: true }); + + act(() => { + component.setState({ isListOpen: true }); + }); const dropdown = component.find( 'div[data-test-subj="comboBoxOptionsList"]' diff --git a/src/components/datagrid/body/data_grid_cell_popover.test.tsx b/src/components/datagrid/body/data_grid_cell_popover.test.tsx index def6ced9387..f9272409669 100644 --- a/src/components/datagrid/body/data_grid_cell_popover.test.tsx +++ b/src/components/datagrid/body/data_grid_cell_popover.test.tsx @@ -7,7 +7,7 @@ */ import React from 'react'; -import { renderHook, act } from '@testing-library/react-hooks'; +import { renderHook, renderHookAct } from '../../../test/rtl'; import { shallow } from 'enzyme'; import { keys } from '../../../services'; @@ -21,7 +21,7 @@ describe('useCellPopover', () => { const { result } = renderHook(useCellPopover); expect(result.current.cellPopoverContext.popoverIsOpen).toEqual(false); - act(() => + renderHookAct(() => result.current.cellPopoverContext.openCellPopover({ rowIndex: 0, colIndex: 0, @@ -34,7 +34,7 @@ describe('useCellPopover', () => { const { result } = renderHook(useCellPopover); expect(result.current.cellPopover).toBeFalsy(); - act(() => { + renderHookAct(() => { result.current.cellPopoverContext.openCellPopover({ rowIndex: 0, colIndex: 0, @@ -45,7 +45,7 @@ describe('useCellPopover', () => { }); expect(result.current.cellPopover).not.toBeFalsy(); - act(() => { + renderHookAct(() => { result.current.cellPopoverContext.openCellPopover({ rowIndex: 0, colIndex: 0, @@ -59,7 +59,7 @@ describe('useCellPopover', () => { it('sets popoverIsOpen state to false', () => { const { result } = renderHook(useCellPopover); - act(() => + renderHookAct(() => result.current.cellPopoverContext.openCellPopover({ rowIndex: 0, colIndex: 0, @@ -67,7 +67,7 @@ describe('useCellPopover', () => { ); expect(result.current.cellPopoverContext.popoverIsOpen).toEqual(true); - act(() => result.current.cellPopoverContext.closeCellPopover()); + renderHookAct(() => result.current.cellPopoverContext.closeCellPopover()); expect(result.current.cellPopoverContext.popoverIsOpen).toEqual(false); }); }); @@ -80,7 +80,7 @@ describe('useCellPopover', () => { const populateCellPopover = ( cellPopoverContext: DataGridCellPopoverContextShape ) => { - act(() => { + renderHookAct(() => { cellPopoverContext.openCellPopover({ colIndex: 0, rowIndex: 0 }); cellPopoverContext.setPopoverAnchor(mockPopoverAnchor); cellPopoverContext.setPopoverContent(mockPopoverContent); @@ -149,7 +149,7 @@ describe('useCellPopover', () => { preventDefault: jest.fn(), stopPropagation: jest.fn(), }; - act(() => { + renderHookAct(() => { component.find('EuiWrappingPopover').simulate('keyDown', event); }); expect(event.preventDefault).toHaveBeenCalled(); @@ -168,7 +168,7 @@ describe('useCellPopover', () => { preventDefault: jest.fn(), stopPropagation: jest.fn(), }; - act(() => { + renderHookAct(() => { component.find('EuiWrappingPopover').simulate('keyDown', event); }); expect(event.preventDefault).toHaveBeenCalled(); @@ -187,7 +187,7 @@ describe('useCellPopover', () => { preventDefault: jest.fn(), stopPropagation: jest.fn(), }; - act(() => { + renderHookAct(() => { component.find('EuiWrappingPopover').simulate('keyDown', event); }); expect(event.preventDefault).not.toHaveBeenCalled(); diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap index 1d1a40eb83d..0b4a2dc68f5 100644 --- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap @@ -1,5 +1,295 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`useDataGridColumnSorting columnSorting [React 17] renders a toolbar button/popover allowing users to set column sorting 1`] = ` +
+
+ +
+
+`; + +exports[`useDataGridColumnSorting columnSorting [React 17] renders a toolbar button/popover allowing users to set column sorting 2`] = ` +