feat(textInput,formHelpers): discovery-151 pf4 textInput (#149)

* textInput, pf4 textInput wrapper
* formHelpers, mock event, future validation

src/components/form/__tests__/__snapshots__/formHelpers.test.js.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormHelpers should have specific helpers: helpers 1`] = `
+Object {
+  "createMockEvent": [Function],
+  "doesNotHaveMinimumCharacters": [Function],
+}
+`;
+
+exports[`FormHelpers should return a boolean for not having the correct number of characters: array 1`] = `true`;
+
+exports[`FormHelpers should return a boolean for not having the correct number of characters: null 1`] = `true`;
+
+exports[`FormHelpers should return a boolean for not having the correct number of characters: plain object 1`] = `true`;
+
+exports[`FormHelpers should return a boolean for not having the correct number of characters: string, 1 chars expect 1 1`] = `false`;
+
+exports[`FormHelpers should return a boolean for not having the correct number of characters: string, 2 chars expect 2 1`] = `false`;
+
+exports[`FormHelpers should return a boolean for not having the correct number of characters: string, 3 chars expect 2 1`] = `false`;
+
+exports[`FormHelpers should return a boolean for not having the correct number of characters: string, 4 chars expect 5 1`] = `true`;
+
+exports[`FormHelpers should return a boolean for not having the correct number of characters: string, 5 chars expect 5 1`] = `false`;
+
+exports[`FormHelpers should return a boolean for not having the correct number of characters: undefined 1`] = `true`;
+
+exports[`FormHelpers should return a mocked event object: mock event 1`] = `
+Object {
+  "checked": undefined,
+  "currentTarget": Object {},
+  "id": undefined,
+  "keyCode": undefined,
+  "name": undefined,
+  "persist": [Function],
+  "target": Object {},
+  "value": undefined,
+}
+`;

src/components/form/__tests__/__snapshots__/textInput.test.js.snap

@@ -0,0 +1,135 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextInput Component should handle readOnly, disabled: active 1`] = `
+<input
+  aria-invalid="false"
+  class="pf-c-form-control quipucords-form__text-input "
+  data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+  data-ouia-component-type="PF4/TextInput"
+  data-ouia-safe="true"
+  id="generatedid-"
+  name="generatedid-"
+  type="text"
+  value=""
+/>
+`;
+
+exports[`TextInput Component should handle readOnly, disabled: disabled 1`] = `
+<input
+  aria-invalid="false"
+  class="pf-c-form-control quipucords-form__text-input "
+  data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+  data-ouia-component-type="PF4/TextInput"
+  data-ouia-safe="true"
+  disabled=""
+  id="generatedid-"
+  name="generatedid-"
+  type="text"
+  value=""
+/>
+`;
+
+exports[`TextInput Component should handle readOnly, disabled: readOnly 1`] = `
+<input
+  aria-invalid="false"
+  class="pf-c-form-control quipucords-form__text-input "
+  data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+  data-ouia-component-type="PF4/TextInput"
+  data-ouia-safe="true"
+  id="generatedid-"
+  name="generatedid-"
+  readonly=""
+  type="text"
+  value=""
+/>
+`;
+
+exports[`TextInput Component should render a basic component: basic component 1`] = `
+<input
+  aria-invalid="false"
+  class="pf-c-form-control quipucords-form__text-input "
+  data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+  data-ouia-component-type="PF4/TextInput"
+  data-ouia-safe="true"
+  id="generatedid-"
+  name="generatedid-"
+  type="text"
+  value=""
+/>
+`;
+
+exports[`TextInput Component should return a mouseup event on text clear: emulated event, mouseup 1`] = `
+Array [
+  Array [
+    Object {
+      "checked": undefined,
+      "currentTarget": Object {
+        "value": "",
+      },
+      "id": undefined,
+      "keyCode": undefined,
+      "name": undefined,
+      "persist": [Function],
+      "target": Object {},
+      "value": "",
+    },
+  ],
+]
+`;
+
+exports[`TextInput Component should return an emulated onChange event: emulated event, change 1`] = `
+Array [
+  Array [
+    Object {
+      "checked": undefined,
+      "currentTarget": Object {
+        "value": "dolor sit",
+      },
+      "id": undefined,
+      "keyCode": undefined,
+      "name": undefined,
+      "persist": [Function],
+      "target": Object {},
+      "value": "dolor sit",
+    },
+  ],
+]
+`;
+
+exports[`TextInput Component should return an emulated onClear event on escape with type search: emulated event, esc, type search 1`] = `
+Array [
+  Array [
+    Object {
+      "checked": undefined,
+      "currentTarget": Object {
+        "value": "",
+      },
+      "id": undefined,
+      "keyCode": 27,
+      "name": undefined,
+      "persist": [Function],
+      "target": Object {},
+      "value": "",
+    },
+  ],
+]
+`;
+
+exports[`TextInput Component should return an emulated onClear event on escape: emulated event, esc 1`] = `
+Array [
+  Array [
+    Object {
+      "checked": undefined,
+      "currentTarget": Object {
+        "value": "",
+      },
+      "id": undefined,
+      "keyCode": 27,
+      "name": undefined,
+      "persist": [Function],
+      "target": Object {},
+      "value": "",
+    },
+  ],
+]
+`;

src/components/form/__tests__/formHelpers.test.js

@@ -0,0 +1,23 @@
+import { formHelpers } from '../formHelpers';
+
+describe('FormHelpers', () => {
+  it('should have specific helpers', () => {
+    expect(formHelpers).toMatchSnapshot('helpers');
+  });
+
+  it('should return a mocked event object', () => {
+    expect(formHelpers.createMockEvent()).toMatchSnapshot('mock event');
+  });
+
+  it('should return a boolean for not having the correct number of characters', () => {
+    expect(formHelpers.doesNotHaveMinimumCharacters(null)).toMatchSnapshot('null');
+    expect(formHelpers.doesNotHaveMinimumCharacters(undefined)).toMatchSnapshot('undefined');
+    expect(formHelpers.doesNotHaveMinimumCharacters({})).toMatchSnapshot('plain object');
+    expect(formHelpers.doesNotHaveMinimumCharacters([])).toMatchSnapshot('array');
+    expect(formHelpers.doesNotHaveMinimumCharacters('l', 1)).toMatchSnapshot('string, 1 chars expect 1');
+    expect(formHelpers.doesNotHaveMinimumCharacters('lo', 2)).toMatchSnapshot('string, 2 chars expect 2');
+    expect(formHelpers.doesNotHaveMinimumCharacters('lor', 2)).toMatchSnapshot('string, 3 chars expect 2');
+    expect(formHelpers.doesNotHaveMinimumCharacters('lore', 5)).toMatchSnapshot('string, 4 chars expect 5');
+    expect(formHelpers.doesNotHaveMinimumCharacters('lorem', 5)).toMatchSnapshot('string, 5 chars expect 5');
+  });
+});

src/components/form/__tests__/textInput.test.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { TextInput as PfTextInput } from '@patternfly/react-core';
+import { TextInput } from '../textInput';
+import { helpers } from '../../../common';
+
+describe('TextInput Component', () => {
+  it('should render a basic component', async () => {
+    const props = {};
+
+    const component = await shallowHookComponent(<TextInput {...props} />);
+    expect(component.render()).toMatchSnapshot('basic component');
+  });
+
+  it('should handle readOnly, disabled', async () => {
+    const props = {
+      isReadOnly: true
+    };
+
+    const component = await mountHookComponent(<TextInput {...props} />);
+    expect(component.render()).toMatchSnapshot('readOnly');
+
+    component.setProps({
+      isReadOnly: false,
+      isDisabled: true
+    });
+
+    expect(component.render()).toMatchSnapshot('disabled');
+
+    component.setProps({
+      isReadOnly: false,
+      isDisabled: false
+    });
+
+    expect(component.render()).toMatchSnapshot('active');
+  });
+
+  it('should return an emulated onChange event', async () => {
+    const mockOnChange = jest.fn();
+    const props = {
+      onChange: mockOnChange,
+      value: 'lorem ipsum'
+    };
+
+    const component = await shallowHookComponent(<TextInput {...props} />);
+    const mockEvent = { currentTarget: { value: 'dolor sit' }, persist: helpers.noop };
+    component.find(PfTextInput).simulate('change', 'hello world', mockEvent);
+
+    expect(mockOnChange.mock.calls).toMatchSnapshot('emulated event, change');
+  });
+
+  it('should return an emulated onClear event on escape', async () => {
+    const mockOnClear = jest.fn();
+    const props = {
+      onClear: mockOnClear,
+      value: 'lorem ipsum'
+    };
+
+    const component = await shallowHookComponent(<TextInput {...props} />);
+    const mockEvent = { keyCode: 27, currentTarget: { value: '' }, persist: helpers.noop };
+    component.find(PfTextInput).simulate('keyup', mockEvent);
+
+    expect(mockOnClear.mock.calls).toMatchSnapshot('emulated event, esc');
+  });
+
+  it('should return an emulated onClear event on escape with type search', async () => {
+    const mockOnClear = jest.fn();
+    const props = {
+      onClear: mockOnClear,
+      value: 'lorem ipsum',
+      type: 'search'
+    };
+
+    const component = await shallowHookComponent(<TextInput {...props} />);
+    const mockEvent = { keyCode: 27, currentTarget: { value: '' }, persist: helpers.noop };
+    component.find(PfTextInput).simulate('keyup', mockEvent);
+
+    expect(mockOnClear.mock.calls).toMatchSnapshot('emulated event, esc, type search');
+  });
+
+  it('should return a mouseup event on text clear', async () => {
+    const mockOnMouseUp = jest.fn();
+    const props = {
+      onMouseUp: mockOnMouseUp,
+      value: 'lorem ipsum'
+    };
+
+    const component = await shallowHookComponent(<TextInput {...props} />);
+    const mockEvent = { currentTarget: { value: '' }, persist: helpers.noop };
+    component.find(PfTextInput).simulate('mouseup', mockEvent);
+
+    expect(mockOnMouseUp.mock.calls).toMatchSnapshot('emulated event, mouseup');
+  });
+});

src/components/form/formHelpers.js

@@ -0,0 +1,43 @@
+import { helpers } from '../../common';
+
+/**
+ * Create a consistent mock event object.
+ *
+ * @param {object} event
+ * @param {boolean} persistEvent
+ * @returns {{keyCode, currentTarget, name, id: *, persist: Function, value, target}}
+ */
+const createMockEvent = (event, persistEvent = false) => {
+  const { checked, currentTarget = {}, keyCode, persist = helpers.noop, target = {} } = { ...event };
+  if (persistEvent) {
+    persist();
+  }
+
+  return {
+    checked,
+    currentTarget,
+    keyCode,
+    id: currentTarget.id || currentTarget.name,
+    name: currentTarget.name,
+    persist,
+    value: currentTarget.value,
+    target
+  };
+};
+
+/**
+ * Confirm a string has minimum length.
+ *
+ * @param {string} value
+ * @param {number} characters
+ * @returns {boolean}
+ */
+const doesNotHaveMinimumCharacters = (value, characters = 1) =>
+  (typeof value === 'string' && value.length < characters) || typeof value !== 'string';
+
+const formHelpers = {
+  createMockEvent,
+  doesNotHaveMinimumCharacters
+};
+
+export { formHelpers as default, formHelpers, createMockEvent, doesNotHaveMinimumCharacters };