@thinkwise/testwise 0.2.67 → 0.2.103

package/artifact-builder/SubjectComponentGenerator.ts

@@ -1,31 +1,47 @@
 /** biome-ignore-all lint/suspicious/noExplicitAny: reason 42 */
 import * as fs from 'node:fs';
 import * as path from 'node:path';
-import { dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { Form, Grid } from '../components/index.js';
+import type { IComponentSchemaMeta } from '../interfaces/IComponentSchemaMeta.js';
 import type { SubjectComponents } from '../types/Components.js';
-import { NamingHandler } from './helpers/NamingHandler.js';
+import { ComponentClassModelBuilder } from './ComponentClassModelBuilder.js';
+import { NamingHandler, PipelinePaths } from './helpers/index.js';
 import { SelectorBuilder } from './SelectorBuilder.js';
-
+import { appendComponentClass, refineComponentInterface } from './TsFileSerializer.js';
+
+/**
+ * **Pipeline Step 6b** — Appends typed component class bodies to the raw
+ * screen interface files that `InterfaceGenerator` (quicktype) produced.
+ *
+ * **What it does:**
+ * - Scans the `Components/` subfolder inside each subject folder in
+ *   `test-artifacts/subjects/`.
+ * - For each component interface file (e.g. `EmployeeForm.ts`), it reads the
+ *   corresponding `.meta.json` sidecar to learn the control types of each
+ *   property, then uses `ComponentClassModelBuilder` to produce an in-memory
+ *   class model.
+ * - `TsFileSerializer.appendComponentClass` writes the class body (with typed
+ *   property constructors) directly into the same interface file.
+ * - Also runs `refineComponentInterface` to clean up quicktype artefacts
+ *   (removes the `Locator` import, adds correct Testwise imports).
+ *
+ * **When it runs:** Step 6 of `testwise sync`, in parallel with
+ * `SubjectGenerator` (both write into `test-artifacts/subjects/`).
+ */
 export class SubjectComponentGenerator {
-  private static readonly SUBJECTS_RELATIVE_PATH = 'test-artifacts/subjects';
-
-  private readonly _currentFilename: string;
-  private readonly _currentDirname: string;
   private readonly _subjectsDirectory: string;
+  private readonly _schemasDirectory: string;
   private readonly _selectorBuilder: SelectorBuilder;
   private readonly _namingHandler: NamingHandler;
+  private readonly _paths: PipelinePaths;
+  private readonly _modelBuilder: ComponentClassModelBuilder;
 
-  constructor() {
-    this._currentFilename = fileURLToPath(import.meta.url);
-    this._currentDirname = dirname(this._currentFilename);
-    this._subjectsDirectory = path.resolve(
-      this._currentDirname,
-      `../../${SubjectComponentGenerator.SUBJECTS_RELATIVE_PATH}`
-    );
+  constructor(paths?: PipelinePaths) {
+    this._paths = paths ?? new PipelinePaths();
+    this._subjectsDirectory = this._paths.subjects;
+    this._schemasDirectory = this._paths.schemas;
     this._selectorBuilder = new SelectorBuilder();
     this._namingHandler = new NamingHandler();
+    this._modelBuilder = new ComponentClassModelBuilder(this._namingHandler, this._selectorBuilder);
   }
 
   public run(): void {
@@ -38,6 +54,13 @@ export class SubjectComponentGenerator {
     });
   }
 
+  private loadSchemaMeta(componentFileName: string): IComponentSchemaMeta | null {
+    const baseName = path.basename(componentFileName, '.ts');
+    const metaPath = path.join(this._schemasDirectory, `${baseName}.meta.json`);
+    if (!fs.existsSync(metaPath)) return null;
+    return JSON.parse(fs.readFileSync(metaPath, 'utf-8')) as IComponentSchemaMeta;
+  }
+
   private refineSubjectComponents(): void {
     const subjectFolders = this.getAllSubjectFolders();
 
@@ -46,129 +69,57 @@ export class SubjectComponentGenerator {
 
       if (!fs.existsSync(componentsDirectory) || !fs.statSync(componentsDirectory).isDirectory()) return;
 
-      const componentToRefine = new Map<string, typeof Grid | typeof Form>([
-        ['Grid', Grid],
-        ['Form', Form]
-      ]);
-
       const componentFiles = fs.readdirSync(componentsDirectory);
 
       componentFiles.forEach((componentFile) => {
-        const componentName = this.getComponentNameFromFile(componentFile);
-        const componentClass = componentToRefine.get(componentName);
+        const meta = this.loadSchemaMeta(componentFile);
+        if (!meta) return;
 
-        if (componentClass) {
-          this.refine(path.join(componentsDirectory, componentFile), componentClass);
-        }
+        this.refine(path.join(componentsDirectory, componentFile), meta);
       });
     });
   }
 
-  private getComponentNameFromFile(fileName: string): string {
-    const componentName = fileName
-      .split(/(?=[A-Z])/)
-      .pop()
-      ?.replace('.ts', '');
+  private refine(componentDirPath: string, meta: IComponentSchemaMeta): void {
+    if (!fs.existsSync(componentDirPath)) return;
 
-    if (!componentName) throw new Error(`Could not extract component name from file: ${fileName}`);
+    const componentName = meta.componentType;
+    const componentFile: { content: string } = { content: fs.readFileSync(componentDirPath, 'utf-8') };
 
-    return componentName;
-  }
-
-  private refine<T>(componentDirPath: string, component: T): void {
-    if (fs.existsSync(componentDirPath)) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const componentName: SubjectComponents = (component as any).name ?? component;
-      const componentFile: { content: string } = { content: fs.readFileSync(componentDirPath, 'utf-8') };
+    componentFile.content = refineComponentInterface(componentFile.content, componentName as SubjectComponents);
 
-      this.removeLocatorInterface(componentFile);
-      this.addComponentImports(componentFile, componentName);
-      this.setSubjectExtendsComponent(componentFile, componentName);
-
-      if (componentName === 'Grid') {
-        this.transformGridInterface(componentFile);
-      }
+    const interfaceMatches: RegExpMatchArray | null = componentFile.content.match(/export interface (\w+) extends/);
 
-      const interfaceMatches: RegExpMatchArray | null = componentFile.content.match(/export interface (\w+) extends/);
-
-      if (interfaceMatches) {
-        const mainInterface = interfaceMatches[1];
-        const matchingProperties = this.getPropertyNamesFromInterface(componentFile, mainInterface);
-        let propertyDeclarations = '';
-        let assignments = '';
-        let gridGetters = '';
-
-        if (matchingProperties?.[1]) {
-          const propertyLines: string[] = this.convertStringsToArray(matchingProperties[1]);
-
-          if (componentName === 'Grid') {
-            gridGetters = this.generateGridGetters(propertyLines, componentName);
-          } else {
-            propertyDeclarations = this.generatePropertyDeclarations(propertyLines, componentName);
-
-            if (componentName === 'Form') {
-              this.transformInterfaceTypes(componentFile);
-            }
-
-            assignments = this.getPropertyInitializations(propertyLines, componentName);
-            this.addImportsDynamically(componentFile);
-          }
-        }
-
-        const classBody =
-          componentName === 'Grid'
-            ? `\nexport class ${mainInterface}Component extends ${componentName} implements ${mainInterface} {\n\n` +
-              `  private _context: Locator;\n\n` +
-              `  constructor(context: Locator) {\n    super(context);\n    this._context = context;\n  }\n\n${gridGetters}}\n`
-            : `\nexport class ${mainInterface}Component extends ${componentName} implements ${mainInterface} {\n\n` +
-              `  private _context: Locator;\n` +
-              `${propertyDeclarations}\n\n` +
-              `  constructor(context: Locator) {\n    super(context);\n    this._context = context;\n${assignments}\n  }\n}\n`;
-
-        componentFile.content += classBody;
-      }
+    if (interfaceMatches) {
+      const mainInterface = interfaceMatches[1];
+      const matchingProperties = this.getPropertyNamesFromInterface(componentFile, mainInterface);
 
-      const subjectMatch: RegExpMatchArray | null = componentDirPath.match(/subjects[/](\w+)[/]/);
-      const subjectName: string | null = subjectMatch ? subjectMatch[1] : null;
+      if (matchingProperties?.[1]) {
+        const propertyLines: string[] = this.convertStringsToArray(matchingProperties[1]);
 
-      if (subjectName) {
-        const formattedSubjectName = this._namingHandler.toPascalCase(subjectName);
-        const subjectFolder = this.getSubjectFolderPath(formattedSubjectName);
-        const fileName = path.basename(componentDirPath);
+        const model = this._modelBuilder.build(mainInterface, componentName as SubjectComponents, propertyLines, meta);
 
-        this.verifyDirectoryExists(subjectFolder);
-        fs.writeFileSync(path.join(subjectFolder, fileName), componentFile.content, 'utf-8');
-      } else {
-        fs.writeFileSync(componentDirPath, componentFile.content, 'utf-8');
+        componentFile.content = appendComponentClass(componentFile.content, model);
       }
     }
-  }
 
-  private transformGridInterface(componentFile: { content: string }): void {
-    const interfaceRegex = /export interface \w+ extends Grid \{([\s\S]*?)\}/g;
+    const subjectMatch: RegExpMatchArray | null = componentDirPath.match(/subjects[/\\](\w+)[/\\]/);
+    const subjectName: string | null = subjectMatch ? subjectMatch[1] : null;
 
-    componentFile.content = componentFile.content.replace(interfaceRegex, (match, body) => {
-      const transformedBody = body.replace(/(\w+)\s*:\s*Locator(?:\[\])?;/g, 'readonly $1: IGridColumnControl;');
-      return match.replace(body, transformedBody);
-    });
-  }
+    if (subjectName) {
+      const formattedSubjectName = this._namingHandler.toSubjectPascalCase(subjectName);
+      const subjectFolder = this.getSubjectFolderPath(formattedSubjectName);
+      const fileName = path.basename(componentDirPath);
 
-  private generateGridGetters(propertyLines: string[], componentName: SubjectComponents): string {
-    return propertyLines
-      .map((line) => {
-        const property = line.replace('readonly', '').split(':')[0].trim();
-        const columnId = this._selectorBuilder.getElementId(property, componentName);
-
-        return `  public get ${property}(): IGridColumnControl {\n    return createGridColumnControl(this._context, '${columnId}');\n  }\n`;
-      })
-      .join('\n');
+      this.verifyDirectoryExists(subjectFolder);
+      fs.writeFileSync(path.join(subjectFolder, fileName), componentFile.content, 'utf-8');
+    } else {
+      fs.writeFileSync(componentDirPath, componentFile.content, 'utf-8');
+    }
   }
 
   private getSubjectFolderPath(formattedSubjectName: string): string {
-    return path.resolve(
-      this._currentDirname,
-      `../../${SubjectComponentGenerator.SUBJECTS_RELATIVE_PATH}/${formattedSubjectName}/Components/`
-    );
+    return this._paths.subjectComponentsFolder(formattedSubjectName);
   }
 
   private verifyDirectoryExists(directoryPath: string): void {
@@ -177,114 +128,6 @@ export class SubjectComponentGenerator {
     }
   }
 
-  private getPropertyInitializations(propertyLines: string[], componentName: SubjectComponents): string {
-    return propertyLines
-      .map((line) => {
-        const property = line.split(':')[0].replace(/\?$/, '').trim();
-        const pageLocatorString = this._selectorBuilder.getLocatorString(property, componentName);
-
-        if (componentName === 'Form') {
-          if (property.endsWith('Lookup'))
-            return `    this.${property} = createLookupDropdown(this._context, '${this._selectorBuilder.getElementId(property, componentName)}');`;
-
-          if (property.endsWith('DatePicker'))
-            return `    this.${property} = createDateControl(this._context, '${this._selectorBuilder.getElementId(property, componentName)}');`;
-
-          if (property.endsWith('ComboBox'))
-            return `    this.${property} = createFormComboBox(this._context, '${this._selectorBuilder.getElementId(property, componentName)}');`;
-
-          if (property.endsWith('Field'))
-            return `    this.${property} = createInputFieldControl(this._context, '${this._selectorBuilder.getElementId(property, componentName)}');`;
-        }
-
-        return `    this.${property} = ${pageLocatorString};`;
-      })
-      .join('\n');
-  }
-
-  private addImportsDynamically(componentFile: { content: string }): void {
-    const lookupType = 'ILookupDropdown';
-    const comboBoxType = 'IFormComboBox';
-    const inputFieldType = 'IInputFieldControl';
-    const datePickerType = 'IDateControl';
-
-    const inputFieldImport =
-      "import { createInputFieldControl, type IInputFieldControl } from '../../../../controls/InputFieldControl.js';";
-
-    const lookupImport =
-      "import { createLookupDropdown, type ILookupDropdown } from '../../../../controls/LookupDropdown.js';";
-
-    const comboBoxImport =
-      "import { createFormComboBox, type IFormComboBox } from '../../../../controls/FormComboBox.js';";
-
-    const datePickerImport =
-      "import { createDateControl, type IDateControl } from '../../../../controls/DateControl.js';";
-
-    if (componentFile.content.includes(lookupType) && !componentFile.content.includes(lookupImport)) {
-      componentFile.content = `${lookupImport}\n${componentFile.content}`;
-    }
-
-    if (componentFile.content.includes(comboBoxType) && !componentFile.content.includes(comboBoxImport)) {
-      componentFile.content = `${comboBoxImport}\n${componentFile.content}`;
-    }
-
-    if (componentFile.content.includes(inputFieldType) && !componentFile.content.includes(inputFieldImport)) {
-      componentFile.content = `${inputFieldImport}\n${componentFile.content}`;
-    }
-
-    if (componentFile.content.includes(datePickerType) && !componentFile.content.includes(datePickerImport)) {
-      componentFile.content = `${datePickerImport}\n${componentFile.content}`;
-    }
-  }
-
-  private generatePropertyDeclarations(propertiesToConvert: string[], componentName: SubjectComponents): string {
-    return propertiesToConvert
-      .map((line) => {
-        const property = line.replace(/^\s+/, '').split(':')[0].replace(/\?$/, '').trim();
-
-        if (componentName === 'Form' && property.endsWith('Lookup')) {
-          return `  ${property}: ILookupDropdown;`;
-        }
-
-        if (componentName === 'Form' && property.endsWith('ComboBox')) {
-          return `  ${property}: IFormComboBox;`;
-        }
-
-        if (componentName === 'Form' && property.endsWith('Field')) {
-          return `  ${property}: IInputFieldControl;`;
-        }
-
-        if (componentName === 'Form' && property.endsWith('DatePicker')) {
-          return `  ${property}: IDateControl;`;
-        }
-
-        return `  ${property}: Locator;`;
-      })
-      .join('\n');
-  }
-
-  private transformInterfaceTypes(componentFile: { content: string }): void {
-    const interfaceRegex = /export interface \w+ extends Form \{([\s\S]*?)\}/g;
-
-    const typeMapping: Record<string, string> = {
-      Lookup: 'ILookupDropdown',
-      ComboBox: 'IFormComboBox',
-      Field: 'IInputFieldControl',
-      DatePicker: 'IDateControl'
-    };
-
-    componentFile.content = componentFile.content.replace(interfaceRegex, (match, interfaceBody) => {
-      const propertyRegex = /(\w+(Lookup|ComboBox|Field|DatePicker))\s*:\s*Locator;/g;
-
-      const updatedBody = interfaceBody.replace(propertyRegex, (_match: string, propName: string, suffix: string) => {
-        const newType = typeMapping[suffix];
-        return `${propName}: ${newType};`;
-      });
-
-      return match.replace(interfaceBody, updatedBody);
-    });
-  }
-
   private convertStringsToArray(content: string): string[] {
     return content
       .split('\n')
@@ -298,26 +141,4 @@ export class SubjectComponentGenerator {
   ): RegExpMatchArray | null {
     return componentFile.content.match(new RegExp(`export interface ${mainInterface} extends [^{]+{([^}]*)}`));
   }
-
-  private setSubjectExtendsComponent(componentFile: { content: string }, componentName: string): void {
-    componentFile.content = componentFile.content.replace(
-      /export interface (\w+) \{/,
-      `export interface $1 extends ${componentName} {`
-    );
-  }
-
-  private addComponentImports(componentFile: { content: string }, componentName: string): void {
-    // biome-ignore lint/style/useTemplate: reason 42
-    componentFile.content = `import type { Locator } from '@playwright/test';\n\n` + componentFile.content;
-
-    if (componentName === 'Grid') {
-      componentFile.content = `import { createGridColumnControl, type IGridColumnControl } from '../../../../controls/GridColumnControl.js';\n${componentFile.content}`;
-    }
-
-    componentFile.content = `import { ${componentName} } from '../../../../components/index.js';\n${componentFile.content}`;
-  }
-
-  private removeLocatorInterface(componentFile: { content: string }): void {
-    componentFile.content = componentFile.content.replace(/export interface Locator {[^}]*}\s*/g, '');
-  }
 }