proposal-payment-unit.component.spec.ts

// Angular
import { Component, ViewChild } from "@angular/core";
import { fakeAsync, TestModuleMetadata } from "@angular/core/testing";

// Third-Party
import { of } from "rxjs";

// Modules
import { ProposalPaymentUnitModule } from "@vms/proposal/detail/payment-unit/proposal-payment-unit.module";

// Services

// Components / Directives
import { ProposalPaymentUnitComponent }
    from "@vms/proposal/detail/payment-unit/components/proposal-payment-unit/proposal-payment-unit.component";

// Models
import { HttpComponentTest } from "@vms/test/front-end-testing/http-component-test";
import { Proposal } from "@vms/proposal/objects/proposal";
import { getPaymentUnitResponse, getUpdateResponse, getPaymentUnits, getProposal }
from "@vms/proposal/detail/payment-unit/components/proposal-payment-unit/proposal-payment-unit.component.spec.data";
import { TestInputType, InputTest } from "@vms/test/front-end-testing/test-objects";
import { ProposalPaymentTypeCodeEnum } from "@vms/shared/objects/contract";
import { ProposalStatusCodeEnum } from "@vms/shared/objects/proposal-status";
// tslint:disable: max-line-length

// Host Component
@Component({
    selector: `test-host-component`,
    template: `
        <vms-proposal-payment-units [proposal]="proposal">
        </vms-proposal-payment-units>
    `,
})
class HostComponent {
    @ViewChild(ProposalPaymentUnitComponent)
    public componentUnderTest: ProposalPaymentUnitComponent;

    public proposal: Proposal;

    public setupTestData(proposal: Proposal) {
        this.proposal = proposal;

    }
}

// this typing forces the implementation of inputs to list all values in the Input enum
export type FormInputKeys = { [key in keyof typeof Input]: any };
export enum Input {
    PaymentMethod = "PaymentMethod"
}

enum GridColumns {
    PaymentUnit,
    Acres,
    AdvertisedPercentage,
    AdvertisedValue,
    ContractValue,
    PaymentMethod
}

let specModule = ProposalPaymentUnitModule.config() as TestModuleMetadata;

describe("ProposalPaymentUnitComponent", () => {
    let base = new HttpComponentTest<ProposalPaymentUnitComponent, FormInputKeys>(specModule, ProposalPaymentUnitComponent, HostComponent);

    // UI interaction 
    it("When row is in edit state, then edit form is shown and edit button is hidden", fakeAsync(() => {
        setupTest();
        const rowNumber = 0;
        expectEditState(rowNumber);
        base.clickRowToggle(rowNumber);
        expectNonEditState(rowNumber);
    }));

    it("When row is in edit state and toggle button clicked, then reverts to non-edit state", fakeAsync(() => {
        setupTest();
        const rowNumber = 0;
        base.clickRowToggle(rowNumber);
        expectNonEditState(rowNumber);
    }));

    it("When in edit state and form is unchanged, then save button is disabled", fakeAsync(() => {
        setupTest();
        const rowNumber = 0;
        base.expectDisabled(base.getRowFormSaveButton(rowNumber), `save button on row ${rowNumber}`);
    }));

    it("When in edit state and form is changed, then save button is not disabled", fakeAsync(() => {
        setupTest();
        const rowNumber = 0;
        base.setFormElement(Input.PaymentMethod, "scaled");
        base.expectNotDisabled(base.getRowFormSaveButton(rowNumber));
    }));

    it("When in edit state and cancel button is clicked, then reverts to non-edit state", fakeAsync(() => {
        setupTest();
        const rowNumber = 0;
        base.click(base.getRowFormCancelButton(0));
        expectNonEditState(rowNumber);
    }));

    it("When changes are saved, then a PUT call is made and state updated correctly", fakeAsync(() => {
        setupTest();
        const rowNumber = 0;
        const rowPaymentUnit = getPaymentUnits()[rowNumber];
        const response = getUpdateResponse(rowNumber, true);
        base.setFormElement(Input.PaymentMethod, "scaled");
        base.clickRowSaveButton(rowNumber);
        // after saving and before response, expect form disabled
        base.expectDisabled(base.getRowFormSaveButton(rowNumber), `save button on row ${rowNumber}`);
        base.expectDisabled(base.getFormElement(Input.PaymentMethod), `Payment Method input on row ${rowNumber}`);
        base.expectSingleRequest(base.verifyRequest(`/proposal/payment-unit/${rowPaymentUnit.payment_unit_id}`, "PUT", { "payment_unit_id": rowPaymentUnit.payment_unit_id, "scaled": true }), response);
        // after request returned
        expectNonEditState(rowNumber);
        expect(base.getRowColumnValue(rowNumber, GridColumns.PaymentMethod)).toEqual("Scaled");
        base.wait();    // clear out pending task queues. necessary b/c of animations used in toastr
    }));

    it("When row is expandaded, then grids are displayed properly", fakeAsync(() => {
        const rowNumber = 0;
        setupTest(getProposal(), false);
        base.clickRowToggle(rowNumber);
        const dataGrid = base.getRowDataGrid(rowNumber);
        base.compareGridRows(dataGrid, [["Misc. Species 2", "Pulpwood", "395", "Cords", "$1.00", ""]]);
        base.expectExists(base.getRowEditButton(rowNumber), `edit button on row ${rowNumber}`);
    }));

    // Permissions
    it("When user has permission to edit proposal and the proposal is Mixed/Draft, then can edit", fakeAsync(() => {
        let proposal = getProposal();
        proposal.payment_type_code = ProposalPaymentTypeCodeEnum.Mixed;
        proposal.proposal_status_code = ProposalStatusCodeEnum.Draft;
        setupTest(proposal, false);
        base.getRows().forEach((row: HTMLElement, idx: number) => base.expectNotDisabled(base.getRowEditButton(idx), `edit button on row ${idx}`));
    }));

    it("When user does not have permission to edit proposal and the proposal is Mixed/Draft, then edit button is invisible", fakeAsync(() => {
        let proposal = getProposal();
        base.giveUserGeorgePermissions([]);
        proposal.payment_type_code = ProposalPaymentTypeCodeEnum.Mixed;
        proposal.proposal_status_code = ProposalStatusCodeEnum.Draft;
        setupTest(proposal, false);
        base.getRows().forEach((row: HTMLElement, idx: number) => base.expectNotExists(base.getRowEditButton(idx), `edit button on row ${idx}`));
    }));

    it("When user has permission to edit proposal and the proposal is Mixed but not Draft, then edit is disabled", fakeAsync(() => {
        let proposal = getProposal();
        const editRowButtionDisabled = (row, idx) => base.expectDisabled(base.getRowEditButton(idx), `edit button on row ${idx}`);

        proposal.payment_type_code = ProposalPaymentTypeCodeEnum.Mixed;
        proposal.proposal_status_code = ProposalStatusCodeEnum.Reviewing;
        setupTest(proposal, false);
        base.expectAllRows(editRowButtionDisabled);

        base.hostComp.proposal.proposal_status_code = ProposalStatusCodeEnum.Submitted;
        base.wait();
        base.expectAllRows(editRowButtionDisabled);
    }));

    it("When user has permission to edit proposal and the proposal is not Mixed but is Draft, then edit is disabled", fakeAsync(() => {
        let proposal = getProposal();
        const editRowButtionDisabled = (row, idx) => base.expectDisabled(base.getRowEditButton(idx), `edit button on row ${idx}`);
        proposal.payment_type_code = ProposalPaymentTypeCodeEnum.Scaled;
        proposal.proposal_status_code = ProposalStatusCodeEnum.Draft;
        setupTest(proposal, false);
        base.expectAllRows(editRowButtionDisabled);

        base.hostComp.proposal.payment_type_code = ProposalPaymentTypeCodeEnum.LumpSum;
        base.wait();
        base.expectAllRows(editRowButtionDisabled);
    }));

    function setupTest(proposal = getProposal(), editMode: boolean = true) {
        base.hostComp.setupTestData(proposal);
        base.formInputs = {
            PaymentMethod: { type: TestInputType.Select, id: "payment_method", controlName: "scaled" } as InputTest,
        };
        toggleSection();
        if (editMode) {
            base.clickRowEditButton(0);
        }
    }

    /**
     * Toggle section to open and return GET request with payment unit information.
     * Need to do this to use the crud.ts `loadFunction` method implementation.
     */
    function toggleSection() {
        base.toggleSection();
        base.expectSingleRequest(base.verifyRequest(`/proposal/${base.comp.proposalId}/payment-unit`, "GET"), getPaymentUnitResponse());
    }

    function expectNonEditState(row: number) {
        expect(base.getRowForm(row, base.dom, "vms-proposal-payment-unit-form")).toBeNull();
        expect(base.getRowEditButton(row)).toBeDefined();
    }

    function expectEditState(row: number) {
        expect(base.getRowForm(row, base.dom, "vms-proposal-payment-unit-form")).toBeDefined();
        expect(base.getRowEditButton(row)).toBeNull();
    }
});