@justifi/webcomponents 4.10.0 → 4.11.0

package/dist/collection/components/payout-details/test/payout-details-core.spec.js

@@ -1,7 +1,9 @@
+import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { PayoutDetailsCore } from "../payout-details-core";
-import mockPayoutDetailSuccess from "../../../api/mockData/mockPayoutDetailsSuccess.json";
+import mockPayoutDetailSuccess from "../../../../../../mockData/mockPayoutDetailsSuccess.json";
 import { makeGetPayoutDetails } from "../get-payout-details";
+import { API_NOT_AUTHENTICATED_ERROR } from "../../../api/shared";
 describe('payout-details-core', () => {
     it('renders loading state initially', async () => {
         // Define a mock getPayout function as part of the component initialization
@@ -12,10 +14,8 @@ describe('payout-details-core', () => {
         // Initialize the page with the mock getPayout function included in the component tag
         const page = await newSpecPage({
             components: [PayoutDetailsCore],
-            html: `<payout-details-core></payout-details-core>`,
+            template: () => h("payout-details-core", { getPayout: mockGetPayout })
         });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getPayout = mockGetPayout;
         // Wait for any state changes to complete
         await page.waitForChanges();
         // Assert the loading state is visible in the snapshot
@@ -32,11 +32,8 @@ describe('payout-details-core', () => {
         });
         const page = await newSpecPage({
             components: [PayoutDetailsCore],
-            html: '<payout-details-core></payout-details-core>',
+            template: () => h("payout-details-core", { getPayout: getPayout })
         });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getPayout = getPayout;
-        page.rootInstance.fetchData();
         await page.waitForChanges();
         expect(mockService.fetchPayout).toHaveBeenCalled(); // Verify the mock service method was called
         expect(page.rootInstance.payout).toEqual(expect.objectContaining({
@@ -50,23 +47,64 @@ describe('payout-details-core', () => {
             fetchPayout: jest.fn().mockRejectedValue(new Error('Fetch error'))
         };
         // Real getPayout function but with mocked service
-        const realGetPayoutWithMockedService = makeGetPayoutDetails({
+        const getPayout = makeGetPayoutDetails({
             id: 'some-id', // Use appropriate id
             authToken: 'some-auth-token', // Use appropriate auth token
             service: mockService // Injecting the mocked service
         });
         const page = await newSpecPage({
             components: [PayoutDetailsCore],
-            html: '<payout-details-core></payout-details-core>',
+            template: () => h("payout-details-core", { getPayout: getPayout })
         });
-        page.rootInstance.componentWillLoad = () => { };
-        // Inject the getPayout function with mocked service into the component
-        page.rootInstance.getPayout = realGetPayoutWithMockedService;
-        // Manually call fetchData if necessary, depending on how your component is set up
-        await page.rootInstance.fetchData();
         await page.waitForChanges();
         // Assertions to verify the error handling
-        expect(page.rootInstance.errorMessage).toBe('Error fetching payout details: Error: Fetch error');
+        expect(page.rootInstance.errorMessage).toBe('Fetch error');
         expect(page.root).toMatchSnapshot();
     });
+    it('emits error event on fetch error', async () => {
+        const mockService = {
+            fetchPayout: jest.fn().mockRejectedValue(new Error('Fetch error'))
+        };
+        const getPayout = makeGetPayoutDetails({
+            id: 'some-id',
+            authToken: 'some-auth',
+            service: mockService
+        });
+        const onErrorEvent = jest.fn();
+        const page = await newSpecPage({
+            components: [PayoutDetailsCore],
+            template: () => h("payout-details-core", { getPayout: getPayout, "onError-event": onErrorEvent })
+        });
+        await page.waitForChanges();
+        expect(onErrorEvent).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                message: 'Fetch error',
+                errorCode: 'fetch-error',
+                severity: 'error'
+            }
+        }));
+    });
+    it('emits error event when API returns error', async () => {
+        const mockService = {
+            fetchPayout: jest.fn().mockResolvedValue(API_NOT_AUTHENTICATED_ERROR)
+        };
+        const getPayout = makeGetPayoutDetails({
+            id: 'some-id',
+            authToken: 'some-auth',
+            service: mockService
+        });
+        const onErrorEvent = jest.fn();
+        const page = await newSpecPage({
+            components: [PayoutDetailsCore],
+            template: () => h("payout-details-core", { getPayout: getPayout, "onError-event": onErrorEvent })
+        });
+        await page.waitForChanges();
+        expect(onErrorEvent).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                message: 'Not Authenticated',
+                errorCode: 'not-authenticated',
+                severity: 'error'
+            }
+        }));
+    });
 });

package/dist/collection/components/payout-details/test/payout-details.spec.js

@@ -1,13 +1,62 @@
+import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { PayoutDetails } from "../payout-details";
 import { PayoutDetailsCore } from "../payout-details-core";
+import { PayoutService } from "../../../api/services/payout.service";
+jest.mock("../../../api/services/payout.service");
 describe('payout-details', () => {
     it('renders error state when no payoutId or authToken', async () => {
         const page = await newSpecPage({
             components: [PayoutDetails, PayoutDetailsCore],
-            html: '<justifi-payout-details></justifi-payout-details>',
+            template: () => h("justifi-payout-details", null),
         });
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
     });
+    it('emits error event when no payoutId', async () => {
+        const eventSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [PayoutDetails, PayoutDetailsCore],
+            template: () => h("justifi-payout-details", { authToken: "token", "onError-event": eventSpy }),
+        });
+        await page.waitForChanges();
+        expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                message: 'Failed to load payout details. payoutId or authToken is not provided.',
+                errorCode: 'missing-props',
+                severity: 'error'
+            }
+        }));
+    });
+    it('emits error event when no authToken', async () => {
+        const eventSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [PayoutDetails, PayoutDetailsCore],
+            template: () => h("justifi-payout-details", { payoutId: "payoutId", "onError-event": eventSpy }),
+        });
+        await page.waitForChanges();
+        expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                message: 'Failed to load payout details. payoutId or authToken is not provided.',
+                errorCode: 'missing-props',
+                severity: 'error'
+            }
+        }));
+    });
+    it('emits an error event when fetch fails', async () => {
+        PayoutService.prototype.fetchPayout = jest.fn().mockRejectedValueOnce(new Error('Failed to fetch'));
+        const onErrorSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [PayoutDetails, PayoutDetailsCore],
+            template: () => h("justifi-payout-details", { payoutId: "payoutId", authToken: "authToken", "onError-event": onErrorSpy }),
+        });
+        await page.waitForChanges();
+        expect(onErrorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                message: 'Failed to fetch',
+                errorCode: 'fetch-error',
+                severity: 'error'
+            }
+        }));
+    });
 });

package/dist/collection/components/payouts-list/get-payouts.js

@@ -1,7 +1,8 @@
 import { Payout } from "../../api";
-import { getErrorMessage } from "../../api/services/utils";
+import { ComponentErrorSeverity } from "../../api/ComponentError";
+import { getErrorCode, getErrorMessage } from "../../api/services/utils";
 export const makeGetPayouts = ({ id, authToken, service }) => async ({ params, onSuccess, onError }) => {
-    var _a;
+    var _a, _b;
     try {
         const response = await service.fetchPayouts(id, authToken, params);
         if (!response.error) {
@@ -10,11 +11,22 @@ export const makeGetPayouts = ({ id, authToken, service }) => async ({ params, o
             onSuccess({ payouts, pagingInfo });
         }
         else {
-            const responseError = getErrorMessage(response.error);
-            return onError(responseError);
+            const error = getErrorMessage(response.error);
+            const code = getErrorCode((_b = response.error) === null || _b === void 0 ? void 0 : _b.code);
+            return onError({
+                error,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     catch (error) {
-        return onError(error.message || error);
+        const message = getErrorMessage(error);
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: message,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };

package/dist/collection/components/payouts-list/payouts-list-core.js

@@ -54,8 +54,13 @@ export class PayoutsListCore {
                 this.paging = pagingInfo;
                 this.loading = false;
             },
-            onError: (errorMessage) => {
-                this.errorMessage = errorMessage;
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity
+                });
                 this.loading = false;
             },
         });
@@ -167,6 +172,27 @@ export class PayoutsListCore {
                         }
                     }
                 }
+            }, {
+                "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() {

package/dist/collection/components/payouts-list/payouts-list.js

@@ -3,6 +3,7 @@ import { tableExportedParts } from "../table/exported-parts";
 import { PayoutService } from "../../api/services/payout.service";
 import { makeGetPayouts } from "./get-payouts";
 import { ErrorState } from "../details/utils";
+import { ComponentErrorCodes } from "../../api/ComponentError";
 /**
   * @exportedPart table-head: Table head
   * @exportedPart table-head-row: Head row
@@ -24,6 +25,10 @@ import { ErrorState } from "../details/utils";
 */
 export class PayoutsList {
     constructor() {
+        this.handleOnError = (event) => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
         this.accountId = undefined;
         this.authToken = undefined;
         this.getPayouts = undefined;
@@ -45,13 +50,17 @@ export class PayoutsList {
         }
         else {
             this.errorMessage = 'Account ID and Auth Token are required';
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                message: 'Account ID and Auth Token are required',
+            });
         }
     }
     render() {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h(Host, { exportedparts: tableExportedParts }, h("payouts-list-core", { getPayouts: this.getPayouts })));
+        return (h(Host, { exportedparts: tableExportedParts }, h("payouts-list-core", { getPayouts: this.getPayouts, "onError-event": this.handleOnError })));
     }
     static get is() { return "justifi-payouts-list"; }
     static get encapsulation() { return "shadow"; }
@@ -99,6 +108,30 @@ export class PayoutsList {
             "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/payouts-list/test/get-payouts.spec.js

@@ -1,7 +1,7 @@
 import { Payout } from "../../../api";
 import { PayoutService } from "../../../api/services/payout.service";
 import { makeGetPayouts } from "../get-payouts";
-import mockResponse from "../../../api/mockData/mockPayoutsSuccess.json";
+import mockResponse from "../../../../../../mockData/mockPayoutsSuccess.json";
 describe('makeGetPayouts', () => {
     const mockId = '123';
     const mockAuthToken = 'token';
@@ -43,7 +43,11 @@ describe('makeGetPayouts', () => {
             service: mockServiceInstance,
         });
         await getPayouts({ params: mockParams, onSuccess, onError });
-        expect(onError).toHaveBeenCalledWith('Error fetching payouts');
+        expect(onError).toHaveBeenCalledWith({
+            code: 'fetch-error',
+            error: 'Error fetching payouts',
+            severity: 'error',
+        });
         expect(onSuccess).not.toHaveBeenCalled();
     });
     it('should call onError with an error message on API failure', async () => {
@@ -58,7 +62,11 @@ describe('makeGetPayouts', () => {
             service: mockServiceInstance,
         });
         await getPayouts({ params: mockParams, onSuccess, onError });
-        expect(onError).toHaveBeenCalledWith('Error fetching payouts');
+        expect(onError).toHaveBeenCalledWith({
+            code: 'fetch-error',
+            error: 'Error fetching payouts',
+            severity: 'error',
+        });
         expect(onSuccess).not.toHaveBeenCalled();
     });
 });

package/dist/collection/components/payouts-list/test/payouts-list-core.spec.js

@@ -1,8 +1,9 @@
+import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { Table } from "../../table/table";
 import { PaginationMenu } from "../../pagination-menu/pagination-menu";
 import { PayoutsListCore } from "../payouts-list-core";
-import mockSuccessResponse from "../../../api/mockData/mockPayoutsSuccess.json";
+import mockSuccessResponse from "../../../../../../mockData/mockPayoutsSuccess.json";
 import { makeGetPayouts } from "../get-payouts";
 const mockPayoutsResponse = mockSuccessResponse;
 describe('payouts-list-core', () => {
@@ -10,19 +11,15 @@ describe('payouts-list-core', () => {
         const mockPayoutService = {
             fetchPayouts: jest.fn().mockResolvedValue(mockPayoutsResponse),
         };
-        const page = await newSpecPage({
-            components: [PayoutsListCore, Table, PaginationMenu],
-            html: `
-        <payouts-list-core></payouts-list-core>
-      `,
-        });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getPayouts = makeGetPayouts({
+        const getPayouts = makeGetPayouts({
             id: '123',
             authToken: '123',
             service: mockPayoutService
         });
-        page.rootInstance.fetchData();
+        const page = await newSpecPage({
+            components: [PayoutsListCore, Table, PaginationMenu],
+            template: () => h("payouts-list-core", { getPayouts: getPayouts }),
+        });
         await page.waitForChanges();
         const justifiTable = page.root.querySelector('justifi-table');
         const shadowRoot = justifiTable.shadowRoot;
@@ -41,11 +38,8 @@ describe('payouts-list-core', () => {
         });
         const page = await newSpecPage({
             components: [PayoutsListCore, Table, PaginationMenu],
-            html: '<payouts-list-core></payouts-list-core>',
+            template: () => h("payouts-list-core", { getPayouts: getPayouts }),
         });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getPayouts = getPayouts;
-        page.rootInstance.fetchData();
         await page.waitForChanges();
         const justifiTable = page.root.querySelector('justifi-table');
         const shadowRoot = justifiTable.shadowRoot;
@@ -53,21 +47,42 @@ describe('payouts-list-core', () => {
         expect(error).toBeTruthy();
         expect(page.root).toMatchSnapshot();
     });
-    it('emits payout-row-clicked event on row click', async () => {
+    it('emits an error event on failed data fetch', async () => {
         const mockPayoutService = {
-            fetchPayouts: jest.fn().mockResolvedValue(mockPayoutsResponse),
+            fetchPayouts: jest.fn().mockRejectedValue(new Error('Fetch error'))
         };
+        const getPayouts = makeGetPayouts({
+            id: 'some-id',
+            authToken: 'some-auth-token',
+            service: mockPayoutService
+        });
+        const errorSpy = jest.fn();
         const page = await newSpecPage({
             components: [PayoutsListCore, Table, PaginationMenu],
-            html: '<payouts-list-core></payouts-list-core>',
+            template: () => h("payouts-list-core", { getPayouts: getPayouts, "onError-event": errorSpy }),
         });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getPayouts = makeGetPayouts({
+        await page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'fetch-error',
+                message: 'Fetch error',
+                severity: 'error',
+            }
+        }));
+    });
+    it('emits payout-row-clicked event on row click', async () => {
+        const mockPayoutService = {
+            fetchPayouts: jest.fn().mockResolvedValue(mockPayoutsResponse),
+        };
+        const getPayouts = makeGetPayouts({
             id: '123',
             authToken: '123',
             service: mockPayoutService
         });
-        page.rootInstance.fetchData();
+        const page = await newSpecPage({
+            components: [PayoutsListCore, Table, PaginationMenu],
+            template: () => h("payouts-list-core", { getPayouts: getPayouts }),
+        });
         await page.waitForChanges();
         const rowClickedHandler = jest.fn();
         page.win.addEventListener('payout-row-clicked', rowClickedHandler);
@@ -83,22 +98,20 @@ describe('payouts-list-core', () => {
         const mockPayoutService = {
             fetchPayouts: jest.fn().mockResolvedValue(mockPayoutsResponse),
         };
-        const page = await newSpecPage({
-            components: [PayoutsListCore, Table, PaginationMenu],
-            html: `<payouts-list-core></payouts-list-core>`,
-        });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getPayouts = makeGetPayouts({
+        const getPayouts = makeGetPayouts({
             id: '123',
             authToken: '123',
             service: mockPayoutService
         });
-        page.rootInstance.fetchData();
+        const page = await newSpecPage({
+            components: [PayoutsListCore, Table, PaginationMenu],
+            template: () => h("payouts-list-core", { getPayouts: getPayouts }),
+        });
         await page.waitForChanges();
         page.rootInstance.handleClickNext('nextCursor');
         await page.waitForChanges();
-        // The mock function should be called 3 times: once for the initial load, twice for when mockGetPayouts is set and later after the pagination interaction
-        expect(mockPayoutService.fetchPayouts).toHaveBeenCalledTimes(3);
+        // The mock function should be called 2 times: once for the initial load and later after the pagination interaction
+        expect(mockPayoutService.fetchPayouts).toHaveBeenCalledTimes(2);
         const updatedParams = page.rootInstance.params;
         expect(updatedParams.after_cursor).toBe('nextCursor');
     });

package/dist/collection/components/payouts-list/test/payouts-list.spec.js

@@ -1,6 +1,9 @@
+import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { PayoutsList } from "../payouts-list";
 import { PayoutsListCore } from "../payouts-list-core";
+import { PayoutService } from "../../../api/services/payout.service";
+jest.mock('../../../api/services/payout.service');
 describe('payouts-list', () => {
     it('renders an error message when accountId and authToken are not provided', async () => {
         const page = await newSpecPage({
@@ -26,4 +29,34 @@ describe('payouts-list', () => {
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
     });
+    it('emits an error event when accountId and authToken are not provided', async () => {
+        const onErrorSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [PayoutsList, PayoutsListCore],
+            template: () => h("justifi-payouts-list", { "onError-event": onErrorSpy }),
+        });
+        await page.waitForChanges();
+        expect(onErrorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'missing-props',
+                message: 'Account ID and Auth Token are required',
+            },
+        }));
+    });
+    it('emits an error event when fetch fails', async () => {
+        PayoutService.prototype.fetchPayouts = jest.fn().mockRejectedValue(new Error('Fetch error'));
+        const onErrorSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [PayoutsList, PayoutsListCore],
+            template: () => (h("justifi-payouts-list", { "account-id": "abc", "auth-token": "abc", "onError-event": onErrorSpy })),
+        });
+        await page.waitForChanges();
+        expect(onErrorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'fetch-error',
+                message: 'Fetch error',
+                severity: 'error',
+            },
+        }));
+    });
 });