monorepo/LCU.WebApps.Operations.IncentiveManager/src/containers/employee-page/department-assignments/DeptAssignmentTabGroup.test.tsx

import { mount } from "enzyme";
import React from "react";
import AsyncState from "../../../shared/enumerations/AsyncState";
import DeptAssignmentTabGroup from "./DeptAssignmentTabGroup";
import * as reactRedux from "react-redux";
import { IDepartmentState } from "../../../reducers/DepartmentReducer";
import PermissionCode from "../../../shared/enumerations/PermissionCode";
import { IProfileState } from "../../../reducers/ProfileReducer";
import { mockDeptAssignments } from "../../../shared/testing/mocks/MockDepartmentAssignments";
import { mockRoles } from "../../../shared/testing/mocks/MockRoles";
import { ISettings } from "../../../shared/models/Settings";
import { getMockDepartments } from "../../../shared/testing/mocks/MockDepartments";
import { IDepartmentAssignment } from "../../../shared/models/DepartmentAssignment";

const mockSettingsState: ISettings = {
    appRoles: mockRoles,
    permissions: [],
    productDetails: [],
    businessLines: [],
    productSet: [],
    regions: [],
    payoutProfiles: [],
    activityStateSet: {},
    departmentStateSet: {},
    activityTypeSet: {},
    organizationSet: {},
    systemTypeSet: {},
    userTypeSet: {},
    departments: getMockDepartments()
};

const mockDepartmentState: IDepartmentState = {
    departments: {
        data: getMockDepartments(),
        state: AsyncState.Success
    },
    submitState: { state: AsyncState.Inactive }
};

// setup appUser to get past permission guard
const mockProfileState: IProfileState = {
    profile: {
        data: {
            adEmail: "[email protected]",
            personId: 11,
            employeeId: "11771",
            homeDepartment: "HOME",
            baseRole: "QA",
            fullName: "John Tester",
            role: {
                name: "Admin",
                description: "admin",
                permissions: [
                    {
                        code: PermissionCode.ASSIGN_ASSOCIATES_TO_DEPARTMENT,
                        description: "ASSIGN_ASSOCIATES_TO_DEPARTMENT"
                    }
                ],
                hasCommissions: false
            },
            additionalPermissions: [],
            departments: [],
            assignments: []
        },
        state: AsyncState.Success
    },
    searchResults: {
        state: AsyncState.Success,
        data: []
    }
};
const useDispatchMock = jest.spyOn(reactRedux, "useDispatch");
const useSelectorMock = jest.spyOn(reactRedux, "useSelector");

beforeEach(() => {
    useDispatchMock.mockClear();
    useSelectorMock.mockClear();
});

describe("User wants to switch views of department assignments", () => {
    it("Only displays active department assignments in the active tab and sorts by end date desc", () => {
        useDispatchMock.mockReturnValue(jest.fn());
        useSelectorMock.mockReturnValue({
            ...mockDepartmentState,
            ...mockProfileState
        });
        const wrapper = mount(
            <DeptAssignmentTabGroup
                submitNewDeptAssignment={() => jest.fn()}
                submitDeptAssignmentUpdate={() => jest.fn()}
                submitState={{ state: AsyncState.Inactive }}
                employeeDepartmentAssignments={mockDeptAssignments}
            />
        );
        const assignments: [] = wrapper
            .find("DeptAssignmentTable")
            .prop("assignments");
        expect(assignments.length).toBe(2);
        expect(assignments.map((x: IDepartmentAssignment) => x.id)).toEqual([
            2,
            1
        ]);
    });

    it("Only displays inactive department assignments in the closed tab and sorts by end date desc", () => {
        useDispatchMock.mockReturnValue(jest.fn());
        useSelectorMock.mockReturnValue({
            ...mockDepartmentState,
            ...mockProfileState,
            ...mockSettingsState
        });
        const wrapper = mount(
            <DeptAssignmentTabGroup
                submitNewDeptAssignment={() => jest.fn()}
                submitDeptAssignmentUpdate={() => jest.fn()}
                submitState={{ state: AsyncState.Inactive }}
                employeeDepartmentAssignments={mockDeptAssignments}
            />
        );
        //make tab group display 2nd tab
        wrapper.find('[data-test="nav-link-1"]').simulate("click");
        wrapper.update();
        const assignments: [] = wrapper
            .find("BasicDeptAssignmentTable")
            .prop("assignments");
        expect(assignments.length).toBe(2);
        expect(assignments.map((x: IDepartmentAssignment) => x.id)).toEqual([
            3,
            0
        ]);
    });

    it("Displays everything in the audit", () => {
        useDispatchMock.mockReturnValue(jest.fn());
        useSelectorMock.mockReturnValue({
            ...mockDepartmentState,
            ...mockProfileState,
            ...mockSettingsState
        });
        const wrapper = mount(
            <DeptAssignmentTabGroup
                submitNewDeptAssignment={() => jest.fn()}
                submitDeptAssignmentUpdate={() => jest.fn()}
                submitState={{ state: AsyncState.Inactive }}
                employeeDepartmentAssignments={mockDeptAssignments}
            />
        );
        //make tab group display 3rd tab
        wrapper.find('[data-test="nav-link-2"]').simulate("click");
        wrapper.update();
        const assignments: [] = wrapper
            .find("DeptAssignmentAuditTable")
            .prop("assignments");
        expect(assignments.length).toBe(4);
        expect(assignments.map((x: IDepartmentAssignment) => x.id)).toEqual([
            2,
            3,
            1,
            0
        ]);
    });
});