Ensure data-qaid is populated on the Input component in Select molecule.

While doing some integration testing on a Select component, it was uncovered
that the data-qaid was not being passed down to the Input component generated
within the Select component. This is needed to allow for interactions with the
Button component contained within the Input.

src/molecules/Select/Input.test.tsx

@@ -8,14 +8,16 @@ const mockClick = jest.fn();
 const setup = (
   isOpen: boolean = false,
   placeholder: string = 'I am a placeholder',
-  readonly: boolean = false
+  readonly: boolean = false,
+  dataQaId: string | undefined = undefined
 ) =>
   mountWithTheme(
     <Input
       isOpen={isOpen}
       placeholder={placeholder}
       toggleSelect={mockClick}
       readonly={readonly}
+      data-qaid={dataQaId}
     >
       I am a child component
     </Input>
@@ -28,9 +30,8 @@ describe('Select <Input />', () => {
 
   it('it has the correct style properties when isOpen is false', () => {
     let wrapper = setup(false);
-    let input = wrapper;
-    expect(input).toHaveStyleRule('border-radius', '2px');
-    expect(input).not.toHaveStyleRule('box-shadow');
+    expect(wrapper).toHaveStyleRule('border-radius', '2px');
+    expect(wrapper).not.toHaveStyleRule('box-shadow');
   });
 
   /* TODO: Why this doesn't work */
@@ -40,11 +41,10 @@ describe('Select <Input />', () => {
 
   it('it has the correct style properties when isOpen is true', () => {
     let wrapper = setup(true);
-    let input = wrapper;
-    expect(input).toHaveStyleRule('border-radius', '2px');
-    expect(input).not.toHaveStyleRule('box-shadow');
+    expect(wrapper).toHaveStyleRule('border-radius', '2px');
+    expect(wrapper).not.toHaveStyleRule('box-shadow');
 
-    expect(input).toHaveStyleRule(
+    expect(wrapper).toHaveStyleRule(
       'box-shadow',
       '0 10px 20px 0 rgba(0,0,0,0.19)'
     );
@@ -56,6 +56,18 @@ describe('Select <Input />', () => {
     expect(placeholder).toBe('I am a placeholder');
   });
 
+  it('it adds a data-qaid', () => {
+    let wrapper = setup(true, 'cat', true, 'testDataId');
+    let qaid = wrapper.find('Input').props()['data-qaid'];
+    expect(qaid).toBe('testDataId');
+  });
+
+  it('it handles no data-qaid', () => {
+    let wrapper = setup();
+    let inputWrapper = wrapper.find('Input');
+    expect(inputWrapper).toBeDefined();
+  });
+
   it('it triggers onClick when clicked', () => {
     let wrapper = setup().find('button');
     wrapper.simulate('click');

src/molecules/Select/Input.tsx

@@ -27,6 +27,7 @@ interface Props {
   hasError?: boolean;
   name?: string;
   id?: string;
+  'data-qaid'?: string;
 }
 
 interface ButtonProps {
@@ -100,7 +101,8 @@ const Input: React.SFC<Props> = ({
   readonly,
   hasError,
   name,
-  id
+  id,
+  'data-qaid': qaId
 }) => {
   return (
     <InputWrapper
@@ -109,6 +111,7 @@ const Input: React.SFC<Props> = ({
       onClick={toggleSelect}
       isOpen={isOpen}
       ref={innerRef}
+      data-qaid={qaId}
     >
       <InputStyle
         value={value}

src/molecules/Select/README.md

@@ -45,4 +45,4 @@ Table below contains all types of props available in the Option component
 | disabled      | `Boolean`    | false           | Whether the option is enabled or not
 | error         | `Boolean`    | false           | Whether the option is highlighted with an error state
 | onClick       | `Function`   |                 | The function that's executed when clicking this option
-| data-qaid             | `string`   |                 | Optional prop for testing purposes
+| data-qaid     | `string`     |                 | Optional prop for testing purposes

storybook/stories/Select.stories.tsx

@@ -25,6 +25,7 @@ storiesOf('Select', module)
           placeholder="Select a city"
           hasError={boolean('Has Error', false)}
           disableScrollWhenOpen={boolean('Disable Scroll', false)}
+          data-qaid="test-data-qaid"
         >
           {({ optionClick }: any) =>
             cities.map((city, index) => (