tests: add vue tests for the new callback hooks

Author: Sébastien Henau

packages/vue/tests/FlareErrorBoundary.test.ts

@@ -3,6 +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';
 
 const mockReport = vi.fn();
 
@@ -29,7 +30,7 @@ describe('FlareErrorBoundary', () => {
 
     beforeEach(() => {
         testError = new Error('test error');
-        mockReport.mockClear();
+        mockReport.mockReset();
         consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
     });
 
@@ -293,4 +294,293 @@ describe('FlareErrorBoundary', () => {
             });
         }).toThrow('report failed');
     });
+
+    test('calls beforeEvaluate before reporting', async () => {
+        const callOrder: string[] = [];
+
+        const beforeEvaluate = vi.fn(() => callOrder.push('beforeEvaluate'));
+        mockReport.mockImplementationOnce(() => callOrder.push('report'));
+
+        mount(FlareErrorBoundary, {
+            props: { beforeEvaluate },
+            slots: {
+                default: () => h(ThrowingComponent),
+                fallback: () => h('div', 'Error'),
+            },
+        });
+
+        await nextTick();
+
+        expect(beforeEvaluate).toHaveBeenCalledOnce();
+        expect(callOrder).toEqual(['beforeEvaluate', 'report']);
+    });
+
+    test('calls beforeEvaluate with error, instance, and info', async () => {
+        const beforeEvaluate = vi.fn();
+
+        mount(FlareErrorBoundary, {
+            props: { beforeEvaluate },
+            slots: {
+                default: () => h(ThrowingComponent),
+                fallback: () => h('div', 'Error'),
+            },
+        });
+
+        await nextTick();
+
+        expect(beforeEvaluate.mock.calls[0][0].error).toBe(testError);
+        expect(beforeEvaluate.mock.calls[0][0].instance).toBeDefined();
+        expect(beforeEvaluate.mock.calls[0][0].info).toEqual(expect.any(String));
+    });
+
+    test('calls beforeSubmit after beforeEvaluate and before reporting', async () => {
+        const callOrder: string[] = [];
+
+        const beforeEvaluate = vi.fn(() => callOrder.push('beforeEvaluate'));
+        const beforeSubmit = vi.fn((params: { context: FlareVueContext }) => {
+            callOrder.push('beforeSubmit');
+            return params.context;
+        });
+        mockReport.mockImplementationOnce(() => callOrder.push('report'));
+
+        mount(FlareErrorBoundary, {
+            props: { beforeEvaluate, beforeSubmit },
+            slots: {
+                default: () => h(ThrowingComponent),
+                fallback: () => h('div', 'Error'),
+            },
+        });
+
+        await nextTick();
+
+        expect(beforeSubmit).toHaveBeenCalledOnce();
+        expect(callOrder).toEqual(['beforeEvaluate', 'beforeSubmit', 'report']);
+    });
+
+    test('calls beforeSubmit with error, instance, info, and context', async () => {
+        const beforeSubmit = vi.fn(
+            (params: { error: Error; instance: unknown; info: string; context: FlareVueContext }) => params.context
+        );
+
+        mount(FlareErrorBoundary, {
+            props: { beforeSubmit },
+            slots: {
+                default: () => h(ThrowingComponent),
+                fallback: () => h('div', 'Error'),
+            },
+        });
+
+        await nextTick();
+
+        expect(beforeSubmit.mock.calls[0][0].error).toBe(testError);
+        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.componentName).toBe('ThrowingComponent');
+    });
+
+    test('beforeSubmit can modify the context before reporting', async () => {
+        const customHierarchy = ['Custom', 'Modified'];
+        const beforeSubmit = vi.fn(({ context }: { context: FlareVueContext }) => ({
+            ...context,
+            vue: {
+                ...context.vue,
+                componentHierarchy: customHierarchy,
+            },
+        }));
+
+        mount(FlareErrorBoundary, {
+            props: { beforeSubmit },
+            slots: {
+                default: () => h(ThrowingComponent),
+                fallback: () => h('div', 'Error'),
+            },
+        });
+
+        await nextTick();
+
+        const reportedContext = mockReport.mock.calls[0][1];
+        expect(reportedContext.vue.componentHierarchy).toBe(customHierarchy);
+    });
+
+    test('beforeSubmit modified context is passed to afterSubmit', async () => {
+        const customHierarchy = ['Custom', 'Modified'];
+        const beforeSubmit = vi.fn(({ context }: { context: FlareVueContext }) => ({
+            ...context,
+            vue: {
+                ...context.vue,
+                componentHierarchy: customHierarchy,
+            },
+        }));
+        const afterSubmit = vi.fn();
+
+        mount(FlareErrorBoundary, {
+            props: { beforeSubmit, afterSubmit },
+            slots: {
+                default: () => h(ThrowingComponent),
+                fallback: () => h('div', 'Error'),
+            },
+        });
+
+        await nextTick();
+
+        expect(afterSubmit.mock.calls[0][0].context.vue.componentHierarchy).toBe(customHierarchy);
+    });
+
+    test('calls afterSubmit after reporting', async () => {
+        const callOrder: string[] = [];
+
+        mockReport.mockImplementationOnce(() => callOrder.push('report'));
+        const afterSubmit = vi.fn(() => {
+            callOrder.push('afterSubmit');
+        });
+
+        mount(FlareErrorBoundary, {
+            props: { afterSubmit },
+            slots: {
+                default: () => h(ThrowingComponent),
+                fallback: () => h('div', 'Error'),
+            },
+        });
+
+        await nextTick();
+
+        expect(afterSubmit).toHaveBeenCalledOnce();
+        expect(afterSubmit.mock.calls[0][0].error).toBe(testError);
+        expect(afterSubmit.mock.calls[0][0].instance).toBeDefined();
+        expect(afterSubmit.mock.calls[0][0].info).toEqual(expect.any(String));
+        expect(afterSubmit.mock.calls[0][0].context.vue.componentHierarchy).toBeInstanceOf(Array);
+        expect(callOrder).toEqual(['report', 'afterSubmit']);
+    });
+
+    test('uses original context when beforeSubmit does not return', async () => {
+        const beforeSubmit = vi.fn(() => {
+            // user forgot to return context
+        });
+
+        mount(FlareErrorBoundary, {
+            // @ts-expect-error - intentionally testing a user mistake where beforeSubmit does not return
+            props: { beforeSubmit },
+            slots: {
+                default: () => h(ThrowingComponent),
+                fallback: () => h('div', 'Error'),
+            },
+        });
+
+        await nextTick();
+
+        expect(beforeSubmit).toHaveBeenCalledOnce();
+        const reportedContext = mockReport.mock.calls[0][1];
+        expect(reportedContext.vue.componentName).toBe('ThrowingComponent');
+        expect(reportedContext.vue.componentHierarchy).toBeInstanceOf(Array);
+    });
+
+    test('beforeSubmit modified componentHierarchy is reflected in the fallback render', async () => {
+        const customHierarchy = ['Custom', 'Modified'];
+        const beforeSubmit = vi.fn(({ context }: { context: FlareVueContext }) => ({
+            ...context,
+            vue: {
+                ...context.vue,
+                componentHierarchy: customHierarchy,
+            },
+        }));
+
+        const wrapper = mount(FlareErrorBoundary, {
+            props: { beforeSubmit },
+            slots: {
+                default: () => h(ThrowingComponent),
+                fallback: (props: { componentHierarchy: string[] }) =>
+                    h('span', { class: 'hierarchy' }, props.componentHierarchy.join(',')),
+            },
+        });
+
+        await nextTick();
+
+        expect(wrapper.find('.hierarchy').text()).toBe('Custom,Modified');
+    });
+
+    test('beforeEvaluate throwing prevents reporting and propagates', () => {
+        const beforeEvaluate = vi.fn(() => {
+            throw new Error('beforeEvaluate error');
+        });
+
+        expect(() => {
+            mount(FlareErrorBoundary, {
+                props: { beforeEvaluate },
+                slots: {
+                    default: () => h(ThrowingComponent),
+                    fallback: () => h('div', 'Error'),
+                },
+            });
+        }).toThrow('beforeEvaluate error');
+
+        expect(beforeEvaluate).toHaveBeenCalledOnce();
+        expect(mockReport).not.toHaveBeenCalled();
+    });
+
+    test('beforeSubmit throwing prevents reporting and propagates', () => {
+        const beforeSubmit = vi.fn(() => {
+            throw new Error('beforeSubmit error');
+        });
+
+        expect(() => {
+            mount(FlareErrorBoundary, {
+                props: { beforeSubmit },
+                slots: {
+                    default: () => h(ThrowingComponent),
+                    fallback: () => h('div', 'Error'),
+                },
+            });
+        }).toThrow('beforeSubmit error');
+
+        expect(beforeSubmit).toHaveBeenCalledOnce();
+        expect(mockReport).not.toHaveBeenCalled();
+    });
+
+    test('afterSubmit throwing propagates after reporting', () => {
+        const afterSubmit = vi.fn(() => {
+            throw new Error('afterSubmit error');
+        });
+
+        expect(() => {
+            mount(FlareErrorBoundary, {
+                props: { afterSubmit },
+                slots: {
+                    default: () => h(ThrowingComponent),
+                    fallback: () => h('div', 'Error'),
+                },
+            });
+        }).toThrow('afterSubmit error');
+
+        expect(afterSubmit).toHaveBeenCalledOnce();
+        expect(mockReport).toHaveBeenCalledOnce();
+    });
+
+    test('callbacks fire again after reset and re-throw', async () => {
+        const beforeEvaluate = vi.fn();
+        const beforeSubmit = vi.fn((params: { context: FlareVueContext }) => params.context);
+        const afterSubmit = vi.fn();
+
+        const wrapper = mount(FlareErrorBoundary, {
+            props: { beforeEvaluate, beforeSubmit, afterSubmit },
+            slots: {
+                default: () => h(ThrowingComponent),
+                fallback: (props: { resetErrorBoundary: () => void }) =>
+                    h('button', { onClick: props.resetErrorBoundary }, 'Reset'),
+            },
+        });
+
+        await nextTick();
+
+        expect(beforeEvaluate).toHaveBeenCalledOnce();
+        expect(beforeSubmit).toHaveBeenCalledOnce();
+        expect(afterSubmit).toHaveBeenCalledOnce();
+
+        await wrapper.find('button').trigger('click');
+        await nextTick();
+
+        expect(beforeEvaluate).toHaveBeenCalledTimes(2);
+        expect(beforeSubmit).toHaveBeenCalledTimes(2);
+        expect(afterSubmit).toHaveBeenCalledTimes(2);
+    });
 });