From 2f474d7402c4cf43b60736ae76dd9a1e55dbdfad Mon Sep 17 00:00:00 2001
From: github-actions <github-actions@users.noreply.github.com>
Date: Tue, 8 Sep 2020 10:44:08 -0700
Subject: [PATCH 1/2] feat #76 - Refactor Form.Button to be Form.SubmitButton

Closes #76
---
 package.json                                  |  2 +-
 src/__snapshots__/storybook.test.ts.snap      | 12 ++--
 src/components/Form/Form.stories.tsx          |  2 +-
 src/components/Form/Form.test.tsx             | 16 +++--
 .../Form/FormButton/FormButton.test.tsx       | 46 ------------
 src/components/Form/FormButton/index.tsx      | 22 ------
 .../FormSubmitButton.test.tsx                 | 70 +++++++++++++++++++
 .../Form/FormSubmitButton/index.tsx           | 23 ++++++
 src/components/Form/index.tsx                 |  4 +-
 9 files changed, 114 insertions(+), 83 deletions(-)
 delete mode 100644 src/components/Form/FormButton/FormButton.test.tsx
 delete mode 100644 src/components/Form/FormButton/index.tsx
 create mode 100644 src/components/Form/FormSubmitButton/FormSubmitButton.test.tsx
 create mode 100644 src/components/Form/FormSubmitButton/index.tsx

diff --git a/package.json b/package.json
index 4af1887d..14760d53 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.2.6",
+	"version": "0.2.7",
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/dassana-io"
 	},
diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
index 761c2386..e5fe529e 100644
--- a/src/__snapshots__/storybook.test.ts.snap
+++ b/src/__snapshots__/storybook.test.ts.snap
@@ -148,16 +148,16 @@ exports[`Storyshots Form Default 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="container-0-2-4"
+    className="container-0-2-1"
   >
     <div>
       <div
-        className="container-0-2-5 required-0-2-6"
+        className="container-0-2-2 required-0-2-3"
       >
         First Name
       </div>
       <div
-        className="container-0-2-7 container-d0-0-2-10"
+        className="container-0-2-4 container-d0-0-2-7"
       >
         <input
           className="ant-input"
@@ -174,12 +174,12 @@ exports[`Storyshots Form Default 1`] = `
     </div>
     <div>
       <div
-        className="container-0-2-5"
+        className="container-0-2-2"
       >
         Last Name
       </div>
       <div
-        className="container-0-2-7 container-d1-0-2-11"
+        className="container-0-2-4 container-d1-0-2-8"
       >
         <input
           className="ant-input"
@@ -196,7 +196,7 @@ exports[`Storyshots Form Default 1`] = `
     </div>
     <button
       className="ant-btn ant-btn-default"
-      disabled={false}
+      disabled={true}
       onClick={[Function]}
       type="button"
     >
diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx
index e3cf4fcf..78a93bf5 100644
--- a/src/components/Form/Form.stories.tsx
+++ b/src/components/Form/Form.stories.tsx
@@ -20,7 +20,7 @@ const Template: Story<FormProps<UserModel>> = (args: FormProps<UserModel>) => (
 	<Form {...args} initialValues={{ firstName: 'First Name' }}>
 		<Form.Input label='First Name' name='firstName' required />
 		<Form.Input label='Last Name' name='lastName' />
-		<Form.Button />
+		<Form.SubmitButton>Submit</Form.SubmitButton>
 	</Form>
 )
 
diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx
index d9fdb0b0..59146043 100644
--- a/src/components/Form/Form.test.tsx
+++ b/src/components/Form/Form.test.tsx
@@ -1,5 +1,5 @@
 import FieldContext from './FieldContext'
-import FormButton from './FormButton'
+import FormSubmitButton from './FormSubmitButton'
 import React from 'react'
 import Form, { FormProps } from './index'
 import { mount, shallow, ShallowWrapper } from 'enzyme'
@@ -9,6 +9,12 @@ jest.mock('react-hook-form', () => ({
 	useForm: () => ({
 		handleSubmit: jest.fn(),
 		reset: mockReset
+	}),
+	useFormContext: () => ({
+		formState: {
+			isDirty: true
+		},
+		handleSubmit: jest.fn()
 	})
 }))
 
@@ -25,7 +31,7 @@ const mockReset = jest.fn()
 beforeEach(() => {
 	wrapper = shallow(
 		<Form initialValues={mockInitialValues} onSubmit={mockOnSubmit}>
-			<FormButton />
+			<FormSubmitButton>Submit</FormSubmitButton>
 		</Form>
 	)
 })
@@ -36,7 +42,7 @@ describe('Form', () => {
 	})
 
 	it('renders children properly', () => {
-		expect(wrapper.find(FormButton)).toHaveLength(1)
+		expect(wrapper.find(FormSubmitButton)).toHaveLength(1)
 	})
 
 	it('passes the correct props to FieldContext provider', () => {
@@ -52,7 +58,7 @@ describe('Form', () => {
 	it('correctly defaults initial values to empty object if none is passed in', () => {
 		wrapper = shallow(
 			<Form onSubmit={mockOnSubmit}>
-				<FormButton />
+				<FormSubmitButton>Submit</FormSubmitButton>
 			</Form>
 		)
 
@@ -64,7 +70,7 @@ describe('Form', () => {
 	it('correctly updates initial values', () => {
 		const form = mount(
 			<Form onSubmit={mockOnSubmit}>
-				<FormButton />
+				<FormSubmitButton>Submit</FormSubmitButton>
 			</Form>
 		)
 
diff --git a/src/components/Form/FormButton/FormButton.test.tsx b/src/components/Form/FormButton/FormButton.test.tsx
deleted file mode 100644
index 9caa0d5e..00000000
--- a/src/components/Form/FormButton/FormButton.test.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import Button from '../../Button'
-import FieldContext from '../FieldContext'
-import React from 'react'
-import FormButton, { FormButtonProps } from './index'
-import { mount, ReactWrapper } from 'enzyme'
-
-jest.mock('react-hook-form', () => ({
-	...jest.requireActual('react-hook-form'),
-	useFormContext: () => ({
-		handleSubmit: (onSubmit: Function) => onSubmit()
-	})
-}))
-
-let wrapper: ReactWrapper<FormButtonProps>
-
-const mockOnSubmit = jest.fn()
-
-beforeEach(() => {
-	wrapper = mount(
-		<FieldContext.Provider
-			value={{ initialValues: {}, loading: true, onSubmit: mockOnSubmit }}
-		>
-			<FormButton />
-		</FieldContext.Provider>
-	)
-})
-
-afterEach(() => {
-	jest.resetAllMocks()
-})
-
-describe('FormButton', () => {
-	it('renders', () => {
-		expect(wrapper).toHaveLength(1)
-	})
-
-	it('calls onSubmit when clicked', () => {
-		wrapper.simulate('click')
-
-		expect(mockOnSubmit).toHaveBeenCalledTimes(1)
-	})
-
-	it('correctly passes loading from field context', () => {
-		expect(wrapper.find(Button).props().loading).toBe(true)
-	})
-})
diff --git a/src/components/Form/FormButton/index.tsx b/src/components/Form/FormButton/index.tsx
deleted file mode 100644
index ca66baa2..00000000
--- a/src/components/Form/FormButton/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import FieldContext from '../FieldContext'
-import { useFormContext } from 'react-hook-form'
-import Button, { ButtonProps } from '../../Button'
-import React, { FC, useContext } from 'react'
-
-export type FormButtonProps = Omit<
-	ButtonProps,
-	'loading' | 'onClick' | 'children'
->
-
-const FormButton: FC<FormButtonProps> = (props: FormButtonProps) => {
-	const { handleSubmit } = useFormContext()
-	const { loading, onSubmit } = useContext(FieldContext)
-
-	return (
-		<Button loading={loading} onClick={handleSubmit(onSubmit)} {...props}>
-			Submit
-		</Button>
-	)
-}
-
-export default FormButton
diff --git a/src/components/Form/FormSubmitButton/FormSubmitButton.test.tsx b/src/components/Form/FormSubmitButton/FormSubmitButton.test.tsx
new file mode 100644
index 00000000..85360c2e
--- /dev/null
+++ b/src/components/Form/FormSubmitButton/FormSubmitButton.test.tsx
@@ -0,0 +1,70 @@
+import * as reactHookForm from 'react-hook-form'
+import Button from '../../Button'
+import FieldContext from '../FieldContext'
+import React from 'react'
+import FormSubmitButton, { FormButtonProps } from './index'
+import { mount, ReactWrapper } from 'enzyme'
+
+let wrapper: ReactWrapper<FormButtonProps>
+
+const mockOnSubmit = jest.fn()
+
+const getMockFormContext = (isDirty = true) =>
+	({
+		formState: {
+			isDirty
+		},
+		handleSubmit: (onSubmit: any) => onSubmit()
+	} as reactHookForm.UseFormMethods)
+
+const getWrapper = () => (
+	<FieldContext.Provider
+		value={{ initialValues: {}, loading: true, onSubmit: mockOnSubmit }}
+	>
+		<FormSubmitButton>Submit</FormSubmitButton>
+	</FieldContext.Provider>
+)
+
+beforeEach(() => {
+	jest.spyOn(reactHookForm, 'useFormContext').mockImplementation(() =>
+		getMockFormContext()
+	)
+
+	wrapper = mount(getWrapper())
+})
+
+afterEach(() => {
+	jest.resetAllMocks()
+})
+
+describe('FormButton', () => {
+	it('renders', () => {
+		expect(wrapper).toHaveLength(1)
+	})
+
+	it('calls onSubmit when clicked', () => {
+		wrapper.simulate('click')
+
+		expect(mockOnSubmit).toHaveBeenCalledTimes(1)
+	})
+
+	it('correctly passes loading from field context', () => {
+		expect(wrapper.find(Button).props().loading).toBe(true)
+	})
+
+	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)
+		)
+
+		wrapper = mount(getWrapper())
+
+		expect(wrapper.find(Button).props().disabled).toBe(true)
+	})
+})
diff --git a/src/components/Form/FormSubmitButton/index.tsx b/src/components/Form/FormSubmitButton/index.tsx
new file mode 100644
index 00000000..6f145123
--- /dev/null
+++ b/src/components/Form/FormSubmitButton/index.tsx
@@ -0,0 +1,23 @@
+import FieldContext from '../FieldContext'
+import { useFormContext } from 'react-hook-form'
+import Button, { ButtonProps } from '../../Button'
+import React, { FC, useContext } from 'react'
+
+export type FormButtonProps = Omit<ButtonProps, 'loading' | 'onClick'>
+
+const FormSubmitButton: FC<FormButtonProps> = (props: FormButtonProps) => {
+	const { handleSubmit, formState } = useFormContext()
+	const { loading, onSubmit } = useContext(FieldContext)
+	const { isDirty } = formState
+
+	return (
+		<Button
+			disabled={!isDirty}
+			loading={loading}
+			onClick={handleSubmit(onSubmit)}
+			{...props}
+		/>
+	)
+}
+
+export default FormSubmitButton
diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx
index 300de4df..8a2e9639 100644
--- a/src/components/Form/index.tsx
+++ b/src/components/Form/index.tsx
@@ -1,8 +1,8 @@
 import { createUseStyles } from 'react-jss'
 import FieldContext from './FieldContext'
 import { FieldValues } from 'react-hook-form/dist/types/form'
-import FormButton from './FormButton'
 import FormInput from './FormInput'
+import FormSubmitButton from './FormSubmitButton'
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form'
 import React, { ReactNode, useEffect } from 'react'
 
@@ -49,7 +49,7 @@ function Form<Model>({
 	)
 }
 
-Form.Button = FormButton
+Form.SubmitButton = FormSubmitButton
 Form.Input = FormInput
 
 export default Form

From e33cf3603505457aaa20eb3fc881843d275689a6 Mon Sep 17 00:00:00 2001
From: github-actions <github-actions@users.noreply.github.com>
Date: Tue, 8 Sep 2020 10:49:26 -0700
Subject: [PATCH 2/2] feat #77 - Fix failing snapshot test

---
 src/__snapshots__/storybook.test.ts.snap | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
index e5fe529e..1dde3846 100644
--- a/src/__snapshots__/storybook.test.ts.snap
+++ b/src/__snapshots__/storybook.test.ts.snap
@@ -148,16 +148,16 @@ exports[`Storyshots Form Default 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="container-0-2-1"
+    className="container-0-2-4"
   >
     <div>
       <div
-        className="container-0-2-2 required-0-2-3"
+        className="container-0-2-5 required-0-2-6"
       >
         First Name
       </div>
       <div
-        className="container-0-2-4 container-d0-0-2-7"
+        className="container-0-2-7 container-d0-0-2-10"
       >
         <input
           className="ant-input"
@@ -174,12 +174,12 @@ exports[`Storyshots Form Default 1`] = `
     </div>
     <div>
       <div
-        className="container-0-2-2"
+        className="container-0-2-5"
       >
         Last Name
       </div>
       <div
-        className="container-0-2-4 container-d1-0-2-8"
+        className="container-0-2-7 container-d1-0-2-11"
       >
         <input
           className="ant-input"