[@mantine/form] Add form.watch tests

packages/@mantine/form/src/tests/watch.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { FormFieldSubscriber } from '../types';
+import { useForm } from '../use-form';
+
+function TestComponent({ watch }: { watch: FormFieldSubscriber<any, any> }) {
+  const form = useForm({ initialValues: { name: 'test', area: 'area' } });
+  form.watch('name', watch);
+
+  return (
+    <>
+      <input {...form.getInputProps('name')} aria-label="name" />
+      <input {...form.getInputProps('area')} aria-label="area" />
+    </>
+  );
+}
+
+describe('@mantine/form/watch', () => {
+  it('allows observing field changes', async () => {
+    const spy = jest.fn();
+    render(<TestComponent watch={spy} />);
+    expect(spy).not.toHaveBeenCalled();
+
+    await userEvent.type(screen.getByLabelText('name'), '1');
+
+    expect(spy).toHaveBeenCalledWith({
+      previousValue: 'test',
+      value: 'test1',
+      touched: true,
+      dirty: true,
+    });
+
+    await userEvent.type(screen.getByLabelText('name'), '{backspace}');
+
+    expect(spy).toHaveBeenCalledWith({
+      previousValue: 'test1',
+      value: 'test',
+      touched: true,
+      dirty: false,
+    });
+  });
+
+  it('does now call subscriber function when other field changes', async () => {
+    const spy = jest.fn();
+    render(<TestComponent watch={spy} />);
+    expect(spy).not.toHaveBeenCalled();
+
+    await userEvent.type(screen.getByLabelText('area'), '1');
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+});