tests: add flareVue and error boundary tests

Author: Sébastien Henau

packages/vue/tests/FlareErrorBoundary.test.ts

@@ -25,6 +25,20 @@ const ThrowingComponent = defineComponent({
     },
 });
 
+const ThrowingComponentWithProps = defineComponent({
+    name: 'ThrowingComponentWithProps',
+    props: {
+        userId: { type: Number, required: true },
+        name: { type: String, required: true },
+    },
+    setup() {
+        throw testError;
+    },
+    render() {
+        return h('div', 'should not render');
+    },
+});
+
 describe('FlareErrorBoundary', () => {
     let consoleWarnSpy: ReturnType<typeof vi.spyOn>;
 
@@ -62,7 +76,7 @@ describe('FlareErrorBoundary', () => {
         expect(mockReport.mock.calls[0][0]).toBe(testError);
     });
 
-    test('passes vue context with info, componentName, componentHierarchy, and componentHierarchyFrames', async () => {
+    test('passes vue context with info, componentName, componentProps, componentHierarchy, and componentHierarchyFrames', async () => {
         mount(FlareErrorBoundary, {
             slots: {
                 default: () => h(ThrowingComponent),
@@ -75,6 +89,7 @@ describe('FlareErrorBoundary', () => {
         const context = mockReport.mock.calls[0][1];
         expect(context.vue.info).toEqual(expect.any(String));
         expect(context.vue.componentName).toBe('ThrowingComponent');
+        expect(context.vue.componentProps).toBeDefined();
         expect(context.vue.componentHierarchy).toBeInstanceOf(Array);
         expect(context.vue.componentHierarchy).toContain('ThrowingComponent');
         expect(context.vue.componentHierarchyFrames).toBeInstanceOf(Array);
@@ -83,6 +98,38 @@ describe('FlareErrorBoundary', () => {
         expect(context.vue.componentHierarchyFrames[0]).toHaveProperty('props');
     });
 
+    test('captures componentProps from the erroring component', async () => {
+        mount(FlareErrorBoundary, {
+            slots: {
+                default: () => h(ThrowingComponentWithProps, { userId: 42, name: 'Alice' }),
+                fallback: () => h('div', 'Error'),
+            },
+        });
+
+        await nextTick();
+
+        const context = mockReport.mock.calls[0][1];
+        expect(context.vue.componentProps).toEqual({ userId: 42, name: 'Alice' });
+    });
+
+    test('fallback slot receives componentProps', async () => {
+        let receivedProps: Record<string, unknown> | null = null;
+
+        mount(FlareErrorBoundary, {
+            slots: {
+                default: () => h(ThrowingComponentWithProps, { userId: 42, name: 'Alice' }),
+                fallback: (props: { componentProps: Record<string, unknown> | null }) => {
+                    receivedProps = props.componentProps;
+                    return h('div', 'Error');
+                },
+            },
+        });
+
+        await nextTick();
+
+        expect(receivedProps).toEqual({ userId: 42, name: 'Alice' });
+    });
+
     test('passes instance and info as extra solution parameters', async () => {
         mount(FlareErrorBoundary, {
             slots: {

packages/vue/tests/flareVue.test.ts

@@ -80,27 +80,42 @@ describe('flareVue', () => {
         expect(reportedError.message).toBe('string error');
     });
 
-    test('passes vue context with info, componentName, componentHierarchy, and componentHierarchyFrames', () => {
+    test('passes vue context with info, componentName, componentProps, componentHierarchy, and componentHierarchyFrames', () => {
         const app = createMockApp();
         (flareVue as Function)(app);
 
         const grandparent = createMockInstance('App');
         const parent = createMockInstance('Layout', grandparent);
-        const instance = createMockInstance('Button', parent);
+        const instance = createMockInstance('Button', parent, { variant: 'primary' });
 
         callHandler(app, new Error('test'), instance, 'setup function');
 
         const context = mockReport.mock.calls[0][1];
         expect(context.vue.info).toBe('setup function');
         expect(context.vue.componentName).toBe('Button');
+        expect(context.vue.componentProps).toEqual({ variant: 'primary' });
         expect(context.vue.componentHierarchy).toEqual(['Button', 'Layout', 'App']);
         expect(context.vue.componentHierarchyFrames).toEqual([
-            { component: 'Button', file: null, props: {} },
+            { component: 'Button', file: null, props: { variant: 'primary' } },
             { component: 'Layout', file: null, props: {} },
             { component: 'App', file: null, props: {} },
         ]);
     });
 
+    test('componentProps is a shallow copy of instance props', () => {
+        const app = createMockApp();
+        (flareVue as Function)(app);
+
+        const originalProps = { userId: 42 };
+        const instance = createMockInstance('UserCard', null, originalProps);
+
+        callHandler(app, new Error('test'), instance, 'setup function');
+
+        const context = mockReport.mock.calls[0][1];
+        expect(context.vue.componentProps).toEqual({ userId: 42 });
+        expect(context.vue.componentProps).not.toBe(originalProps);
+    });
+
     test('passes instance and info as extra solution parameters', () => {
         const app = createMockApp();
         (flareVue as Function)(app);
@@ -187,6 +202,7 @@ describe('flareVue', () => {
 
         const context = mockReport.mock.calls[0][1];
         expect(context.vue.componentName).toBe('AnonymousComponent');
+        expect(context.vue.componentProps).toBeNull();
         expect(context.vue.componentHierarchy).toEqual([]);
         expect(context.vue.componentHierarchyFrames).toEqual([]);
     });