Write test for FormContext's onChange behavior

Author: alcar

src/components/__mocks__/mockSchema.ts

@@ -0,0 +1,25 @@
+const mockSchema = {
+  $id: 'https://example.com/mock.schema.json',
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  title: 'Mock',
+  type: 'object',
+  properties: {
+    firstField: {
+      type: 'string',
+      description: 'The first field.',
+      title: 'First field',
+    },
+    secondField: {
+      type: 'string',
+      description: 'The second field.',
+      title: 'Second field',
+    },
+    thirdField: {
+      type: 'string',
+      description: 'The third field.',
+      title: 'Third field',
+    },
+  },
+}
+
+export default mockSchema

src/components/__tests__/FormContext.test.tsx

@@ -0,0 +1,63 @@
+import { fireEvent, render } from '@vtex/test-tools/react'
+import React from 'react'
+import { Controller } from 'react-hook-form'
+
+import { useObject } from '../../hooks/useObject'
+import mockSchema from '../__mocks__/mockSchema'
+import { FormContext } from '../FormContext'
+
+const ObjectRenderer = (props: { pointer: string }) => {
+  const fields = useObject({ pointer: props.pointer })
+
+  return (
+    <>
+      {fields.map(field => {
+        const fieldJsonSchema = field.getObject()
+
+        return (
+          <Controller
+            as={<input aria-label={fieldJsonSchema.title} name={field.name} />}
+            control={field.formContext.control}
+            defaultValue=""
+            key={field.pointer}
+            name={field.pointer}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+test('should call onChange when something changes', () => {
+  const changeHandlerMock = jest.fn()
+
+  const { getByLabelText } = render(
+    <FormContext onChange={changeHandlerMock} schema={mockSchema}>
+      <ObjectRenderer pointer="#" />
+    </FormContext>
+  )
+
+  expect(changeHandlerMock).toHaveBeenCalledTimes(0)
+
+  let changeValue
+
+  Object.entries(mockSchema.properties).forEach(
+    ([fieldName, fieldProperties], index) => {
+      const fieldNumber = index + 1
+
+      const inputElement = getByLabelText(fieldProperties.title)
+
+      const fieldNewValue = `new value for field ${fieldNumber}`
+
+      fireEvent.change(inputElement, {
+        target: { value: fieldNewValue },
+      })
+
+      expect(changeHandlerMock).toHaveBeenCalledTimes(fieldNumber)
+
+      changeValue = { ...changeValue, [fieldName]: fieldNewValue }
+
+      expect(changeHandlerMock).toHaveBeenLastCalledWith(changeValue)
+    }
+  )
+})