@justifi/webcomponents 4.10.0 → 4.12.0

package/dist/collection/components/form/form-control-date.js

@@ -0,0 +1,192 @@
+import { Host, h, } from "@stencil/core";
+export class DateInput {
+    constructor() {
+        this.handleFormControlInput = (event) => {
+            const target = event.target;
+            const name = target.getAttribute('name');
+            this.inputHandler(name, target.value);
+            this.formControlInput.emit(target.value);
+        };
+        this.label = undefined;
+        this.name = undefined;
+        this.error = undefined;
+        this.defaultValue = undefined;
+        this.inputHandler = undefined;
+        this.disabled = undefined;
+        this.date = undefined;
+    }
+    updateInput(value) {
+        this.dateInput.value = value;
+    }
+    componentDidLoad() {
+        this.updateInput(this.defaultValue);
+    }
+    handleDefaultValueChange(newValue) {
+        this.updateInput(newValue);
+    }
+    render() {
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { type: "date", ref: el => (this.dateInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onChange: this.handleFormControlInput, part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+    }
+    static get is() { return "form-control-date"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["form-control-date.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["form-control-date.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error",
+                "reflect": false
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "default-value",
+                "reflect": false
+            },
+            "inputHandler": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "input-handler",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "date": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "formControlInput",
+                "name": "formControlInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "formControlBlur",
+                "name": "formControlBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "defaultValue",
+                "methodName": "handleDefaultValueChange"
+            }];
+    }
+}

package/dist/collection/components/form/form-control-text.js

@@ -5,6 +5,8 @@ export class TextInput {
         this.name = undefined;
         this.error = undefined;
         this.defaultValue = undefined;
+        this.keyDownHandler = undefined;
+        this.maxLength = undefined;
         this.disabled = undefined;
         this.inputHandler = undefined;
         this.input = undefined;
@@ -28,7 +30,7 @@ export class TextInput {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), part: `input ${this.error ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), onKeyDown: (event) => this.keyDownHandler && this.keyDownHandler(event), maxLength: this.maxLength, part: `input ${this.error ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
     }
     static get is() { return "form-control-text"; }
     static get encapsulation() { return "shadow"; }
@@ -112,6 +114,38 @@ export class TextInput {
                 "attribute": "default-value",
                 "reflect": false
             },
+            "keyDownHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: any) => void",
+                    "resolved": "(event: any) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "max-length",
+                "reflect": false
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/form/utils.js

@@ -1,3 +1,9 @@
 import { h } from "@stencil/core";
 export const FormAlert = (message) => (h("div", { class: 'alert alert-danger d-flex align-items-center', role: 'alert' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "currentColor", class: "bi bi-exclamation-triangle-fill flex-shrink-0 me-2", viewBox: "0 0 16 16", role: "img", "aria-label": "Warning:" }, h("path", { d: "M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" })), h("div", null, message)));
 export const LoadingSpinner = () => (h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")));
+export const filterPostalInput = (e) => {
+    const specialKeys = ['Backspace', 'Tab', 'Enter'];
+    if (!/^\d$/.test(e.key) && !specialKeys.includes(e.key)) {
+        e.preventDefault();
+    }
+};

package/dist/collection/components/gross-payment-chart/get-gross-payment-chart-data.js

@@ -1,14 +1,29 @@
+import { ComponentErrorSeverity } from "../../api/ComponentError";
+import { getErrorCode, getErrorMessage } from "../../api/services/utils";
 export const makeGetGrossPaymentChartData = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
+    var _a;
     try {
         const response = await service.fetchGrossVolumeChartData(id, authToken);
         if (!response.error) {
             onSuccess(response.data);
         }
         else {
-            onError(`Error trying to fetch data : ${response.error}`);
+            const errorMessage = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            onError({
+                error: errorMessage,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     catch (error) {
-        onError(`Error trying to fetch data : ${error}`);
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        const errorMessage = getErrorMessage(error);
+        onError({
+            error: errorMessage,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };

package/dist/collection/components/gross-payment-chart/gross-payment-chart-core.js

@@ -37,9 +37,14 @@ export class GrossPaymentChartCore {
                 this.loading = false;
                 this.grossVolumeReport = data;
             },
-            onError: (error) => {
+            onError: ({ error, code, severity }) => {
                 this.loading = false;
                 this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
             }
         });
     }
@@ -107,6 +112,30 @@ export class GrossPaymentChartCore {
             "errorMessage": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
+            }];
+    }
     static get watchers() {
         return [{
                 "propName": "getGrossPayment",

package/dist/collection/components/gross-payment-chart/gross-payment-chart.js

@@ -2,8 +2,13 @@ import { h } from "@stencil/core";
 import { ReportsService } from "../../api/services/reports.service";
 import { makeGetGrossPaymentChartData } from "./get-gross-payment-chart-data";
 import { ErrorState } from "../details/utils";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 export class GrossPaymentChart {
     constructor() {
+        this.handleErrorEvent = (event) => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
         this.accountId = undefined;
         this.authToken = undefined;
         this.getGrossPayment = undefined;
@@ -25,13 +30,18 @@ export class GrossPaymentChart {
         }
         else {
             this.errorMessage = 'Account ID and Auth Token are required';
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                message: this.errorMessage,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     render() {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h("gross-payment-chart-core", { getGrossPayment: this.getGrossPayment }));
+        return (h("gross-payment-chart-core", { getGrossPayment: this.getGrossPayment, "onError-event": this.handleErrorEvent }));
     }
     static get is() { return "justifi-gross-payment-chart"; }
     static get encapsulation() { return "shadow"; }
@@ -79,6 +89,30 @@ export class GrossPaymentChart {
             "errorMessage": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
+            }];
+    }
     static get watchers() {
         return [{
                 "propName": "accountId",

package/dist/collection/components/gross-payment-chart/test/get-gross-payment-chart-data.spec.js

@@ -1,6 +1,7 @@
 import { makeGetGrossPaymentChartData } from "../get-gross-payment-chart-data";
 import { ReportsService } from "../../../api/services/reports.service";
-import { mockGrossVolumeReport } from "../../../api/mockData/mockGrossVolumeReport";
+import { mockGrossVolumeReport } from "../../../../../../mockData/mockGrossVolumeReport";
+import { API_NOT_AUTHENTICATED_ERROR } from "../../../api/shared";
 const mockFetchGrossVolumeChartData = jest.fn().mockResolvedValue({
     data: mockGrossVolumeReport,
     error: null,
@@ -36,11 +37,7 @@ describe('makeGetGrossPaymentChartData', () => {
         expect(onError).not.toHaveBeenCalled();
     });
     it('calls onError with message on API error', async () => {
-        const mockError = 'API error';
-        mockFetchGrossVolumeChartData.mockResolvedValue({
-            error: mockError,
-            data: null,
-        });
+        mockFetchGrossVolumeChartData.mockResolvedValue(API_NOT_AUTHENTICATED_ERROR);
         const onSuccess = jest.fn();
         const onError = jest.fn();
         const getGrossPaymentChartData = makeGetGrossPaymentChartData({
@@ -49,7 +46,11 @@ describe('makeGetGrossPaymentChartData', () => {
             service: mockService,
         });
         await getGrossPaymentChartData({ onSuccess, onError });
-        expect(onError).toHaveBeenCalledWith(`Error trying to fetch data : ${mockError}`);
+        expect(onError).toHaveBeenCalledWith({
+            code: 'not-authenticated',
+            error: 'Not Authenticated',
+            severity: 'error',
+        });
         expect(onSuccess).not.toHaveBeenCalled();
     });
     it('calls onError with message on exception', async () => {
@@ -63,7 +64,24 @@ describe('makeGetGrossPaymentChartData', () => {
             service: mockService,
         });
         await getGrossPaymentChartData({ onSuccess, onError });
-        expect(onError).toHaveBeenCalledWith(`Error trying to fetch data : ${mockError}`);
+        expect(onError).toHaveBeenCalledWith(expect.objectContaining({ error: 'Network error' }));
+        expect(onSuccess).not.toHaveBeenCalled();
+    });
+    it('calls onError with message on error returned', async () => {
+        mockFetchGrossVolumeChartData.mockResolvedValue(API_NOT_AUTHENTICATED_ERROR);
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        const getGrossPaymentChartData = makeGetGrossPaymentChartData({
+            id: mockId,
+            authToken: mockAuthToken,
+            service: mockService,
+        });
+        await getGrossPaymentChartData({ onSuccess, onError });
+        expect(onError).toHaveBeenCalledWith({
+            code: 'not-authenticated',
+            error: 'Not Authenticated',
+            severity: 'error',
+        });
         expect(onSuccess).not.toHaveBeenCalled();
     });
 });

package/dist/collection/components/gross-payment-chart/test/gross-payment-chart-core.spec.js

@@ -1,7 +1,9 @@
+import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { GrossPaymentChartCore } from "../gross-payment-chart-core";
-import mockSuccessResponse from "../../../api/mockResponses/mockGrossVolumeReportSuccess.json";
+import mockSuccessResponse from "../../../../../../mockData/mockGrossVolumeReportSuccess.json";
 import { makeGetGrossPaymentChartData } from "../get-gross-payment-chart-data";
+import { API_NOT_AUTHENTICATED_ERROR } from "../../../api/shared";
 const mockDataResponse = mockSuccessResponse;
 // To prevent this error https://github.com/reactchartjs/react-chartjs-2/issues/155
 jest.mock('chart.js', () => ({
@@ -11,7 +13,7 @@ describe('gross-payment-chart', () => {
     it('should initialize with default states', async () => {
         const page = await newSpecPage({
             components: [GrossPaymentChartCore],
-            html: `<gross-payment-chart-core />`,
+            template: () => h("gross-payment-chart-core", null),
         });
         expect(page.rootInstance.loading).toBeTruthy();
         expect(page.rootInstance.errorMessage).toBe('');
@@ -27,18 +29,15 @@ describe('gross-payment-chart', () => {
         });
         const page = await newSpecPage({
             components: [GrossPaymentChartCore],
-            html: `<gross-payment-chart-core />`,
+            template: () => h("gross-payment-chart-core", { getGrossPayment: getGrossPayment }),
         });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getGrossPayment = getGrossPayment;
-        page.rootInstance.fetchData();
         await page.waitForChanges();
         expect(page.rootInstance.grossVolumeReport).toEqual(mockDataResponse.data);
     });
     it('matches the snapshot when in loading state', async () => {
         const page = await newSpecPage({
             components: [GrossPaymentChartCore],
-            html: `<gross-payment-chart-core></gross-payment-chart-core>`,
+            template: () => h("gross-payment-chart-core", null),
         });
         expect(page.root).toMatchSnapshot();
     });
@@ -53,12 +52,53 @@ describe('gross-payment-chart', () => {
         });
         const page = await newSpecPage({
             components: [GrossPaymentChartCore],
-            html: `<gross-payment-chart-core></gross-payment-chart-core>`,
+            template: () => h("gross-payment-chart-core", { getGrossPayment: getGrossPayment }),
         });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getGrossPayment = getGrossPayment;
-        page.rootInstance.fetchData();
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
     });
+    it('emits an error event when error occurs', async () => {
+        const getGrossPayment = makeGetGrossPaymentChartData({
+            id: 'my-account-id',
+            authToken: 'my-token',
+            service: {
+                fetchGrossVolumeChartData: jest.fn().mockRejectedValue('Error message')
+            }
+        });
+        const eventSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [GrossPaymentChartCore],
+            template: () => h("gross-payment-chart-core", { getGrossPayment: getGrossPayment, "onError-event": eventSpy }),
+        });
+        await page.waitForChanges();
+        expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'fetch-error',
+                message: 'Error message',
+                severity: 'error',
+            }
+        }));
+    });
+    it('emits an error event when API return error', async () => {
+        const getGrossPayment = makeGetGrossPaymentChartData({
+            id: 'my-account-id',
+            authToken: 'my-token',
+            service: {
+                fetchGrossVolumeChartData: jest.fn().mockResolvedValue(API_NOT_AUTHENTICATED_ERROR)
+            }
+        });
+        const eventSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [GrossPaymentChartCore],
+            template: () => h("gross-payment-chart-core", { getGrossPayment: getGrossPayment, "onError-event": eventSpy }),
+        });
+        await page.waitForChanges();
+        expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'not-authenticated',
+                message: 'Not Authenticated',
+                severity: 'error',
+            }
+        }));
+    });
 });

package/dist/collection/components/gross-payment-chart/test/gross-payment-chart.spec.js

@@ -1,11 +1,15 @@
+import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { GrossPaymentChart } from "../gross-payment-chart";
 import { GrossPaymentChartCore } from "../gross-payment-chart-core";
+import { ReportsService } from "../../../api/services/reports.service";
+import { API_NOT_AUTHENTICATED_ERROR } from "../../../api/shared";
+jest.mock("../../../api/services/reports.service");
 describe('GrossPaymentChart', () => {
     it('renders an error when no accountId and authToken is passed', async () => {
         const page = await newSpecPage({
             components: [GrossPaymentChart, GrossPaymentChartCore],
-            html: '<justifi-gross-payment-chart></justifi-gross-payment-chart>',
+            template: () => h("justifi-gross-payment-chart", null),
         });
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
@@ -13,7 +17,7 @@ describe('GrossPaymentChart', () => {
     it('renders an error when no accountId is passed', async () => {
         const page = await newSpecPage({
             components: [GrossPaymentChart, GrossPaymentChartCore],
-            html: '<justifi-gross-payment-chart auth-token="abc"></justifi-gross-payment-chart>',
+            template: () => h("justifi-gross-payment-chart", { "auth-token": "abc" }),
         });
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
@@ -21,9 +25,57 @@ describe('GrossPaymentChart', () => {
     it('renders an error when no authToken is passed', async () => {
         const page = await newSpecPage({
             components: [GrossPaymentChart, GrossPaymentChartCore],
-            html: '<justifi-gross-payment-chart account-id="abc"></justifi-gross-payment-chart>',
+            template: () => h("justifi-gross-payment-chart", { "account-id": "abc" }),
         });
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
     });
+    it('emits an error event when no accountId and authToken is passed', async () => {
+        const errorEvent = jest.fn();
+        const page = await newSpecPage({
+            components: [GrossPaymentChart, GrossPaymentChartCore],
+            template: () => h("justifi-gross-payment-chart", { "onError-event": errorEvent }),
+        });
+        await page.waitForChanges();
+        expect(errorEvent).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'missing-props',
+                message: 'Account ID and Auth Token are required',
+                severity: 'error',
+            }
+        }));
+    });
+    it('emits an error event when fetch fails', async () => {
+        ReportsService.prototype.fetchGrossVolumeChartData = jest.fn().mockReturnValue(API_NOT_AUTHENTICATED_ERROR);
+        const errorEvent = jest.fn();
+        const page = await newSpecPage({
+            components: [GrossPaymentChart, GrossPaymentChartCore],
+            template: () => (h("justifi-gross-payment-chart", { "account-id": "abc", "auth-token": "abc", "onError-event": errorEvent })),
+        });
+        await page.waitForChanges();
+        expect(errorEvent).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'not-authenticated',
+                message: 'Not Authenticated',
+                severity: 'error',
+            }
+        }));
+    });
+    it('emits an error event when error occurs', async () => {
+        ReportsService.prototype.fetchGrossVolumeChartData = jest.fn()
+            .mockRejectedValue(new Error('Network error'));
+        const errorEvent = jest.fn();
+        const page = await newSpecPage({
+            components: [GrossPaymentChart, GrossPaymentChartCore],
+            template: () => (h("justifi-gross-payment-chart", { "account-id": "abc", "auth-token": "abc", "onError-event": errorEvent })),
+        });
+        await page.waitForChanges();
+        expect(errorEvent).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'fetch-error',
+                message: 'Network error',
+                severity: 'error',
+            }
+        }));
+    });
 });