@memberjunction/react-test-harness 2.97.0 → 2.98.0

package/dist/lib/component-runner.d.ts

@@ -22,7 +22,6 @@ export interface ComponentExecutionResult {
     html: string;
     errors: Violation[];
     warnings: Violation[];
-    criticalWarnings: string[];
     console: {
         type: string;
         text: string;

package/dist/lib/component-runner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-runner.d.ts","sourceRoot":"","sources":["../../src/lib/component-runner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAiC,QAAQ,EAAyD,MAAM,sBAAsB,CAAC;AAC3I,OAAO,EAAmB,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,aAAa,EAMd,MAAM,6CAA6C,CAAC;AAMrD,MAAM,WAAW,yBAAyB;IACxC,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,kBAAkB,GAAG,aAAa,CAAC;IAC/D,WAAW,EAAE,QAAQ,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,kBAAkB,CAAC;CAChC;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,EAAE,CAAC;CAC9B;AAED;;GAEG;AACH,qBAAa,eAAe;IAkBd,OAAO,CAAC,cAAc;IAhBlC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,yBAAyB,CAS/C;IAKF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAS;gBAE7B,cAAc,EAAE,cAAc;IAElD;;OAEG;IACG,aAAa,CACjB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,aAAa,CAAC,EAAE,GAAG,EACnB,eAAe,CAAC,EAAE,OAAO,EACzB,WAAW,CAAC,EAAE,QAAQ,EACtB,OAAO,CAAC,EAAE,GAAG,GACZ,OAAO,CAAC;QAAE,UAAU,EAAE,SAAS,EAAE,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC;IAmBrD,gBAAgB,CAAC,OAAO,EAAE,yBAAyB,GAAG,OAAO,CAAC,wBAAwB,CAAC;IA6sB7F;;;OAGG;YACW,oBAAoB;IA0ElC;;OAEG;YACW,sBAAsB;IAqHpC;;OAEG;YACW,kBAAkB;IAiFhC;;OAEG;YACW,oBAAoB;IA8ClC;;OAEG;YACW,eAAe;IAkB7B;;OAEG;IACH,OAAO,CAAC,mBAAmB;YA+Bb,qBAAqB;cAqBnB,uBAAuB,CAAC,WAAW,EAAE,QAAQ,GAAG,OAAO,CAAC,aAAa,CAAC;IA2JtF;;OAEG;YACW,iBAAiB;IAsT/B;;OAEG;IACH,OAAO,CAAC,aAAa;CA6BtB"}
+{"version":3,"file":"component-runner.d.ts","sourceRoot":"","sources":["../../src/lib/component-runner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAiC,QAAQ,EAAyD,MAAM,sBAAsB,CAAC;AAC3I,OAAO,EAAmB,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,aAAa,EAMd,MAAM,6CAA6C,CAAC;AAMrD,MAAM,WAAW,yBAAyB;IACxC,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,kBAAkB,GAAG,aAAa,CAAC;IAC/D,WAAW,EAAE,QAAQ,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,kBAAkB,CAAC;CAChC;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,EAAE,CAAC;CAC9B;AAED;;GAEG;AACH,qBAAa,eAAe;IAkBd,OAAO,CAAC,cAAc;IAhBlC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,yBAAyB,CAS/C;IAKF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAS;gBAE7B,cAAc,EAAE,cAAc;IAElD;;OAEG;IACG,aAAa,CACjB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,aAAa,CAAC,EAAE,GAAG,EACnB,eAAe,CAAC,EAAE,OAAO,EACzB,WAAW,CAAC,EAAE,QAAQ,EACtB,OAAO,CAAC,EAAE,GAAG,GACZ,OAAO,CAAC;QAAE,UAAU,EAAE,SAAS,EAAE,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC;IAmBrD,gBAAgB,CAAC,OAAO,EAAE,yBAAyB,GAAG,OAAO,CAAC,wBAAwB,CAAC;IAiuB7F;;;OAGG;YACW,oBAAoB;IA0ElC;;OAEG;YACW,sBAAsB;IAqHpC;;OAEG;YACW,kBAAkB;IA6PhC;;OAEG;YACW,oBAAoB;IAmHlC;;OAEG;YACW,eAAe;IAkB7B;;OAEG;IACH,OAAO,CAAC,mBAAmB;YAyBb,qBAAqB;cAqBnB,uBAAuB,CAAC,WAAW,EAAE,QAAQ,GAAG,OAAO,CAAC,aAAa,CAAC;IA2JtF;;OAEG;YACW,iBAAiB;IAsT/B;;OAEG;IACH,OAAO,CAAC,aAAa;CAuBtB"}

package/dist/lib/component-runner.js

@@ -52,7 +52,6 @@ class ComponentRunner {
         const startTime = Date.now();
         const errors = [];
         const warnings = [];
-        const criticalWarnings = [];
         const consoleLogs = [];
         const dataErrors = []; // Track data access errors from RunView/RunQuery
         let renderCount = 0;
@@ -120,9 +119,9 @@ class ComponentRunner {
                 throw new Error('Failed to inject MJReactRuntime into page context');
             }
             // Set up error tracking
-            await this.setupErrorTracking(page);
+            await this.setupErrorTracking(page, options.componentSpec, allLibraries);
             // Set up console logging
-            this.setupConsoleLogging(page, consoleLogs, warnings, criticalWarnings);
+            this.setupConsoleLogging(page, consoleLogs, warnings);
             // Expose MJ utilities to the page
             await this.exposeMJUtilities(page, options, dataErrors, debug);
             if (debug) {
@@ -529,17 +528,16 @@ class ComponentRunner {
             }
             // Determine success
             const success = errors.length === 0 &&
-                criticalWarnings.length === 0 &&
                 !hasRenderLoop &&
                 !hasTimeout &&
                 executionResult.success;
             // Combine runtime errors with data errors
             const allErrors = [...errors, ...dataErrors];
-            // Map runtime errors with source info, data errors don't have source
+            // Map runtime errors with source info and specific rules
             const errorViolations = runtimeErrorsWithSource.map(e => ({
                 message: e.message,
                 severity: 'critical',
-                rule: 'runtime-error',
+                rule: e.rule || 'runtime-error', // Use specific rule from collectRuntimeErrors
                 line: 0,
                 column: 0,
                 source: e.source
@@ -577,18 +575,39 @@ class ComponentRunner {
                     source: 'user-component' // Data errors are from user's data access code
                 });
             });
+            // Check warnings for critical patterns and move them to errors
+            const criticalWarningViolations = [];
+            const regularWarnings = [];
+            warnings.forEach(w => {
+                if (ComponentRunner.CRITICAL_WARNING_PATTERNS.some(pattern => pattern.test(w))) {
+                    // This is a critical warning - add to errors
+                    criticalWarningViolations.push({
+                        message: w,
+                        severity: 'critical',
+                        rule: 'critical-react-warning',
+                        line: 0,
+                        column: 0,
+                        source: 'react-framework'
+                    });
+                }
+                else {
+                    // Regular warning
+                    regularWarnings.push(w);
+                }
+            });
+            // Combine all error violations
+            const allErrorViolations = [...errorViolations, ...criticalWarningViolations];
             const result = {
-                success: success && dataErrors.length === 0, // Fail if we have data errors
+                success: success && dataErrors.length === 0 && criticalWarningViolations.length === 0, // Fail on critical warnings too
                 html,
-                errors: errorViolations,
-                warnings: warnings.map(w => ({
+                errors: allErrorViolations,
+                warnings: regularWarnings.map(w => ({
                     message: w,
                     severity: 'low',
                     rule: 'warning',
                     line: 0,
                     column: 0
                 })),
-                criticalWarnings,
                 console: consoleLogs,
                 screenshot,
                 executionTime: Date.now() - startTime,
@@ -636,7 +655,6 @@ class ComponentRunner {
                     line: 0,
                     column: 0
                 })),
-                criticalWarnings,
                 console: consoleLogs,
                 executionTime: Date.now() - startTime,
                 renderCount
@@ -835,20 +853,91 @@ class ComponentRunner {
     /**
      * Set up error tracking in the page
      */
-    async setupErrorTracking(page) {
-        await page.evaluate(() => {
+    async setupErrorTracking(page, componentSpec, allLibraries) {
+        await page.evaluate(({ spec, availableLibraries }) => {
             // Initialize error tracking
             window.__testHarnessRuntimeErrors = [];
             window.__testHarnessConsoleErrors = [];
             window.__testHarnessConsoleWarnings = [];
             window.__testHarnessTestFailed = false;
             window.__testHarnessRenderCount = 0;
-            // Track renders
+            // Track renders and detect invalid element types
             const originalCreateElement = window.React?.createElement;
             if (originalCreateElement) {
-                window.React.createElement = function (...args) {
+                window.React.createElement = function (type, props, ...children) {
                     window.__testHarnessRenderCount++;
-                    return originalCreateElement.apply(this, args);
+                    // Enhanced error detection for invalid element types
+                    if (type !== null && type !== undefined) {
+                        const typeOf = typeof type;
+                        // Check for the common "object instead of component" error
+                        if (typeOf === 'object' && !window.React.isValidElement(type)) {
+                            // Try to get a meaningful name for the object
+                            let objectInfo = 'unknown object';
+                            try {
+                                if (type.constructor && type.constructor.name) {
+                                    objectInfo = type.constructor.name;
+                                }
+                                else if (type.name) {
+                                    objectInfo = type.name;
+                                }
+                                else {
+                                    // Try to show what properties it has
+                                    const keys = Object.keys(type).slice(0, 5);
+                                    if (keys.length > 0) {
+                                        objectInfo = `object with properties: ${keys.join(', ')}`;
+                                    }
+                                }
+                            }
+                            catch (e) {
+                                // Ignore errors in trying to get object info
+                            }
+                            // Generate helpful error message
+                            const errorMsg = [
+                                `Invalid JSX element type: React received an object (${objectInfo}) instead of a React component function.`,
+                                '',
+                                'This often occurs when JSX elements or React.createElement receive an object instead of a valid component function.',
+                                '',
+                                'Inspect all instances where you are using JSX elements that come from libraries or components to ensure they are properly referenced.',
+                                '',
+                                'The exact fix depends on the specific library or component structure.'
+                            ].join('\\n');
+                            // Log to both console and error tracking
+                            console.error('🔴 Invalid JSX Element Type Detected:', errorMsg);
+                            // Store the error for later collection
+                            window.__testHarnessRuntimeErrors = window.__testHarnessRuntimeErrors || [];
+                            window.__testHarnessRuntimeErrors.push({
+                                message: errorMsg,
+                                type: 'invalid-element-type',
+                                phase: 'createElement',
+                                source: 'enhanced-detection',
+                                elementInfo: objectInfo
+                            });
+                            // Still try to call the original to get React's error too
+                            // This will provide the component stack trace
+                        }
+                    }
+                    else if (type === undefined) {
+                        // Undefined component - likely a failed destructure or missing import
+                        const errorMsg = [
+                            'Invalid JSX element type: component is undefined.',
+                            '',
+                            'This occurs when a JSX element references a component that is undefined at runtime.',
+                            '',
+                            'Inspect how this component is being accessed - it may not exist in the expected location or may have a different name.',
+                            '',
+                            'Check that the component exists in your dependencies or libraries and is properly referenced.'
+                        ].join('\\n');
+                        console.error('🔴 Undefined JSX Component:', errorMsg);
+                        window.__testHarnessRuntimeErrors = window.__testHarnessRuntimeErrors || [];
+                        window.__testHarnessRuntimeErrors.push({
+                            message: errorMsg,
+                            type: 'undefined-component',
+                            phase: 'createElement',
+                            source: 'enhanced-detection'
+                        });
+                    }
+                    // Call original createElement
+                    return originalCreateElement.call(this, type, props, ...children);
                 };
             }
             // Override console.error
@@ -877,9 +966,82 @@ class ComponentRunner {
                 }
                 originalConsoleError.apply(console, args);
             };
+            // Helper function to analyze undefined identifiers
+            const analyzeUndefinedIdentifier = (identifier, spec, availableLibraries) => {
+                const result = {
+                    isInSpecLibraries: false,
+                    isInSpecDependencies: false,
+                    isAvailableLibrary: false,
+                    matchedLibrary: null,
+                    specLibraries: spec?.libraries || [],
+                    specDependencies: spec?.dependencies || []
+                };
+                // Check if it's in spec libraries
+                result.isInSpecLibraries = result.specLibraries.some((lib) => lib.globalVariable === identifier);
+                // Check if it's in spec dependencies  
+                result.isInSpecDependencies = result.specDependencies.some((dep) => dep.name === identifier);
+                // Check against ALL available libraries (case-insensitive)
+                if (availableLibraries) {
+                    const availableLib = availableLibraries.find((lib) => lib.GlobalVariable &&
+                        lib.GlobalVariable.toLowerCase() === identifier.toLowerCase());
+                    if (availableLib) {
+                        result.isAvailableLibrary = true;
+                        result.matchedLibrary = availableLib;
+                    }
+                }
+                return result;
+            };
+            // Helper function to generate guidance message
+            const generateGuidance = (identifier, analysis) => {
+                // Case 1: Trying to use a library not in their spec
+                if (analysis.isAvailableLibrary && !analysis.isInSpecLibraries) {
+                    const libList = analysis.specLibraries.length > 0
+                        ? analysis.specLibraries.map((l) => l.globalVariable || l.name).filter(Boolean).join(', ')
+                        : 'no third-party libraries';
+                    return `${identifier} is not defined. It appears you're trying to use the ${analysis.matchedLibrary.Name} library. ` +
+                        `You do NOT have access to this library. ` +
+                        `Your architect gave you access to: ${libList}. ` +
+                        `You must work within these constraints and cannot load additional libraries.`;
+                }
+                // Case 2: Should be a component but not properly accessed
+                if (analysis.isInSpecDependencies) {
+                    return `${identifier} is not defined. This component exists in your dependencies. ` +
+                        `Ensure you've destructured it: const { ${identifier} } = components; ` +
+                        `or accessed it as: components.${identifier}`;
+                }
+                // Case 3: Not a valid library or component
+                const libList = analysis.specLibraries.length > 0
+                    ? `Available libraries: ${analysis.specLibraries.map((l) => l.globalVariable || l.name).filter(Boolean).join(', ')}`
+                    : 'No third-party libraries are available';
+                const depList = analysis.specDependencies.length > 0
+                    ? `Available components: ${analysis.specDependencies.map((d) => d.name).join(', ')}`
+                    : 'No component dependencies are available';
+                return `${identifier} is not defined. This is not a valid library or component in your specification. ` +
+                    `${libList}. ${depList}. ` +
+                    `You must only use the libraries and components specified in your component specification.`;
+            };
             // Global error handler
             window.addEventListener('error', (event) => {
-                // Determine source based on error content
+                // Check for "X is not defined" errors
+                const notDefinedMatch = event.message?.match(/^(\w+) is not defined$/);
+                if (notDefinedMatch) {
+                    const identifier = notDefinedMatch[1];
+                    // Analyze what this identifier might be
+                    const analysis = analyzeUndefinedIdentifier(identifier, spec, availableLibraries);
+                    // Generate specific guidance
+                    const guidance = generateGuidance(identifier, analysis);
+                    // Store enhanced error with specific guidance
+                    window.__testHarnessRuntimeErrors.push({
+                        message: guidance,
+                        stack: event.error?.stack,
+                        type: 'undefined-identifier',
+                        source: 'user-component',
+                        identifier: identifier
+                    });
+                    window.__testHarnessTestFailed = true;
+                    return;
+                }
+                // Handle other errors as before
                 let source = 'user-component'; // Default to user component
                 if (event.message && event.message.includes('Script error')) {
                     source = 'runtime-wrapper';
@@ -903,7 +1065,7 @@ class ComponentRunner {
                 window.__testHarnessTestFailed = true;
                 event.preventDefault();
             });
-        });
+        }, { spec: componentSpec, availableLibraries: allLibraries || [] });
     }
     /**
      * Collect runtime errors from the page
@@ -916,7 +1078,8 @@ class ComponentRunner {
                 testFailed: window.__testHarnessTestFailed || false
             };
         });
-        const errors = [];
+        // Track unique errors and their counts
+        const errorMap = new Map();
         // Check if we have any specific React render errors
         const hasSpecificReactError = errorData.runtimeErrors.some((error) => error.type === 'react-render-error' &&
             !error.message.includes('Script error'));
@@ -928,19 +1091,84 @@ class ComponentRunner {
                 error.message === 'Script error.') {
                 return; // Skip this generic error
             }
-            const phase = error.phase ? ` (during ${error.phase})` : '';
-            const errorMsg = `${error.type} error: ${error.message}${phase}`;
-            errors.push({
-                message: errorMsg,
-                source: error.source
-            });
+            // Map error types to specific rule names
+            let rule = 'runtime-error';
+            switch (error.type) {
+                case 'invalid-element-type':
+                    rule = 'invalid-jsx-element';
+                    break;
+                case 'undefined-component':
+                    rule = 'undefined-jsx-component';
+                    break;
+                case 'undefined-identifier':
+                    rule = 'undefined-identifier';
+                    break;
+                case 'react-render-error':
+                    rule = 'react-render-error';
+                    break;
+                case 'render-loop':
+                    rule = 'infinite-render-loop';
+                    break;
+                case 'registration-error':
+                    rule = 'component-registration-error';
+                    break;
+                case 'execution-error':
+                    rule = 'execution-error';
+                    break;
+                case 'runtime':
+                    rule = 'runtime-error';
+                    break;
+                case 'promise-rejection':
+                    rule = 'unhandled-promise-rejection';
+                    break;
+            }
+            // Create a key for deduplication based on message and type
+            const key = `${error.type}:${error.message}`;
+            if (errorMap.has(key)) {
+                // Increment count for duplicate
+                errorMap.get(key).count++;
+            }
+            else {
+                // Add new error
+                errorMap.set(key, {
+                    error: {
+                        message: error.message,
+                        source: error.source,
+                        type: error.type,
+                        rule: rule
+                    },
+                    count: 1
+                });
+            }
         });
-        // Console errors don't have source info
+        // Process console errors
         errorData.consoleErrors.forEach((error) => {
-            const errorMsg = `Console error: ${error}`;
+            const key = `console-error:${error}`;
+            if (errorMap.has(key)) {
+                errorMap.get(key).count++;
+            }
+            else {
+                errorMap.set(key, {
+                    error: {
+                        message: error,
+                        source: 'react-framework',
+                        type: 'console-error',
+                        rule: 'console-error'
+                    },
+                    count: 1
+                });
+            }
+        });
+        // Convert map to array with occurrence counts
+        const errors = [];
+        errorMap.forEach(({ error, count }) => {
+            // Append count if > 1
+            const message = count > 1
+                ? `${error.message} (occurred ${count} times)`
+                : error.message;
             errors.push({
-                message: errorMsg,
-                source: 'react-framework' // Console errors from React are framework level
+                ...error,
+                message
             });
         });
         return errors;
@@ -965,7 +1193,7 @@ class ComponentRunner {
     /**
      * Set up console logging
      */
-    setupConsoleLogging(page, consoleLogs, warnings, criticalWarnings) {
+    setupConsoleLogging(page, consoleLogs, warnings) {
         page.on('console', (msg) => {
             const type = msg.type();
             const text = msg.text();
@@ -976,10 +1204,6 @@ class ComponentRunner {
                 if (!warnings.includes(text)) {
                     warnings.push(text);
                 }
-                // Check if it's a critical warning that should fail the test
-                if (ComponentRunner.CRITICAL_WARNING_PATTERNS.some(pattern => pattern.test(text))) {
-                    criticalWarnings.push(text);
-                }
             }
         });
         page.on('pageerror', (error) => {
@@ -1440,12 +1664,6 @@ class ComponentRunner {
                 console.log(`  ${i + 1}. ${warn.message}`);
             });
         }
-        if (result.criticalWarnings && result.criticalWarnings.length > 0) {
-            console.log('\n🔴 Critical Warnings:', result.criticalWarnings.length);
-            result.criticalWarnings.forEach((warn, i) => {
-                console.log(`  ${i + 1}. ${warn}`);
-            });
-        }
         console.log('\n========================================\n');
     }
 }