Fix forwarded select ref (#1435)

* Forward ref to underlying <select /> instead of wrapping div

* Add mockRef test util, separate out TextInput/TextInputField tests

Author: brandongregoryscott

src/select/__tests__/Select.test.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { Select } from '../'
+import { mockRef } from '../../test/utils'
+
+const makeSelectFixture = (props = {}) => <Select data-testid="select" {...props} />
+
+describe('Select', () => {
+  it('should forward ref to underlying <select />', () => {
+    const ref = mockRef()
+
+    render(makeSelectFixture({ ref }))
+
+    expect(ref.current).toBeInstanceOf(HTMLSelectElement)
+  })
+})

src/select/src/Select.js

@@ -73,7 +73,6 @@ const Select = memo(
 
     return (
       <Box
-        ref={ref}
         display="inline-flex"
         flex={1}
         position="relative"
@@ -84,6 +83,7 @@ const Select = memo(
       >
         <Box
           is="select"
+          ref={ref}
           className={themedClassName}
           id={id}
           name={name}

src/test/utils.js

@@ -46,3 +46,11 @@ export const buildFileRejection = file => ({
   reason: faker.random.arrayElement(Object.values(FileRejectionReason)),
   message: faker.random.words()
 })
+
+/**
+ * Returns a mock ref object in the shape of `{ current: jest.fn() }`
+ */
+export const mockRef = () => ({
+  // eslint-disable-next-line no-undef
+  current: jest.fn()
+})

src/text-input/__tests__/TextInput.test.js

@@ -1,33 +1,40 @@
 import React, { useState } from 'react'
 import { render } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { TextInput, TextInputField } from '../'
+import { TextInput } from '../'
+import { mockRef } from '../../test/utils'
 
 function makeTextInputFixture(props = {}) {
   return <TextInput data-testid="input" {...props} />
 }
 
-function makeTextInputFieldFixture(props = {}) {
-  return <TextInputField data-testid="input" label="Name" {...props} />
-}
-
 describe('TextInput', () => {
-  it('Should render without crashing', () => {
+  it('should forward ref to underlying <input />', () => {
+    const ref = mockRef()
+
+    render(makeTextInputFixture({ ref }))
+
+    expect(ref.current).toBeInstanceOf(HTMLInputElement)
+  })
+
+  it('should render without crashing', () => {
     expect(() => render(makeTextInputFixture())).not.toThrow()
   })
 
-  it('Should accept placeholder text', () => {
+  it('should accept placeholder text', () => {
     const { getByPlaceholderText } = render(makeTextInputFixture({ placeholder: 'Enter text here' }))
+
     expect(getByPlaceholderText('Enter text here')).toBeInTheDocument()
   })
 
-  it('Should set an invalid state if `isInvalid` is `true`', () => {
+  it('should set an invalid state if `isInvalid` is `true`', () => {
     const { getByTestId } = render(makeTextInputFixture({ isInvalid: true }))
     const input = getByTestId('input')
+
     expect(input).toHaveAttribute('aria-invalid', 'true')
   })
 
-  it('Should accept an `onChange` handler to be a controlled component', () => {
+  it('should accept an `onChange` handler to be a controlled component', () => {
     function ControlledTextInput() {
       const [value, setValue] = useState('')
       return (
@@ -43,42 +50,18 @@ describe('TextInput', () => {
     const { getByDisplayValue, getByTestId } = render(<ControlledTextInput />)
     const input = getByTestId('input')
     userEvent.click(input)
+
     expect(document.activeElement).toEqual(input)
     userEvent.type(input, 'Testing')
     expect(getByDisplayValue('Testing')).toEqual(input)
   })
 
-  it('Should not be interactive if `disabled` is passed in', () => {
+  it('should not be interactive if `disabled` is passed in', () => {
     const { getByDisplayValue, getByTestId } = render(makeTextInputFixture({ disabled: true }))
     const input = getByTestId('input')
     userEvent.type(input, 'Testing')
+
     expect(() => getByDisplayValue('Testing')).toThrowError()
     expect(getByDisplayValue('')).toEqual(input)
   })
 })
-
-describe('TextInputField', () => {
-  it('Should render without crashing', () => {
-    expect(() => render(makeTextInputFieldFixture())).not.toThrow()
-  })
-
-  it('Should render a required `label` when passed in', () => {
-    const { getByLabelText } = render(makeTextInputFieldFixture())
-    expect(getByLabelText('Name')).toBeInTheDocument()
-  })
-
-  it('Should render a `hint` underneath the input', () => {
-    const { getByText } = render(makeTextInputFieldFixture({ hint: 'Enter a value in the input' }))
-    expect(getByText('Enter a value in the input')).toBeInTheDocument()
-  })
-
-  it('Should render an astrix when `required` is passed in', () => {
-    const { getByTitle } = render(makeTextInputFieldFixture({ required: true }))
-    expect(getByTitle('This field is required.')).toBeInTheDocument()
-  })
-
-  it('Should not render a `validationMessage` when passed in', () => {
-    const { getByText } = render(makeTextInputFieldFixture({ validationMessage: 'Please enter a value' }))
-    expect(getByText('Please enter a value')).toBeInTheDocument()
-  })
-})

src/text-input/__tests__/TextInputField.test.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { TextInputField } from '../'
+
+function makeTextInputFieldFixture(props = {}) {
+  return <TextInputField data-testid="input" label="Name" {...props} />
+}
+
+describe('TextInputField', () => {
+  it('should render without crashing', () => {
+    expect(() => render(makeTextInputFieldFixture())).not.toThrow()
+  })
+
+  it('should render a required `label` when passed in', () => {
+    const { getByLabelText } = render(makeTextInputFieldFixture())
+    expect(getByLabelText('Name')).toBeInTheDocument()
+  })
+
+  it('should render a `hint` underneath the input', () => {
+    const { getByText } = render(makeTextInputFieldFixture({ hint: 'Enter a value in the input' }))
+    expect(getByText('Enter a value in the input')).toBeInTheDocument()
+  })
+
+  it('should render an astrix when `required` is passed in', () => {
+    const { getByTitle } = render(makeTextInputFieldFixture({ required: true }))
+    expect(getByTitle('This field is required.')).toBeInTheDocument()
+  })
+
+  it('should not render a `validationMessage` when passed in', () => {
+    const { getByText } = render(makeTextInputFieldFixture({ validationMessage: 'Please enter a value' }))
+    expect(getByText('Please enter a value')).toBeInTheDocument()
+  })
+})