diff --git a/packages/ui/src/form/Checklist/Checklist.test.tsx b/packages/ui/src/form/Checklist/Checklist.test.tsx index 56d28292ca..0048d2660b 100644 --- a/packages/ui/src/form/Checklist/Checklist.test.tsx +++ b/packages/ui/src/form/Checklist/Checklist.test.tsx @@ -1,14 +1,25 @@ -import { Formik } from 'formik'; +import { Formik, useFormikContext } from 'formik'; import React from 'react'; import { render, screen } from '@bigcommerce/checkout/test-utils'; import { Checklist } from './Checklist'; -const renderChecklist = (children?: React.ReactNode) => +const FormikValue = ({ name }: { name: string }) => { + const { values } = useFormikContext>(); + + return {values[name]}; +}; + +const renderChecklist = (children?: React.ReactNode, defaultSelectedItemId?: string) => render( - - {children} + + <> + + {children} + + + , ); @@ -27,4 +38,16 @@ describe('Checklist', () => { expect(accordion).toHaveClass('form-checklist'); expect(accordion).toHaveClass('optimizedCheckout-form-checklist'); }); + + it('initializes the formik field with the default selected item id', () => { + renderChecklist(undefined, 'standard-shipping'); + + expect(screen.getByTestId('formik-value')).toHaveTextContent('standard-shipping'); + }); + + it('leaves the formik field empty when no default selected item id is provided', () => { + renderChecklist(); + + expect(screen.getByTestId('formik-value')).toBeEmptyDOMElement(); + }); }); diff --git a/packages/ui/src/form/Checklist/Checklist.tsx b/packages/ui/src/form/Checklist/Checklist.tsx index 309ab761a5..0ecbce7269 100644 --- a/packages/ui/src/form/Checklist/Checklist.tsx +++ b/packages/ui/src/form/Checklist/Checklist.tsx @@ -27,6 +27,7 @@ export interface ChecklistContextProps { export const ChecklistContext = createContext(undefined); export const Checklist: FunctionComponent = ({ + defaultSelectedItemId, name, onSelect = noop, ...props @@ -34,6 +35,10 @@ export const Checklist: FunctionComponent = ({ const { setFieldValue } = useFormikContext(); useEffect(() => { + if (defaultSelectedItemId) { + void setFieldValue(name, defaultSelectedItemId); + } + return () => { void setFieldValue(name, ''); }; @@ -55,6 +60,7 @@ export const Checklist: FunctionComponent = ({