@sun-asterisk/sungen 1.0.20 → 1.0.21

package/src/generators/test-generator/patterns/form-patterns.ts

@@ -1,10 +1,8 @@
 import { ParsedStep } from '../../gherkin-parser';
-import { StepPattern } from './types';
+import { StepPattern, StepTemplateData } from './types';
 
 /**
  * Form action patterns: fill, type, select, check, uncheck
- * Uses template engine for framework-agnostic code generation
- * Resolvers return metadata, templates handle framework syntax
  */
 export const formPatterns: StepPattern[] = [
   {
@@ -14,7 +12,7 @@ export const formPatterns: StepPattern[] = [
       step.elementType === 'uploader' &&
       !!step.selectorRef &&
       !!(step.dataRef || step.value),
-    generator: (step, context) => {
+    resolver: (step, context) => {
       const resolved = context.selectorResolver.resolveSelector(step.selectorRef!, undefined, step.elementType, step.nth);
 
       let fileName: string;
@@ -28,14 +26,9 @@ export const formPatterns: StepPattern[] = [
         fileName = step.value!;
       }
 
-      const code = context.templateEngine.renderStep('upload-action', {
-        ...resolved,
-        selectorRef: step.selectorRef,
-        fileName,
-      });
-
       return {
-        code,
+        templateName: 'upload-action',
+        data: { ...resolved, selectorRef: step.selectorRef, fileName },
         comment: `Upload file ${fileName} via ${step.selectorRef}`,
       };
     },
@@ -45,31 +38,23 @@ export const formPatterns: StepPattern[] = [
     name: 'fill-input',
     matcher: (step: ParsedStep) =>
       (step.text.includes('fills') || step.text.includes('fill') || step.text.includes('inputs') || step.text.includes('input')) && !!step.selectorRef && !!(step.dataRef || step.value),
-    generator: (step, context) => {
+    resolver: (step, context) => {
       const resolved = context.selectorResolver.resolveSelector(step.selectorRef!, undefined, step.elementType, step.nth);
-      
-      // Resolve data reference to actual value
+
       let value: string;
       if (step.dataRef) {
         try {
           value = context.dataResolver.resolveData(step.dataRef, context.featureName);
         } catch (error) {
-          // Fallback: keep as template literal if data resolution fails
           value = `\${${step.dataRef}}`;
         }
       } else {
         value = step.value!;
       }
-      
-      // Use template engine to render framework-specific code
-      const code = context.templateEngine.renderStep('fill-action', {
-        ...resolved,  // strategy, value, role, name, selector
-        selectorRef: step.selectorRef,
-        fillValue: value,
-      });
-      
+
       return {
-        code,
+        templateName: 'fill-action',
+        data: { ...resolved, selectorRef: step.selectorRef, fillValue: value },
         comment: `Fill ${step.selectorRef} with ${step.dataRef || step.value}`,
       };
     },
@@ -79,13 +64,11 @@ export const formPatterns: StepPattern[] = [
     name: 'check-checkbox',
     matcher: (step: ParsedStep) =>
       step.text.includes('checks') && !!step.selectorRef,
-    generator: (step, context) => {
+    resolver: (step, context) => {
       const resolved = context.selectorResolver.resolveSelector(step.selectorRef!, undefined, step.elementType, step.nth);
-      
-      const code = context.templateEngine.renderStep('check-action', { ...resolved, selectorRef: step.selectorRef });
-      
       return {
-        code,
+        templateName: 'check-action',
+        data: { ...resolved, selectorRef: step.selectorRef },
         comment: `Check ${step.selectorRef}`,
       };
     },
@@ -95,13 +78,11 @@ export const formPatterns: StepPattern[] = [
     name: 'uncheck-checkbox',
     matcher: (step: ParsedStep) =>
       step.text.includes('unchecks') && !!step.selectorRef,
-    generator: (step, context) => {
+    resolver: (step, context) => {
       const resolved = context.selectorResolver.resolveSelector(step.selectorRef!, undefined, step.elementType, step.nth);
-      
-      const code = context.templateEngine.renderStep('uncheck-action', { ...resolved, selectorRef: step.selectorRef });
-      
       return {
-        code,
+        templateName: 'uncheck-action',
+        data: { ...resolved, selectorRef: step.selectorRef },
         comment: `Uncheck ${step.selectorRef}`,
       };
     },
@@ -113,10 +94,9 @@ export const formPatterns: StepPattern[] = [
       (step.text.includes('selects') || step.text.match(/\bselect\b/)) &&
       !!step.selectorRef &&
       !!(step.dataRef || step.value),
-    generator: (step, context) => {
+    resolver: (step, context): StepTemplateData => {
       const resolved = context.selectorResolver.resolveSelector(step.selectorRef!, undefined, step.elementType, step.nth);
 
-      // Resolve data reference to actual value
       let value: string;
       if (step.dataRef) {
         try {
@@ -128,32 +108,34 @@ export const formPatterns: StepPattern[] = [
         value = step.value!;
       }
 
-      // Determine action based on role type
-      // Radio buttons use check(), dropdowns use selectOption()
       const isRadio = resolved.role === 'radio' || step.text.includes('radio');
       const isCheckbox = resolved.role === 'checkbox' || step.text.includes('checkbox');
 
-      let code: string;
+      let templateName: string;
+      let data: Record<string, any>;
+
       if (isRadio) {
-        // For radio buttons, we need to find the specific radio with the value
-        code = context.templateEngine.renderStep('radio-select-action', {
-          ...resolved,
-          selectorRef: step.selectorRef,
-          selectValue: value,
-        });
+        templateName = 'radio-select-action';
+        data = { ...resolved, selectorRef: step.selectorRef, selectValue: value };
       } else if (isCheckbox) {
-        code = context.templateEngine.renderStep('check-action', { ...resolved, selectorRef: step.selectorRef });
+        templateName = 'check-action';
+        data = { ...resolved, selectorRef: step.selectorRef };
       } else {
-        // Default to dropdown/combobox selectOption
-        code = context.templateEngine.renderStep('select-action', {
-          ...resolved,
-          selectorRef: step.selectorRef,
-          selectValue: value,
-        });
+        const nativeSelectRoles = ['combobox', 'listbox', 'select'];
+        const isNativeSelect = nativeSelectRoles.includes(resolved.role);
+
+        if (isNativeSelect) {
+          templateName = 'select-action';
+          data = { ...resolved, selectorRef: step.selectorRef, selectValue: value };
+        } else {
+          templateName = 'click-select-action';
+          data = { ...resolved, selectorRef: step.selectorRef, selectValue: value };
+        }
       }
 
       return {
-        code,
+        templateName,
+        data,
         comment: `Select ${step.dataRef || step.value} in ${step.selectorRef}`,
       };
     },
@@ -163,18 +145,14 @@ export const formPatterns: StepPattern[] = [
     name: 'clear-input',
     matcher: (step: ParsedStep) =>
       step.text.includes('clears') && !!step.selectorRef,
-    generator: (step, context) => {
+    resolver: (step, context) => {
       const resolved = context.selectorResolver.resolveSelector(step.selectorRef!, undefined, step.elementType, step.nth);
-      
-      const code = context.templateEngine.renderStep('clear-action', { ...resolved, selectorRef: step.selectorRef });
-      
       return {
-        code,
+        templateName: 'clear-action',
+        data: { ...resolved, selectorRef: step.selectorRef },
         comment: `Clear ${step.selectorRef}`,
       };
     },
     priority: 7,
   },
 ];
-
-

package/src/generators/test-generator/patterns/index.ts

@@ -6,6 +6,7 @@ import { formPatterns } from './form-patterns';
 import { interactionPatterns } from './interaction-patterns';
 import { assertionPatterns } from './assertion-patterns';
 import { setupPatterns } from './setup-patterns';
+import { legacyPatterns } from './legacy-patterns';
 
 /**
  * Pattern Registry - manages all step patterns
@@ -26,7 +27,8 @@ export class PatternRegistry {
     this.patterns.push(...formPatterns);
     this.patterns.push(...interactionPatterns);
     this.patterns.push(...assertionPatterns);
-    
+    this.patterns.push(...legacyPatterns);
+
     // Sort by priority (higher first)
     this.patterns.sort((a, b) => (b.priority || 0) - (a.priority || 0));
   }
@@ -52,15 +54,30 @@ export class PatternRegistry {
   }
 
   /**
-   * Generate code for a step using matched pattern
+   * Generate code for a step using matched pattern.
+   * Prefers resolver (returns template data) over generator (renders directly).
    */
   generateStep(step: ParsedStep, context: PatternContext): MappedStep | null {
     const pattern = this.findPattern(step);
     if (!pattern) {
       return null;
     }
-    
-    return pattern.generator(step, context);
+
+    // Prefer resolver (framework-agnostic) over generator (legacy)
+    if (pattern.resolver) {
+      const resolved = pattern.resolver(step, context);
+      const code = context.templateEngine.renderStep(resolved.templateName, resolved.data);
+      return {
+        code,
+        comment: resolved.comment,
+      };
+    }
+
+    if (pattern.generator) {
+      return pattern.generator(step, context);
+    }
+
+    return null;
   }
 
   /**
@@ -94,4 +111,5 @@ export { navigationPatterns } from './navigation-patterns';
 export { formPatterns } from './form-patterns';
 export { interactionPatterns } from './interaction-patterns';
 export { assertionPatterns } from './assertion-patterns';
+export { legacyPatterns } from './legacy-patterns';
 export * from './types';

package/src/generators/test-generator/patterns/interaction-patterns.ts

@@ -14,7 +14,6 @@ function extractWaitState(text: string): string {
 
 /**
  * Map a plain element keyword (no brackets) to a Playwright ARIA role.
- * e.g. "dialog" → "dialog", "modal" → "dialog", "alert" → "alertdialog"
  */
 function elementKeywordToRole(text: string): string | null {
   const match = text.match(/\bwait(?:s)?\s+for\s+(dialog|modal|alert|alertdialog|tooltip|menu|listbox|combobox|grid|table|status|banner|navigation|main|region)\b/i);
@@ -29,32 +28,21 @@ function elementKeywordToRole(text: string): string | null {
 
 /**
  * Interaction patterns: click, hover, press, wait
- * Uses template engine for framework-agnostic code generation
  */
 export const interactionPatterns: StepPattern[] = [
-  // Unknown element with variable pattern (selector value is empty, identified by filter)
-  // Matches: "When User click [target order] row with {{order_name}}"
-  // Generates: await page.getByText('').filter({ hasText: /.*value of order_name$/ }).click();
   {
     name: 'unknown-element-action',
     matcher: (step: ParsedStep) => {
-      // Check if selectorRef starts with "target " (target element indicator)
       const isTargetElement = step.selectorRef && /^target\s/i.test(step.selectorRef);
-      // Must have both selector and variable, and "with" clause
-      // But EXCLUDE assertion verbs (see, sees) - those should use assertion patterns
       const isInteractionAction = !step.text.includes('see') && !step.text.includes('sees');
       return isTargetElement && !!step.dataRef && step.text.includes('with') && isInteractionAction;
     },
-    generator: (step, context) => {
-      // Resolve selector value from YAML (e.g., target.order)
+    resolver: (step, context) => {
       let selectorValue = '';
       let nth = 0;
       try {
         const resolved = context.selectorResolver.resolveSelector(
-          step.selectorRef!,
-          context.featureName,
-          step.elementType,
-          step.nth
+          step.selectorRef!, context.featureName, step.elementType, step.nth
         );
         selectorValue = resolved.value || '';
         nth = resolved.nth || 0;
@@ -63,7 +51,6 @@ export const interactionPatterns: StepPattern[] = [
         nth = 0;
       }
 
-      // Resolve data variable value
       let dataValue: string;
       try {
         dataValue = context.dataResolver.resolveData(step.dataRef!, context.featureName);
@@ -71,27 +58,17 @@ export const interactionPatterns: StepPattern[] = [
         dataValue = `\${${step.dataRef}}`;
       }
 
-      // Determine the action method (click, hover, etc.)
       let actionMethod = 'click';
-      if (step.text.includes('hover')) {
-        actionMethod = 'hover';
-      } else if (step.text.includes('double')) {
-        actionMethod = 'dblclick';
-      }
-
-      const code = context.templateEngine.renderStep('unknown-element-action', {
-        selectorValue,
-        dataValue,
-        action: actionMethod,
-        nth,
-      });
+      if (step.text.includes('hover')) actionMethod = 'hover';
+      else if (step.text.includes('double')) actionMethod = 'dblclick';
 
       return {
-        code,
+        templateName: 'unknown-element-action',
+        data: { selectorValue, dataValue, action: actionMethod, nth },
         comment: `${actionMethod.charAt(0).toUpperCase() + actionMethod.slice(1)} ${step.selectorRef} with ${step.dataRef}`,
       };
     },
-    priority: 15, // Highest priority - match before all other interaction patterns
+    priority: 15,
   },
   {
     name: 'click-element-with-text',
@@ -100,7 +77,7 @@ export const interactionPatterns: StepPattern[] = [
       && !!step.selectorRef
       && !!(step.dataRef || step.value)
       && step.text.includes('with'),
-    generator: (step, context) => {
+    resolver: (step, context) => {
       const resolved = context.selectorResolver.resolveSelector(
         step.selectorRef!, undefined, step.elementType, step.nth
       );
@@ -116,16 +93,11 @@ export const interactionPatterns: StepPattern[] = [
         }
       }
 
-      // When using .filter({ hasText }), name is redundant — data value identifies the element
       const { name: _name, ...resolvedWithoutName } = resolved;
 
-      const code = context.templateEngine.renderStep('click-element-with-text', {
-        ...resolvedWithoutName,
-        dataValue,
-      });
-
       return {
-        code,
+        templateName: 'click-element-with-text',
+        data: { ...resolvedWithoutName, dataValue },
         comment: `Click ${step.selectorRef} with text ${step.dataRef || step.value}`,
       };
     },
@@ -135,13 +107,11 @@ export const interactionPatterns: StepPattern[] = [
     name: 'click-element',
     matcher: (step: ParsedStep) =>
       (step.text.includes('clicks') || step.text.includes('click')) && !!step.selectorRef,
-    generator: (step, context) => {
+    resolver: (step, context) => {
       const resolved = context.selectorResolver.resolveSelector(step.selectorRef!, undefined, step.elementType, step.nth);
-      
-      const code = context.templateEngine.renderStep('click-action', { ...resolved, selectorRef: step.selectorRef });
-      
       return {
-        code,
+        templateName: 'click-action',
+        data: { ...resolved, selectorRef: step.selectorRef },
         comment: `Click ${step.selectorRef}`,
       };
     },
@@ -152,13 +122,11 @@ export const interactionPatterns: StepPattern[] = [
     matcher: (step: ParsedStep) =>
       (step.text.includes('double click') || step.text.includes('double-click') ||
        (step.text.includes('double') && step.text.includes('clicks'))) && !!step.selectorRef,
-    generator: (step, context) => {
+    resolver: (step, context) => {
       const resolved = context.selectorResolver.resolveSelector(step.selectorRef!, undefined, step.elementType, step.nth);
-      
-      const code = context.templateEngine.renderStep('double-click-action', { ...resolved, selectorRef: step.selectorRef });
-      
       return {
-        code,
+        templateName: 'double-click-action',
+        data: { ...resolved, selectorRef: step.selectorRef },
         comment: `Double click ${step.selectorRef}`,
       };
     },
@@ -168,13 +136,11 @@ export const interactionPatterns: StepPattern[] = [
     name: 'hover-element',
     matcher: (step: ParsedStep) =>
       step.text.includes('hovers') && !!step.selectorRef,
-    generator: (step, context) => {
+    resolver: (step, context) => {
       const resolved = context.selectorResolver.resolveSelector(step.selectorRef!, undefined, step.elementType, step.nth);
-      
-      const code = context.templateEngine.renderStep('hover-action', { ...resolved, selectorRef: step.selectorRef });
-      
       return {
-        code,
+        templateName: 'hover-action',
+        data: { ...resolved, selectorRef: step.selectorRef },
         comment: `Hover ${step.selectorRef}`,
       };
     },
@@ -184,16 +150,11 @@ export const interactionPatterns: StepPattern[] = [
     name: 'press-enter',
     matcher: (step: ParsedStep) =>
       step.text.includes('presses') && step.text.includes('Enter') && !!step.selectorRef,
-    generator: (step, context) => {
+    resolver: (step, context) => {
       const resolved = context.selectorResolver.resolveSelector(step.selectorRef!, undefined, step.elementType, step.nth);
-      
-      const code = context.templateEngine.renderStep('press-action', {
-        ...resolved,
-        key: 'Enter',
-      });
-      
       return {
-        code,
+        templateName: 'press-action',
+        data: { ...resolved, key: 'Enter' },
         comment: `Press Enter in ${step.selectorRef}`,
       };
     },
@@ -203,8 +164,7 @@ export const interactionPatterns: StepPattern[] = [
     name: 'click-by-data-text',
     matcher: (step: ParsedStep) =>
       (step.text.includes('clicks') || step.text.includes('click')) && !step.selectorRef && !!step.dataRef,
-    generator: (step, context) => {
-      // Resolve data reference to actual value
+    resolver: (step, context) => {
       let value: string;
       try {
         value = context.dataResolver.resolveData(step.dataRef!, context.featureName);
@@ -212,43 +172,36 @@ export const interactionPatterns: StepPattern[] = [
         value = `\${${step.dataRef}}`;
       }
 
-      const code = context.templateEngine.renderStep('click-action', {
-        strategy: 'text',
-        value,
-        nth: 0,
-      });
-
       return {
-        code,
+        templateName: 'click-action',
+        data: { strategy: 'text', value, nth: 0 },
         comment: `Click ${step.dataRef}`,
       };
     },
-    priority: 5, // Lower than click-element which has selectorRef
+    priority: 5,
   },
   {
     name: 'wait-for-time',
     matcher: (step: ParsedStep) =>
       (step.text.includes('wait for') || step.text.includes('waits for')) && /\d+/.test(step.text),
-    generator: (step, context) => {
+    resolver: (step, context) => {
       const match = step.text.match(/(\d+)\s*(seconds?|ms|milliseconds?)/);
       let duration = 1000;
-      
+
       if (match) {
         const num = parseInt(match[1]);
         const unit = match[2].toLowerCase();
         duration = unit.startsWith('s') ? num * 1000 : num;
       }
-      
-      const code = context.templateEngine.renderStep('wait-timeout', { duration });
-      
+
       return {
-        code,
+        templateName: 'wait-timeout',
+        data: { duration },
         comment: `Wait for ${duration}ms`,
       };
     },
     priority: 7,
   },
-  // "wait for dialog with {{kudo.title}} hidden" - role keyword inline, no selector brackets, with data filter
   {
     name: 'wait-for-role-with-text',
     matcher: (step: ParsedStep) =>
@@ -256,7 +209,7 @@ export const interactionPatterns: StepPattern[] = [
       !step.selectorRef &&
       !!step.dataRef &&
       !!elementKeywordToRole(step.text),
-    generator: (step, context) => {
+    resolver: (step, context) => {
       const role = elementKeywordToRole(step.text)!;
 
       let dataValue: string;
@@ -268,15 +221,14 @@ export const interactionPatterns: StepPattern[] = [
 
       const state = extractWaitState(step.text);
 
-      // Render inline — no locator partial needed, role is known directly
       return {
-        code: `await page.getByRole('${role}').filter({ hasText: '${dataValue.replace(/'/g, "\\'")}' }).waitFor({ state: '${state}' });`,
+        templateName: 'wait-for-role-with-data',
+        data: { role, dataValue, state },
         comment: `Wait for ${role} with ${step.dataRef} to be ${state}`,
       };
     },
     priority: 11,
   },
-  // "wait for dialog hidden" - role keyword inline, no selector brackets, no data filter
   {
     name: 'wait-for-role',
     matcher: (step: ParsedStep) =>
@@ -284,32 +236,32 @@ export const interactionPatterns: StepPattern[] = [
       !step.selectorRef &&
       !step.dataRef &&
       !!elementKeywordToRole(step.text),
-    generator: (step, context) => {
+    resolver: (step, context) => {
       const role = elementKeywordToRole(step.text)!;
       const state = extractWaitState(step.text);
 
       return {
-        code: `await page.getByRole('${role}').waitFor({ state: '${state}' });`,
+        templateName: 'wait-for-role',
+        data: { role, state },
         comment: `Wait for ${role} to be ${state}`,
       };
     },
     priority: 11,
   },
-  // NEW: Wait for page pattern
   {
     name: 'wait-for-page',
     matcher: (step: ParsedStep) =>
       (step.text.includes('wait for') || step.text.includes('waits for')) && step.elementType === 'page',
-    generator: (step, context) => {
+    resolver: (step, context) => {
       const path = step.featurePath || '/';
       const pathRegex = path.replace(/[.*+?^${}()|[\]\\/]/g, '\\$&');
-      const code = context.templateEngine.renderStep('wait-for-page', { pathRegex });
       return {
-        code,
+        templateName: 'wait-for-page',
+        data: { pathRegex },
         comment: `Wait for page`,
       };
     },
-    priority: 9,  // Higher than wait-for-element
+    priority: 9,
   },
   {
     name: 'wait-for-element-with-text',
@@ -317,7 +269,7 @@ export const interactionPatterns: StepPattern[] = [
       (step.text.includes('wait for') || step.text.includes('waits for')) &&
       !!step.selectorRef &&
       !!step.dataRef,
-    generator: (step, context) => {
+    resolver: (step, context) => {
       const resolved = context.selectorResolver.resolveSelector(step.selectorRef!, undefined, step.elementType, step.nth);
 
       let dataValue: string;
@@ -329,15 +281,9 @@ export const interactionPatterns: StepPattern[] = [
 
       const state = extractWaitState(step.text);
 
-      const code = context.templateEngine.renderStep('wait-for-element-with-text', {
-        ...resolved,
-        selectorRef: step.selectorRef,
-        dataValue,
-        state,
-      });
-
       return {
-        code,
+        templateName: 'wait-for-element-with-text',
+        data: { ...resolved, selectorRef: step.selectorRef, dataValue, state },
         comment: `Wait for ${step.selectorRef} with ${step.dataRef} to be ${state}`,
       };
     },
@@ -347,22 +293,16 @@ export const interactionPatterns: StepPattern[] = [
     name: 'wait-for-element',
     matcher: (step: ParsedStep) =>
       (step.text.includes('wait for') || step.text.includes('waits for')) && !!step.selectorRef,
-    generator: (step, context) => {
+    resolver: (step, context) => {
       const resolved = context.selectorResolver.resolveSelector(step.selectorRef!, undefined, step.elementType, step.nth);
       const state = extractWaitState(step.text);
 
-      const code = context.templateEngine.renderStep('wait-for-element', {
-        ...resolved,
-        selectorRef: step.selectorRef,
-        state,
-      });
-
       return {
-        code,
+        templateName: 'wait-for-element',
+        data: { ...resolved, selectorRef: step.selectorRef, state },
         comment: `Wait for ${step.selectorRef} to be ${state}`,
       };
     },
     priority: 8,
   },
 ];
-