tests: add more tests for component hierarchy frames

Sébastien Henau · Sébastien Henau · commit a48a330cf5c3 · 2026-03-12T14:41:32.000+01:00
diff --git a/packages/vue/tests/FlareErrorBoundary.test.ts b/packages/vue/tests/FlareErrorBoundary.test.ts
@@ -3,7 +3,7 @@ import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 import { defineComponent, h, nextTick } from 'vue';
 
 import { FlareErrorBoundary } from '../src/FlareErrorBoundary';
-import { FlareVueContext } from '../src/types';
+import { ComponentHierarchyFrame, FlareVueContext } from '../src/types';
 
 const mockReport = vi.fn();
 
@@ -62,7 +62,7 @@ describe('FlareErrorBoundary', () => {
         expect(mockReport.mock.calls[0][0]).toBe(testError);
     });
 
-    test('passes vue context with info, componentName, and componentHierarchy', async () => {
+    test('passes vue context with info, componentName, componentHierarchy, and componentHierarchyFrames', async () => {
         mount(FlareErrorBoundary, {
             slots: {
                 default: () => h(ThrowingComponent),
@@ -77,6 +77,10 @@ describe('FlareErrorBoundary', () => {
         expect(context.vue.componentName).toBe('ThrowingComponent');
         expect(context.vue.componentHierarchy).toBeInstanceOf(Array);
         expect(context.vue.componentHierarchy).toContain('ThrowingComponent');
+        expect(context.vue.componentHierarchyFrames).toBeInstanceOf(Array);
+        expect(context.vue.componentHierarchyFrames[0].component).toBe('ThrowingComponent');
+        expect(context.vue.componentHierarchyFrames[0]).toHaveProperty('file');
+        expect(context.vue.componentHierarchyFrames[0]).toHaveProperty('props');
     });
 
     test('passes instance and info as extra solution parameters', async () => {
@@ -137,6 +141,30 @@ describe('FlareErrorBoundary', () => {
         expect(wrapper.find('.hierarchy').text()).toContain('ThrowingComponent');
     });
 
+    test('fallback slot receives componentHierarchyFrames', async () => {
+        let receivedFrames: ComponentHierarchyFrame[] = [];
+
+        mount(FlareErrorBoundary, {
+            slots: {
+                default: () => h(ThrowingComponent),
+                fallback: (props: { componentHierarchyFrames: ComponentHierarchyFrame[] }) => {
+                    receivedFrames = props.componentHierarchyFrames;
+                    return h('div', 'Error');
+                },
+            },
+        });
+
+        await nextTick();
+
+        expect(receivedFrames).toBeInstanceOf(Array);
+        expect(receivedFrames.length).toBeGreaterThan(0);
+        expect(receivedFrames[0]).toMatchObject({
+            component: 'ThrowingComponent',
+        });
+        expect(receivedFrames[0]).toHaveProperty('file');
+        expect(receivedFrames[0]).toHaveProperty('props');
+    });
+
     test('fallback slot receives resetErrorBoundary function', async () => {
         const wrapper = mount(FlareErrorBoundary, {
             slots: {
@@ -376,6 +404,7 @@ describe('FlareErrorBoundary', () => {
         expect(beforeSubmit.mock.calls[0][0].instance).toBeDefined();
         expect(beforeSubmit.mock.calls[0][0].info).toEqual(expect.any(String));
         expect(beforeSubmit.mock.calls[0][0].context.vue.componentHierarchy).toBeInstanceOf(Array);
+        expect(beforeSubmit.mock.calls[0][0].context.vue.componentHierarchyFrames).toBeInstanceOf(Array);
         expect(beforeSubmit.mock.calls[0][0].context.vue.componentName).toBe('ThrowingComponent');
     });
 
diff --git a/packages/vue/tests/buildComponentHierarchyFrames.test.ts b/packages/vue/tests/buildComponentHierarchyFrames.test.ts
@@ -0,0 +1,171 @@
+import { describe, expect, test } from 'vitest';
+import type { ComponentPublicInstance } from 'vue';
+
+import { buildComponentHierarchyFrames } from '../src/buildComponentHierarchyFrames';
+import { MAX_HIERARCHY_DEPTH } from '../src/constants';
+
+function createMockInstance(
+    name: string,
+    {
+        parent = null,
+        file = undefined,
+        props = undefined,
+    }: {
+        parent?: ComponentPublicInstance | null;
+        file?: string;
+        props?: Record<string, unknown>;
+    } = {}
+): ComponentPublicInstance {
+    return {
+        $options: {
+            __name: name,
+            ...(file !== undefined ? { __file: file } : {}),
+        },
+        $parent: parent,
+        $props: props ?? {},
+    } as unknown as ComponentPublicInstance;
+}
+
+describe('buildComponentHierarchyFrames', () => {
+    test('returns an empty array for null instance', () => {
+        expect(buildComponentHierarchyFrames(null)).toEqual([]);
+    });
+
+    test('returns a single frame for a root component', () => {
+        const instance = createMockInstance('App');
+
+        expect(buildComponentHierarchyFrames(instance)).toEqual([{ component: 'App', file: null, props: {} }]);
+    });
+
+    test('builds frames through $parent chain', () => {
+        const grandparent = createMockInstance('App');
+        const parent = createMockInstance('Layout', { parent: grandparent });
+        const child = createMockInstance('Button', { parent });
+
+        const frames = buildComponentHierarchyFrames(child);
+
+        expect(frames).toEqual([
+            { component: 'Button', file: null, props: {} },
+            { component: 'Layout', file: null, props: {} },
+            { component: 'App', file: null, props: {} },
+        ]);
+    });
+
+    test('includes __file when available', () => {
+        const parent = createMockInstance('App', { file: 'src/App.vue' });
+        const child = createMockInstance('Button', {
+            parent,
+            file: 'src/components/Button.vue',
+        });
+
+        const frames = buildComponentHierarchyFrames(child);
+
+        expect(frames[0].file).toBe('src/components/Button.vue');
+        expect(frames[1].file).toBe('src/App.vue');
+    });
+
+    test('sets file to null when __file is not present', () => {
+        const instance = createMockInstance('App');
+
+        const frames = buildComponentHierarchyFrames(instance);
+
+        expect(frames[0].file).toBeNull();
+    });
+
+    test('includes props from the component instance', () => {
+        const parent = createMockInstance('App');
+        const child = createMockInstance('UserCard', {
+            parent,
+            props: { userId: 42, name: 'Alice' },
+        });
+
+        const frames = buildComponentHierarchyFrames(child);
+
+        expect(frames[0].props).toEqual({ userId: 42, name: 'Alice' });
+        expect(frames[1].props).toEqual({});
+    });
+
+    test('creates a shallow copy of props', () => {
+        const originalProps = { userId: 42 };
+        const instance = createMockInstance('UserCard', { props: originalProps });
+
+        const frames = buildComponentHierarchyFrames(instance);
+
+        expect(frames[0].props).toEqual({ userId: 42 });
+        expect(frames[0].props).not.toBe(originalProps);
+    });
+
+    test('sets props to null when $props is null', () => {
+        const instance = {
+            $options: { __name: 'App' },
+            $parent: null,
+            $props: null,
+        } as unknown as ComponentPublicInstance;
+
+        const frames = buildComponentHierarchyFrames(instance);
+
+        expect(frames[0].props).toBeNull();
+    });
+
+    test('uses AnonymousComponent for unnamed components in the chain', () => {
+        const parent = createMockInstance('App');
+        const child = {
+            $options: {},
+            $parent: parent,
+            $props: {},
+        } as unknown as ComponentPublicInstance;
+
+        const frames = buildComponentHierarchyFrames(child);
+
+        expect(frames[0].component).toBe('AnonymousComponent');
+        expect(frames[1].component).toBe('App');
+    });
+
+    test('respects MAX_HIERARCHY_DEPTH limit', () => {
+        let current: ComponentPublicInstance | null = null;
+
+        for (let i = 0; i < MAX_HIERARCHY_DEPTH + 50; i++) {
+            current = createMockInstance(`Component${i}`, { parent: current });
+        }
+
+        const frames = buildComponentHierarchyFrames(current);
+
+        expect(frames).toHaveLength(MAX_HIERARCHY_DEPTH);
+        expect(frames[0].component).toBe(`Component${MAX_HIERARCHY_DEPTH + 49}`);
+        expect(frames[MAX_HIERARCHY_DEPTH - 1].component).toBe('Component50');
+    });
+
+    test('combines file, props, and hierarchy correctly', () => {
+        const root = createMockInstance('App', { file: 'src/App.vue' });
+        const layout = createMockInstance('Layout', {
+            parent: root,
+            file: 'src/layouts/Layout.vue',
+            props: { sidebar: true },
+        });
+        const page = createMockInstance('UserProfile', {
+            parent: layout,
+            file: 'src/pages/UserProfile.vue',
+            props: { userId: 42, tab: 'settings' },
+        });
+
+        const frames = buildComponentHierarchyFrames(page);
+
+        expect(frames).toEqual([
+            {
+                component: 'UserProfile',
+                file: 'src/pages/UserProfile.vue',
+                props: { userId: 42, tab: 'settings' },
+            },
+            {
+                component: 'Layout',
+                file: 'src/layouts/Layout.vue',
+                props: { sidebar: true },
+            },
+            {
+                component: 'App',
+                file: 'src/App.vue',
+                props: {},
+            },
+        ]);
+    });
+});
diff --git a/packages/vue/tests/flareVue.test.ts b/packages/vue/tests/flareVue.test.ts
@@ -20,10 +20,15 @@ function createMockApp(initialHandler?: (...args: unknown[]) => void) {
     };
 }
 
-function createMockInstance(name: string, parent: ComponentPublicInstance | null = null): ComponentPublicInstance {
+function createMockInstance(
+    name: string,
+    parent: ComponentPublicInstance | null = null,
+    props: Record<string, unknown> = {}
+): ComponentPublicInstance {
     return {
         $options: { __name: name },
         $parent: parent,
+        $props: props,
     } as unknown as ComponentPublicInstance;
 }
 
@@ -75,7 +80,7 @@ describe('flareVue', () => {
         expect(reportedError.message).toBe('string error');
     });
 
-    test('passes vue context with info, componentName, and componentHierarchy', () => {
+    test('passes vue context with info, componentName, componentHierarchy, and componentHierarchyFrames', () => {
         const app = createMockApp();
         (flareVue as Function)(app);
 
@@ -89,6 +94,11 @@ describe('flareVue', () => {
         expect(context.vue.info).toBe('setup function');
         expect(context.vue.componentName).toBe('Button');
         expect(context.vue.componentHierarchy).toEqual(['Button', 'Layout', 'App']);
+        expect(context.vue.componentHierarchyFrames).toEqual([
+            { component: 'Button', file: null, props: {} },
+            { component: 'Layout', file: null, props: {} },
+            { component: 'App', file: null, props: {} },
+        ]);
     });
 
     test('passes instance and info as extra solution parameters', () => {
@@ -178,6 +188,7 @@ describe('flareVue', () => {
         const context = mockReport.mock.calls[0][1];
         expect(context.vue.componentName).toBe('AnonymousComponent');
         expect(context.vue.componentHierarchy).toEqual([]);
+        expect(context.vue.componentHierarchyFrames).toEqual([]);
     });
 
     test('re-throws the converted error, not the raw value, when no initial handler exists', () => {
