@justifi/webcomponents 4.7.5 → 4.8.0

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

@@ -0,0 +1,47 @@
+import { newSpecPage } from "@stencil/core/testing";
+import mockPaymentDetailsResponse from "../../../api/mockData/mockPaymentDetailSuccess.json";
+import { PaymentDetailsCore } from "../payment-details-core";
+import { Details } from "../../details/details";
+import { makeGetPaymentDetails } from "../get-payment-details";
+describe('payment-details-core', () => {
+    const components = [PaymentDetailsCore, Details];
+    it('it renders properly with fetched data', async () => {
+        const mockPaymentService = {
+            fetchPayment: jest.fn().mockResolvedValue(mockPaymentDetailsResponse),
+        };
+        const page = await newSpecPage({
+            components,
+            html: `<payment-details-core></payment-details-core>`,
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getPaymentDetails = makeGetPaymentDetails({
+            id: '123',
+            authToken: '123',
+            service: mockPaymentService
+        });
+        page.rootInstance.fetchData();
+        await page.waitForChanges();
+        expect(page.rootInstance.payment).toEqual(expect.objectContaining({ id: mockPaymentDetailsResponse.data.id }));
+        expect(mockPaymentService.fetchPayment).toHaveBeenCalled();
+        expect(page.root).toMatchSnapshot();
+    });
+    it('displays an error state on failed data fetch', async () => {
+        const mockService = {
+            fetchPayment: jest.fn().mockRejectedValue(new Error('Fetch error'))
+        };
+        const getPaymentDetails = makeGetPaymentDetails({
+            id: 'some-id',
+            authToken: 'some-auth-token',
+            service: mockService
+        });
+        const page = await newSpecPage({
+            components,
+            html: '<payment-details-core></payment-details-core>',
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getPaymentDetails = getPaymentDetails;
+        page.rootInstance.fetchData();
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,31 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { PaymentDetails } from "../payment-details";
+import { PaymentDetailsCore } from "../payment-details-core";
+import { Details } from "../../details/details";
+describe('payment-details', () => {
+    const components = [PaymentDetails, PaymentDetailsCore, Details];
+    it('renders an error message when paymentId and authToken are not provided', async () => {
+        const page = await newSpecPage({
+            components,
+            html: '<justifi-payment-details></justifi-payment-details>',
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it('renders an error message when paymentId is not provided', async () => {
+        const page = await newSpecPage({
+            components,
+            html: '<justifi-payment-details auth-token="abc"></justifi-payment-details>',
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it('renders an error message when authToken is not provided', async () => {
+        const page = await newSpecPage({
+            components,
+            html: '<justifi-payment-details payment-id="abc"></justifi-payment-details>',
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,20 @@
+import { Payment } from "../../api";
+import { getErrorMessage } from "../../api/services/utils";
+export const makeGetPayments = ({ id, authToken, service }) => async ({ params, onSuccess, onError }) => {
+    var _a;
+    try {
+        const response = await service.fetchPayments(id, authToken, params);
+        if (!response.error) {
+            const pagingInfo = Object.assign({}, response.page_info);
+            const payments = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.map((dataItem) => new Payment(dataItem))) || [];
+            onSuccess({ payments, pagingInfo });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            return onError(responseError);
+        }
+    }
+    catch (error) {
+        return onError(error.message || error);
+    }
+};

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

@@ -0,0 +1,158 @@
+import { Host, h } from "@stencil/core";
+import { pagingDefaults } from "../../api";
+import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
+export class PaymentsListCore {
+    constructor() {
+        this.handleClickPrevious = (beforeCursor) => {
+            const newParams = Object.assign({}, this.params);
+            delete newParams.after_cursor;
+            this.params = (Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor }));
+        };
+        this.handleClickNext = (afterCursor) => {
+            const newParams = Object.assign({}, this.params);
+            delete newParams.before_cursor;
+            this.params = (Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor }));
+        };
+        this.getPayments = undefined;
+        this.payments = [];
+        this.loading = true;
+        this.errorMessage = undefined;
+        this.paging = pagingDefaults;
+        this.params = undefined;
+    }
+    componentWillLoad() {
+        if (this.getPayments) {
+            this.fetchData();
+        }
+    }
+    updateOnPropChange() {
+        this.fetchData();
+    }
+    fetchData() {
+        this.loading = true;
+        this.getPayments({
+            params: this.params,
+            onSuccess: ({ payments, pagingInfo }) => {
+                this.payments = payments;
+                this.paging = pagingInfo;
+                this.loading = false;
+            },
+            onError: (errorMessage) => {
+                this.errorMessage = errorMessage;
+                this.loading = false;
+            },
+        });
+    }
+    ;
+    render() {
+        return (h(Host, null, h("justifi-table", { rowClickHandler: e => {
+                const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;
+                if (!clickedPaymentID) {
+                    return;
+                }
+                this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));
+            }, entityId: this.payments.map((payment) => payment.id), columnData: [
+                ['Made On', 'The date and time each payment was made'],
+                ['Amount', 'The dollar amount of each payment'],
+                ['Description', 'The payment description, if you provided one'],
+                ['Cardholder', 'The name associated with the payment method'],
+                ['Payment Method', 'The brand and last 4 digits of the payment method'],
+                ['Status', 'The current status of each payment'],
+                ['Payment ID', 'The unique identifier of each payment']
+            ], rowData: this.payments.map((payment) => ([
+                {
+                    type: 'head',
+                    value: `
+                    <div class='fw-bold'>${formatDate(payment.created_at)}</div>
+                    <div class='fw-bold'>${formatTime(payment.created_at)}</div>
+                  `,
+                },
+                formatCurrency(payment.amount),
+                payment.description,
+                payment.payment_method.payersName,
+                payment.payment_method.lastFourDigits,
+                {
+                    type: 'inner',
+                    value: MapPaymentStatusToBadge(payment.status)
+                },
+                payment.id
+            ])), loading: this.loading, "error-message": this.errorMessage, params: this.params, paging: Object.assign(Object.assign({}, this.paging), { handleClickNext: this.handleClickNext, handleClickPrevious: this.handleClickPrevious }) })));
+    }
+    static get is() { return "payments-list-core"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["payments-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["payments-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "getPayments": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "payments": {},
+            "loading": {},
+            "errorMessage": {},
+            "paging": {},
+            "params": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rowClicked",
+                "name": "payment-row-clicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Payment",
+                    "resolved": "Payment",
+                    "references": {
+                        "Payment": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::Payment"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "params",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "getPayments",
+                "methodName": "updateOnPropChange"
+            }];
+    }
+}

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

@@ -1,7 +1,7 @@
-import { Host, h } from "@stencil/core";
-import { Api, Payment, pagingDefaults } from "../../api";
-import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
-import { config } from "../../../config";
+import { h } from "@stencil/core";
+import { PaymentService } from "../../api/services/payment.service";
+import { makeGetPayments } from "./get-payments";
+import { ErrorState } from "../details/utils";
 /**
   * @exportedPart table-head: Table head
   * @exportedPart table-head-row: Head row
@@ -23,107 +23,37 @@ import { config } from "../../../config";
 */
 export class PaymentsList {
     constructor() {
-        this.handleClickPrevious = (beforeCursor) => {
-            const newParams = Object.assign({}, this.params);
-            delete newParams.after_cursor;
-            this.params = (Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor }));
-        };
-        this.handleClickNext = (afterCursor) => {
-            const newParams = Object.assign({}, this.params);
-            delete newParams.before_cursor;
-            this.params = (Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor }));
-        };
         this.accountId = undefined;
         this.authToken = undefined;
-        this.payments = [];
-        this.loading = true;
-        this.errorMessage = undefined;
-        this.paging = pagingDefaults;
-        this.params = undefined;
+        this.getPayments = undefined;
+        this.errorMessage = null;
     }
-    updateOnPropChange() {
-        this.fetchData();
+    componentWillLoad() {
+        this.initializeGetPayments();
     }
-    connectedCallback() {
-        this.fetchData();
+    propChanged() {
+        this.initializeGetPayments();
     }
-    async fetchData() {
-        var _a;
-        if (!this.accountId || !this.authToken) {
-            this.errorMessage = "Can not fetch any data without an AccountID and an AuthToken";
-            this.loading = false;
-            return;
-        }
-        this.loading = true;
-        try {
-            const api = Api(this.authToken, config.proxyApiOrigin);
-            const endpoint = `account/${this.accountId}/payments`;
-            const response = await api.get(endpoint, this.params);
-            if (!response.error) {
-                this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
-                const data = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.map(dataItem => new Payment(dataItem));
-                this.payments = data;
-            }
-            else {
-                const responseError = typeof response.error === 'string' ? response.error : response.error.message;
-                console.error(`Error fetching payments: ${responseError}`);
-                this.errorMessage = 'No results';
-            }
-        }
-        catch (error) {
-            console.error(`Error fetching payments: ${error.message}`);
-            this.errorMessage = 'No results';
+    initializeGetPayments() {
+        if (this.accountId && this.authToken) {
+            this.getPayments = makeGetPayments({
+                id: this.accountId,
+                authToken: this.authToken,
+                service: new PaymentService(),
+            });
         }
-        finally {
-            this.loading = false;
+        else {
+            this.errorMessage = 'Account ID and Auth Token are required';
         }
     }
     render() {
-        return (h(Host, null, h("justifi-table", { rowClickHandler: e => {
-                const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;
-                if (!clickedPaymentID) {
-                    return;
-                }
-                this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));
-            }, entityId: this.payments.map((payment) => payment.id), columnData: [
-                ['Made On', 'The date and time each payment was made'],
-                ['Amount', 'The dollar amount of each payment'],
-                ['Description', 'The payment description, if you provided one'],
-                ['Cardholder', 'The name associated with the payment method'],
-                ['Payment Method', 'The brand and last 4 digits of the payment method'],
-                ['Status', 'The current status of each payment'],
-                ['Payment ID', 'The unique identifier of each payment']
-            ], rowData: this.payments.map((payment) => ([
-                {
-                    type: 'head',
-                    value: `
-                    <div>${formatDate(payment.created_at)}</div>
-                    <div>${formatTime(payment.created_at)}</div>
-                  `,
-                },
-                formatCurrency(payment.amount),
-                payment.description,
-                payment.payment_method.payersName,
-                payment.payment_method.lastFourDigits,
-                {
-                    type: 'inner',
-                    value: MapPaymentStatusToBadge(payment.status)
-                },
-                payment.id
-            ])), loading: this.loading, "error-message": this.errorMessage, params: this.params, paging: Object.assign(Object.assign({}, this.paging), { handleClickNext: this.handleClickNext, handleClickPrevious: this.handleClickPrevious }) })));
+        if (this.errorMessage) {
+            return ErrorState(this.errorMessage);
+        }
+        return (h("payments-list-core", { getPayments: this.getPayments }));
     }
     static get is() { return "justifi-payments-list"; }
     static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["payments-list.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["payments-list.css"]
-        };
-    }
     static get properties() {
         return {
             "accountId": {
@@ -164,47 +94,17 @@ export class PaymentsList {
     }
     static get states() {
         return {
-            "payments": {},
-            "loading": {},
-            "errorMessage": {},
-            "paging": {},
-            "params": {}
+            "getPayments": {},
+            "errorMessage": {}
         };
     }
-    static get events() {
-        return [{
-                "method": "rowClicked",
-                "name": "payment-row-clicked",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "Payment",
-                    "resolved": "Payment",
-                    "references": {
-                        "Payment": {
-                            "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::Payment"
-                        }
-                    }
-                }
-            }];
-    }
     static get watchers() {
         return [{
                 "propName": "accountId",
-                "methodName": "updateOnPropChange"
+                "methodName": "propChanged"
             }, {
                 "propName": "authToken",
-                "methodName": "updateOnPropChange"
-            }, {
-                "propName": "params",
-                "methodName": "updateOnPropChange"
+                "methodName": "propChanged"
             }];
     }
 }

package/dist/collection/components/payments-list/test/get-payments.spec.js

@@ -0,0 +1,70 @@
+import { PaymentService } from "../../../api/services/payment.service";
+import { makeGetPayments } from "../get-payments";
+import mockResponse from "../../../api/mockData/mockPaymentsSuccess.json";
+import { Payment } from "../../../api";
+// Mock the PaymentService class
+jest.mock('../../../api/services/payment.service');
+describe('makeGetPayments', () => {
+    const mockId = '123';
+    const mockAuthToken = 'token';
+    const mockParams = { limit: 10, page: 1 };
+    let mockServiceInstance;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        // Create a new instance of the mocked PaymentService
+        mockServiceInstance = new PaymentService();
+        // Explicitly mock fetchPayments as a jest mock function
+        mockServiceInstance.fetchPayments = jest.fn();
+    });
+    it('should call onSuccess with payments and pagingInfo on successful fetch', async () => {
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        // Mock fetchPayments to resolve with mockResponse
+        mockServiceInstance.fetchPayments.mockResolvedValue(mockResponse);
+        const getPayments = makeGetPayments({
+            id: mockId,
+            authToken: mockAuthToken,
+            service: mockServiceInstance,
+        });
+        await getPayments({ params: mockParams, onSuccess, onError });
+        expect(onSuccess).toHaveBeenCalledWith({
+            payments: expect.arrayContaining([
+                expect.any(Payment),
+                expect.any(Payment),
+            ]),
+            pagingInfo: mockResponse.page_info,
+        });
+        expect(onError).not.toHaveBeenCalled();
+    });
+    it('should call onError with an error message on API failure', async () => {
+        const mockError = new Error('Error fetching payments');
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        // Mock fetchPayments to reject with mockError
+        mockServiceInstance.fetchPayments.mockRejectedValue(mockError);
+        const getPayments = makeGetPayments({
+            id: mockId,
+            authToken: mockAuthToken,
+            service: mockServiceInstance,
+        });
+        await getPayments({ params: mockParams, onSuccess, onError });
+        expect(onError).toHaveBeenCalledWith('Error fetching payments');
+        expect(onSuccess).not.toHaveBeenCalled();
+    });
+    it('should call onError with an exception message on fetch exception', async () => {
+        const mockError = new Error('Network error');
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        // Mock fetchPayments to reject with mockError
+        mockServiceInstance.fetchPayments.mockRejectedValue(mockError);
+        const getPayments = makeGetPayments({
+            id: mockId,
+            authToken: mockAuthToken,
+            service: mockServiceInstance,
+        });
+        await getPayments({ params: mockParams, onSuccess, onError });
+        expect(onError).toHaveBeenCalledWith('Network error');
+        expect(onSuccess).not.toHaveBeenCalled();
+    });
+    // Add more tests as needed for edge cases and different scenarios
+});

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

@@ -0,0 +1,100 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { PaymentsListCore } from "../payments-list-core";
+import { Table } from "../../table/table";
+import { PaginationMenu } from "../../pagination-menu/pagination-menu";
+import mockSuccessResponse from "../../../api/mockData/mockPaymentsSuccess.json";
+import { makeGetPayments } from "../get-payments";
+const mockPaymentsResponse = mockSuccessResponse;
+describe('payments-list-core', () => {
+    it('renders properly with fetched data', async () => {
+        const mockPaymentsService = {
+            fetchPayments: jest.fn().mockResolvedValue(mockPaymentsResponse),
+        };
+        const page = await newSpecPage({
+            components: [PaymentsListCore, Table, PaginationMenu],
+            html: `<payments-list-core></payments-list-core>`,
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getPayments = makeGetPayments({
+            id: '123',
+            authToken: '123',
+            service: mockPaymentsService
+        });
+        page.rootInstance.fetchData();
+        await page.waitForChanges();
+        const justifiTable = page.root.querySelector('justifi-table');
+        expect(page.rootInstance.payments[0]).toEqual(expect.objectContaining({ account_id: mockPaymentsResponse.data[0].account_id }));
+        const rows = justifiTable.shadowRoot.querySelectorAll('[data-test-id="table-row"]');
+        expect(rows.length).toBe(mockPaymentsResponse.data.length);
+        expect(mockPaymentsService.fetchPayments).toHaveBeenCalled();
+        expect(page.root).toMatchSnapshot();
+    });
+    it('displays an error state on failed data fetch', async () => {
+        const mockService = {
+            fetchPayments: jest.fn().mockRejectedValue(new Error('Fetch error'))
+        };
+        const getPayments = makeGetPayments({
+            id: 'some-id',
+            authToken: 'some-auth-token',
+            service: mockService
+        });
+        const page = await newSpecPage({
+            components: [PaymentsListCore, Table, PaginationMenu],
+            html: '<payments-list-core></payments-list-core>',
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getPayments = getPayments;
+        await page.rootInstance.fetchData();
+        await page.waitForChanges();
+        expect(page.rootInstance.errorMessage).toBe('Fetch error');
+        expect(page.root).toMatchSnapshot();
+    });
+    it('emits payment-row-clicked event on row click', async () => {
+        const mockPaymentsService = {
+            fetchPayments: jest.fn().mockResolvedValue(mockPaymentsResponse),
+        };
+        const page = await newSpecPage({
+            components: [PaymentsListCore, Table, PaginationMenu],
+            html: `<payments-list-core></payments-list-core>`,
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getPayments = makeGetPayments({
+            id: '123',
+            authToken: '123',
+            service: mockPaymentsService
+        });
+        page.rootInstance.fetchData();
+        await page.waitForChanges();
+        const justifiTable = page.root.querySelector('justifi-table');
+        const firstRow = justifiTable.shadowRoot.querySelector('[data-test-id="table-row"]');
+        expect(firstRow).not.toBeNull();
+        const spyEvent = jest.fn();
+        page.win.addEventListener('payment-row-clicked', spyEvent);
+        firstRow.click();
+        expect(spyEvent).toHaveBeenCalled();
+    });
+    it('updates params and refetches data on pagination interaction', async () => {
+        const mockPaymentsService = {
+            fetchPayments: jest.fn().mockResolvedValue(mockPaymentsResponse),
+        };
+        const page = await newSpecPage({
+            components: [PaymentsListCore, Table, PaginationMenu],
+            html: `<payments-list-core></payments-list-core>`,
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getPayments = makeGetPayments({
+            id: '123',
+            authToken: '123',
+            service: mockPaymentsService
+        });
+        page.rootInstance.fetchData();
+        await page.waitForChanges();
+        // Assuming handleClickNext is accessible and modifies `params` which triggers a re-fetch
+        page.rootInstance.handleClickNext('nextCursor');
+        await page.waitForChanges();
+        // The mock function should be called 3 times: once for the initial load, twice for when mockGetPayments is set and later after the pagination interaction
+        expect(mockPaymentsService.fetchPayments).toHaveBeenCalledTimes(3);
+        const updatedParams = page.rootInstance.params;
+        expect(updatedParams.after_cursor).toBe('nextCursor');
+    });
+});

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

@@ -1,33 +1,29 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { PaymentsList } from "../payments-list";
-describe('justifi-payments-list', () => {
-    it('renders properly', async () => {
+import { PaymentsListCore } from "../payments-list-core";
+describe('payments-list', () => {
+    it('renders an error message when accountId and authToken are not provided', async () => {
         const page = await newSpecPage({
-            components: [PaymentsList],
-            html: `<justifi-payments-list></justifi-payments-list>`,
+            components: [PaymentsList, PaymentsListCore],
+            html: '<justifi-payments-list></justifi-payments-list>',
         });
-        expect(page.root).toEqualHtml(`
-    <justifi-payments-list>
-      <mock:shadow-root>
-        <justifi-table error-message="Can not fetch any data without an AccountID and an AuthToken">
-      </mock:shadow-root>
-    </justifi-table>
-    `);
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
     });
-    it('stops loading', async () => {
+    it('renders an error message when accountId is not provided', async () => {
         const page = await newSpecPage({
-            components: [PaymentsList],
-            html: `<justifi-payments-list></justifi-payments-list>`,
+            components: [PaymentsList, PaymentsListCore],
+            html: '<justifi-payments-list auth-token="abc"></justifi-payments-list>',
         });
-        const loading = page.root.__shadowRoot.querySelector('.loading-state');
-        expect(loading).toEqual(null);
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
     });
-    it('renders an error when not given proper auth data', async () => {
+    it('renders an error message when authToken is not provided', async () => {
         const page = await newSpecPage({
-            components: [PaymentsList],
-            html: `<justifi-payments-list></justifi-payments-list>`,
+            components: [PaymentsList, PaymentsListCore],
+            html: '<justifi-payments-list account-id="abc"></justifi-payments-list>',
         });
-        const error = page.root.__shadowRoot.querySelector('.error-state');
-        expect(error).toBeDefined();
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
     });
 });