2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
|
|
|
import { mount, shallow } from "enzyme";
|
|
|
|
import PasswordInput from ".";
|
2019-09-08 15:05:53 +00:00
|
|
|
|
2019-09-11 12:38:43 +00:00
|
|
|
const basePasswordSettings = {
|
|
|
|
minLength: 6,
|
|
|
|
upperCase: false,
|
|
|
|
digits: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
specSymbols: false,
|
2019-09-11 12:38:43 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const baseProps = {
|
2020-10-16 13:16:01 +00:00
|
|
|
inputName: "demoPasswordInput",
|
|
|
|
emailInputName: "demoEmailInput",
|
|
|
|
inputValue: "",
|
|
|
|
tooltipPasswordTitle: "Password must contain:",
|
|
|
|
tooltipPasswordLength: "from 6 to 30 characters",
|
|
|
|
tooltipPasswordDigits: "digits",
|
|
|
|
tooltipPasswordCapital: "capital letters",
|
|
|
|
tooltipPasswordSpecial: "special characters (!@#$%^&*)",
|
|
|
|
generatorSpecial: "!@#$%^&*",
|
2019-09-11 12:38:43 +00:00
|
|
|
passwordSettings: basePasswordSettings,
|
|
|
|
isDisabled: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
placeholder: "password",
|
2019-09-11 12:38:43 +00:00
|
|
|
onChange: () => jest.fn(),
|
|
|
|
onValidateInput: () => jest.fn(),
|
2020-10-16 13:16:01 +00:00
|
|
|
};
|
2019-09-11 12:38:43 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
describe("<PasswordInput />", () => {
|
|
|
|
it("renders without error", () => {
|
2019-09-11 12:38:43 +00:00
|
|
|
const wrapper = mount(<PasswordInput {...baseProps} />);
|
2019-09-08 15:05:53 +00:00
|
|
|
|
|
|
|
expect(wrapper).toExist();
|
|
|
|
});
|
2019-09-11 12:38:43 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("render password input", () => {
|
2019-09-11 12:38:43 +00:00
|
|
|
const wrapper = mount(<PasswordInput {...baseProps} />);
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.find("input").prop("type")).toEqual("password");
|
2019-09-11 12:38:43 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("have an HTML name", () => {
|
2019-09-11 12:38:43 +00:00
|
|
|
const wrapper = mount(<PasswordInput {...baseProps} />);
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.find("input").prop("name")).toEqual("demoPasswordInput");
|
2019-09-11 12:38:43 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("forward passed value", () => {
|
|
|
|
const wrapper = mount(<PasswordInput {...baseProps} inputValue="demo" />);
|
2019-09-11 12:38:43 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.props().inputValue).toEqual("demo");
|
2019-09-11 12:38:43 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("call onChange when changing value", () => {
|
|
|
|
const onChange = jest.fn((event) => {
|
|
|
|
expect(event.target.id).toEqual("demoPasswordInput");
|
|
|
|
expect(event.target.name).toEqual("demoPasswordInput");
|
|
|
|
expect(event.target.value).toEqual("demo");
|
2019-09-11 12:38:43 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const wrapper = mount(
|
|
|
|
<PasswordInput
|
|
|
|
{...baseProps}
|
|
|
|
id="demoPasswordInput"
|
|
|
|
name="demoPasswordInput"
|
|
|
|
onChange={onChange}
|
|
|
|
/>
|
|
|
|
);
|
2019-09-11 12:38:43 +00:00
|
|
|
|
|
|
|
const event = { target: { value: "demo" } };
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
wrapper.simulate("change", event);
|
2019-09-11 12:38:43 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("call onFocus when input is focused", () => {
|
|
|
|
const onFocus = jest.fn((event) => {
|
|
|
|
expect(event.target.id).toEqual("demoPasswordInput");
|
|
|
|
expect(event.target.name).toEqual("demoPasswordInput");
|
2019-09-11 12:38:43 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const wrapper = mount(
|
|
|
|
<PasswordInput
|
|
|
|
{...baseProps}
|
|
|
|
id="demoPasswordInput"
|
|
|
|
name="demoPasswordInput"
|
|
|
|
onFocus={onFocus}
|
|
|
|
/>
|
|
|
|
);
|
2019-09-11 12:38:43 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
wrapper.simulate("focus");
|
2019-09-11 12:38:43 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("call onBlur when input loses focus", () => {
|
|
|
|
const onBlur = jest.fn((event) => {
|
|
|
|
expect(event.target.id).toEqual("demoPasswordInput");
|
|
|
|
expect(event.target.name).toEqual("demoPasswordInput");
|
2019-09-11 12:38:43 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const wrapper = mount(
|
|
|
|
<PasswordInput
|
|
|
|
{...baseProps}
|
|
|
|
id="demoPasswordInput"
|
|
|
|
name="demoPasswordInput"
|
|
|
|
onBlur={onBlur}
|
|
|
|
/>
|
|
|
|
);
|
2019-09-11 12:38:43 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
wrapper.simulate("blur");
|
2019-09-11 12:38:43 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("disabled when isDisabled is passed", () => {
|
2019-09-11 12:38:43 +00:00
|
|
|
const wrapper = mount(<PasswordInput {...baseProps} isDisabled={true} />);
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("isDisabled")).toEqual(true);
|
2019-09-11 12:38:43 +00:00
|
|
|
});
|
2019-09-12 10:58:55 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("not re-render test", () => {
|
2019-09-12 10:58:55 +00:00
|
|
|
const wrapper = shallow(<PasswordInput {...baseProps} />).instance();
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const shouldUpdate = wrapper.shouldComponentUpdate(
|
|
|
|
wrapper.props,
|
|
|
|
wrapper.state
|
|
|
|
);
|
2019-09-12 10:58:55 +00:00
|
|
|
|
|
|
|
expect(shouldUpdate).toBe(false);
|
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("re-render test", () => {
|
2019-09-12 10:58:55 +00:00
|
|
|
const wrapper = shallow(<PasswordInput {...baseProps} />).instance();
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const shouldUpdate = wrapper.shouldComponentUpdate(
|
|
|
|
{
|
|
|
|
inputName: "demoPasswordInput",
|
|
|
|
emailInputName: "demoEmailInput",
|
|
|
|
inputValue: "",
|
|
|
|
tooltipPasswordTitle: "Password must contain:",
|
|
|
|
tooltipPasswordLength: "from 6 to 30 characters",
|
|
|
|
tooltipPasswordDigits: "digits",
|
|
|
|
tooltipPasswordCapital: "capital letters",
|
|
|
|
tooltipPasswordSpecial: "special characters (!@#$%^&*)",
|
|
|
|
generatorSpecial: "!@#$%^&*",
|
|
|
|
passwordSettings: {
|
|
|
|
minLength: 8,
|
|
|
|
upperCase: false,
|
|
|
|
digits: false,
|
|
|
|
specSymbols: false,
|
|
|
|
},
|
|
|
|
isDisabled: false,
|
|
|
|
placeholder: "password",
|
|
|
|
onChange: () => jest.fn(),
|
|
|
|
onValidateInput: () => jest.fn(),
|
2019-09-12 10:58:55 +00:00
|
|
|
},
|
2020-10-16 13:16:01 +00:00
|
|
|
wrapper.state
|
|
|
|
);
|
2019-09-12 10:58:55 +00:00
|
|
|
|
|
|
|
expect(shouldUpdate).toBe(true);
|
|
|
|
});
|
2019-10-23 12:24:51 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("generate password with props: 10 , false , false , false", () => {
|
2019-10-23 12:24:51 +00:00
|
|
|
const newPasswordSettings = {
|
|
|
|
minLength: 10,
|
|
|
|
upperCase: false,
|
|
|
|
digits: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
specSymbols: false,
|
2019-10-23 12:24:51 +00:00
|
|
|
};
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const wrapper = shallow(
|
|
|
|
<PasswordInput {...baseProps} passwordSettings={newPasswordSettings} />
|
|
|
|
);
|
2019-10-23 12:24:51 +00:00
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
|
|
|
instance.onGeneratePassword();
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.state("type")).toBe("text");
|
2019-10-23 12:24:51 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("generate password with props: 10 , true , false , false", () => {
|
2019-10-23 12:24:51 +00:00
|
|
|
const newPasswordSettings = {
|
|
|
|
minLength: 10,
|
|
|
|
upperCase: true,
|
|
|
|
digits: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
specSymbols: false,
|
2019-10-23 12:24:51 +00:00
|
|
|
};
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const wrapper = shallow(
|
|
|
|
<PasswordInput {...baseProps} passwordSettings={newPasswordSettings} />
|
|
|
|
);
|
2019-10-23 12:24:51 +00:00
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
|
|
|
instance.onGeneratePassword();
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.state("type")).toBe("text");
|
2019-10-23 12:24:51 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("generate password with props: 10 , true , true , false", () => {
|
2019-10-23 12:24:51 +00:00
|
|
|
const newPasswordSettings = {
|
|
|
|
minLength: 10,
|
|
|
|
upperCase: true,
|
|
|
|
digits: true,
|
2020-10-16 13:16:01 +00:00
|
|
|
specSymbols: false,
|
2019-10-23 12:24:51 +00:00
|
|
|
};
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const wrapper = shallow(
|
|
|
|
<PasswordInput {...baseProps} passwordSettings={newPasswordSettings} />
|
|
|
|
);
|
2019-10-23 12:24:51 +00:00
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
|
|
|
instance.onGeneratePassword();
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.state("type")).toBe("text");
|
2019-10-23 12:24:51 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("generate password with props: 10 , true , true , true", () => {
|
2019-10-23 12:24:51 +00:00
|
|
|
const newPasswordSettings = {
|
|
|
|
minLength: 10,
|
|
|
|
upperCase: true,
|
|
|
|
digits: true,
|
2020-10-16 13:16:01 +00:00
|
|
|
specSymbols: true,
|
2019-10-23 12:24:51 +00:00
|
|
|
};
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const wrapper = shallow(
|
|
|
|
<PasswordInput {...baseProps} passwordSettings={newPasswordSettings} />
|
|
|
|
);
|
2019-10-23 12:24:51 +00:00
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
|
|
|
instance.onGeneratePassword();
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.state("type")).toBe("text");
|
2019-10-23 12:24:51 +00:00
|
|
|
});
|
2019-12-03 12:30:41 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("accepts style", () => {
|
2019-12-03 12:30:41 +00:00
|
|
|
const wrapper = mount(
|
2020-10-16 13:16:01 +00:00
|
|
|
<PasswordInput {...baseProps} style={{ color: "red" }} />
|
2019-12-03 12:30:41 +00:00
|
|
|
);
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.getDOMNode().style).toHaveProperty("color", "red");
|
2019-12-03 12:30:41 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("accepts className", () => {
|
|
|
|
const wrapper = mount(<PasswordInput {...baseProps} className="test" />);
|
2019-12-03 12:30:41 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("className")).toEqual("test");
|
2019-12-03 12:30:41 +00:00
|
|
|
});
|
2020-07-22 10:23:28 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("Tooltip disabled when isDisableTooltip is true", () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<PasswordInput {...baseProps} isDisableTooltip={true} />
|
|
|
|
);
|
2020-07-22 10:23:28 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("isDisableTooltip")).toEqual(true);
|
2020-07-22 10:23:28 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("TextTooltip shown when isTextTooltipVisible is true", () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<PasswordInput {...baseProps} isTextTooltipVisible={true} />
|
|
|
|
);
|
2020-07-22 10:23:28 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("isTextTooltipVisible")).toEqual(true);
|
2020-07-22 10:23:28 +00:00
|
|
|
});
|
2019-09-08 15:05:53 +00:00
|
|
|
});
|