feat #133 - Add tests

src/components/Form/Form.test.tsx

@@ -1,12 +1,15 @@
+import { act } from 'react-dom/test-utils'
 import FieldContext from './FieldContext'
 import FormSubmitButton from './FormSubmitButton'
-import React from 'react'
+import { UseFormMethods } from 'react-hook-form'
 import { Form, FormProps } from './index'
 import { mount, shallow, ShallowWrapper } from 'enzyme'
+import React, { createRef } from 'react'
 
 jest.mock('react-hook-form', () => ({
-	...jest.requireActual('react-hook-form'),
+	...(jest.requireActual('react-hook-form') as {}),
 	useForm: () => ({
+		getValues: mockGetValues,
 		handleSubmit: jest.fn(),
 		reset: mockReset
 	}),
@@ -26,6 +29,7 @@ let wrapper: ShallowWrapper<FormProps<MockForm>>
 
 const mockInitialValues = { foo: 'bar' }
 const mockOnSubmit = jest.fn()
+const mockGetValues = jest.fn()
 const mockReset = jest.fn()
 
 beforeEach(() => {
@@ -78,4 +82,20 @@ describe('Form', () => {
 
 		expect(mockReset).toHaveBeenCalledWith(mockInitialValues)
 	})
+
+	it('exposes form methods when a ref is passed', () => {
+		const formRef = createRef<UseFormMethods>()
+
+		mount(
+			<Form formRef={formRef} onSubmit={mockOnSubmit}>
+				<FormSubmitButton>Submit</FormSubmitButton>
+			</Form>
+		)
+
+		act(() => {
+			formRef.current?.getValues()
+		})
+
+		expect(mockGetValues).toHaveBeenCalled()
+	})
 })

src/components/Form/FormSubmitButton/FormSubmitButton.test.tsx

@@ -1,4 +1,5 @@
 import * as reactHookForm from 'react-hook-form'
+import { act } from 'react-dom/test-utils'
 import { Button } from 'components/Button'
 import FieldContext from '../FieldContext'
 import React from 'react'
@@ -17,11 +18,15 @@ const getMockFormContext = (isDirty = true) =>
 		handleSubmit: (onSubmit: any) => onSubmit()
 	} as reactHookForm.UseFormMethods)
 
-const getWrapper = () => (
+const getWrapper = (additionalButtonProps = {}) => (
 	<FieldContext.Provider
-		value={{ initialValues: {}, loading: true, onSubmit: mockOnSubmit }}
+		value={{
+			initialValues: {},
+			loading: false,
+			onSubmit: (_: any) => mockOnSubmit as any
+		}}
 	>
-		<FormSubmitButton>Submit</FormSubmitButton>
+		<FormSubmitButton {...additionalButtonProps}>Submit</FormSubmitButton>
 	</FieldContext.Provider>
 )
 
@@ -34,7 +39,7 @@ beforeEach(() => {
 })
 
 afterEach(() => {
-	jest.resetAllMocks()
+	jest.clearAllMocks()
 })
 
 describe('FormButton', () => {
@@ -43,22 +48,33 @@ describe('FormButton', () => {
 	})
 
 	it('calls onSubmit when clicked', () => {
-		wrapper.simulate('click')
+		wrapper.find(Button).simulate('click')
 
-		expect(mockOnSubmit).toHaveBeenCalledTimes(1)
+		expect(mockOnSubmit).toHaveBeenCalled()
+	})
+
+	it('calls onSubmit when the Enter key is pressed', () => {
+		act(() => {
+			dispatchEvent(
+				new KeyboardEvent('keydown', {
+					code: 'Enter',
+					key: 'Enter'
+				})
+			)
+		})
+
+		expect(mockOnSubmit).toHaveBeenCalled()
 	})
 
 	it('correctly passes loading from field context', () => {
-		expect(wrapper.find(Button).props().loading).toBe(true)
+		expect(wrapper.find(Button).props().loading).toBe(false)
 	})
 
 	it('enables the submit button if form is dirty', () => {
 		expect(wrapper.find(Button).props().disabled).toBe(false)
 	})
 
 	it('disables the submit button if form is pristine', () => {
-		jest.clearAllMocks()
-
 		jest.spyOn(reactHookForm, 'useFormContext').mockImplementation(() =>
 			getMockFormContext(false)
 		)
@@ -67,4 +83,10 @@ describe('FormButton', () => {
 
 		expect(wrapper.find(Button).props().disabled).toBe(true)
 	})
+
+	it('disables the submit button if isDisabled evaluates to true', () => {
+		wrapper = mount(getWrapper({ isDisabled: () => true }))
+
+		expect(wrapper.find(Button).props().disabled).toBe(true)
+	})
 })