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..1dde3846 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -196,7 +196,7 @@ exports[`Storyshots Form Default 1`] = ` - ) -} - -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 + +const mockOnSubmit = jest.fn() + +const getMockFormContext = (isDirty = true) => + ({ + formState: { + isDirty + }, + handleSubmit: (onSubmit: any) => onSubmit() + } as reactHookForm.UseFormMethods) + +const getWrapper = () => ( + + Submit + +) + +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 + +const FormSubmitButton: FC = (props: FormButtonProps) => { + const { handleSubmit, formState } = useFormContext() + const { loading, onSubmit } = useContext(FieldContext) + const { isDirty } = formState + + return ( +