@thinkwise/testwise 0.2.67 → 0.2.99

package/artifact-builder/SelectorBuilder.ts

@@ -1,22 +1,32 @@
 import { KnownElementTypes } from '../enums/ElementTypes.js';
 import type { ISubject } from '../interfaces/ISubject.js';
 import type { SubjectComponents } from '../types/Components.js';
-import { NamingHandler } from './helpers/index.js';
-
+import type { LocatorType } from '../types/LocatorType.js';
+
+/**
+ * Produces the Playwright locator string and locator strategy (`getByTestId`,
+ * `locator`, etc.) for each field/column property in a generated subject class.
+ *
+ * **What it does:** Given a property's `control_type`, component type (Form or
+ * Grid), and the field identifier, `SelectorBuilder` returns the correct CSS
+ * selector fragment or test-id string that will be used in the generated
+ * `<Name>Objects.ts` file.
+ *
+ * For example:
+ * - A `Form` `lookup` field named `country_id` → `getByTestId('form-field__country_id__control__input')`
+ * - A `Grid` column named `status` → `locator('[col-id="status"]')`
+ *
+ * **For contributors:** If you are adding support for a new Thinkwise control
+ * type, this is the first place to update after `NamingHandler`.
+ */
 export class SelectorBuilder {
-  private _namingHandler: NamingHandler;
-
-  constructor() {
-    this._namingHandler = new NamingHandler();
-  }
-
-  private determineSelectorSuffix(property: string, componentName: SubjectComponents): string | null {
+  private determineSelectorSuffix(elementType: string, componentName: SubjectComponents): string | null {
     let selectorSuffix = null;
 
     if (componentName === 'Form') {
-      if (this._namingHandler.getElementTypeFromElementName(property) === KnownElementTypes.Lookup) {
+      if (elementType === KnownElementTypes.Lookup) {
         selectorSuffix = '__control__input';
-      } else if (this._namingHandler.getElementTypeFromElementName(property) === KnownElementTypes.Dropdown) {
+      } else if (elementType === KnownElementTypes.Dropdown) {
         selectorSuffix = '__select__input';
       }
     }
@@ -32,6 +42,7 @@ export class SelectorBuilder {
     } else if (componentName === 'Form') {
       prefix = 'form-field__';
     } else {
+      /* v8 ignore next -- getDefaultPrefix throws first; getDefaultSuffix/getLocatorType are unreachable for the same input */
       throw new Error(`Unsupported component type: ${componentName}`);
     }
 
@@ -46,28 +57,24 @@ export class SelectorBuilder {
     } else if (componentName === 'Form') {
       suffix = '__input';
     } else {
+      /* v8 ignore next -- same guard as getDefaultPrefix; unreachable in practice */
       throw new Error(`Unsupported component type: ${componentName}`);
     }
 
     return suffix;
   }
 
-  public getElementId(property: string, componentName: SubjectComponents): string {
-    return this._namingHandler.getIdFromElementName(
-      property,
-      componentName,
-      this._namingHandler.getElementTypeFromElementName(property)
-    );
+  public getElementId(colId: string, componentName: SubjectComponents): string {
+    if (componentName === 'Grid') return colId;
+    return colId.replace(/_/g, '-');
   }
 
-  public getLocatorString(property: string, componentName: SubjectComponents): string {
-    let elementId = this.getElementId(property, componentName);
-
-    if (componentName === 'Grid') elementId = elementId.replace(/-/g, '_');
+  public getLocatorString(colId: string, elementType: string, componentName: SubjectComponents): string {
+    const elementId = this.getElementId(colId, componentName);
 
     const selectorPrefix = this.getDefaultPrefix(componentName);
     const defaultSuffix = this.getDefaultSuffix(componentName);
-    const selectorSuffix = this.determineSelectorSuffix(property, componentName) || defaultSuffix;
+    const selectorSuffix = this.determineSelectorSuffix(elementType, componentName) || defaultSuffix;
 
     return `this._context.${this.getLocatorType(componentName)}('${selectorPrefix}${elementId}${selectorSuffix}')`;
   }
@@ -78,6 +85,7 @@ export class SelectorBuilder {
     } else if (componentName === 'Grid') {
       return 'locator';
     } else {
+      /* v8 ignore next -- same guard as getDefaultPrefix; unreachable in practice */
       throw new Error(`Unsupported component type: ${componentName}`);
     }
   }
@@ -89,5 +97,3 @@ export class SelectorBuilder {
     return `[data-testid="screen__${screentypeId}"][data-tab-id="${subject.subject}"]${variantSelector}`;
   }
 }
-
-export type LocatorType = 'locator' | 'getByTestId' | 'getByRole' | 'getByLabel' | 'getByPlaceholder' | 'getByText';

package/artifact-builder/SubjectClassModelBuilder.ts

@@ -0,0 +1,209 @@
+import type { ISubject } from '../interfaces/ISubject.js';
+import {
+  coreComponents,
+  type ScreenComponents,
+  type SubjectAgnosticComponents,
+  screenComponents
+} from '../types/Components.js';
+import type { NamingHandler } from './helpers/NamingHandler.js';
+import type { SelectorBuilder } from './SelectorBuilder.js';
+import type { TsConstructor, TsFileModel, TsImport, TsMethod, TsProperty } from './TsFileModel.js';
+
+export type ComponentEntry = {
+  name: string;
+  type: ScreenComponents;
+  context: string;
+};
+
+/**
+ * **Pipeline sub-step** — Builds a pure in-memory model (`TsFileModel`) that
+ * describes the TypeScript class to generate for a single Thinkwise subject +
+ * screen context combination.
+ *
+ * **What it does:** Given an `ISubject` record from seed data, it works out:
+ * - Which imports the generated class needs.
+ * - Which component properties to declare (e.g. `form: EmployeeForm`,
+ *   `grid: EmployeeGrid`, `actionBar: ActionBar`).
+ * - The constructor body that instantiates each component with the correct
+ *   Playwright locator.
+ * - The `goTo()` method body.
+ *
+ * **No file I/O here** — the model is handed to `TsFileSerializer` which
+ * writes it to disk. This split makes `SubjectClassModelBuilder` fully
+ * unit-testable without a real filesystem.
+ */
+export class SubjectClassModelBuilder {
+  private readonly _namingHandler: NamingHandler;
+  private readonly _selectorBuilder: SelectorBuilder;
+
+  constructor(namingHandler: NamingHandler, selectorBuilder: SelectorBuilder) {
+    this._namingHandler = namingHandler;
+    this._selectorBuilder = selectorBuilder;
+  }
+
+  public build(
+    subject: ISubject,
+    screenInterfaceName: string,
+    componentDictionary: ComponentEntry[],
+    subjectFolderName: string
+  ): TsFileModel {
+    return {
+      imports: this.buildImports(screenInterfaceName, componentDictionary, subjectFolderName),
+      classModel: {
+        name: this._namingHandler.generateSubjectClassName(subject),
+        extendsClass: 'SubjectPageBase',
+        implementsInterface: screenInterfaceName,
+        properties: this.buildProperties(componentDictionary, subjectFolderName),
+        constructor: this.buildConstructor(subject, componentDictionary, subjectFolderName),
+        methods: [this.buildGoToMethod(subject)]
+      }
+    };
+  }
+
+  public buildImports(
+    screenInterfaceName: string,
+    componentDictionary: ComponentEntry[],
+    subjectFolderName: string
+  ): TsImport[] {
+    const imports: TsImport[] = [];
+
+    imports.push({ namedImports: [{ name: screenInterfaceName }], isTypeOnly: true, from: '../../screens/index.js' });
+
+    const coreTypes = [
+      ...new Set(
+        componentDictionary
+          .filter(
+            (c) => screenComponents.includes(c.type) && coreComponents.includes(c.type as SubjectAgnosticComponents)
+          )
+          .map((c) => c.type)
+      )
+    ];
+
+    if (coreTypes.length > 0) {
+      imports.push({
+        namedImports: coreTypes.map((t) => ({ name: t })),
+        isTypeOnly: false,
+        from: '../../../components/index.js'
+      });
+    }
+
+    for (const component of componentDictionary) {
+      if (!screenComponents.includes(component.type)) continue;
+      if (coreComponents.includes(component.type as SubjectAgnosticComponents)) continue;
+
+      const baseName = `${subjectFolderName}${component.type}`;
+      imports.push({
+        namedImports: [{ name: baseName, isTypeOnly: true }, { name: `${baseName}Component` }],
+        isTypeOnly: false,
+        from: `./Components/${baseName}.js`
+      });
+    }
+
+    imports.push({ namedImports: [{ name: 'Page' }], isTypeOnly: true, from: '@playwright/test' });
+    imports.push({
+      namedImports: [{ name: 'SubjectNavigator' }],
+      isTypeOnly: false,
+      from: '@thinkwise/testwise/helpers/SubjectNavigator'
+    });
+    imports.push({ namedImports: [{ name: 'SubjectPageBase' }], isTypeOnly: false, from: '../../SubjectPageBase.js' });
+
+    return imports;
+  }
+
+  public buildProperties(componentDictionary: ComponentEntry[], subjectFolderName: string): TsProperty[] {
+    const properties: TsProperty[] = [];
+
+    for (const component of componentDictionary) {
+      if (!screenComponents.includes(component.type)) continue;
+
+      const propertyName = this._namingHandler.formatPropertyName(component.name);
+
+      if (coreComponents.includes(component.type as SubjectAgnosticComponents)) {
+        properties.push({ name: propertyName, type: component.type });
+      } else {
+        properties.push({ name: propertyName, type: `${subjectFolderName}${component.type}` });
+      }
+    }
+
+    properties.push({ access: 'private', name: '_subjectPage', type: 'Page' });
+    return properties;
+  }
+
+  public buildConstructor(
+    subject: ISubject,
+    componentDictionary: ComponentEntry[],
+    subjectFolderName: string
+  ): TsConstructor {
+    const rootContextSelector = this._selectorBuilder.getPageContext(subject);
+    const assignments = [];
+
+    for (const component of componentDictionary) {
+      if (!screenComponents.includes(component.type)) continue;
+
+      const propertyName = this._namingHandler.formatPropertyName(component.name);
+
+      if (coreComponents.includes(component.type as SubjectAgnosticComponents)) {
+        const componentId = this._namingHandler.toPascalCase(propertyName);
+        assignments.push({ property: propertyName, value: this.getComponentInitializer(component, componentId) });
+      } else {
+        assignments.push({
+          property: propertyName,
+          value: `new ${subjectFolderName}${component.type}Component(${component.context})`
+        });
+      }
+    }
+
+    return {
+      params: [{ name: 'page', type: 'Page' }],
+      superCall: `page.locator('${rootContextSelector}')`,
+      assignments,
+      extraLines: ['this._subjectPage = this.context.page();']
+    };
+  }
+
+  public buildGoToMethod(subject: ISubject): TsMethod {
+    let url = `subject=${subject.subject}`;
+    if (subject.variant !== '') url = `${url}/subjectVariant=${subject.variant}`;
+
+    return {
+      isAsync: true,
+      name: 'goTo',
+      returnType: 'void',
+      bodyLines: [`await new SubjectNavigator(this._subjectPage).navigateTo(\`${url}\`);`]
+    };
+  }
+
+  private getComponentInitializer(component: ComponentEntry, componentId: string): string {
+    const componentNamePascal = this._namingHandler.toPascalCase(component.type);
+
+    switch (component.type) {
+      case 'Cardlist':
+      case 'TaskTiles':
+      case 'PrefilterList':
+      case 'Chart':
+      case 'CubeViewBar':
+      case 'PivotGrid':
+      case 'PivotGridFieldList':
+      case 'Maps':
+      case 'ReportBar':
+      case 'ReportTiles':
+      case 'Preview':
+        return `new ${component.type}(this.context.locator('.${component.type}.${componentNamePascal}'))`;
+      case 'CombinedFilter':
+      case 'CustomActionBar':
+      case 'ActionBar':
+      case 'Splitter':
+      case 'DetailTabPage':
+      case 'Tab':
+      case 'FilterForm':
+      case 'Scheduler':
+        return `new ${component.type}(${component.context})`;
+      case 'TreeView':
+        return `new ${component.type}(this.context.locator('.Tree.${componentNamePascal}'))`;
+      case 'TaskBar':
+        return `new ${component.type}(this.context.locator('.ActionBar.${componentId}'))`;
+      default:
+        throw new Error(`Unknown core component type: ${component.type}`);
+    }
+  }
+}