@justifi/webcomponents 4.10.0-rc.0 → 4.11.0

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',
+            },
+        }));
+    });
 });

package/dist/collection/utils/utils.js

@@ -1,5 +1,6 @@
 import { format } from "date-fns";
 import Dinero from "dinero.js";
+import StateOptions from "./state-options";
 export const RegExZip = /^\d{5}/;
 export function formatCurrency(amount, withSymbol = true) {
     if (!amount)
@@ -203,3 +204,7 @@ export async function loadFontsOnParent() {
 export function isEmptyObject(obj) {
     return Object.keys(obj).length === 0 && obj.constructor === Object;
 }
+export function getStateAbbreviation(stateName) {
+    const state = StateOptions.find(s => s.label === stateName);
+    return state ? state.value : stateName;
+}