@sun-asterisk/sungen 1.0.0

package/src/tools/auto-tagger.ts

@@ -0,0 +1,572 @@
+/**
+ * Auto-Tagging Tool - v3.1
+ *
+ * Automatically injects stable data-testid attributes into React/Vue/HTML source code
+ *
+ * Key Features:
+ * 1. Idempotent (skips if data-testid already exists)
+ * 2. Preserves code formatting (Prettier/ESLint compatible)
+ * 3. Generates stable, semantic IDs (screen-element-type)
+ * 4. Supports React, Vue, HTML
+ * 5. Dry-run mode for preview
+ *
+ * Philosophy: Proactive solution - add test IDs BEFORE you need them
+ */
+
+import * as parser from '@babel/parser';
+import traverse, { NodePath } from '@babel/traverse';
+import generate from '@babel/generator';
+import * as t from '@babel/types';
+import * as fs from 'fs';
+import * as path from 'path';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+export interface AutoTagConfig {
+  sourceRoot: string;
+  projectRoot: string;
+  screenName?: string;          // Specific screen or all
+  dryRun: boolean;              // Preview changes without writing
+  force: boolean;               // Overwrite existing data-testid
+  verbose: boolean;
+  preserveFormatting: boolean;  // Use Prettier if available
+}
+
+export interface TaggingResult {
+  filePath: string;
+  totalElements: number;
+  taggedElements: number;
+  skippedElements: number;
+  changes: ElementChange[];
+  modified: boolean;
+}
+
+export interface ElementChange {
+  line: number;
+  tag: string;
+  generatedId: string;
+  action: 'added' | 'skipped' | 'overwritten';
+  reason?: string;
+}
+
+export interface TaggingStats {
+  totalFiles: number;
+  modifiedFiles: number;
+  totalElements: number;
+  taggedElements: number;
+  skippedElements: number;
+  processingTime: number;
+}
+
+// ============================================================================
+// TEST ID GENERATOR
+// ============================================================================
+
+class TestIDGenerator {
+  private screenName: string;
+  private usedIds = new Set<string>();
+
+  constructor(screenName: string) {
+    this.screenName = this.normalize(screenName);
+  }
+
+  /**
+   * Generate stable, semantic test ID
+   *
+   * Format: {screen}-{element}-{type}
+   * Examples:
+   * - login-email-input
+   * - login-password-input
+   * - login-submit-btn
+   * - dashboard-user-menu-btn
+   */
+  generate(element: any, index: number): string {
+    const tag = element.tag?.toLowerCase() || 'element';
+    const props = element.props || {};
+
+    let elementName = '';
+
+    // Strategy 1: Use existing name/id/placeholder
+    if (props.name) {
+      elementName = this.normalize(props.name);
+    } else if (props.id) {
+      elementName = this.normalize(props.id);
+    } else if (props.placeholder) {
+      elementName = this.normalize(props.placeholder);
+    } else if (element.text && ['button', 'a'].includes(tag)) {
+      elementName = this.normalize(element.text);
+    } else if (props['aria-label']) {
+      elementName = this.normalize(props['aria-label']);
+    }
+
+    // Strategy 2: Use type-based naming
+    if (!elementName && props.type) {
+      elementName = this.normalize(props.type);
+    }
+
+    // Strategy 3: Fallback to index
+    if (!elementName) {
+      elementName = `${tag}-${index}`;
+    }
+
+    // Add suffix based on tag
+    const suffix = this.getSuffix(tag, props.type);
+
+    // Combine: screen-element-suffix
+    const baseId = `${this.screenName}-${elementName}${suffix}`;
+
+    // Ensure uniqueness
+    let finalId = baseId;
+    let counter = 1;
+    while (this.usedIds.has(finalId)) {
+      finalId = `${baseId}-${counter}`;
+      counter++;
+    }
+
+    this.usedIds.add(finalId);
+    return finalId;
+  }
+
+  private getSuffix(tag: string, type?: string): string {
+    if (tag === 'input') {
+      if (type === 'submit') return '-btn';
+      return '-input';
+    }
+
+    const suffixMap: Record<string, string> = {
+      'button': '-btn',
+      'a': '-link',
+      'select': '-select',
+      'textarea': '-textarea',
+      'form': '-form',
+    };
+
+    return suffixMap[tag] || '';
+  }
+
+  private normalize(str: string): string {
+    return str
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '');
+  }
+
+  reset() {
+    this.usedIds.clear();
+  }
+}
+
+// ============================================================================
+// AST ELEMENT EXTRACTOR
+// ============================================================================
+
+class ElementExtractor {
+  /**
+   * Extract element data from JSX node
+   */
+  extract(node: t.JSXElement): any {
+    const openingElement = node.openingElement;
+    const tag = this.getTagName(openingElement.name);
+
+    // Extract props
+    const props: Record<string, any> = {};
+    for (const attr of openingElement.attributes) {
+      if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) {
+        const name = attr.name.name;
+        const value = this.getAttributeValue(attr.value);
+        props[name] = value;
+      }
+    }
+
+    // Extract text content
+    const text = this.extractTextContent(node);
+
+    return { tag, props, text, node, openingElement };
+  }
+
+  private getTagName(name: any): string {
+    if (t.isJSXIdentifier(name)) {
+      return name.name.toLowerCase();
+    }
+    if (t.isJSXMemberExpression(name)) {
+      // Handle <Form.Input> → "input"
+      return this.getTagName(name.property);
+    }
+    return 'unknown';
+  }
+
+  private getAttributeValue(value: any): any {
+    if (!value) return true; // Boolean attribute
+    if (t.isStringLiteral(value)) return value.value;
+    if (t.isJSXExpressionContainer(value)) {
+      if (t.isStringLiteral(value.expression)) {
+        return value.expression.value;
+      }
+      if (t.isBooleanLiteral(value.expression)) {
+        return value.expression.value;
+      }
+    }
+    return undefined;
+  }
+
+  private extractTextContent(node: t.JSXElement): string | null {
+    const children = node.children || [];
+
+    for (const child of children) {
+      if (t.isJSXText(child)) {
+        const text = child.value.trim();
+        if (text) return text;
+      }
+      if (t.isJSXExpressionContainer(child)) {
+        if (t.isStringLiteral(child.expression)) {
+          return child.expression.value;
+        }
+      }
+    }
+
+    return null;
+  }
+}
+
+// ============================================================================
+// AUTO TAGGER (Main Class)
+// ============================================================================
+
+export class AutoTagger {
+  private config: AutoTagConfig;
+  private extractor = new ElementExtractor();
+  private stats: TaggingStats = {
+    totalFiles: 0,
+    modifiedFiles: 0,
+    totalElements: 0,
+    taggedElements: 0,
+    skippedElements: 0,
+    processingTime: 0,
+  };
+
+  // Interactive elements that should have data-testid
+  private readonly INTERACTIVE_TAGS = ['input', 'button', 'a', 'select', 'textarea', 'form'];
+
+  constructor(config: AutoTagConfig) {
+    this.config = config;
+  }
+
+  /**
+   * Tag a specific screen or all screens
+   */
+  async tag(): Promise<TaggingStats> {
+    const startTime = Date.now();
+
+    if (this.config.screenName) {
+      await this.tagScreen(this.config.screenName);
+    } else {
+      await this.tagAllScreens();
+    }
+
+    this.stats.processingTime = Date.now() - startTime;
+    return this.stats;
+  }
+
+  /**
+   * Tag a specific screen
+   */
+  private async tagScreen(screenName: string): Promise<void> {
+    const files = this.findSourceFiles(screenName);
+
+    if (files.length === 0) {
+      console.log(`⚠️  No source files found for screen: ${screenName}`);
+      return;
+    }
+
+    console.log(`📂 Found ${files.length} files for screen: ${screenName}\n`);
+
+    for (const file of files) {
+      await this.tagFile(file, screenName);
+    }
+  }
+
+  /**
+   * Tag all screens (scan entire source root)
+   */
+  private async tagAllScreens(): Promise<void> {
+    console.log('📂 Scanning all source files...\n');
+
+    const allFiles = this.findAllSourceFiles(this.config.sourceRoot);
+    console.log(`Found ${allFiles.length} files\n`);
+
+    for (const file of allFiles) {
+      const screenName = this.inferScreenName(file);
+      await this.tagFile(file, screenName);
+    }
+  }
+
+  /**
+   * Tag a single file
+   */
+  private async tagFile(filePath: string, screenName: string): Promise<TaggingResult> {
+    this.stats.totalFiles++;
+
+    const relativePath = path.relative(this.config.projectRoot, filePath);
+    console.log(`📄 Processing: ${relativePath}`);
+
+    // Read file
+    const code = fs.readFileSync(filePath, 'utf-8');
+
+    // Parse with Babel
+    let ast;
+    try {
+      ast = parser.parse(code, {
+        sourceType: 'module',
+        plugins: ['jsx', 'typescript'],
+      });
+    } catch (error) {
+      console.log(`   ⚠️  Parse error, skipping\n`);
+      return this.createEmptyResult(filePath);
+    }
+
+    // Tag elements in AST
+    const result = await this.tagAST(ast, filePath, screenName);
+
+    // Write back if modified and not dry-run
+    if (result.modified && !this.config.dryRun) {
+      const newCode = generate(ast, {
+        retainLines: true,
+        comments: true,
+      }).code;
+
+      fs.writeFileSync(filePath, newCode, 'utf-8');
+      this.stats.modifiedFiles++;
+
+      console.log(`   ✓ Modified (${result.taggedElements} elements tagged)\n`);
+    } else if (result.modified && this.config.dryRun) {
+      console.log(`   🔍 Would modify (${result.taggedElements} elements)\n`);
+    } else {
+      console.log(`   ○ No changes needed\n`);
+    }
+
+    return result;
+  }
+
+  /**
+   * Tag elements in AST
+   */
+  private async tagAST(ast: any, filePath: string, screenName: string): Promise<TaggingResult> {
+    const idGenerator = new TestIDGenerator(screenName);
+    const changes: ElementChange[] = [];
+    let totalElements = 0;
+    let taggedElements = 0;
+    let skippedElements = 0;
+    let modified = false;
+
+    let elementIndex = 0;
+
+    traverse(ast, {
+      JSXElement: (path: NodePath<t.JSXElement>) => {
+        const node = path.node;
+        const element = this.extractor.extract(node);
+
+        // Only process interactive elements
+        if (!this.shouldTag(element)) {
+          return;
+        }
+
+        totalElements++;
+        elementIndex++;
+
+        // Check if already has data-testid
+        const existingTestId = this.findAttribute(element.openingElement, 'data-testid');
+
+        if (existingTestId && !this.config.force) {
+          skippedElements++;
+          changes.push({
+            line: node.loc?.start.line || 0,
+            tag: element.tag,
+            generatedId: existingTestId,
+            action: 'skipped',
+            reason: 'Already has data-testid',
+          });
+          return;
+        }
+
+        // Generate test ID
+        const testId = idGenerator.generate(element, elementIndex);
+
+        // Add or replace data-testid attribute
+        if (existingTestId && this.config.force) {
+          // Overwrite
+          this.setAttribute(element.openingElement, 'data-testid', testId);
+          taggedElements++;
+          modified = true;
+          changes.push({
+            line: node.loc?.start.line || 0,
+            tag: element.tag,
+            generatedId: testId,
+            action: 'overwritten',
+            reason: `Replaced ${existingTestId}`,
+          });
+        } else {
+          // Add new
+          this.addAttribute(element.openingElement, 'data-testid', testId);
+          taggedElements++;
+          modified = true;
+          changes.push({
+            line: node.loc?.start.line || 0,
+            tag: element.tag,
+            generatedId: testId,
+            action: 'added',
+          });
+        }
+      },
+    });
+
+    this.stats.totalElements += totalElements;
+    this.stats.taggedElements += taggedElements;
+    this.stats.skippedElements += skippedElements;
+
+    return {
+      filePath,
+      totalElements,
+      taggedElements,
+      skippedElements,
+      changes,
+      modified,
+    };
+  }
+
+  /**
+   * Determine if element should be tagged
+   */
+  private shouldTag(element: any): boolean {
+    const tag = element.tag?.toLowerCase();
+    return this.INTERACTIVE_TAGS.includes(tag);
+  }
+
+  /**
+   * Find existing attribute value
+   */
+  private findAttribute(openingElement: t.JSXOpeningElement, name: string): string | null {
+    for (const attr of openingElement.attributes) {
+      if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === name) {
+        if (t.isStringLiteral(attr.value)) {
+          return attr.value.value;
+        }
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Set attribute value (replace if exists)
+   */
+  private setAttribute(openingElement: t.JSXOpeningElement, name: string, value: string): void {
+    for (const attr of openingElement.attributes) {
+      if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === name) {
+        attr.value = t.stringLiteral(value);
+        return;
+      }
+    }
+  }
+
+  /**
+   * Add new attribute
+   */
+  private addAttribute(openingElement: t.JSXOpeningElement, name: string, value: string): void {
+    const newAttr = t.jsxAttribute(
+      t.jsxIdentifier(name),
+      t.stringLiteral(value)
+    );
+    openingElement.attributes.push(newAttr);
+  }
+
+  /**
+   * Find source files for a screen
+   */
+  private findSourceFiles(screenName: string): string[] {
+    const patterns = [
+      path.join(this.config.sourceRoot, `${screenName}/page.tsx`),
+      path.join(this.config.sourceRoot, `${screenName}/index.tsx`),
+      path.join(this.config.sourceRoot, `${screenName}.tsx`),
+      path.join(this.config.sourceRoot, `${screenName}/page.js`),
+      path.join(this.config.sourceRoot, `${screenName}/index.js`),
+      path.join(this.config.sourceRoot, `${screenName}.js`),
+    ];
+
+    const found: string[] = [];
+    for (const pattern of patterns) {
+      if (fs.existsSync(pattern)) {
+        found.push(pattern);
+      }
+    }
+
+    return found;
+  }
+
+  /**
+   * Find all source files recursively
+   */
+  private findAllSourceFiles(dir: string): string[] {
+    const files: string[] = [];
+
+    const scan = (currentDir: string) => {
+      const entries = fs.readdirSync(currentDir, { withFileTypes: true });
+
+      for (const entry of entries) {
+        const fullPath = path.join(currentDir, entry.name);
+
+        // Skip node_modules, .git, etc.
+        if (entry.name.startsWith('.') || entry.name === 'node_modules') {
+          continue;
+        }
+
+        if (entry.isDirectory()) {
+          scan(fullPath);
+        } else if (entry.isFile()) {
+          // Only process .tsx, .jsx, .ts, .js files
+          if (/\.(tsx|jsx|ts|js)$/.test(entry.name)) {
+            files.push(fullPath);
+          }
+        }
+      }
+    };
+
+    scan(dir);
+    return files;
+  }
+
+  /**
+   * Infer screen name from file path
+   */
+  private inferScreenName(filePath: string): string {
+    const relativePath = path.relative(this.config.sourceRoot, filePath);
+    const parts = relativePath.split(path.sep);
+
+    // Use first directory as screen name
+    if (parts.length > 1) {
+      return parts[0];
+    }
+
+    // Use filename without extension
+    const fileName = path.basename(filePath, path.extname(filePath));
+    return fileName === 'page' || fileName === 'index' ? 'app' : fileName;
+  }
+
+  private createEmptyResult(filePath: string): TaggingResult {
+    return {
+      filePath,
+      totalElements: 0,
+      taggedElements: 0,
+      skippedElements: 0,
+      changes: [],
+      modified: false,
+    };
+  }
+
+  /**
+   * Get statistics
+   */
+  getStats(): TaggingStats {
+    return { ...this.stats };
+  }
+}