chore: Enhances the usage of converter

src/converter/generate-test-utils.ts

@@ -5,32 +5,38 @@ import fs from 'fs';
 import { generateComponentFinders } from './generate-component-finders';
 import { ComponentWrapperMetadata, GenerateTestUtilsParams, TestUtilType } from './interfaces';
 import { writeSourceFile } from './utils';
-import lodash from 'lodash';
+import { kebabCase } from 'lodash';
 import { convertToSelectorUtil } from './convert-to-selectors';
+import glob from 'glob';
 
 interface GenerateIndexFilesParams extends GenerateTestUtilsParams {
   testUtilType: TestUtilType;
 }
 
 function generateIndexFile({ testUtilsPath, components, testUtilType }: GenerateIndexFilesParams) {
-  const componenWrappersMetadata: ComponentWrapperMetadata[] = components.map(({ name, pluralName }) => ({
-    name,
-    pluralName,
-    wrapperName: `${name}Wrapper`,
-    wrapperImportPath: `./${lodash.kebabCase(name)}/index`,
-  }));
+  const componenWrappersMetadata: ComponentWrapperMetadata[] = components.map(
+    ({ name, pluralName, testUtilsFolderName }) => ({
+      name,
+      pluralName,
+      wrapperName: `${name}Wrapper`,
+      wrapperImportPath: `./${testUtilsFolderName ?? kebabCase(name)}/index`,
+    })
+  );
 
   const content = generateComponentFinders({ testUtilType, components: componenWrappersMetadata });
   const indexFilePath = path.join(testUtilsPath, testUtilType, 'index.ts');
   writeSourceFile(indexFilePath, content);
 }
 
-function generateSelectorUtils({ components, testUtilsPath }: GenerateTestUtilsParams) {
-  for (const component of components) {
-    const componentNameKebabCase = lodash.kebabCase(component.name);
-    const domFilePath = path.join(testUtilsPath, `dom/${componentNameKebabCase}/index.ts`);
+function generateSelectorUtils(testUtilsPath: string) {
+  const domFolderPath = path.join(testUtilsPath, 'dom');
+  const selectorsFolderPath = path.join(testUtilsPath, 'selectors');
+  const conversionTargetRelativePaths = glob.sync(`**/*.{ts,tsx}`, { cwd: domFolderPath });
+
+  for (const fileRelativePath of conversionTargetRelativePaths) {
+    const domFilePath = path.join(domFolderPath, fileRelativePath);
     const domFileContent = fs.readFileSync(domFilePath, 'utf-8');
-    const selectorsFilePath = path.join(testUtilsPath, `selectors/${componentNameKebabCase}/index.ts`);
+    const selectorsFilePath = path.join(selectorsFolderPath, fileRelativePath);
     const selectorsFileContent = convertToSelectorUtil(domFileContent);
 
     if (!selectorsFileContent) {
@@ -41,11 +47,10 @@ function generateSelectorUtils({ components, testUtilsPath }: GenerateTestUtilsP
 }
 
 /**
- * Generates test utils index files for dom and selector.
- * Converts the test utils dom test utils to selectors.
+ * Generates test utils index files for dom and selector and converts the dom test utils to selectors.
  */
 export function generateTestUtils({ components, testUtilsPath }: GenerateTestUtilsParams) {
-  generateSelectorUtils({ components, testUtilsPath });
+  generateSelectorUtils(testUtilsPath);
   generateIndexFile({ components, testUtilsPath, testUtilType: 'dom' });
   generateIndexFile({ components, testUtilsPath, testUtilType: 'selectors' });
 }

src/converter/interfaces.ts

@@ -15,6 +15,12 @@ export interface ComponentMetadata {
    * Examples: Buttons, Alerts, ButtonDropdowns
    */
   pluralName: string;
+
+  /**
+   * Folder name of the component test utils.
+   * If not specified, the kebab case of the component name will be used by default.
+   */
+  testUtilsFolderName?: string;
 }
 
 export interface GenerateTestUtilsParams {

src/converter/test/generate-test-utils.test.tsx

@@ -12,13 +12,17 @@ function renderTestNode() {
         <h1 className="test-component-a-child">First Component A</h1>
       </div>
       <div className="test-component-b-root">
-        <h1 className="test-component-b-child">First Component B</h1>
+        <div className="test-component-b-child">
+          <h1 className="test-component-b-child-content">First Component B</h1>
+        </div>
       </div>
       <div className="test-component-a-root">
         <h1 className="test-component-a-child">Second Component A</h1>
       </div>
       <div className="test-component-b-root">
-        <h1 className="test-component-b-child">Second Component B</h1>
+        <div className="test-component-b-child">
+          <h1 className="test-component-b-child-content">Second Component B</h1>
+        </div>
       </div>
     </>
   );

src/converter/test/mock-test-utils/dom/test-component-b/child-wrapper.ts

@@ -0,0 +1,11 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ComponentWrapper, createWrapper } from '@cloudscape-design/test-utils-core/dom';
+
+export class ChildWrapper extends ComponentWrapper {
+  static rootSelector = 'test-component-b-child';
+
+  findContent() {
+    return createWrapper().find('.test-component-b-child-content');
+  }
+}

src/converter/test/mock-test-utils/dom/test-component-b/index.ts

@@ -1,11 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { ComponentWrapper, createWrapper } from '@cloudscape-design/test-utils-core/dom';
+import { ChildWrapper } from './child-wrapper';
 
 export default class TestComponentBWrapper extends ComponentWrapper {
   static rootSelector = 'test-component-b-root';
 
-  findChild() {
-    return createWrapper().find('.test-component-b-child');
+  findChild(): ChildWrapper {
+    return createWrapper().find(`.${ChildWrapper.rootSelector}`);
   }
 }