Merge pull request #101 from edx/add-default-props-for-input-text

fix(input-text): add prop types for the inner Text component

src/InputText/InputText.test.jsx

+import React from 'react';
+import { mount } from 'enzyme';
+
+import InputText from './index';
+
+describe('<InputText />', () => {
+  const label = 'label';
+  const name = 'name';
+  const props = {
+    label,
+    name,
+  };
+
+  describe('rendering', () => {
+    it('should render with default type when type is not defined', () => {
+      const wrapper = mount(<InputText {...props} />);
+      expect(wrapper.find('input')).toHaveLength(1);
+
+      const input = wrapper.find('input').at(0);
+      expect(input.prop('type')).toEqual('text');
+    });
+
+    it('should render with default type when type is defined as undefined', () => {
+      const wrapper = mount(<InputText {...props} type={undefined} />);
+      expect(wrapper.find('input')).toHaveLength(1);
+
+      const input = wrapper.find('input').at(0);
+      expect(input.prop('type')).toEqual('text');
+    });
+
+    it('should render with default type when type is defined as null', () => {
+      const wrapper = mount(<InputText {...props} type={null} />);
+      expect(wrapper.find('input')).toHaveLength(1);
+
+      const input = wrapper.find('input').at(0);
+      expect(input.prop('type')).toEqual('text');
+    });
+
+    it('should render with specified type when type is defined', () => {
+      const type = 'foobar';
+      const wrapper = mount(<InputText {...props} type={type} />);
+      expect(wrapper.find('input')).toHaveLength(1);
+
+      const input = wrapper.find('input').at(0);
+      expect(input.prop('type')).toEqual(type);
+    });
+  });
+});

src/InputText/index.jsx

 import React from 'react';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
-import asInput, { inputProps } from '../asInput';
+
+import asInput, { inputProps, defaultProps } from '../asInput';
 
 function Text(props) {
   return (
@@ -24,7 +26,22 @@ function Text(props) {
   );
 }
 
-Text.propTypes = inputProps;
+const textPropTypes = {
+  type: PropTypes.string,
+  describedBy: PropTypes.string,
+  isValid: PropTypes.bool,
+  inputRef: PropTypes.func,
+};
+
+const textDefaultProps = {
+  type: 'text',
+  describedBy: '',
+  isValid: true,
+  inputRef: () => {},
+};
+
+Text.propTypes = { ...textPropTypes, ...inputProps };
+Text.defaultProps = { ...textDefaultProps, ...defaultProps };
 
 const InputText = asInput(Text);
 

src/asInput/index.jsx

@@ -28,6 +28,19 @@ export const inputProps = {
   themes: PropTypes.arrayOf(PropTypes.string),
 };
 
+export const defaultProps = {
+  onChange: () => {},
+  onBlur: () => {},
+  id: newId('asInput'),
+  value: '',
+  description: undefined,
+  disabled: false,
+  required: false,
+  validator: undefined,
+  className: [],
+  themes: [],
+};
+
 const asInput = (WrappedComponent, labelFirst = true) => {
   class NewComponent extends React.Component {
     constructor(props) {
@@ -162,18 +175,7 @@ const asInput = (WrappedComponent, labelFirst = true) => {
 
   NewComponent.propTypes = inputProps;
 
-  NewComponent.defaultProps = {
-    onChange: () => {},
-    onBlur: () => {},
-    id: newId('asInput'),
-    value: '',
-    description: undefined,
-    disabled: false,
-    required: false,
-    validator: undefined,
-    className: [],
-    themes: [],
-  };
+  NewComponent.defaultProps = defaultProps;
 
   return NewComponent;
 };