@thinkwise/testwise 0.1.97 → 0.2.0-beta.3

package/artifact-builder/ScreenInterfaceRefiner.ts

@@ -0,0 +1,159 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { disabledScreenComponents, type ScreenComponents, screenComponents } from '../types/Components.js';
+
+export class ScreenInterfaceRefiner {
+  private readonly _screensDirectory: string;
+
+  constructor() {
+    const _filename = fileURLToPath(import.meta.url);
+    const _dirname = path.dirname(_filename);
+    this._screensDirectory = path.resolve(_dirname, '../../test-artifacts/screens');
+  }
+
+  public refine() {
+    console.log('Refining interfaces in:', this._screensDirectory);
+
+    const screenFiles = this.getAllScreenInterfaceFiles();
+
+    screenFiles.forEach((screenFile) => {
+      const filePath = path.join(this._screensDirectory, screenFile);
+      const screen = { content: fs.readFileSync(filePath, 'utf-8') };
+
+      const interfaces = this.findInterfaces(screen.content);
+
+      this.removeUnsupportedComponents(screen);
+      this.consolidateTabComponents(screen);
+      this.removeEmptyLines(screen);
+
+      if (interfaces.length > 1) {
+        const interfacesToRemove = this.getPlaceholderInterfaces(screen, interfaces);
+
+        this.addImportStatements(screen, interfacesToRemove);
+        this.formatContent(screen);
+
+        fs.writeFileSync(filePath, screen.content, 'utf-8');
+        console.log(`Refined interfaces in: ${screenFile}`);
+      } else {
+        console.log(`No additional interfaces to refine in: ${screenFile}`);
+      }
+
+      this.indexScreenInterface(screenFile);
+    });
+  }
+
+  private removeEmptyLines(screen: { content: string }) {
+    screen.content = screen.content.replace(/^\s*[\r\n]/gm, '');
+  }
+
+  private indexScreenInterface(screenFile: string) {
+    const indexPath = path.resolve(this._screensDirectory, 'index.ts');
+    let indexContent = fs.readFileSync(indexPath, 'utf-8');
+
+    const fileJS = screenFile.replace('.ts', '.js');
+    const exportLine = `export * from './${fileJS}';\n`;
+    if (!indexContent.includes(exportLine)) {
+      const lines = indexContent.split('\n');
+      let insertPos = 0;
+      while (insertPos < lines.length && lines[insertPos].startsWith('export')) {
+        insertPos++;
+      }
+      lines.splice(insertPos, 0, exportLine.trim());
+      indexContent = lines.join('\n');
+      fs.writeFileSync(indexPath, indexContent, 'utf-8');
+    }
+  }
+
+  private formatContent(screen: { content: string }) {
+    screen.content = screen.content.replace(/(\n\s*)+$/g, '\n');
+  }
+
+  private addImportStatements(screen: { content: string }, interfacesToRemoveList: string[]) {
+    const importsToAdd = interfacesToRemoveList.filter(
+      (interfaceName) =>
+        (Object.values(screenComponents) as string[]).includes(interfaceName) &&
+        !(Object.values(disabledScreenComponents) as string[]).includes(interfaceName)
+    );
+
+    const importStatement = `import type { ${importsToAdd.join(', ')} } from '../../components/index.js';\n\n`;
+    screen.content = importStatement + screen.content;
+  }
+
+  private isActiveScreenComponent(value: string): value is ScreenComponents {
+    if (disabledScreenComponents.includes(value as ScreenComponents)) {
+      return false;
+    }
+
+    return screenComponents.includes(value as ScreenComponents);
+  }
+
+  private removeUnsupportedComponents(screen: { content: string }) {
+    const propertyRegex = /(\s+)(\w+): (\w+);/g;
+    screen.content = screen.content.replace(propertyRegex, (match, _p1, _p2, p3) => {
+      if (this.isActiveScreenComponent(p3)) {
+        return match;
+      } else {
+        return '';
+      }
+    });
+  }
+
+  // This is a short-term solution until we implement a more robust tab consolidation mechanism
+  private consolidateTabComponents(screen: { content: string }) {
+    let hasTab = false;
+    let hasDetailTabPage = false;
+
+    screen.content = screen.content.replace(
+      /^[ \t]*([a-zA-Z0-9_]+)[ \t]*:[ \t]*(Tab|DetailTabPage)[ \t]*;[ \t]*$/gim,
+      (_match, _prop, type) => {
+        switch (type) {
+          case 'Tab':
+            hasTab = true;
+            break;
+          case 'DetailTabPage':
+            hasDetailTabPage = true;
+            break;
+        }
+
+        return '';
+      }
+    );
+
+    let insert = '';
+
+    if (hasTab) insert += '  tab: Tab;\n';
+    if (hasDetailTabPage) insert += '  detailTab: DetailTabPage;\n';
+    if (insert) {
+      screen.content = screen.content.replace(/([ \t]*)}/, (_m, ws) => `${insert}${ws}}`);
+    }
+  }
+
+  private getPlaceholderInterfaces(screen: { content: string }, interfaces: string[]): string[] {
+    const interfacesToRemove = interfaces.slice(1);
+
+    interfacesToRemove.forEach((interfaceName) => {
+      const interfaceRegex = new RegExp(`export interface ${interfaceName} \\{[\\s\\S]*?\\}`, 'g');
+      screen.content = screen.content.replace(interfaceRegex, '');
+    });
+
+    return interfacesToRemove;
+  }
+
+  private findInterfaces(content: string): string[] {
+    const interfaceRegex = /export interface (\w+) \{[\s\S]*?\}/g;
+    const interfaces = [];
+    let match = interfaceRegex.exec(content);
+
+    while (match !== null) {
+      interfaces.push(match[1]);
+      match = interfaceRegex.exec(content);
+    }
+
+    return interfaces;
+  }
+
+  private getAllScreenInterfaceFiles(): string[] {
+    return fs.readdirSync(this._screensDirectory).filter((f) => f.endsWith('.ts'));
+  }
+}

package/artifact-builder/SelectorBuilder.ts

@@ -0,0 +1,82 @@
+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';
+
+export class SelectorBuilder {
+  private _namingHandler: NamingHandler;
+
+  constructor() {
+    this._namingHandler = new NamingHandler();
+  }
+
+  private determineSelectorSuffix(property: string, componentName: SubjectComponents): string | null {
+    let selectorSuffix = null;
+
+    if (componentName === 'Form') {
+      if (this._namingHandler.getElementTypeFromElementName(property) === KnownElementTypes.Lookup) {
+        selectorSuffix = '__control__input';
+      } else if (this._namingHandler.getElementTypeFromElementName(property) === KnownElementTypes.Dropdown) {
+        selectorSuffix = '__select__input';
+      }
+    }
+
+    return selectorSuffix;
+  }
+
+  private getDefaultPrefix(componentName: SubjectComponents): string {
+    let prefix = '';
+
+    if (componentName === 'Grid') {
+      prefix = '[col-id="';
+    } else if (componentName === 'Form') {
+      prefix = 'form-field__';
+    } else {
+      throw new Error(`Unsupported component type: ${componentName}`);
+    }
+
+    return prefix;
+  }
+
+  private getDefaultSuffix(componentName: SubjectComponents): string {
+    let suffix = '';
+
+    if (componentName === 'Grid') {
+      suffix = '"]';
+    } else if (componentName === 'Form') {
+      suffix = '__input';
+    } else {
+      throw new Error(`Unsupported component type: ${componentName}`);
+    }
+
+    return suffix;
+  }
+
+  public getPageLocatorString(property: string, componentName: SubjectComponents): string {
+    const elementId = this._namingHandler.getIdFromElementName(property);
+    const selectorPrefix = this.getDefaultPrefix(componentName);
+    const defaultSuffix = this.getDefaultSuffix(componentName);
+    const selectorSuffix = this.determineSelectorSuffix(property, componentName) || defaultSuffix;
+
+    return `page.${this.getLocatorType(componentName)}('${selectorPrefix}${elementId}${selectorSuffix}')`;
+  }
+
+  private getLocatorType(componentName: SubjectComponents): LocatorType {
+    if (componentName === 'Form') {
+      return 'getByTestId';
+    } else if (componentName === 'Grid') {
+      return 'locator';
+    } else {
+      throw new Error(`Unsupported component type: ${componentName}`);
+    }
+  }
+
+  public getPageContext(subject: ISubject) {
+    const variantSelector: string = subject.variant ? `[data-tab-variant-id="${subject.variant}"]` : '';
+    const screentypeId = subject.screentype_id.replace(/_/g, '-');
+
+    return `[data-testid="screen__${screentypeId}"][data-tab-id="${subject.subject}"]${variantSelector}`;
+  }
+}
+
+export type LocatorType = 'locator' | 'getByTestId' | 'getByRole' | 'getByLabel' | 'getByPlaceholder' | 'getByText';

package/artifact-builder/SubjectComponentGenerator.ts

@@ -0,0 +1,186 @@
+/** 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 { SubjectComponents } from '../types/Components.js';
+import { NamingHandler } from './helpers/NamingHandler.js';
+import { SelectorBuilder } from './SelectorBuilder.js';
+
+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 _selectorBuilder: SelectorBuilder;
+  private readonly _namingHandler: NamingHandler;
+
+  constructor() {
+    this._currentFilename = fileURLToPath(import.meta.url);
+    this._currentDirname = dirname(this._currentFilename);
+    this._subjectsDirectory = path.resolve(
+      this._currentDirname,
+      `../../${SubjectComponentGenerator.SUBJECTS_RELATIVE_PATH}`
+    );
+    this._selectorBuilder = new SelectorBuilder();
+    this._namingHandler = new NamingHandler();
+  }
+
+  public run(): void {
+    this.refineSubjectComponents();
+  }
+
+  private getAllSubjectFolders(): string[] {
+    return fs.readdirSync(this._subjectsDirectory).filter((file) => {
+      return fs.statSync(path.join(this._subjectsDirectory, file)).isDirectory();
+    });
+  }
+
+  private refineSubjectComponents(): void {
+    const subjectFolders = this.getAllSubjectFolders();
+
+    subjectFolders.forEach((subjectFolder) => {
+      const componentsDirectory = path.join(this._subjectsDirectory, `${subjectFolder}/Components`);
+
+      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);
+
+        if (componentClass) {
+          this.refine(path.join(componentsDirectory, componentFile), componentClass);
+        }
+      });
+    });
+  }
+
+  private getComponentNameFromFile(fileName: string): string {
+    const componentName = fileName
+      .split(/(?=[A-Z])/)
+      .pop()
+      ?.replace('.ts', '');
+
+    if (!componentName) throw new Error(`Could not extract component name from file: ${fileName}`);
+
+    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') };
+
+      this.removeLocatorInterface(componentFile);
+      this.addComponentImports(componentFile, componentName);
+      this.setSubjectExtendsComponent(componentFile, componentName);
+
+      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 = '';
+
+        if (matchingProperties?.[1]) {
+          const propertyLines: string[] = this.convertStringsToArray(matchingProperties[1]);
+
+          propertyDeclarations = this.generatePropertyDeclarations(propertyLines);
+
+          assignments = this.getPropertyInitializations(propertyLines, componentName);
+        }
+
+        componentFile.content += `\nexport class ${mainInterface}Component extends ${componentName} implements ${mainInterface} {\n${propertyDeclarations}\n\n  constructor(page: Page, context: Locator | null = null) {\n    super(page, context);\n${assignments}\n  }\n}\n`;
+      }
+
+      const subjectMatch: RegExpMatchArray | null = componentDirPath.match(/subjects[/](\w+)[/]/);
+      const subjectName: string | null = subjectMatch ? subjectMatch[1] : null;
+
+      if (subjectName) {
+        const formattedSubjectName = this._namingHandler.formatSubjectName(subjectName);
+        const subjectFolder = this.getSubjectFolderPath(formattedSubjectName);
+        const fileName = path.basename(componentDirPath);
+
+        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/`
+    );
+  }
+
+  private verifyDirectoryExists(directoryPath: string): void {
+    if (!fs.existsSync(directoryPath)) {
+      fs.mkdirSync(directoryPath, { recursive: true });
+    }
+  }
+
+  private getPropertyInitializations(propertyLines: string[], componentName: SubjectComponents): string {
+    return propertyLines
+      .map((line) => {
+        const property = line.split(':')[0].replace(/\?$/, '').trim();
+        const pageLocatorString = this._selectorBuilder.getPageLocatorString(property, componentName);
+        return `    this.${property} = ${pageLocatorString};`;
+      })
+      .join('\n');
+  }
+
+  private generatePropertyDeclarations(propertiesToConvert: string[]): string {
+    return propertiesToConvert
+      .map((line) => {
+        const property = line.replace(/^\s+/, '').split(':')[0].replace(/\?$/, '').trim();
+        return `  ${property}!: Locator;`;
+      })
+      .join('\n');
+  }
+
+  private convertStringsToArray(content: string): string[] {
+    return content
+      .split('\n')
+      .map((line) => line.trim())
+      .filter((line) => line && !line.startsWith('//'));
+  }
+
+  private getPropertyNamesFromInterface(
+    componentFile: { content: string },
+    mainInterface: string
+  ): 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, Page } from '@playwright/test';\n\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, '');
+  }
+}