Merge pull request #86 from arupdvsa/feature/select-ref-input-tests

added ref feature to select plus written refhook tests for input

Author: Tomdango

src/components/input/Input.tsx

@@ -1,11 +1,11 @@
-import React, { HTMLProps } from 'react';
+import React, { HTMLProps, MutableRefObject } from 'react';
 import classNames from 'classnames';
 import FormGroup from '../../util/FormGroup';
 import { InputWidth } from '../../util/types/NHSUKTypes';
 import { FormElementProps } from '../../util/types/FormTypes';
 
 interface InputProps extends HTMLProps<HTMLInputElement>, FormElementProps {
-  inputRef?: (inputRef: HTMLInputElement | null) => any;
+  inputRef?: MutableRefObject<HTMLInputElement | null>;
   width?: InputWidth;
   disableErrorLine?: boolean;
 }

src/components/input/__tests__/input.test.tsx

@@ -0,0 +1,34 @@
+import Input from '../Input';
+import React from 'react';
+import { shallow } from 'enzyme';
+describe('Input', () => {
+    afterEach(() => {
+        jest.restoreAllMocks();
+      });
+    const InputComp = ({onHandle}: any) => {
+        const ref = React.useRef(null);
+        const handleClick = () => {
+            if(!ref.current) return;
+            onHandle();
+        };
+
+        return (
+            <Input type='button' onClick={handleClick} inputRef={ref}></Input>
+        )
+    };
+    it('should do nothing if ref does not exist', () => {
+        const useRefSpy = jest.spyOn(React, 'useRef').mockReturnValueOnce({ current: null });
+        const component = shallow(<InputComp />);
+        component.find('Input').simulate('click');
+        expect(useRefSpy).toBeCalledWith(null);
+    });
+
+    it('should handle click where ref Exists', () => {
+        const useRefSpy = jest.spyOn(React, 'useRef').mockReturnValueOnce({ current: document.createElement('button') });
+        const mock = jest.fn();
+        const component = shallow(<InputComp onHandle={mock} />);
+        component.find('Input').simulate('click');
+        expect(useRefSpy).toBeCalledWith(null);
+        expect(mock).toBeCalledTimes(1);
+      });
+})

src/components/select/Select.tsx

@@ -1,19 +1,28 @@
-import React, { HTMLProps } from 'react';
-import classNames from 'classnames';
+import React, { HTMLProps, MutableRefObject } from 'react';
+
 import { FormElementProps } from '../../util/types/FormTypes';
 import FormGroup from '../../util/FormGroup';
+import classNames from 'classnames';
 
-type SelectProps = HTMLProps<HTMLSelectElement> & FormElementProps;
+//  SelectProps = HTMLProps<HTMLSelectElement> & FormElementProps;
+interface ISelectProps extends HTMLProps<HTMLSelectElement>, FormElementProps {
+  selectRef?: MutableRefObject<HTMLSelectElement | null>;
+}
 
-interface ISelect extends React.FC<SelectProps> {
+interface ISelect extends React.FC<ISelectProps> {
   Option: React.FC<HTMLProps<HTMLOptionElement>>;
 }
 
 const Select: ISelect = ({ children, ...rest }) => (
-  <FormGroup<SelectProps> inputType="select" {...rest}>
-    {({ className, error, ...restRenderProps }) => (
+  <FormGroup<ISelectProps> inputType="select" {...rest}>
+    {({ className, error, selectRef, ...restRenderProps }) => (
       <select
-        className={classNames('nhsuk-select', { 'nhsuk-select--error': error }, className)}
+        className={classNames(
+          'nhsuk-select',
+          { 'nhsuk-select--error': error },
+          className,
+        )}
+        ref={selectRef}
         {...restRenderProps}
       >
         {children}

src/components/select/__tests__/Select.test.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import Select from "../Select";
+import { shallow } from "enzyme";
+
+describe(`Select`, () => {
+    afterEach(() => {
+        jest.restoreAllMocks();
+      });
+    const SelectComp = ({onHandle}: any) => {
+        const ref = React.useRef<HTMLSelectElement | null>(null);
+        const handleClick = () => {
+            if(!ref.current) return;
+            onHandle();
+        };
+
+        return (
+          <Select onClick={handleClick} selectRef={ref} />
+        );
+    };
+
+    it(`should do nothing if ref does not Exist`, () => {
+        const useRefSpy = jest.spyOn(React, 'useRef').mockReturnValueOnce({ current: null });
+        const component = shallow(<SelectComp />);
+        component.find('Select').simulate('click');
+        expect(useRefSpy).toBeCalledWith(null);
+    });
+
+    it('should handle DOM events where ref Exists', () => {
+        const useRefSpy = jest.spyOn(React, 'useRef').mockReturnValueOnce({ current: document.createElement('select') });
+        const mock = jest.fn();
+        const component = shallow(<SelectComp onHandle={mock} />);
+        component.find('Select').simulate('click');
+        expect(useRefSpy).toBeCalledWith(null);
+        expect(mock).toBeCalledTimes(1);
+    });
+})