fix: Remove act from selectors

scripts/verify-typescript.js

@@ -4,25 +4,41 @@
 
 // This file converts example input into selector utils and checks that the result compiles by Typescript
 const fs = require('fs');
+const glob = require('glob');
 const path = require('path');
 const { execSync } = require('child_process');
 const convertToSelectorUtil = require(path.join(__dirname, '../lib/converter/dist')).default;
 
+// These test files include utils represented as external dependencies to properly test their conversion to selectors.
+// We need to skip them here because they are not expected to compile correctly.
+const skip = ['strip-external-imports.ts'];
+
 const inputDir = path.join(__dirname, '../src/converter/test/inputs/converter');
 const outputDir = path.join(__dirname, '../src/converter/test/outputs/converter');
 
 fs.rmSync(outputDir, { recursive: true, force: true });
 fs.mkdirSync(outputDir, { recursive: true });
 fs.readdirSync(inputDir).forEach(name => {
+  if (skip.includes(name)) {
+    return;
+  }
+
   const source = fs.readFileSync(path.join(inputDir, name), 'utf-8').trim();
   const result = convertToSelectorUtil(source);
   fs.writeFileSync(path.join(outputDir, name), result);
 });
 
+const includedInputFiles = glob.sync('src/converter/test/inputs/converter/*.ts').filter(file => {
+  const fileName = file.split('/').pop();
+  return !skip.includes(fileName);
+});
+
 // Command-line API does not allow to use tsconfig when compiling only selected files
 // https://github.com/microsoft/TypeScript/issues/27379
 execSync(
-  `tsc --noEmit --strict --experimentalDecorators --target es5 src/converter/test/inputs/converter/*.ts src/converter/test/outputs/converter/*.ts`,
+  `tsc --noEmit --strict --experimentalDecorators --target es5 ${includedInputFiles.join(
+    ' '
+  )} src/converter/test/outputs/converter/*.ts`,
   {
     stdio: 'inherit',
   }

src/converter/convert-to-selectors.ts

@@ -4,6 +4,7 @@
 
 const runtimeSelectorsPath = '@cloudscape-design/test-utils-core/selectors';
 const ourWrappers = ['ElementWrapper', 'ComponentWrapper'];
+const domUtilsPath = '@cloudscape-design/test-utils-core/utils-dom';
 
 interface PluginArguments {
   types: typeof types;
@@ -28,10 +29,15 @@
             .filter(spec => spec.node.local.name === 'usesDom')
             .forEach(spec => spec.remove());
         }
+
+        // Remove dom utils
+        if (source.node.value === domUtilsPath) {
+          path.remove();
+        }
       },
       ClassDeclaration(path: NodePath<types.ClassDeclaration>) {
         // our wrapper classes have generic parameters only in DOM version
         if (ourWrappers.includes((path.node.superClass as any)?.name) && path.node.superTypeParameters) {
           path.node.superTypeParameters = null;
         }
       },

src/converter/test/__snapshots__/converter.test.ts.snap

@@ -45,6 +45,23 @@ export default class DummyWrapper extends ComponentWrapper {
 }"
 `;
 
+exports[`strip-external-imports 1`] = `
+"// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+/* eslint-env browser */
+import { ComponentWrapper } from "@cloudscape-design/test-utils-core/selectors";
+import { KeyCode } from "@cloudscape-design/test-utils-core/utils";
+import ChildWrapper from './simple';
+export default class DummyWrapper extends ComponentWrapper {
+  findElement() {
+    return new ChildWrapper(this.find('.awsui-child')!.getElement());
+  }
+  findSomething() {
+    return KeyCode.enter;
+  }
+}"
+`;
+
 exports[`strip-imports 1`] = `
 "// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0

src/converter/test/inputs/converter/strip-external-imports.ts

@@ -0,0 +1,30 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+/* eslint-env browser */
+import { ComponentWrapper, usesDom } from '@cloudscape-design/test-utils-core/dom';
+import { KeyCode } from '@cloudscape-design/test-utils-core/utils';
+import { act } from '@cloudscape-design/test-utils-core/utils-dom';
+
+import ChildWrapper from './simple';
+
+export default class DummyWrapper extends ComponentWrapper {
+  findElement(): ChildWrapper {
+    return new ChildWrapper(this.find('.awsui-child')!.getElement());
+  }
+
+  @usesDom
+  findDomElement(): ChildWrapper {
+    return new ChildWrapper(this.find('.awsui-child')!.getElement());
+  }
+
+  @usesDom
+  openDropdown(): void {
+    act(() => {
+      this.findElement().click();
+    });
+  }
+
+  findSomething(): number {
+    return KeyCode.enter;
+  }
+}

src/core/utils-dom.ts

@@ -0,0 +1,9 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+// Use this file for any utilities specific to React/ReactDOM APIs or those that depend on them.
+
+import * as React from 'react';
+import { act as reactDomAct } from 'react-dom/test-utils';
+
+export const act = ('act' in React ? React.act : reactDomAct) as typeof reactDomAct;