import { shallow } from "enzyme";
import moment from "moment";
import React from "react";
import { IPayoutLineItem } from "../../shared/models/Payout";
import ActivityPayoutsDisplay from "./ActivityPayoutsDisplay";

describe("ActivityPayoutsDisplay", () => {
    it("should display the payouts in a table", () => {
        const payouts: IPayoutLineItem[] = [
            {
                activityPeriod: moment.utc(),
                departmentId: 25,
                role: {
                    description: "Teller",
                    name: "Teller Doe",
                    permissions: [],
                    hasCommissions: true
                },
                employeeId: "123",
                activityTotal: 100,
                payoutTotal: 200
            },
            {
                activityPeriod: moment.utc(),
                departmentId: 25,
                role: {
                    description: "Branch Manager",
                    name: "B.M. Doe",
                    permissions: [],
                    hasCommissions: true
                },
                employeeId: "456",
                activityTotal: 100,
                payoutTotal: 200
            }
        ] as IPayoutLineItem[];

        const wrapper = shallow(<ActivityPayoutsDisplay payouts={payouts} />);
        expect(
            wrapper.find("[data-test='activity-payouts-display']").length
        ).toBe(1);
        // table rows
        expect(
            wrapper.find("[data-test='activity-payouts-display'] tbody tr")
                .length
        ).toBe(2);
        // alert component
        expect(wrapper.find("[data-test='no-payouts-alert']").length).toBe(0);
    });

    it("should display an alert if there are no payouts", () => {
        const wrapper = shallow(<ActivityPayoutsDisplay payouts={[]} />);
        // alert component
        expect(wrapper.find("[data-test='no-payouts-alert']").length).toBe(1);
        //table
        expect(
            wrapper.find("[data-test='activity-payouts-display'] table").length
        ).toBe(0);
    });
});