Fix some UT #2

Talend · Nov 15, 2023 · 4834b8f · 4834b8f
1 parent 8872f3e
commit 4834b8f
Show file tree

Hide file tree

Showing 40 changed files with 426 additions and 262 deletions.
diff --git a/packages/components/src/Actions/ActionButton/ActionButton.test.js b/packages/components/src/Actions/ActionButton/ActionButton.test.js
@@ -45,14 +45,16 @@ describe('Action', () => {
 		expect(btn.childNodes[0]).toHaveClass('tc-skeleton');
 	});
 
-	it('should trigger the onclick props', () => {
+	it('should trigger the onclick props', async () => {
+		const user = userEvent.setup();
+
 		// given
 		const onClick = jest.fn();
 		const props = { ...myAction, onClick };
 		render(<ActionButton {...props} extra="extra" />);
 
 		// when
-		userEvent.click(screen.getByRole('button'));
+		await user.click(screen.getByRole('button'));
 
 		// then
 		expect(onClick.mock.calls.length).toBe(1);
@@ -102,14 +104,16 @@ describe('Action', () => {
 		});
 	});
 
-	it('should trigger the onclick props when action has an overlay', () => {
+	it('should trigger the onclick props when action has an overlay', async () => {
+		const user = userEvent.setup();
+
 		// given
 		const onClick = jest.fn();
 		const props = { ...myAction, overlayComponent: OverlayComponent, onClick };
 		render(<ActionButton {...props} extra="extra" />);
 
 		// when
-		userEvent.click(screen.getByRole('button'));
+		await user.click(screen.getByRole('button'));
 
 		// then
 		expect(onClick.mock.calls.length).toBe(1);
@@ -216,75 +220,89 @@ describe('Action', () => {
 	});
 
 	it('should render tooltip when hideLabel property is set', async () => {
+		const user = userEvent.setup();
+
 		// when
 		render(<ActionButton {...myAction} hideLabel />);
 
 		// then
 		expect(screen.queryByText('Click me')).not.toBeInTheDocument();
-		await userEvent.hover(screen.getByRole('button'));
+		await user.hover(screen.getByRole('button'));
 		const tooltip = await screen.findByRole('tooltip');
 		expect(within(tooltip).getByText('Click me')).toBeInTheDocument();
 	});
 
 	it('should render tooltip when tooltip property is set', async () => {
+		const user = userEvent.setup();
+
 		// when
 		render(<ActionButton {...myAction} tooltip />);
 
 		// then
 		expect(screen.getByText('Click me')).toBeInTheDocument();
-		await userEvent.hover(screen.getByRole('button'));
+		await user.hover(screen.getByRole('button'));
 		const tooltip = await screen.findByRole('tooltip');
 		expect(within(tooltip).getByText('Click me')).toBeInTheDocument();
 	});
 
 	it('should NOT render tooltip when tooltip property is set to false', async () => {
+		const user = userEvent.setup();
+
 		// when
 		render(<ActionButton {...myAction} tooltip={false} />);
 
 		// then
 		expect(screen.getByText('Click me')).toBeInTheDocument();
-		await userEvent.hover(screen.getByRole('button'));
+		await user.hover(screen.getByRole('button'));
 		expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
 	});
 
 	it('should NOT render tooltip when tooltip property is set to false with hideLabel property', async () => {
+		const user = userEvent.setup();
+
 		// when
 		render(<ActionButton {...myAction} hideLabel tooltip={false} />);
 
 		// then
 		expect(screen.queryByText('Click me')).not.toBeInTheDocument();
-		await userEvent.hover(screen.getByRole('button'));
+		await user.hover(screen.getByRole('button'));
 		expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
 	});
 
 	it('should render tooltip with tooltipLabel when the tooltip property is not set', async () => {
+		const user = userEvent.setup();
+
 		// when
 		render(<ActionButton {...myAction} tooltipLabel="My tooltip label" />);
-		await userEvent.hover(screen.getByRole('button'));
+		await user.hover(screen.getByRole('button'));
 		const tooltip = await screen.findByRole('tooltip');
 
 		// then
 		expect(tooltip).toHaveTextContent('My tooltip label');
 	});
 
 	it('should not render tooltip with tooltipLabel when the tooltip property is set to false', async () => {
+		const user = userEvent.setup();
+
 		// when
 		render(<ActionButton {...myAction} tooltip={false} tooltipLabel="My tooltip label" />);
-		await userEvent.hover(screen.getByRole('button'));
+		await user.hover(screen.getByRole('button'));
 
 		// then
 		expect(screen.getByText('Click me')).toBeInTheDocument();
-		await userEvent.hover(screen.getByRole('button'));
+		await user.hover(screen.getByRole('button'));
 		expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
 	});
 
 	it('should trigger action if set up onMouseDown event', async () => {
+		const user = userEvent.setup();
+
 		// given
 		render(<ActionButton {...mouseDownAction} extra="extra" />);
 		const button = screen.getByRole('button');
 
 		// when
-		await fireEvent.mouseDown(button);
+		await user.click(button);
 
 		// then
 		expect(mouseDownAction.onMouseDown).toHaveBeenCalled();
@@ -301,6 +319,8 @@ describe('Action', () => {
 	});
 
 	it('should render a button without an overlay component if inProgress is true', async () => {
+		const user = userEvent.setup();
+
 		const props = {
 			...myAction,
 			inProgress: true,
@@ -310,13 +330,15 @@ describe('Action', () => {
 
 		// when
 		render(<ActionButton {...props} />);
-		await userEvent.click(screen.getByRole('button'));
+		await user.click(screen.getByRole('button'));
 
 		// then
 		expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
 	});
 
 	it('should render a button with a overlay component', async () => {
+		const user = userEvent.setup();
+
 		const props = {
 			...myAction,
 			overlayComponent: OverlayComponent,
@@ -326,7 +348,7 @@ describe('Action', () => {
 
 		// when
 		render(<ActionButton {...props} />);
-		await userEvent.click(screen.getByRole('button'));
+		await user.click(screen.getByRole('button'));
 		const tooltip = await screen.findByRole('tooltip');
 
 		// then

diff --git a/packages/components/src/Actions/ActionDropdown/ActionDropdown.test.js b/packages/components/src/Actions/ActionDropdown/ActionDropdown.test.js
@@ -17,7 +17,9 @@ function getComponent(key) {
 }
 
 describe('ActionDropdown', () => {
-	it('should call onToggle callback when click on trigger', () => {
+	it('should call onToggle callback when click on trigger', async () => {
+		const user = userEvent.setup();
+
 		// given
 		const onToggle = jest.fn();
 		const props = {
@@ -34,19 +36,21 @@ describe('ActionDropdown', () => {
 		const dropdownButton = screen.getByRole('button');
 
 		// when
-		userEvent.click(dropdownButton);
+		await user.click(dropdownButton);
 
 		// then
 		expect(onToggle).toHaveBeenCalledWith(true);
 
 		// when
-		userEvent.click(dropdownButton);
+		await user.click(dropdownButton);
 
 		// then
 		expect(onToggle).toHaveBeenCalledWith(false);
 	});
 
-	it('should call onSelect callback when click on item', () => {
+	it('should call onSelect callback when click on item', async () => {
+		const user = userEvent.setup();
+
 		// given
 		const onSelectClick = jest.fn();
 		const onItemClick = jest.fn();
@@ -62,7 +66,7 @@ describe('ActionDropdown', () => {
 		render(<ActionDropdown {...props} />);
 
 		// when
-		userEvent.click(screen.getByRole('menuitem', { name: 'Item 1' }));
+		await user.click(screen.getByRole('menuitem', { name: 'Item 1' }));
 
 		// then
 		expect(onSelectClick).toHaveBeenCalledWith(expect.anything(), props.items[0]);
@@ -73,7 +77,7 @@ describe('ActionDropdown', () => {
 		expect(onItemClick.mock.calls[0][0].type).toBe('click');
 
 		// when
-		userEvent.click(screen.getByRole('menuitem', { name: 'Item 2' }));
+		await user.click(screen.getByRole('menuitem', { name: 'Item 2' }));
 
 		// then
 		expect(onSelectClick).toHaveBeenCalledWith(expect.anything(), props.items[1]);
@@ -162,7 +166,14 @@ describe('InjectDropdownMenuItem', () => {
 });
 
 describe('Dropup', () => {
-	function testSwitch({ containerPosition, menuPosition, isInitialDropup, isDropupExpected }) {
+	async function testSwitch({
+		containerPosition,
+		menuPosition,
+		isInitialDropup,
+		isDropupExpected,
+	}) {
+		const user = userEvent.setup();
+
 		// given
 		const { container } = render(
 			<div className="tc-dropdown-container">
@@ -180,7 +191,7 @@ describe('Dropup', () => {
 		container.querySelector('.dropdown-menu').getBoundingClientRect = () => menuPosition;
 
 		// when
-		userEvent.click(screen.getByRole('button'));
+		await user.click(screen.getByRole('button'));
 
 		// then
 		if (!isDropupExpected) {

diff --git a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.component.test.js b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.component.test.js
@@ -33,13 +33,15 @@ describe('ActionIconToggle', () => {
 		expect(screen.getByRole('button')).toHaveClass('active');
 	});
 
-	it('should call click callback', () => {
+	it('should call click callback', async () => {
+		const user = userEvent.setup();
+
 		// given
 		render(<ActionIconToggle {...inactiveIconToggle} />);
 		expect(inactiveIconToggle.onClick).not.toHaveBeenCalled();
 
 		// when
-		userEvent.click(screen.getByRole('button'));
+		await user.click(screen.getByRole('button'));
 
 		// then
 		expect(inactiveIconToggle.onClick).toHaveBeenCalled();

diff --git a/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.test.js b/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.test.js
@@ -100,7 +100,9 @@ describe('ActionSplitDropdown', () => {
 		expect(screen.getByText('No option')).toBeInTheDocument();
 	});
 
-	it('should render trigger event', () => {
+	it('should render trigger event', async () => {
+		const user = userEvent.setup();
+
 		// given
 		const onItemClick = jest.fn();
 		const props = {
@@ -124,7 +126,7 @@ describe('ActionSplitDropdown', () => {
 
 		// when
 		render(<ActionSplitDropdown {...props} />);
-		userEvent.click(screen.getByRole('menuitem', { name: 'Item 1' }));
+		await user.click(screen.getByRole('menuitem', { name: 'Item 1' }));
 
 		// then
 		expect(onItemClick.mock.calls[0][1]).toEqual({
@@ -134,7 +136,7 @@ describe('ActionSplitDropdown', () => {
 		expect(onItemClick.mock.calls[0][0].type).toEqual('click');
 
 		// when
-		userEvent.click(screen.getByRole('menuitem', { name: 'Item 2' }));
+		await user.click(screen.getByRole('menuitem', { name: 'Item 2' }));
 
 		// then
 		expect(onItemClick.mock.calls[1][1]).toEqual({

diff --git a/packages/components/src/DataViewer/RecordsViewer/Branch/RecordsViewerBranch.component.js b/packages/components/src/DataViewer/RecordsViewer/Branch/RecordsViewerBranch.component.js
@@ -2,7 +2,6 @@ import { Component } from 'react';
 import get from 'lodash/get';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import keycode from 'keycode';
 import Skeleton from '../../../Skeleton';
 import { LengthBadge } from '../../Badges';
 import { TreeBranchIcon } from '../../Icons';
@@ -38,9 +37,10 @@ export class RecordsViewerBranch extends Component {
 	};
 
 	onKeyDown = event => {
-		switch (event.keyCode) {
-			case keycode.codes.enter:
-			case keycode.codes.space:
+		switch (event.key) {
+			case 'Enter':
+			case ' ':
+			case 'Space':
 				event.preventDefault(); // prevent scroll with space
 				event.stopPropagation();
 				this.onClickRecordsBranch(event);

diff --git a/packages/components/src/DataViewer/RecordsViewer/Branch/RecordsViewerBranch.test.js b/packages/components/src/DataViewer/RecordsViewer/Branch/RecordsViewerBranch.test.js
@@ -37,7 +37,9 @@ const schema = {
 
 describe('RecordsViewerBranch', () => {
 	const dataKey = 'myDataKey';
-	it('should render the branch with children', () => {
+	it('should render the branch with children', async () => {
+		const user = userEvent.setup();
+
 		const onToggle = jest.fn();
 
 		const props = {
@@ -58,9 +60,9 @@ describe('RecordsViewerBranch', () => {
 		};
 		const { container } = render(<Component {...props} />);
 		expect(container.firstChild).toMatchSnapshot();
-		userEvent.click(screen.getByTestId('records-branch'));
-		userEvent.keyboard('{enter}');
-		userEvent.keyboard('{space}');
+		await user.click(screen.getByTestId('records-branch'));
+		await user.keyboard('{Enter}');
+		await user.keyboard('{Space}');
 
 		expect(onToggle).toHaveBeenCalledWith(
 			expect.anything(),

diff --git a/packages/components/src/DateTimePickers/Date/Manager/Manager.component.test.js b/packages/components/src/DateTimePickers/Date/Manager/Manager.component.test.js
@@ -1,3 +1,5 @@
+/* eslint-disable react/prop-types */
+
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -302,7 +304,6 @@ describe('Date.Manager', () => {
 			it('should trigger props.onChange with valid date', async () => {
 				// given
 				const onChange = jest.fn();
-				const event = { target: {}, preventDefault: () => {} };
 				render(
 					<Manager id={DEFAULT_ID} onChange={onChange}>
 						<DateConsumer />