4.5.4 release

Button/tests/Button-specs.js

@@ -139,22 +139,26 @@ describe('Button', () => {
 	});
 
 	describe('events', () => {
-		test('should call `onClick` when not disabled', () => {
+		test('should call `onClick` when not disabled', async () => {
 			const handleClick = jest.fn();
+			const user = userEvent.setup();
+
 			render(<Button onClick={handleClick}>I am not a disabled Button</Button>);
 			const button = screen.getByText('I am not a disabled Button');
 
-			userEvent.click(button);
+			await user.click(button);
 
 			expect(handleClick).toBeCalled();
 		});
 
-		test('should not call `onClick` when disabled', () => {
+		test('should not call `onClick` when disabled', async () => {
 			const handleClick = jest.fn();
+			const user = userEvent.setup();
+
 			render(<Button disabled onClick={handleClick}>I am a disabled Button</Button>);
 			const button = screen.getByText('I am a disabled Button');
 
-			userEvent.click(button);
+			await user.click(button);
 
 			expect(handleClick).not.toBeCalled();
 		});

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 The following is a curated list of changes in the Enact moonstone module, newest changes on the top.
 
+## [4.5.4] - 2020-09-06
+
+No significant changes.
+
 ## [4.5.3] - 2023-05-10
 
 ### Added

CheckboxItem/tests/CheckboxItem-specs.js

@@ -24,26 +24,30 @@ describe('CheckboxItem Specs', () => {
 		expect(element).toBeInTheDocument();
 	});
 
-	test('should check with click', () => {
+	test('should check with click', async () => {
+		const user = userEvent.setup();
+
 		render(<CheckboxItem>Hello CheckboxItem</CheckboxItem>);
 
 		const checkboxItem = screen.getByRole('checkbox');
 		const expected = 'true';
 
-		userEvent.click(checkboxItem);
+		await user.click(checkboxItem);
 
 		expect(checkboxItem).toHaveAttribute('aria-checked', expected);
 
 	});
 
-	test('should uncheck with 2 click', () => {
+	test('should uncheck with 2 click', async () => {
+		const user = userEvent.setup();
+
 		render(<CheckboxItem>Hello CheckboxItem</CheckboxItem>);
 
 		const checkboxItem = screen.getByRole('checkbox');
 		const expected = 'false';
 
-		userEvent.click(checkboxItem);
-		userEvent.click(checkboxItem);
+		await user.click(checkboxItem);
+		await user.click(checkboxItem);
 
 		expect(checkboxItem).toHaveAttribute('aria-checked', expected);
 	});

ContextualPopupDecorator/tests/ContextualPopupDecorator-specs.js

@@ -9,8 +9,9 @@ import Button from '../../Button';
 const ContextualButton = ContextualPopupDecorator(Button);
 
 describe('ContextualPopupDecorator Specs', () => {
-	test('should emit onClose event when clicking on contextual button', () => {
+	test('should emit onClose event when clicking on contextual button', async () => {
 		const handleClose = jest.fn();
+		const user = userEvent.setup();
 		const Root = FloatingLayerDecorator('div');
 		const message = 'goodbye';
 		render(
@@ -22,7 +23,7 @@ describe('ContextualPopupDecorator Specs', () => {
 		);
 		const contextualButton = screen.getByRole('button');
 
-		userEvent.click(contextualButton);
+		await user.click(contextualButton);
 
 		expect(handleClose).toHaveBeenCalled();
 	});
@@ -61,8 +62,9 @@ describe('ContextualPopupDecorator Specs', () => {
 		expect(popup).toBeNull();
 	});
 
-	test('should not emit onClose event when clicking outside if noAutoDismiss is true', () => {
+	test('should not emit onClose event when clicking outside if noAutoDismiss is true', async () => {
 		const handleClose = jest.fn();
+		const user = userEvent.setup();
 		const Root = FloatingLayerDecorator('div');
 		const message = 'goodbye';
 		render(
@@ -74,13 +76,14 @@ describe('ContextualPopupDecorator Specs', () => {
 		);
 		const outsideArea = screen.getByTestId('outsideArea');
 
-		userEvent.click(outsideArea);
+		await user.click(outsideArea);
 
 		expect(handleClose).not.toHaveBeenCalled();
 	});
 
-	test('should emit onClose event when clicking outside if noAutoDismiss is missing', () => {
+	test('should emit onClose event when clicking outside if noAutoDismiss is missing', async () => {
 		const handleClose = jest.fn();
+		const user = userEvent.setup();
 		const Root = FloatingLayerDecorator('div');
 		const message = 'goodbye';
 		render(
@@ -92,7 +95,7 @@ describe('ContextualPopupDecorator Specs', () => {
 		);
 		const outsideArea = screen.getByTestId('outsideArea');
 
-		userEvent.click(outsideArea);
+		await user.click(outsideArea);
 
 		expect(handleClose).toHaveBeenCalled();
 	});
@@ -148,8 +151,9 @@ describe('ContextualPopupDecorator Specs', () => {
 		expect(closeButton).toBeNull();
 	});
 
-	test('should emit onClose event when clicking the closeButton', () => {
+	test('should emit onClose event when clicking the closeButton', async () => {
 		const handleClose = jest.fn();
+		const user = userEvent.setup();
 		const Root = FloatingLayerDecorator('div');
 		const message = 'goodbye';
 		render(
@@ -161,7 +165,7 @@ describe('ContextualPopupDecorator Specs', () => {
 		);
 		const closeButton = within(screen.getByRole('alert')).getByRole('button');
 
-		userEvent.click(closeButton);
+		await user.click(closeButton);
 
 		expect(handleClose).toHaveBeenCalled();
 	});

DatePicker/tests/DatePicker-specs.js

@@ -23,8 +23,10 @@ describe('DatePicker', () => {
 		expect(actual).toHaveLength(expected);
 	});
 
-	test('should emit an onChange event when changing a component picker', () => {
+	test('should emit an onChange event when changing a component picker', async () => {
 		const handleChange = jest.fn();
+		const user = userEvent.setup();
+
 		render(
 			<DatePicker
 				locale="en-US"
@@ -36,7 +38,7 @@ describe('DatePicker', () => {
 		);
 		const monthPickerUp = screen.getByLabelText('7 month change a value with up down button').children.item(0);
 
-		userEvent.click(monthPickerUp);
+		await user.click(monthPickerUp);
 
 		const expected = 1;
 

DaySelector/tests/DaySelector-specs.js

@@ -4,12 +4,6 @@ import userEvent from '@testing-library/user-event';
 
 import DaySelector from '../DaySelector';
 
-const tap = (node) => {
-	fireEvent.mouseDown(node);
-	fireEvent.mouseUp(node);
-	userEvent.click(node);
-};
-
 describe('DaySelector', () => {
 	test('should set selected prop to true for the item that is selected by default', () => {
 		render(<DaySelector defaultSelected={0} />);
@@ -20,44 +14,58 @@ describe('DaySelector', () => {
 		expect(daySelector).toHaveClass(expectedAttribute);
 	});
 
-	test('should fire onSelect when a day is selected', () => {
+	test('should fire onSelect when a day is selected', async () => {
 		const handleSelect = jest.fn();
+		const user = userEvent.setup();
+
 		render(<DaySelector onSelect={handleSelect} />);
 		const item = screen.getAllByRole('checkbox')[0];
 
-		tap(item);
+		fireEvent.mouseDown(item);
+		fireEvent.mouseUp(item);
+		await user.click(item);
 
 		expect(handleSelect).toHaveBeenCalled();
 	});
 
-	test('should fire onSelect with the correct content when a day is selected', () => {
+	test('should fire onSelect with the correct content when a day is selected', async () => {
 		const handleSelect = jest.fn();
+		const user = userEvent.setup();
+
 		render(<DaySelector onSelect={handleSelect} />);
 		const item = screen.getAllByRole('checkbox')[6];
 
-		tap(item);
+		fireEvent.mouseDown(item);
+		fireEvent.mouseUp(item);
+		await user.click(item);
 
 		const expected = 'Sat';
 		const actual = handleSelect.mock.calls[0][0].content;
 
 		expect(actual).toBe(expected);
 	});
 
-	test('should use the full string format when dayNameLength is `full`', () => {
+	test('should use the full string format when dayNameLength is `full`', async () => {
 		const handleSelect = jest.fn();
+		const user = userEvent.setup();
+
 		render(<DaySelector dayNameLength="full" onSelect={handleSelect} />);
 		const item = screen.getAllByRole('checkbox')[6];
 
-		tap(item);
+		fireEvent.mouseDown(item);
+		fireEvent.mouseUp(item);
+		await user.click(item);
 
 		const expected = 'Saturday';
 		const actual = handleSelect.mock.calls[0][0].content;
 
 		expect(actual).toBe(expected);
 	});
 
-	test('should set selected content as Every Day when every day is selected', () => {
+	test('should set selected content as Every Day when every day is selected', async () => {
 		const handleSelect = jest.fn();
+		const user = userEvent.setup();
+
 		render(
 			<DaySelector
 				defaultSelected={[0, 1, 2, 3, 4, 5]}
@@ -66,16 +74,20 @@ describe('DaySelector', () => {
 		);
 		const item = screen.getAllByRole('checkbox')[6];
 
-		tap(item);
+		fireEvent.mouseDown(item);
+		fireEvent.mouseUp(item);
+		await user.click(item);
 
 		const expected = 'Every Day';
 		const actual = handleSelect.mock.calls[0][0].content;
 
 		expect(actual).toBe(expected);
 	});
 
-	test('should set selected content as Every Weekday when every weekday is selected', () => {
+	test('should set selected content as Every Weekday when every weekday is selected', async () => {
 		const handleSelect = jest.fn();
+		const user = userEvent.setup();
+
 		render(
 			<DaySelector
 				defaultSelected={[1, 2, 3, 4]}
@@ -84,20 +96,26 @@ describe('DaySelector', () => {
 		);
 		const item = screen.getAllByRole('checkbox')[5];
 
-		tap(item);
+		fireEvent.mouseDown(item);
+		fireEvent.mouseUp(item);
+		await user.click(item);
 
 		const expected = 'Every Weekday';
 		const actual = handleSelect.mock.calls[0][0].content;
 
 		expect(actual).toBe(expected);
 	});
 
-	test('should set selected content as Every Weekend when every weekend is selected', () => {
+	test('should set selected content as Every Weekend when every weekend is selected', async () => {
 		const handleSelect = jest.fn();
+		const user = userEvent.setup();
+
 		render(<DaySelector defaultSelected={[0]} onSelect={handleSelect} />);
 		const item = screen.getAllByRole('checkbox')[6];
 
-		tap(item);
+		fireEvent.mouseDown(item);
+		fireEvent.mouseUp(item);
+		await user.click(item);
 
 		const expected = 'Every Weekend';
 		const actual = handleSelect.mock.calls[0][0].content;

Dropdown/tests/Dropdown-specs.js

@@ -196,16 +196,18 @@ describe('Dropdown', () => {
 	});
 
 	describe('DropdownList', () => {
-		test('should include `data` and `selected` in `onSelect` callback', () => {
+		test('should include `data` and `selected` in `onSelect` callback', async () => {
 			const handler = jest.fn();
+			const user = userEvent.setup();
+
 			render(
 				<DropdownList onSelect={handler}>
 					{children}
 				</DropdownList>
 			);
 			const firstItem = screen.getByRole('group').children[0].children[0];
 
-			userEvent.click(firstItem);
+			await user.click(firstItem);
 
 			const expected = {data: 'option1', selected: 0};
 			const actual = handler.mock.calls[0][0];