260 lines
9.3 KiB
TypeScript
260 lines
9.3 KiB
TypeScript
import { shallow } from "enzyme";
|
|
import moment from "moment";
|
|
import React from "react";
|
|
import DeptAssignmentNew from "./DeptAssignmentNew";
|
|
import { mockRoles } from "../../../../shared/testing/mocks/MockRoles";
|
|
import { MultiSelectOption } from "../../../../shared/types/IMultiSelectOption";
|
|
|
|
const mockDepartments = [
|
|
{
|
|
departmentId: 0,
|
|
id: 55,
|
|
departmentName: "WAUWATOSA",
|
|
businessLineCode: "OPS",
|
|
state: "Active"
|
|
},
|
|
{
|
|
departmentId: 1,
|
|
id: 56,
|
|
departmentName: "HEADQUARTERS",
|
|
businessLineCode: "OPS",
|
|
state: "Active"
|
|
}
|
|
];
|
|
|
|
const departmentOptions = mockDepartments.map(
|
|
(department) =>
|
|
({
|
|
key: department.id?.toString(),
|
|
label: department.departmentName,
|
|
value: department.id?.toString()
|
|
} as MultiSelectOption)
|
|
);
|
|
|
|
const mockSubmit = jest.fn();
|
|
|
|
beforeEach(() => {
|
|
mockSubmit.mockClear();
|
|
});
|
|
|
|
describe("User wants to add a new dept assignment", () => {
|
|
it("updates state when input changed", () => {
|
|
const wrapper = shallow(
|
|
<DeptAssignmentNew
|
|
roles={mockRoles}
|
|
departments={mockDepartments}
|
|
submitNewDepartmentAssignment={(data) => mockSubmit(data)}
|
|
/>
|
|
);
|
|
expect(wrapper.find('[data-test="dept-input"]').prop("value")).toEqual(
|
|
[]
|
|
);
|
|
expect(wrapper.find('[data-test="note-input"]').prop("value")).toBe("");
|
|
expect(wrapper.find('[data-test="start-input"]').prop("value")).toEqual(
|
|
""
|
|
);
|
|
expect(wrapper.find('[data-test="end-input"]').prop("value")).toEqual(
|
|
""
|
|
);
|
|
expect(wrapper.find('[data-test="end-input"]').prop("invalid")).toBe(
|
|
false
|
|
);
|
|
wrapper
|
|
.find('[data-test="dept-input"]')
|
|
.simulate("change", { target: { value: [departmentOptions[0]] } });
|
|
wrapper
|
|
.find('[data-test="note-input"]')
|
|
.simulate("change", { target: { value: "note" } });
|
|
wrapper
|
|
.find('[data-test="start-input"]')
|
|
.simulate("change", { target: { value: moment("2021-01-01") } });
|
|
wrapper
|
|
.find('[data-test="end-input"]')
|
|
.simulate("change", { target: { value: moment("2021-01-02") } });
|
|
wrapper.update();
|
|
expect(wrapper.find('[data-test="dept-input"]').prop("value")).toEqual({
|
|
target: { value: [departmentOptions[0]] }
|
|
});
|
|
expect(wrapper.find('[data-test="note-input"]').prop("value")).toBe(
|
|
"note"
|
|
);
|
|
expect(wrapper.find('[data-test="start-input"]').prop("value")).toEqual(
|
|
"2021-01-01"
|
|
);
|
|
expect(wrapper.find('[data-test="end-input"]').prop("value")).toEqual(
|
|
"2021-01-31"
|
|
);
|
|
expect(wrapper.find('[data-test="end-input"]').prop("invalid")).toBe(
|
|
false
|
|
);
|
|
});
|
|
it("disables submit until required data is entered", () => {
|
|
const wrapper = shallow(
|
|
<DeptAssignmentNew
|
|
roles={mockRoles}
|
|
departments={mockDepartments}
|
|
submitNewDepartmentAssignment={(data) => mockSubmit(data)}
|
|
/>
|
|
);
|
|
expect(
|
|
wrapper.find('[data-test="submit-button"]').prop("disabled")
|
|
).toBe(true);
|
|
wrapper
|
|
.find('[data-test="dept-input"]')
|
|
.simulate("change", { target: { value: [departmentOptions[0]] } });
|
|
//Note not required
|
|
wrapper
|
|
.find('[data-test="start-input"]')
|
|
.simulate("change", { target: { value: moment("2021-01-01") } });
|
|
//EndDate Not Required
|
|
wrapper.update();
|
|
expect(
|
|
wrapper.find('[data-test="submit-button"]').prop("disabled")
|
|
).toBe(false);
|
|
expect(wrapper.find('[data-test="end-input"]').prop("invalid")).toBe(
|
|
false
|
|
);
|
|
});
|
|
it("disables submit if endDate is before startDate", () => {
|
|
const wrapper = shallow(
|
|
<DeptAssignmentNew
|
|
roles={mockRoles}
|
|
departments={mockDepartments}
|
|
submitNewDepartmentAssignment={(data) => mockSubmit(data)}
|
|
/>
|
|
);
|
|
expect(
|
|
wrapper.find('[data-test="submit-button"]').prop("disabled")
|
|
).toBe(true);
|
|
wrapper
|
|
.find('[data-test="dept-input"]')
|
|
.simulate("change", { target: { value: [departmentOptions[0]] } });
|
|
wrapper
|
|
.find('[data-test="note-input"]')
|
|
.simulate("change", { target: { value: "note" } });
|
|
wrapper
|
|
.find('[data-test="start-input"]')
|
|
.simulate("change", { target: { value: moment("2021-02-01") } });
|
|
wrapper
|
|
.find('[data-test="end-input"]')
|
|
.simulate("change", { target: { value: moment("2021-01-02") } });
|
|
wrapper.update();
|
|
expect(wrapper.find('[data-test="end-input"]').prop("invalid")).toBe(
|
|
true
|
|
);
|
|
expect(
|
|
wrapper.find('[data-test="submit-button"]').prop("disabled")
|
|
).toBe(true);
|
|
});
|
|
it("hides the clear button when there is nothing to clear", () => {
|
|
const wrapper = shallow(
|
|
<DeptAssignmentNew
|
|
roles={mockRoles}
|
|
departments={mockDepartments}
|
|
submitNewDepartmentAssignment={(data) => mockSubmit(data)}
|
|
/>
|
|
);
|
|
expect(wrapper.find('[data-test="clear-button"]').prop("hidden")).toBe(
|
|
true
|
|
);
|
|
wrapper
|
|
.find('[data-test="dept-input"]')
|
|
.simulate("change", { target: { value: [departmentOptions[0]] } });
|
|
wrapper
|
|
.find('[data-test="note-input"]')
|
|
.simulate("change", { target: { value: "note" } });
|
|
expect(wrapper.find('[data-test="clear-button"]').prop("hidden")).toBe(
|
|
false
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("User no longer wishes to add a new dept assignment", () => {
|
|
it("resets all inputs when the clear button is clicked", () => {
|
|
const wrapper = shallow(
|
|
<DeptAssignmentNew
|
|
roles={mockRoles}
|
|
departments={mockDepartments}
|
|
submitNewDepartmentAssignment={(data) => mockSubmit(data)}
|
|
/>
|
|
);
|
|
expect(wrapper.find('[data-test="clear-button"]').prop("hidden")).toBe(
|
|
true
|
|
);
|
|
wrapper
|
|
.find('[data-test="dept-input"]')
|
|
.simulate("change", { target: { value: [departmentOptions[0]] } });
|
|
wrapper
|
|
.find('[data-test="note-input"]')
|
|
.simulate("change", { target: { value: "note" } });
|
|
expect(wrapper.find('[data-test="clear-button"]').prop("hidden")).toBe(
|
|
false
|
|
);
|
|
wrapper.find('[data-test="clear-button"]').simulate("click");
|
|
wrapper.update();
|
|
expect(wrapper.find('[data-test="dept-input"]').prop("value")).toEqual(
|
|
[]
|
|
);
|
|
expect(wrapper.find('[data-test="note-input"]').prop("value")).toBe("");
|
|
expect(wrapper.find('[data-test="start-input"]').prop("value")).toEqual(
|
|
""
|
|
);
|
|
expect(wrapper.find('[data-test="end-input"]').prop("value")).toEqual(
|
|
""
|
|
);
|
|
expect(wrapper.find('[data-test="end-input"]').prop("invalid")).toBe(
|
|
false
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("User submits a new dept assignment", () => {
|
|
it("passes the proper data on submit", () => {
|
|
const wrapper = shallow(
|
|
<DeptAssignmentNew
|
|
roles={mockRoles}
|
|
departments={mockDepartments}
|
|
submitNewDepartmentAssignment={(data) => mockSubmit(data)}
|
|
/>
|
|
);
|
|
wrapper
|
|
.find('[data-test="dept-input"]')
|
|
.simulate("change", { target: { value: [departmentOptions[0]] } });
|
|
wrapper
|
|
.find('[data-test="role-input"]')
|
|
.simulate("change", { target: { value: "Admin" } });
|
|
wrapper
|
|
.find('[data-test="note-input"]')
|
|
.simulate("change", { target: { value: "note" } });
|
|
wrapper
|
|
.find('[data-test="sliding-payout-input"]')
|
|
.simulate("change", { target: { value: "65" } });
|
|
wrapper
|
|
.find('[data-test="start-input"]')
|
|
.simulate("change", { target: { value: "2021-01-01" } });
|
|
wrapper
|
|
.find('[data-test="end-input"]')
|
|
.simulate("change", { target: { value: "2021-01-02" } });
|
|
wrapper.update();
|
|
expect(
|
|
wrapper.find('[data-test="submit-button"]').prop("disabled")
|
|
).toBe(false);
|
|
wrapper.find('[data-test="submit-button"]').simulate("click");
|
|
wrapper.update();
|
|
expect(wrapper.find('[data-test="dept-input"]').prop("value")).toEqual(
|
|
[]
|
|
);
|
|
expect(wrapper.find('[data-test="note-input"]').prop("value")).toBe("");
|
|
expect(wrapper.find('[data-test="start-input"]').prop("value")).toEqual(
|
|
""
|
|
);
|
|
expect(wrapper.find('[data-test="end-input"]').prop("value")).toEqual(
|
|
""
|
|
);
|
|
expect(wrapper.find('[data-test="end-input"]').prop("invalid")).toBe(
|
|
false
|
|
);
|
|
//start and end date should be cast as UTC!
|
|
});
|
|
});
|