it('type', () => { const wrapper = mount( <Field defaultValue="notanemail" id="email" name="email" type="email" />, ); wrapper .find('input') .instance() .dispatchEvent(new window.Event('invalid', { bubbles: true })); expect(wrapper).toHaveState('invalid', true); expect(wrapper).toHaveState('errorMessage', 'This value is not an email.'); });
it('disable scroll on page', () => { const keyboardEvent = (keyCode) => new window.KeyboardEvent('keydown', { bubbles: true, keyCode }); const handler = jest.fn(); const wrapper = mount(<Dropdown caption="Menu" options={options} />, { attachTo: setReactRoot(), }); const $dropdown = wrapper.find('.dropdown'); window.addEventListener('keydown', handler); $dropdown.instance().dispatchEvent(keyboardEvent(40)); $dropdown.instance().dispatchEvent(keyboardEvent(38)); $dropdown.instance().dispatchEvent(keyboardEvent(13)); $dropdown.instance().dispatchEvent(keyboardEvent(32)); expect(handler).not.toHaveBeenCalled(); $dropdown.instance().dispatchEvent(keyboardEvent(31)); expect(handler).toHaveBeenCalledTimes(1); });
it('onchange after invalid can make the error go away', () => { const wrapper = mount(<Field id="email" name="email" type="email" />); const $input = wrapper.find('input'); // Input invalid data $input.instance().value = 'notanemail'; $input.first().simulate('change', { target: { value: 'notanemail' } }); // Activate validation $input.instance().dispatchEvent(new window.Event('invalid', { bubbles: true })); expect(wrapper).toHaveState('invalid', true); expect(wrapper).toHaveState('errorMessage', 'This value is not an email.'); // Input correct data $input.instance().value = 'email@domain.com'; $input.first().simulate('change', { target: { value: 'email@domain.com' } }); expect(wrapper).toHaveState('invalid', false); expect(wrapper).toHaveState('errorMessage', ''); });
.find('input') .instance() .dispatchEvent(new window.Event('invalid', { bubbles: true })); wrapper.update(); const $input = wrapper.find('input');
expect(wrapper).toHaveState('errorMessage', ''); $select.instance().dispatchEvent(new window.Event('invalid', { bubbles: true })); expect(wrapper).toHaveState('invalid', true); expect(wrapper).toHaveState('errorMessage', 'This is a required field.'); const $select = wrapper.find('select'); $select.instance().dispatchEvent(new window.Event('invalid', { bubbles: true })); expect(wrapper).toHaveState('invalid', true); expect(wrapper).toHaveState('errorMessage', 'This is a required field.'); .find('select') .instance() .dispatchEvent(new window.Event('invalid', { bubbles: true })); expect(wrapper).toHaveState('invalid', true); expect(wrapper).toHaveState('errorMessage', 'This is a required field.');
it('if onchange before invalid then error hidden', () => { const wrapper = mount(<Field id="email" name="email" type="email" />); const $input = wrapper.find('input'); $input.instance().value = 'notanemail'; $input.first().simulate('change', { target: { value: 'notanemail' } }); expect(wrapper).toHaveState('invalid', false); expect(wrapper).toHaveState('errorMessage', ''); // Activate validation and show message $input.instance().dispatchEvent(new window.Event('invalid', { bubbles: true })); expect(wrapper).toHaveState('invalid', true); expect(wrapper).toHaveState('errorMessage', 'This value is not an email.'); });
it('pattern', () => { const wrapper = mount( <Field defaultValue="(11)123456789" id="tel" name="tel" pattern="^[\d]*$" type="tel" />, ); wrapper .find('input') .instance() .dispatchEvent(new window.Event('invalid', { bubbles: true })); expect(wrapper).toHaveState('invalid', true); expect(wrapper).toHaveState('errorMessage', 'This value is invalid.'); });
it('required', () => { const wrapper = mount(<Field id="user" name="user" required />); wrapper .find('input') .instance() .dispatchEvent(new window.Event('invalid', { bubbles: true })); expect(wrapper).toHaveState('invalid', true); expect(wrapper).toHaveState('errorMessage', 'This is a required field.'); });
it('required comes before type', () => { const wrapper = mount(<Field id="email" name="email" required type="email" />); wrapper .find('input') .instance() .dispatchEvent(new window.Event('invalid', { bubbles: true })); expect(wrapper).toHaveState('invalid', true); expect(wrapper).toHaveState('errorMessage', 'This is a required field.'); });
it('type comes before pattern', () => { const wrapper = mount( <Field defaultValue="notanemail" id="email" name="email" pattern="^[\d]*$" type="email" />, ); wrapper .find('input') .instance() .dispatchEvent(new window.Event('invalid', { bubbles: true })); expect(wrapper).toHaveState('invalid', true); expect(wrapper).toHaveState('errorMessage', 'This value is not an email.'); });
it('required custom error message', () => { const wrapper = mount( <Field errorMessages={{ valueMissing: 'You must input this field.' }} id="user" name="user" required />, ); wrapper .find('input') .instance() .dispatchEvent(new window.Event('invalid', { bubbles: true })); expect(wrapper).toHaveState('invalid', true); expect(wrapper).toHaveState('errorMessage', 'You must input this field.'); });
it('type custom error message', () => { const wrapper = mount( <Field defaultValue="notanemail" errorMessages={{ typeMismatch: 'You did not input an email value.' }} id="email" name="email" type="email" />, ); wrapper .find('input') .instance() .dispatchEvent(new window.Event('invalid', { bubbles: true })); expect(wrapper).toHaveState('invalid', true); expect(wrapper).toHaveState('errorMessage', 'You did not input an email value.'); });
it('pattern custom error message', () => { const wrapper = mount( <Field defaultValue="(11)123456789" errorMessages={{ patternMismatch: 'You input an invalid value.' }} id="tel" name="tel" pattern="^[\d]*$" type="tel" />, ); wrapper .find('input') .instance() .dispatchEvent(new window.Event('invalid', { bubbles: true })); expect(wrapper).toHaveState('invalid', true); expect(wrapper).toHaveState('errorMessage', 'You input an invalid value.'); });