@wix/patterns-fields 1.107.0 → 1.109.0

package/src/__tests__/components/date-input/cell-date-input.spec.tsx

@@ -0,0 +1,100 @@
+import '../../../testkit/test-polyfills';
+
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+import { CellDateInput } from '../../../components/date-input/cell-date-input';
+
+const setup = (value: Date | null = new Date(2024, 0, 15)) => {
+  const onChange = jest.fn();
+  const onEmpty = jest.fn();
+  const onEnter = jest.fn();
+  const { container } = render(
+    <CellDateInput
+      value={value}
+      onChange={onChange}
+      onEmpty={onEmpty}
+      onEnter={onEnter}
+    />,
+  );
+  const input = container.querySelector('input')!;
+  return { input, onChange, onEmpty, onEnter };
+};
+
+describe('CellDateInput', () => {
+  it('reports an emptied input through onEmpty instead of emitting a date', () => {
+    const { input, onChange, onEmpty } = setup();
+
+    fireEvent.change(input, { target: { value: '' } });
+
+    expect(onEmpty).toHaveBeenCalledTimes(1);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('reports Enter on an emptied input through onEnter with null', () => {
+    const { input, onChange, onEnter } = setup();
+
+    fireEvent.change(input, { target: { value: '' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(onEnter).toHaveBeenCalledWith(null);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('reports Enter on a typed date through onEnter with the date', () => {
+    const { input, onEnter } = setup();
+
+    fireEvent.change(input, { target: { value: '02/20/2024' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(onEnter).toHaveBeenCalledWith(new Date(2024, 1, 20));
+  });
+
+  describe('with onEnter and no onEmpty', () => {
+    const setupEnterOnly = () => {
+      const onEnter = jest.fn();
+      const { container } = render(
+        <CellDateInput value={new Date(2024, 0, 15)} onEnter={onEnter} />,
+      );
+      const input = container.querySelector('input')!;
+      return { input, onEnter };
+    };
+
+    it('reports Enter on a typed date through onEnter with the date', () => {
+      const { input, onEnter } = setupEnterOnly();
+
+      fireEvent.change(input, { target: { value: '02/20/2024' } });
+      fireEvent.keyDown(input, { key: 'Enter' });
+
+      expect(onEnter).toHaveBeenCalledWith(new Date(2024, 1, 20));
+    });
+
+    it('reports Enter on an emptied input through onEnter with null', () => {
+      const { input, onEnter } = setupEnterOnly();
+
+      fireEvent.change(input, { target: { value: '' } });
+      fireEvent.keyDown(input, { key: 'Enter' });
+
+      expect(onEnter).toHaveBeenCalledWith(null);
+    });
+  });
+
+  it('emits a typed date through onChange', () => {
+    const { input, onChange, onEmpty } = setup();
+
+    fireEvent.change(input, { target: { value: '02/20/2024' } });
+
+    expect(onChange).toHaveBeenCalledWith(new Date(2024, 1, 20));
+    expect(onEmpty).not.toHaveBeenCalled();
+  });
+
+  it('emits a day picked from the calendar while the input is empty', () => {
+    const { input, onChange, onEmpty } = setup(null);
+
+    fireEvent.click(input);
+    fireEvent.click(document.querySelector('[data-date]')!);
+
+    expect(onChange).toHaveBeenCalledWith(expect.any(Date));
+    expect(onEmpty).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/components/date-input/date-picker-internals.spec.tsx

@@ -0,0 +1,69 @@
+import '../../../testkit/test-polyfills';
+
+import React from 'react';
+import { act, fireEvent, render } from '@testing-library/react';
+import { DatePicker } from '@wix/design-system';
+
+import { onSameDayCalendarPick } from '../../../components/date-input/date-picker-internals';
+
+const setup = () => {
+  const onChange = jest.fn();
+  const onPick = jest.fn();
+  const pickerRef = React.createRef<DatePicker>();
+  render(
+    <DatePicker
+      ref={pickerRef}
+      value={new Date(2024, 0, 15, 3, 30)}
+      onChange={onChange}
+    />,
+  );
+  const undo = onSameDayCalendarPick(pickerRef.current, onPick);
+  const clickDay = (day: number) => {
+    act(() => {
+      pickerRef.current!.openCalendar();
+    });
+    fireEvent.click(
+      document.querySelector(
+        `[data-outsideday='false'][data-date='2024-0-${day}']`,
+      )!,
+    );
+  };
+  return { onChange, onPick, undo, clickDay };
+};
+
+describe('onSameDayCalendarPick', () => {
+  it('reports a pick of the value day, which WDS skips', () => {
+    const { onChange, onPick, clickDay } = setup();
+
+    clickDay(15);
+
+    expect(onPick).toHaveBeenCalledTimes(1);
+    expect(onPick).toHaveBeenCalledWith(new Date(2024, 0, 15, 12));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('does not report a pick of another day, which WDS sends to onChange', () => {
+    const { onChange, onPick, clickDay } = setup();
+
+    clickDay(20);
+
+    expect(onPick).not.toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith(new Date(2024, 0, 20, 3, 30));
+  });
+
+  it('stops reporting once undone', () => {
+    const { onPick, undo, clickDay } = setup();
+
+    undo();
+    clickDay(15);
+
+    expect(onPick).not.toHaveBeenCalled();
+  });
+
+  it('does nothing without a picker', () => {
+    const onPick = jest.fn();
+
+    expect(() => onSameDayCalendarPick(null, onPick)()).not.toThrow();
+    expect(onPick).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/components/date-input/form-date-input.spec.tsx

@@ -22,6 +22,147 @@ const setup = (
 };
 
 describe('FormDateInput field', () => {
+  it.each(['reset', 'setValue'] as const)(
+    'clears stale errors on %s, even when restoring the same value',
+    async (method) => {
+      const driver = setup({ initialValue: '2026-09-16' });
+      const initialText = await driver.tk.getValue();
+      await driver.tk.enterText('not-a-date');
+      await driver.tk.blur();
+      await driver.submit();
+      expect(driver.onSubmit).not.toHaveBeenCalled();
+
+      await driver[method]('2026-09-16');
+      expect(await driver.tk.getValue()).toBe(initialText);
+      expect(await driver.tk.hasError()).toBe(false);
+      await driver.submit();
+      expect(driver.onSubmit).toHaveBeenCalledTimes(1);
+      expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBe(
+        '2026-09-16',
+      );
+    },
+  );
+
+  it.each(['reset', 'setValue'] as const)(
+    'shows and submits an externally replaced date via %s',
+    async (method) => {
+      const driver = setup({ initialValue: '2026-09-16' });
+      const initialText = await driver.tk.getValue();
+      await driver.tk.enterText('not-a-date');
+      await driver.tk.blur();
+
+      await driver[method]('2026-09-18');
+      expect(await driver.tk.getValue()).not.toBe(initialText);
+      expect(await driver.tk.getValue()).not.toBe('not-a-date');
+      expect(await driver.tk.hasError()).toBe(false);
+      await driver.submit();
+      expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBe(
+        '2026-09-18',
+      );
+    },
+  );
+
+  it('keeps the error when another field is replaced or removed', async () => {
+    const driver = setup({ initialValue: '2026-09-16' });
+    await driver.tk.enterText('not-a-date');
+    await driver.tk.blur();
+    await driver.setValue('2026-09-18', 'anotherField');
+    await driver.unregister('anotherField');
+    await driver.submit();
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+  });
+
+  it.each([false, true])(
+    'resets invalid input to an empty value (required=%s)',
+    async (required) => {
+      const driver = setup({
+        field: makeField({ type: 'DATE', validation: { required } }),
+      });
+      await driver.tk.enterText('not-a-date');
+      await driver.tk.blur();
+      await driver.reset(null);
+      expect(await driver.tk.getValue()).toBe('');
+      await driver.submit();
+      expect(driver.onSubmit).toHaveBeenCalledTimes(required ? 0 : 1);
+      if (!required) {
+        expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBeNull();
+      }
+    },
+  );
+
+  it.each([false, true])(
+    'blocks submit for invalid text over a valid date (required=%s)',
+    async (required) => {
+      const driver = setup({
+        field: makeField({ type: 'DATE', validation: { required } }),
+        initialValue: '2026-09-16',
+      });
+
+      await driver.tk.enterText('not-a-date');
+      await driver.tk.blur();
+      expect(await driver.tk.hasError()).toBe(true);
+
+      await driver.submit();
+
+      expect(driver.onSubmit).not.toHaveBeenCalled();
+    },
+  );
+
+  it('allows submit after correcting an invalid date', async () => {
+    const driver = setup({ initialValue: '2026-09-16' });
+    await driver.tk.enterText('not-a-date');
+    await driver.tk.blur();
+    await driver.submit();
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+
+    await driver.tk.enterText('09/17/2026');
+    await driver.tk.blur();
+    await driver.submit();
+
+    expect(await driver.tk.hasError()).toBe(false);
+    expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBe(
+      '2026-09-17',
+    );
+  });
+
+  it.each([false, true])(
+    'handles clearing an invalid date (required=%s)',
+    async (required) => {
+      const driver = setup({
+        field: makeField({ type: 'DATE', validation: { required } }),
+        initialValue: '2026-09-16',
+      });
+      await driver.tk.enterText('not-a-date');
+      await driver.tk.blur();
+      await driver.tk.enterText('');
+      await driver.tk.blur();
+      await driver.submit();
+
+      expect(await driver.tk.hasError()).toBe(required);
+      expect(driver.onSubmit).toHaveBeenCalledTimes(required ? 0 : 1);
+      if (!required) {
+        expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBeNull();
+      }
+    },
+  );
+
+  it('allows submit after replacing invalid text with a calendar selection', async () => {
+    const driver = setup({ initialValue: '2026-09-16' });
+    await driver.tk.enterText('not-a-date');
+    await driver.tk.blur();
+    await driver.submit();
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+
+    await driver.tk.calendarPopover.open();
+    await driver.tk.selectDate(new Date(2026, 8, 17));
+    await driver.submit();
+
+    expect(await driver.tk.hasError()).toBe(false);
+    expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBe(
+      '2026-09-17',
+    );
+  });
+
   it('renders the field displayName as the label', async () => {
     const driver = setup();
 

package/src/__tests__/components/datetime-input/form-date-time.spec.tsx

@@ -22,6 +22,200 @@ const setup = (
 };
 
 describe('FormDateTime field', () => {
+  it.each(['reset', 'setValue'] as const)(
+    'clears stale errors on %s, even when restoring the same value',
+    async (method) => {
+      const driver = setup({ initialValue: '2026-09-16T12:00:00.000Z' });
+      const initialText = await driver.tk.getDateText();
+      await driver.tk.enterTimeText('not-a-time');
+      await driver.tk.blurTime();
+      await driver.tk.enterDateText('not-a-date');
+      await driver.tk.blurDate();
+      await driver.submit();
+      expect(driver.onSubmit).not.toHaveBeenCalled();
+
+      await driver[method]('2026-09-16T12:00:00.000Z');
+      expect(await driver.tk.getDateText()).toBe(initialText);
+      expect(await driver.tk.dateHasError()).toBe(false);
+      expect(await driver.tk.timeHasError()).toBe(false);
+      await driver.submit();
+      expect(driver.onSubmit).toHaveBeenCalledTimes(1);
+      expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBe(
+        '2026-09-16T12:00:00.000Z',
+      );
+    },
+  );
+
+  it.each(['reset', 'setValue'] as const)(
+    'shows and submits an externally replaced date via %s',
+    async (method) => {
+      const driver = setup({ initialValue: '2026-09-16T12:00:00.000Z' });
+      const initialText = await driver.tk.getDateText();
+      await driver.tk.enterTimeText('not-a-time');
+      await driver.tk.blurTime();
+      await driver.tk.enterDateText('not-a-date');
+      await driver.tk.blurDate();
+
+      await driver[method]('2026-09-18T12:00:00.000Z');
+      expect(await driver.tk.getDateText()).not.toBe(initialText);
+      expect(await driver.tk.getDateText()).not.toBe('not-a-date');
+      expect(await driver.tk.dateHasError()).toBe(false);
+      expect(await driver.tk.timeHasError()).toBe(false);
+      await driver.submit();
+      expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBe(
+        '2026-09-18T12:00:00.000Z',
+      );
+    },
+  );
+
+  it('keeps the error when another field is replaced or removed', async () => {
+    const driver = setup({ initialValue: '2026-09-16T12:00:00.000Z' });
+    await driver.tk.enterDateText('not-a-date');
+    await driver.tk.blurDate();
+    await driver.setValue('2026-09-18T12:00:00.000Z', 'anotherField');
+    await driver.unregister('anotherField');
+    await driver.submit();
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+  });
+
+  it.each([false, true])(
+    'resets invalid input to an empty value (required=%s)',
+    async (required) => {
+      const driver = setup({
+        field: makeField({ type: 'DATETIME', validation: { required } }),
+      });
+      await driver.tk.enterDateText('not-a-date');
+      await driver.tk.blurDate();
+      await driver.reset(null);
+      expect(await driver.tk.getDateText()).toBe('');
+      await driver.submit();
+      expect(driver.onSubmit).toHaveBeenCalledTimes(required ? 0 : 1);
+      if (!required) {
+        expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBeNull();
+      }
+    },
+  );
+
+  it.each([false, true])(
+    'blocks submit for an invalid date (required=%s)',
+    async (required) => {
+      const driver = setup({
+        field: makeField({ type: 'DATETIME', validation: { required } }),
+        initialValue: '2026-09-16T12:00:00.000Z',
+      });
+      await driver.tk.enterDateText('not-a-date');
+      await driver.tk.blurDate();
+      expect(await driver.tk.dateHasError()).toBe(true);
+      expect(await driver.tk.timeHasError()).toBe(false);
+
+      await driver.submit();
+
+      expect(driver.onSubmit).not.toHaveBeenCalled();
+      expect(await driver.tk.timeHasError()).toBe(false);
+    },
+  );
+
+  it('allows submit after correcting an invalid date', async () => {
+    const driver = setup({ initialValue: '2026-09-16T12:00:00.000Z' });
+    await driver.tk.enterDateText('not-a-date');
+    await driver.tk.blurDate();
+    await driver.submit();
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+
+    await driver.tk.enterDateText('09/17/2026');
+    await driver.tk.blurDate();
+    await driver.submit();
+
+    expect(await driver.tk.dateHasError()).toBe(false);
+    expect(driver.onSubmit).toHaveBeenCalledTimes(1);
+    expect(
+      new Date(driver.onSubmit.mock.calls[0][0][driver.field.id]).getDate(),
+    ).toBe(17);
+  });
+
+  it('blocks an invalid time and allows submit after correcting it', async () => {
+    const driver = setup({ initialValue: '2026-09-16T12:00:00.000Z' });
+    await driver.tk.enterTimeText('not-a-time');
+    await driver.tk.blurTime();
+    expect(await driver.tk.timeHasError()).toBe(true);
+    expect(await driver.tk.dateHasError()).toBe(false);
+    await driver.submit();
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+    expect(await driver.tk.dateHasError()).toBe(false);
+
+    await driver.tk.enterTimeText('14:30');
+    await driver.tk.blurTime();
+    await driver.submit();
+
+    expect(await driver.tk.timeHasError()).toBe(false);
+    expect(driver.onSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not clear an invalid date when the time changes', async () => {
+    const driver = setup({ initialValue: '2026-09-16T12:00:00.000Z' });
+    await driver.tk.enterDateText('not-a-date');
+    await driver.tk.blurDate();
+    await driver.tk.enterTimeText('14:30');
+    await driver.tk.blurTime();
+
+    expect(await driver.tk.dateHasError()).toBe(true);
+    await driver.submit();
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('shows each input’s own message when both inputs are invalid', async () => {
+    const driver = setup({ initialValue: '2026-09-16T12:00:00.000Z' });
+    await driver.tk.enterDateText('not-a-date');
+    await driver.tk.blurDate();
+    await driver.tk.enterTimeText('not-a-time');
+    await driver.tk.blurTime();
+    await driver.submit();
+
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+    expect(await driver.tk.getDateErrorMessage()).toContain(
+      'cairo.customFields.fieldType.date.invalid.value',
+    );
+    expect(await driver.tk.getTimeErrorMessage()).toBe(
+      'CMS.formTime.invalidMessage',
+    );
+  });
+
+  it('does not clear an invalid time when the date changes', async () => {
+    const driver = setup({ initialValue: '2026-09-16T12:00:00.000Z' });
+    await driver.tk.enterTimeText('not-a-time');
+    await driver.tk.blurTime();
+    await driver.tk.enterDateText('09/17/2026');
+    await driver.tk.blurDate();
+
+    expect(await driver.tk.timeHasError()).toBe(true);
+    await driver.submit();
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+  });
+
+  it.each([false, true])(
+    'handles clearing an invalid date and time (required=%s)',
+    async (required) => {
+      const driver = setup({
+        field: makeField({ type: 'DATETIME', validation: { required } }),
+        initialValue: '2026-09-16T12:00:00.000Z',
+      });
+      await driver.tk.enterDateText('not-a-date');
+      await driver.tk.blurDate();
+      await driver.tk.enterTimeText('');
+      await driver.tk.blurTime();
+      await driver.tk.enterDateText('');
+      await driver.tk.blurDate();
+      await driver.submit();
+
+      expect(driver.onSubmit).toHaveBeenCalledTimes(required ? 0 : 1);
+      if (!required) {
+        expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBeNull();
+        expect(await driver.tk.dateHasError()).toBe(false);
+        expect(await driver.tk.timeHasError()).toBe(false);
+      }
+    },
+  );
+
   it('renders the field displayName as the label', async () => {
     const driver = setup();
 

package/src/__tests__/components/text/form-short-text.spec.tsx

@@ -61,6 +61,33 @@ describe('FormShortText field', () => {
     expect(await driver.tk.getCharCountLeft()).toBe(7);
   });
 
+  it.each([undefined, null])(
+    'shows the full character allowance when the initial value is %p',
+    async (initialValue) => {
+      const driver = new FormFieldDriver({
+        Component: FormShortText,
+        UniDriverFactory: FormShortTextDriver,
+        dataHook: (f) => `short-text-field-${f.id}`,
+        field: makeField({
+          validation: { required: true, stringLengthRange: { maxLength: 10 } },
+        }),
+        initialValue: initialValue as unknown as string,
+      });
+      driver.render();
+
+      expect(await driver.tk.getValue()).toBe('');
+      expect(await driver.tk.getCharCountLeft()).toBe(10);
+
+      await driver.tk.enterText('abc');
+
+      expect(await driver.tk.getCharCountLeft()).toBe(7);
+
+      await driver.tk.enterText('');
+
+      expect(await driver.tk.getCharCountLeft()).toBe(10);
+    },
+  );
+
   it('marks the field as required when validation.required is true', async () => {
     const driver = setup({
       field: makeField({ validation: { required: true } }),

package/src/__tests__/form-field.driver.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { act, fireEvent, render, RenderResult } from '@testing-library/react';
 import Chance from 'chance';
 import { useForm } from '@wix/bex-core/form';
-import type { Control, FieldValues } from '@wix/bex-core/form';
+import type { Control, FieldValues, UseFormReturn } from '@wix/bex-core/form';
 import type { Field } from '@wix/bex-core';
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import type { BaseUniDriver } from '@wix/wix-ui-test-utils/base-driver';
@@ -12,7 +12,6 @@ import { PatternsFieldsTestProvider } from '../testkit/patterns-fields-test-prov
 import type { BaseInputProps } from '../types/base-input';
 
 const chance = new Chance();
-const noop = () => {};
 const SUBMIT_HOOK = 'form-field-driver-submit';
 
 type UniDriverFactory<U> = (
@@ -31,9 +30,11 @@ export interface FormFieldDriverOptions<U extends BaseUniDriver, T> {
 
 export class FormFieldDriver<U extends BaseUniDriver, T> {
   private _renderResult?: RenderResult;
+  private form?: UseFormReturn<FieldValues>;
   readonly field: Field;
   readonly initialValue: T;
   readonly onChange = jest.fn<void, [T]>();
+  readonly onSubmit = jest.fn<void, [FieldValues]>();
   private readonly opts: FormFieldDriverOptions<U, T>;
   private readonly _dataHook: string;
 
@@ -67,6 +68,24 @@ export class FormFieldDriver<U extends BaseUniDriver, T> {
     });
   }
 
+  async reset(value: T): Promise<void> {
+    await act(async () => {
+      this.form!.reset({ [this.field.id]: value });
+    });
+  }
+
+  async setValue(value: T, name = this.field.id): Promise<void> {
+    await act(async () => {
+      this.form!.setValue(name, value, { shouldValidate: true });
+    });
+  }
+
+  async unregister(name: string): Promise<void> {
+    await act(async () => {
+      this.form!.unregister(name);
+    });
+  }
+
   render() {
     const { Component } = this.opts;
     const { field, initialValue, _dataHook: dataHook, onChange } = this;
@@ -74,6 +93,10 @@ export class FormFieldDriver<U extends BaseUniDriver, T> {
       <TestForm
         field={field}
         initialValue={initialValue}
+        onSubmit={this.onSubmit}
+        onFormReady={(form) => {
+          this.form = form;
+        }}
         renderField={(control) => (
           <Component
             field={field}
@@ -93,20 +116,25 @@ export class FormFieldDriver<U extends BaseUniDriver, T> {
 interface TestFormProps<T> {
   field: Field;
   initialValue: T;
+  onSubmit: (values: FieldValues) => void;
+  onFormReady: (form: UseFormReturn<FieldValues>) => void;
   renderField: (control: Control<FieldValues>) => React.ReactElement;
 }
 
 const TestForm = <T,>({
   field,
   initialValue,
+  onSubmit,
+  onFormReady,
   renderField,
 }: TestFormProps<T>) => {
   const methods = useForm<FieldValues>({
     mode: 'onChange',
     defaultValues: { [field.id]: initialValue },
   });
+  onFormReady(methods);
   return (
-    <form onSubmit={methods.handleSubmit(noop)}>
+    <form onSubmit={methods.handleSubmit(onSubmit)}>
       {renderField(methods.control)}
       <button type="submit" data-hook={SUBMIT_HOOK} />
     </form>