587 lines
19 KiB
TypeScript
587 lines
19 KiB
TypeScript
/* eslint-disable @typescript-eslint/quotes */
|
|
import React from "react";
|
|
import { mount, shallow } from "enzyme";
|
|
import DepartmentTableRow from "./DepartmentTableRow";
|
|
import Translate from "../../translate/Translate";
|
|
import { IDepartment } from "../../shared/models/Department";
|
|
import ViewDepartmentTableRow from "./ViewDepartmentTableRow";
|
|
|
|
let wrapper: any;
|
|
|
|
const mockUniqueFunction = jest.fn();
|
|
const mockSubmitFunction = jest.fn();
|
|
|
|
export interface IFakePermissionProps {
|
|
requiredPermissions: string[];
|
|
showWarning?: boolean;
|
|
children: JSX.Element;
|
|
}
|
|
|
|
export const FakePermissionGuard: React.FC<IFakePermissionProps> = (props) => {
|
|
return props.children;
|
|
};
|
|
|
|
jest.mock("../../containers/shared/PermissionGuard", () => FakePermissionGuard);
|
|
|
|
beforeEach(() => {
|
|
mockUniqueFunction.mockReturnValue(true);
|
|
wrapper = mount(
|
|
<table>
|
|
<tbody>
|
|
<DepartmentTableRow
|
|
department={
|
|
{
|
|
id: 4,
|
|
departmentName: "testName",
|
|
businessLineCode: "bl2",
|
|
regionCode: "",
|
|
state: "Active"
|
|
} as IDepartment
|
|
}
|
|
updateDepartment={(department) =>
|
|
mockSubmitFunction(department)
|
|
}
|
|
isDepartmentNameUnique={(deptName) => {
|
|
return mockUniqueFunction();
|
|
}}
|
|
businessLines={[
|
|
{ name: "businessLine1", code: "bl1", orgCode: "ORG" },
|
|
{ name: "businessLine2", code: "bl2", orgCode: "ORG" }
|
|
]}
|
|
departmentStateSet={{
|
|
Avctive: "Active",
|
|
Inactive: "Inactive"
|
|
}}
|
|
regions={[
|
|
{
|
|
name: "North",
|
|
businessLineCode: "BCHOPS",
|
|
code: "NORTH"
|
|
},
|
|
{
|
|
name: "South",
|
|
businessLineCode: "BCHOPS",
|
|
code: "SOUTH"
|
|
}
|
|
]}
|
|
/>
|
|
</tbody>
|
|
</table>
|
|
);
|
|
});
|
|
|
|
describe("User Views a DepartmentTableRow", () => {
|
|
it("Displays Proper Department Data", () => {
|
|
let x = 0;
|
|
const temp = () => {
|
|
x++;
|
|
};
|
|
const tempWrapper = shallow(
|
|
<ViewDepartmentTableRow
|
|
department={
|
|
{
|
|
id: 4,
|
|
departmentName: "testName",
|
|
businessLineCode: "123",
|
|
state: "Active"
|
|
} as IDepartment
|
|
}
|
|
toggleEdit={temp}
|
|
/>
|
|
);
|
|
|
|
expect(tempWrapper.find('[data-test="department_tr_4"]').length).toBe(
|
|
1
|
|
);
|
|
expect(tempWrapper.find('[data-test="edit-row"]').length).toBe(0);
|
|
expect(tempWrapper.find("td").length).toBe(6);
|
|
expect(tempWrapper.find('[data-test="dept-name"]').length).toBe(1);
|
|
expect(tempWrapper.find('[data-test="business-line"]').length).toBe(1);
|
|
expect(tempWrapper.find('[data-test="dept-state"]').length).toBe(1);
|
|
expect(
|
|
tempWrapper.find("td").find("Button").children().text()
|
|
).toContain(
|
|
Translate.Get.components.departmentTable.departmentTableRow
|
|
.editButton
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("Associate Can Toggle and Make Edits", () => {
|
|
test("Clicking Edit Button Opens Edit", () => {
|
|
wrapper.find("Button").simulate("click");
|
|
wrapper.update();
|
|
|
|
expect(wrapper.find('[data-test="display-row"]').length).toBe(0);
|
|
expect(wrapper.find('[data-test="edit-row"]').length).toBe(1);
|
|
expect(wrapper.find("td").length).toBe(6);
|
|
expect(
|
|
wrapper.find('[data-test="dept-name-input"]').hostNodes().length
|
|
).toBe(1);
|
|
expect(
|
|
wrapper.find('[data-test="business-line-input"]').hostNodes().length
|
|
).toBe(1);
|
|
expect(
|
|
wrapper.find('[data-test="region-input"]').hostNodes().length
|
|
).toBe(1);
|
|
expect(
|
|
wrapper.find('[data-test="dept-state-input"]').hostNodes().length
|
|
).toBe(1);
|
|
expect(
|
|
wrapper.find('[data-test="submit-button"]').hostNodes().text()
|
|
).toContain(
|
|
Translate.Get.components.departmentTable.departmentTableRow
|
|
.saveUpdateButton
|
|
);
|
|
expect(
|
|
wrapper.find('[data-test="clear-button"]').hostNodes().length
|
|
).toBe(1);
|
|
});
|
|
|
|
test("Initial Values are Set Properly", () => {
|
|
wrapper.find("Button").simulate("click");
|
|
wrapper.update();
|
|
|
|
expect(wrapper.find('[data-test="display-row"]').length).toBe(0);
|
|
expect(wrapper.find('[data-test="edit-row"]').length).toBe(1);
|
|
expect(wrapper.find("td").length).toBe(6);
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="dept-name-input"]')
|
|
.hostNodes()
|
|
.prop("value")
|
|
).toBe("testName");
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="business-line-input"]')
|
|
.hostNodes()
|
|
.prop("value")
|
|
).toBe("bl2");
|
|
expect(
|
|
wrapper.find('[data-test="region-input"]').hostNodes().prop("value")
|
|
).toBe("");
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="dept-state-input"]')
|
|
.hostNodes()
|
|
.prop("value")
|
|
).toBe("Active");
|
|
expect(
|
|
wrapper.find('[data-test="submit-button"]').hostNodes().text()
|
|
).toContain(
|
|
Translate.Get.components.departmentTable.departmentTableRow
|
|
.saveUpdateButton
|
|
);
|
|
expect(
|
|
wrapper.find('[data-test="clear-button"]').hostNodes().length
|
|
).toBe(1);
|
|
});
|
|
|
|
test("Updating Values Updates State", () => {
|
|
wrapper.find("Button").simulate("click");
|
|
wrapper.update();
|
|
|
|
expect(wrapper.find('[data-test="display-row"]').length).toBe(0);
|
|
expect(wrapper.find('[data-test="edit-row"]').length).toBe(1);
|
|
expect(wrapper.find("td").length).toBe(6);
|
|
wrapper
|
|
.find('[data-test="dept-name-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "NewName" } });
|
|
wrapper
|
|
.find('[data-test="business-line-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "bl1" } });
|
|
wrapper
|
|
.find('[data-test="region-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "NORTH" } });
|
|
wrapper
|
|
.find('[data-test="dept-state-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "Inactive" } });
|
|
wrapper.update();
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="dept-name-input"]')
|
|
.hostNodes()
|
|
.prop("value")
|
|
).toBe("NewName");
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="business-line-input"]')
|
|
.hostNodes()
|
|
.prop("value")
|
|
).toBe("bl1");
|
|
expect(
|
|
wrapper.find('[data-test="region-input"]').hostNodes().prop("value")
|
|
).toBe("NORTH");
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="dept-state-input"]')
|
|
.hostNodes()
|
|
.prop("value")
|
|
).toBe("Inactive");
|
|
});
|
|
|
|
test("Only - allowed as special charcter", () => {
|
|
wrapper.find("Button").simulate("click");
|
|
wrapper.update();
|
|
|
|
expect(wrapper.find("td").length).toBe(6);
|
|
wrapper
|
|
.find('[data-test="dept-name-input"]')
|
|
.hostNodes()
|
|
.simulate("change", {
|
|
target: { value: "New-Name Name.!@#$!#@$" }
|
|
});
|
|
wrapper.update();
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="dept-name-input"]')
|
|
.hostNodes()
|
|
.prop("value")
|
|
).toBe("New-NameName");
|
|
});
|
|
|
|
test("Submit is Disabled until Changes are Made - Name", () => {
|
|
wrapper.find("Button").simulate("click");
|
|
wrapper.update();
|
|
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.prop("disabled")
|
|
).toBe(true);
|
|
wrapper
|
|
.find('[data-test="dept-name-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "NewName" } });
|
|
wrapper.update();
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.prop("disabled")
|
|
).toBe(false);
|
|
|
|
wrapper
|
|
.find('[data-test="dept-name-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "testName" } });
|
|
wrapper.update();
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.prop("disabled")
|
|
).toBe(true);
|
|
});
|
|
|
|
test("Submit is Disabled until Changes are Made - BusinessLine", () => {
|
|
wrapper.find("Button").simulate("click");
|
|
wrapper.update();
|
|
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.prop("disabled")
|
|
).toBe(true);
|
|
wrapper
|
|
.find('[data-test="business-line-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "bl1" } });
|
|
wrapper.update();
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.prop("disabled")
|
|
).toBe(false);
|
|
wrapper
|
|
.find('[data-test="business-line-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "bl2" } });
|
|
wrapper.update();
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.prop("disabled")
|
|
).toBe(true);
|
|
});
|
|
|
|
test("Submit is Disabled until Changes are Made - State", () => {
|
|
wrapper.find("Button").simulate("click");
|
|
wrapper.update();
|
|
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.prop("disabled")
|
|
).toBe(true);
|
|
wrapper
|
|
.find('[data-test="dept-state-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "Inactive" } });
|
|
wrapper.update();
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.prop("disabled")
|
|
).toBe(false);
|
|
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.prop("disabled")
|
|
).toBe(false);
|
|
wrapper
|
|
.find('[data-test="dept-state-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "Active" } });
|
|
wrapper.update();
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.prop("disabled")
|
|
).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe("Associate Inputs Are Validated", () => {
|
|
test("Name Must Be at least 3 Characters", () => {
|
|
wrapper.find("Button").simulate("click");
|
|
wrapper.update();
|
|
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.prop("disabled")
|
|
).toBe(true);
|
|
wrapper
|
|
.find('[data-test="dept-name-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "Ne" } });
|
|
wrapper.update();
|
|
///Input disabled because too short
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.prop("disabled")
|
|
).toBe(true);
|
|
expect(wrapper.find("FormFeedback").text()).toContain(
|
|
Translate.Get.components.departmentTable.departmentTableRow
|
|
.validation.departmentNameLength
|
|
);
|
|
|
|
//Input Enabled once name is > 2 characters
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.prop("disabled")
|
|
).toBe(true);
|
|
wrapper
|
|
.find('[data-test="dept-name-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "New" } });
|
|
wrapper.update();
|
|
expect(wrapper.find("FormFeedback").hostNodes().length).toBe(0);
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.prop("disabled")
|
|
).toBe(false);
|
|
});
|
|
|
|
test("Name Must Be Unique If Name is Not Original Name", () => {
|
|
wrapper.find("Button").simulate("click");
|
|
wrapper.update();
|
|
|
|
mockUniqueFunction.mockReturnValue(false);
|
|
wrapper.update();
|
|
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.prop("disabled")
|
|
).toBe(true);
|
|
wrapper
|
|
.find('[data-test="dept-name-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "NewNewName" } });
|
|
wrapper.update();
|
|
|
|
///Input disabled because unique check fails
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.prop("disabled")
|
|
).toBe(true);
|
|
expect(wrapper.find("FormFeedback").text()).toContain(
|
|
Translate.Get.components.departmentTable.departmentTableRow
|
|
.validation.departmentNameUnique
|
|
);
|
|
|
|
//Input Enabled once name is unique
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.prop("disabled")
|
|
).toBe(true);
|
|
wrapper
|
|
.find('[data-test="dept-name-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "NewNewName" } });
|
|
});
|
|
});
|
|
|
|
describe("Associate can Abandon Changes", () => {
|
|
test("Cancel Button Clears Inputs and Returns to Display State", () => {
|
|
wrapper.find("Button").simulate("click");
|
|
wrapper.update();
|
|
|
|
expect(wrapper.find('[data-test="display-row"]').length).toBe(0);
|
|
expect(wrapper.find('[data-test="edit-row"]').length).toBe(1);
|
|
expect(wrapper.find("td").length).toBe(6);
|
|
wrapper
|
|
.find('[data-test="dept-name-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "NewName" } });
|
|
wrapper
|
|
.find('[data-test="business-line-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "bl1" } });
|
|
wrapper
|
|
.find('[data-test="region-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "SOUTH" } });
|
|
wrapper
|
|
.find('[data-test="dept-state-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "Inactive" } });
|
|
wrapper.update();
|
|
|
|
wrapper
|
|
.find('[data-test="clear-button"]')
|
|
.hostNodes()
|
|
.simulate("click");
|
|
wrapper.update();
|
|
|
|
expect(wrapper.find('[data-test="department_tr_4"]').length).toBe(1);
|
|
expect(wrapper.find('[data-test="edit-row"]').length).toBe(0);
|
|
|
|
wrapper.find("Button").simulate("click");
|
|
wrapper.update();
|
|
|
|
//Assert Values did Not Update After Cancel and are Reset to Prop Values
|
|
expect(wrapper.find('[data-test="display-row"]').length).toBe(0);
|
|
expect(wrapper.find('[data-test="edit-row"]').length).toBe(1);
|
|
expect(wrapper.find("td").length).toBe(6);
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="dept-name-input"]')
|
|
.hostNodes()
|
|
.prop("value")
|
|
).toBe("testName");
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="business-line-input"]')
|
|
.hostNodes()
|
|
.prop("value")
|
|
).toBe("bl2");
|
|
expect(
|
|
wrapper.find('[data-test="region-input"]').hostNodes().prop("value")
|
|
).toBe("");
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="dept-state-input"]')
|
|
.hostNodes()
|
|
.prop("value")
|
|
).toBe("Active");
|
|
});
|
|
});
|
|
|
|
describe("Associate can Submit Changes", () => {
|
|
test("Submit Button Sends Correct Form Data", () => {
|
|
wrapper.find("Button").simulate("click");
|
|
wrapper.update();
|
|
|
|
wrapper
|
|
.find('[data-test="dept-name-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "NewName" } });
|
|
wrapper
|
|
.find('[data-test="business-line-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "bl1" } });
|
|
wrapper
|
|
.find('[data-test="region-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "NORTH" } });
|
|
wrapper
|
|
.find('[data-test="dept-state-input"]')
|
|
.hostNodes()
|
|
.simulate("change", { target: { value: "Inactive" } });
|
|
wrapper.update();
|
|
|
|
wrapper
|
|
.find('[data-test="submit-button"]')
|
|
.hostNodes()
|
|
.simulate("click");
|
|
expect(mockSubmitFunction.mock.calls[0][0]).toEqual({
|
|
departmentName: "NewName",
|
|
businessLineCode: "bl1",
|
|
state: "Inactive",
|
|
id: 4,
|
|
regionCode: "NORTH"
|
|
});
|
|
wrapper.update();
|
|
|
|
expect(wrapper.find('[data-test="department_tr_4"]').length).toBe(1);
|
|
expect(wrapper.find('[data-test="edit-row"]').length).toBe(0);
|
|
|
|
wrapper.find("Button").simulate("click");
|
|
wrapper.update();
|
|
|
|
//Assert Values have updated since submit
|
|
expect(wrapper.find('[data-test="display-row"]').length).toBe(0);
|
|
expect(wrapper.find('[data-test="edit-row"]').length).toBe(1);
|
|
expect(wrapper.find("td").length).toBe(6);
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="dept-name-input"]')
|
|
.hostNodes()
|
|
.prop("value")
|
|
).toBe("testName");
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="business-line-input"]')
|
|
.hostNodes()
|
|
.prop("value")
|
|
).toBe("bl2");
|
|
expect(
|
|
wrapper.find('[data-test="region-input"]').hostNodes().prop("value")
|
|
).toBe("");
|
|
expect(
|
|
wrapper
|
|
.find('[data-test="dept-state-input"]')
|
|
.hostNodes()
|
|
.prop("value")
|
|
).toBe("Active");
|
|
});
|
|
});
|