diff --git a/src/autosuggest/__tests__/autosuggest.test.tsx b/src/autosuggest/__tests__/autosuggest.test.tsx index 1ce22047d1..41bcb89896 100644 --- a/src/autosuggest/__tests__/autosuggest.test.tsx +++ b/src/autosuggest/__tests__/autosuggest.test.tsx @@ -1,6 +1,6 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import * as React from 'react'; +import React, { useState } from 'react'; import { render } from '@testing-library/react'; import { warnOnce } from '@cloudscape-design/component-toolkit/internal'; @@ -28,6 +28,20 @@ const defaultProps: AutosuggestProps = { options: defaultOptions, }; +function StatefulAutosuggest(props: AutosuggestProps) { + const [value, setValue] = useState(props.value); + return ( + { + props.onChange?.(event); + setValue(event.detail.value); + }} + /> + ); +} + function renderAutosuggest(jsx: React.ReactElement) { const { container, rerender } = render(jsx); const wrapper = createWrapper(container).findAutosuggest()!; @@ -114,7 +128,7 @@ test('option with special characters can be selected by value', () => { test('should display entered text option/label', () => { const enteredTextLabel = jest.fn(value => `Custom function with ${value} placeholder`); const { wrapper } = renderAutosuggest( - + ); wrapper.setInputValue('1'); expect(enteredTextLabel).toHaveBeenCalledWith('1'); diff --git a/src/property-filter/__tests__/property-filter-extended-operators.test.tsx b/src/property-filter/__tests__/property-filter-extended-operators.test.tsx index cfadb280b6..cef6d41b93 100644 --- a/src/property-filter/__tests__/property-filter-extended-operators.test.tsx +++ b/src/property-filter/__tests__/property-filter-extended-operators.test.tsx @@ -163,7 +163,7 @@ describe('extended operators', () => { expect(wrapper.findDropdown()?.findOpenDropdown()).toBeFalsy(); // Reopen dropdown - wrapper.setInputValue('index >'); + wrapper.setInputValue('index > '); expect(wrapper.find('[data-testid="change+"]')!.getElement()).toHaveTextContent('0'); }); diff --git a/src/test-utils/dom/input/base-input.ts b/src/test-utils/dom/input/base-input.ts index 53e28030ae..6404c7a4e1 100644 --- a/src/test-utils/dom/input/base-input.ts +++ b/src/test-utils/dom/input/base-input.ts @@ -1,9 +1,8 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import { Simulate } from 'react-dom/test-utils'; import { ComponentWrapper, ElementWrapper, usesDom } from '@cloudscape-design/test-utils-core/dom'; -import { act } from '@cloudscape-design/test-utils-core/utils-dom'; +import { act, setNativeValue } from '@cloudscape-design/test-utils-core/utils-dom'; import inputSelectors from '../../../input/styles.selectors.js'; @@ -45,7 +44,9 @@ export default abstract class BaseInputWrapper extends ComponentWrapper { @usesDom setInputValue(value: string): void { const element = this.findNativeInput().getElement(); act(() => { - Simulate.change(element, { target: { value } as unknown as EventTarget }); + const event = new Event('change', { bubbles: true, cancelable: false }); + setNativeValue(element, value); + element.dispatchEvent(event); }); } diff --git a/src/test-utils/dom/prompt-input/index.ts b/src/test-utils/dom/prompt-input/index.ts index 9feb3a0c2b..289ae4041d 100644 --- a/src/test-utils/dom/prompt-input/index.ts +++ b/src/test-utils/dom/prompt-input/index.ts @@ -1,9 +1,8 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import { Simulate } from 'react-dom/test-utils'; import { ComponentWrapper, ElementWrapper, usesDom } from '@cloudscape-design/test-utils-core/dom'; -import { act } from '@cloudscape-design/test-utils-core/utils-dom'; +import { act, setNativeValue } from '@cloudscape-design/test-utils-core/utils-dom'; import testutilStyles from '../../../prompt-input/test-classes/styles.selectors.js'; @@ -41,9 +40,11 @@ export default class PromptInputWrapper extends ComponentWrapper { * @param value value to set the textarea to. */ @usesDom setTextareaValue(value: string): void { - const element: HTMLTextAreaElement = this.findNativeTextarea().getElement(); + const element = this.findNativeTextarea().getElement(); act(() => { - Simulate.change(element, { target: { value } as unknown as EventTarget }); + const event = new Event('change', { bubbles: true, cancelable: false }); + setNativeValue(element, value); + element.dispatchEvent(event); }); } } diff --git a/src/test-utils/dom/textarea/index.ts b/src/test-utils/dom/textarea/index.ts index dda5898df4..04349ff2f0 100644 --- a/src/test-utils/dom/textarea/index.ts +++ b/src/test-utils/dom/textarea/index.ts @@ -1,9 +1,8 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import { Simulate } from 'react-dom/test-utils'; import { ComponentWrapper, ElementWrapper, usesDom } from '@cloudscape-design/test-utils-core/dom'; -import { act } from '@cloudscape-design/test-utils-core/utils-dom'; +import { act, setNativeValue } from '@cloudscape-design/test-utils-core/utils-dom'; import selectors from '../../../textarea/styles.selectors.js'; @@ -29,9 +28,11 @@ export default class TextareaWrapper extends ComponentWrapper { - Simulate.change(element, { target: { value } as unknown as EventTarget }); + const event = new Event('change', { bubbles: true, cancelable: false }); + setNativeValue(element, value); + element.dispatchEvent(event); }); } }