diff --git a/src/autosuggest/__tests__/autosuggest.test.tsx b/src/autosuggest/__tests__/autosuggest.test.tsx index e526587aa6..0d880079ae 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).toBeCalledWith('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 7c1c2c9bf3..eca5c19dc5 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..7d03d4a851 100644 --- a/src/test-utils/dom/input/base-input.ts +++ b/src/test-utils/dom/input/base-input.ts @@ -1,6 +1,5 @@ // 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'; @@ -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); }); } @@ -54,3 +55,20 @@ export default abstract class BaseInputWrapper extends ComponentWrapper { return this.findNativeInput().getElement().hasAttribute('disabled'); } } + +// Copied from @testing-library/dom/dist/events.js +function setNativeValue(element: Element, value: string): void { + const { set: valueSetter } = Object.getOwnPropertyDescriptor(element, 'value') || {}; + const prototype = Object.getPrototypeOf(element); + const { set: prototypeValueSetter } = Object.getOwnPropertyDescriptor(prototype, 'value') || {}; + + if (prototypeValueSetter && valueSetter !== prototypeValueSetter) { + prototypeValueSetter.call(element, value); + } else { + if (valueSetter) { + valueSetter.call(element, value); + } else { + throw new Error('The given element does not have a value setter'); + } + } +} diff --git a/src/test-utils/dom/prompt-input/index.ts b/src/test-utils/dom/prompt-input/index.ts index 9feb3a0c2b..01018ad320 100644 --- a/src/test-utils/dom/prompt-input/index.ts +++ b/src/test-utils/dom/prompt-input/index.ts @@ -1,6 +1,5 @@ // 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'; @@ -41,9 +40,28 @@ 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); }); } } + +// Copied from @testing-library/dom/dist/events.js +function setNativeValue(element: Element, value: string): void { + const { set: valueSetter } = Object.getOwnPropertyDescriptor(element, 'value') || {}; + const prototype = Object.getPrototypeOf(element); + const { set: prototypeValueSetter } = Object.getOwnPropertyDescriptor(prototype, 'value') || {}; + + if (prototypeValueSetter && valueSetter !== prototypeValueSetter) { + prototypeValueSetter.call(element, value); + } else { + if (valueSetter) { + valueSetter.call(element, value); + } else { + throw new Error('The given element does not have a value setter'); + } + } +} diff --git a/src/test-utils/dom/textarea/index.ts b/src/test-utils/dom/textarea/index.ts index dda5898df4..a3c41adbf9 100644 --- a/src/test-utils/dom/textarea/index.ts +++ b/src/test-utils/dom/textarea/index.ts @@ -1,6 +1,5 @@ // 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'; @@ -29,9 +28,28 @@ 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); }); } } + +// Copied from @testing-library/dom/dist/events.js +function setNativeValue(element: Element, value: string): void { + const { set: valueSetter } = Object.getOwnPropertyDescriptor(element, 'value') || {}; + const prototype = Object.getPrototypeOf(element); + const { set: prototypeValueSetter } = Object.getOwnPropertyDescriptor(prototype, 'value') || {}; + + if (prototypeValueSetter && valueSetter !== prototypeValueSetter) { + prototypeValueSetter.call(element, value); + } else { + if (valueSetter) { + valueSetter.call(element, value); + } else { + throw new Error('The given element does not have a value setter'); + } + } +}