chore: Removes dependencies on React <19 in test utils

cloudscape-design · Feb 5, 2025 · d311907 · d311907
1 parent 89612ae
commit d311907
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 11 deletions.
diff --git 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 (
+    <Autosuggest
+      {...props}
+      value={value}
+      onChange={event => {
+        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(
-    <Autosuggest enteredTextLabel={enteredTextLabel} value="1" options={defaultOptions} />
+    <StatefulAutosuggest enteredTextLabel={enteredTextLabel} value="" options={defaultOptions} />
   );
   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
@@ -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
@@ -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
@@ -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
@@ -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<HTMLTextAreaElemen
    * @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');
+    }
+  }
+}