@wix/patterns-fields 1.35.0 → 1.37.0

package/src/__tests__/components/rich-content/form-rich-content.spec.tsx

@@ -0,0 +1,80 @@
+import '../../../testkit/test-polyfills';
+
+import { fromPlainText } from '@wix/ricos';
+import type { Field } from '@wix/bex-core';
+
+import { FormRichContent } from '../../../components/rich-content/form-rich-content';
+import { FormRichContentDriver } from '../../../components/rich-content/form-rich-content.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (overrides: { field?: Field; initialValue?: any } = {}) => {
+  const driver = new FormFieldDriver({
+    Component: FormRichContent,
+    UniDriverFactory: FormRichContentDriver,
+    dataHook: (f) => `rich-content-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'RICH_CONTENT' }),
+    initialValue: overrides.initialValue ?? fromPlainText('Hello World'),
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormRichContent field', () => {
+  it('renders the field displayName as the label', async () => {
+    const driver = setup();
+
+    expect(await driver.tk.getLabel()).toBe(driver.field.displayName);
+  });
+
+  it('marks the field as required when validation.required is true', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'RICH_CONTENT',
+        validation: { required: true },
+      }),
+    });
+
+    expect(await driver.tk.isRequired()).toBe(true);
+  });
+
+  it('does not show a type-mismatch suffix for a valid RichContent value', async () => {
+    const driver = setup({ initialValue: fromPlainText('Valid content') });
+
+    expect(await driver.tk.hasSuffix()).toBe(false);
+  });
+
+  it('does not show a type-mismatch suffix for undefined value', async () => {
+    const driver = setup({ initialValue: undefined });
+
+    expect(await driver.tk.hasSuffix()).toBe(false);
+  });
+
+  it('shows a type-mismatch suffix when value is a string', async () => {
+    const driver = setup({ initialValue: 'plain string' });
+
+    expect(await driver.tk.hasSuffix()).toBe(true);
+  });
+
+  it('shows a type-mismatch suffix when value is a number', async () => {
+    const driver = setup({ initialValue: 12345 });
+
+    expect(await driver.tk.hasSuffix()).toBe(true);
+  });
+
+  it('shows a required-field error after the form is submitted with no value', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'RICH_CONTENT',
+        validation: { required: true },
+      }),
+      initialValue: '',
+    });
+
+    await driver.submit();
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.requiredField',
+    );
+  });
+});

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

@@ -0,0 +1,79 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormRichText } from '../../../components/rich-text/form-rich-text';
+import { FormRichTextDriver } from '../../../components/rich-text/form-rich-text.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (overrides: { field?: Field; initialValue?: any } = {}) => {
+  const driver = new FormFieldDriver({
+    Component: FormRichText,
+    UniDriverFactory: FormRichTextDriver,
+    dataHook: (f) => `rich-text-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'RICH_TEXT' }),
+    initialValue: overrides.initialValue ?? '<p>Hello World</p>',
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormRichText field', () => {
+  it('renders the field displayName as the label', async () => {
+    const driver = setup();
+
+    expect(await driver.tk.getLabel()).toBe(driver.field.displayName);
+  });
+
+  it('marks the field as required when validation.required is true', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'RICH_TEXT',
+        validation: { required: true },
+      }),
+    });
+
+    expect(await driver.tk.isRequired()).toBe(true);
+  });
+
+  it('does not show a type-mismatch suffix for a valid string value', async () => {
+    const driver = setup({ initialValue: '<p>Valid content</p>' });
+
+    expect(await driver.tk.hasSuffix()).toBe(false);
+  });
+
+  it('does not show a type-mismatch suffix for undefined value', async () => {
+    const driver = setup({ initialValue: undefined });
+
+    expect(await driver.tk.hasSuffix()).toBe(false);
+  });
+
+  it('shows a type-mismatch suffix when value is a number', async () => {
+    const driver = setup({ initialValue: 12345 });
+
+    expect(await driver.tk.hasSuffix()).toBe(true);
+  });
+
+  it('shows a type-mismatch suffix when value is an object', async () => {
+    const driver = setup({ initialValue: { foo: 'bar' } });
+
+    expect(await driver.tk.hasSuffix()).toBe(true);
+  });
+
+  it('shows a required-field error after the form is submitted with no value', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'RICH_TEXT',
+        validation: { required: true },
+      }),
+      initialValue: '',
+    });
+
+    await driver.submit();
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.requiredField',
+    );
+  });
+});

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

@@ -0,0 +1,63 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormLongText } from '../../../components/text/form-long-text';
+import { FormLongTextDriver } from '../../../components/text/form-long-text.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (overrides: { field?: Field; initialValue?: string } = {}) => {
+  const driver = new FormFieldDriver({
+    Component: FormLongText,
+    UniDriverFactory: FormLongTextDriver,
+    dataHook: (f) => `long-text-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'LONG_TEXT' }),
+    initialValue: overrides.initialValue ?? '',
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormLongText field', () => {
+  it('renders the field displayName as the label', async () => {
+    const driver = setup();
+
+    expect(await driver.tk.getLabel()).toBe(driver.field.displayName);
+  });
+
+  it('shows the initial value from data', async () => {
+    const driver = setup({ initialValue: 'hello world' });
+
+    expect(await driver.tk.getValue()).toBe('hello world');
+  });
+
+  it('updates the displayed value as the user types', async () => {
+    const driver = setup();
+
+    await driver.tk.enterText('multi\nline text');
+
+    expect(await driver.tk.getValue()).toBe('multi\nline text');
+  });
+
+  it('marks the field as required when validation.required is true', async () => {
+    const driver = setup({
+      field: makeField({ type: 'LONG_TEXT', validation: { required: true } }),
+    });
+
+    expect(await driver.tk.isRequired()).toBe(true);
+  });
+
+  it('shows a required error when the user clears a required field', async () => {
+    const driver = setup({
+      field: makeField({ type: 'LONG_TEXT', validation: { required: true } }),
+      initialValue: 'something',
+    });
+
+    await driver.tk.enterText('');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.requiredField',
+    );
+  });
+});

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

@@ -0,0 +1,61 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormTime } from '../../../components/time-input/form-time';
+import { FormTimeDriver } from '../../../components/time-input/form-time.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (overrides: { field?: Field; initialValue?: string } = {}) => {
+  const driver = new FormFieldDriver({
+    Component: FormTime,
+    UniDriverFactory: FormTimeDriver,
+    dataHook: (f) => `time-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'TIME' }),
+    initialValue: overrides.initialValue ?? '12:30:00.000',
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormTime field', () => {
+  it('renders the field displayName as the label', async () => {
+    const driver = setup();
+
+    expect(await driver.tk.getLabel()).toBe(driver.field.displayName);
+  });
+
+  it('marks the field as required when validation.required is true', async () => {
+    const driver = setup({
+      field: makeField({ type: 'TIME', validation: { required: true } }),
+    });
+
+    expect(await driver.tk.isRequired()).toBe(true);
+  });
+
+  it('does not show a type-mismatch suffix for a valid time value', async () => {
+    const driver = setup({ initialValue: '12:30:00.000' });
+
+    expect(await driver.tk.hasSuffix()).toBe(false);
+  });
+
+  it('shows a type-mismatch suffix when value is not a valid time', async () => {
+    const driver = setup({ initialValue: 'invalid time' });
+
+    expect(await driver.tk.hasSuffix()).toBe(true);
+  });
+
+  it('shows a required-field error after the form is submitted with no value', async () => {
+    const driver = setup({
+      field: makeField({ type: 'TIME', validation: { required: true } }),
+      initialValue: '',
+    });
+
+    await driver.submit();
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.requiredField',
+    );
+  });
+});

package/src/__tests__/components/url/form-url.spec.tsx

@@ -0,0 +1,82 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormUrl } from '../../../components/url/form-url';
+import { FormUrlDriver } from '../../../components/url/form-url.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (overrides: { field?: Field; initialValue?: string } = {}) => {
+  const driver = new FormFieldDriver({
+    Component: FormUrl,
+    UniDriverFactory: FormUrlDriver,
+    dataHook: (f) => `url-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'URL' }),
+    initialValue: overrides.initialValue ?? '',
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormUrl field', () => {
+  it('renders the field displayName as the label', async () => {
+    const driver = setup();
+
+    expect(await driver.tk.getLabel()).toBe(driver.field.displayName);
+  });
+
+  it('shows the initial value from data', async () => {
+    const driver = setup({ initialValue: 'https://wix.com' });
+
+    expect(await driver.tk.getValue()).toBe('https://wix.com');
+  });
+
+  it('updates the displayed value as the user types', async () => {
+    const driver = setup();
+
+    await driver.tk.enterText('https://example.com');
+
+    expect(await driver.tk.getValue()).toBe('https://example.com');
+  });
+
+  it('marks the field as required when validation.required is true', async () => {
+    const driver = setup({
+      field: makeField({ type: 'URL', validation: { required: true } }),
+    });
+
+    expect(await driver.tk.isRequired()).toBe(true);
+  });
+
+  it('shows a required error when the user clears a required field', async () => {
+    const driver = setup({
+      field: makeField({ type: 'URL', validation: { required: true } }),
+      initialValue: 'https://wix.com',
+    });
+
+    await driver.tk.enterText('');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.requiredField',
+    );
+  });
+
+  it('accepts a valid URL without showing an error', async () => {
+    const driver = setup();
+
+    await driver.tk.enterText('https://example.com/path?query=1');
+
+    expect(await driver.tk.hasError()).toBe(false);
+  });
+
+  it('shows an invalid-URL error when the value is not a URL', async () => {
+    const driver = setup();
+
+    await driver.tk.enterText('not a url');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.customFields.url-input.error',
+    );
+  });
+});

package/src/__tests__/components/video/form-video.spec.tsx

@@ -0,0 +1,84 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormVideo } from '../../../components/video/form-video';
+import { FormVideoDriver } from '../../../components/video/form-video.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const VALID_VIDEO_URI =
+  'wix:video://v1/abc123.mp4/video-file#posterUri=poster.jpg&posterWidth=1920&posterHeight=1080';
+
+const setup = (overrides: { field?: Field; initialValue?: string } = {}) => {
+  const driver = new FormFieldDriver({
+    Component: FormVideo,
+    UniDriverFactory: FormVideoDriver,
+    dataHook: (f) => `video-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'VIDEO' }),
+    initialValue: overrides.initialValue ?? '',
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormVideo field', () => {
+  it('renders the field displayName as the label', async () => {
+    const driver = setup();
+
+    expect(await driver.tk.getLabel()).toBe(driver.field.displayName);
+  });
+
+  it('renders the add-item affordance when no video is set', async () => {
+    const driver = setup();
+
+    expect(await driver.tk.isAddItemVisible()).toBe(true);
+    expect(await driver.tk.hasMoreButton()).toBe(false);
+    expect(await driver.tk.hasReplaceButton()).toBe(false);
+  });
+
+  it('renders the media overlay with replace and more buttons when a value is set', async () => {
+    const driver = setup({ initialValue: VALID_VIDEO_URI });
+
+    expect(await driver.tk.hasReplaceButton()).toBe(true);
+    expect(await driver.tk.hasMoreButton()).toBe(true);
+  });
+
+  it('shows a type-mismatch warning for an invalid video value', async () => {
+    const driver = setup({ initialValue: 'invalid-video-uri' });
+
+    expect(await driver.tk.hasSuffix()).toBe(true);
+  });
+
+  it('does not show a type-mismatch warning for a valid video value', async () => {
+    const driver = setup({ initialValue: VALID_VIDEO_URI });
+
+    expect(await driver.tk.hasSuffix()).toBe(false);
+  });
+
+  it('does not show a type-mismatch warning for an empty value', async () => {
+    const driver = setup({ initialValue: '' });
+
+    expect(await driver.tk.hasSuffix()).toBe(false);
+  });
+
+  it('marks the field as required when validation.required is true', async () => {
+    const driver = setup({
+      field: makeField({ type: 'VIDEO', validation: { required: true } }),
+    });
+
+    expect(await driver.tk.isRequired()).toBe(true);
+  });
+
+  it('shows a required-field error after the form is submitted with no value', async () => {
+    const driver = setup({
+      field: makeField({ type: 'VIDEO', validation: { required: true } }),
+    });
+
+    await driver.submit();
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.requiredField',
+    );
+  });
+});

package/src/__tests__/components/video/video-view-field.spec.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { VideoViewField } from '../../../components/video/video-view-field';
+import { PatternsFieldsTestProvider } from '../../../testkit/patterns-fields-test-provider';
+
+const VALID_VIDEO_URI =
+  'wix:video://v1/abc123.mp4/video-file#posterUri=wix:image://v1/poster.jpg&posterWidth=1920&posterHeight=1080';
+
+const renderField = (
+  props: Partial<React.ComponentProps<typeof VideoViewField>> = {},
+) =>
+  render(
+    <VideoViewField value={undefined} displayName="" id="video-1" {...props} />,
+    {
+      wrapper: PatternsFieldsTestProvider,
+    },
+  );
+
+describe('VideoViewField', () => {
+  it('renders a placeholder dash when value is undefined', () => {
+    renderField({ value: undefined });
+    expect(screen.getByText('-')).toBeInTheDocument();
+    expect(
+      screen.queryByLabelText('auto-patterns.fields.preview_video'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders a placeholder dash when value is null', () => {
+    renderField({ value: null });
+    expect(screen.getByText('-')).toBeInTheDocument();
+  });
+
+  it('renders the preview and download buttons when a valid video URI is set', () => {
+    renderField({ value: VALID_VIDEO_URI, id: 'video-7' });
+    expect(
+      screen.getByLabelText('auto-patterns.fields.preview_video'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByLabelText('auto-patterns.fields.download_video'),
+    ).toBeInTheDocument();
+  });
+
+  it('disables the preview and download buttons when the URI cannot be resolved', () => {
+    renderField({ value: 'invalid-video-uri', id: 'video-8' });
+    expect(
+      screen.getByLabelText('auto-patterns.fields.preview_video'),
+    ).toHaveAttribute('aria-disabled', 'true');
+    expect(
+      screen.getByLabelText('auto-patterns.fields.download_video'),
+    ).toHaveAttribute('aria-disabled', 'true');
+  });
+});

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, RenderResult } from '@testing-library/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';
@@ -12,8 +12,14 @@ 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> = (base: UniDriver, body: UniDriver) => U;
+type UniDriverFactory<U> = (
+  base: UniDriver,
+  body: UniDriver,
+  field: Field,
+) => U;
 
 export interface FormFieldDriverOptions<U extends BaseUniDriver, T> {
   Component: React.ComponentType<BaseInputProps<T>>;
@@ -39,17 +45,33 @@ export class FormFieldDriver<U extends BaseUniDriver, T> {
   }
 
   get tk(): U {
-    return uniTestkitFactoryCreator(this.opts.UniDriverFactory)({
+    const { field } = this;
+    return uniTestkitFactoryCreator<U>(
+      (base: UniDriver, body: UniDriver): U =>
+        this.opts.UniDriverFactory(base, body, field),
+    )({
       wrapper: this._renderResult!.baseElement,
       dataHook: this._dataHook,
     });
   }
 
+  async submit(): Promise<void> {
+    const button = this._renderResult!.baseElement.querySelector(
+      `[data-hook="${SUBMIT_HOOK}"]`,
+    );
+    if (!button) {
+      throw new Error('Submit button not rendered');
+    }
+    await act(async () => {
+      fireEvent.click(button);
+    });
+  }
+
   render() {
     const { Component } = this.opts;
     const { field, initialValue, _dataHook: dataHook, onChange } = this;
     this._renderResult = render(
-      <TestComponent
+      <TestForm
         field={field}
         initialValue={initialValue}
         renderField={(control) => (
@@ -68,22 +90,27 @@ export class FormFieldDriver<U extends BaseUniDriver, T> {
   }
 }
 
-interface TestComponentProps<T> {
+interface TestFormProps<T> {
   field: Field;
   initialValue: T;
   renderField: (control: Control<FieldValues>) => React.ReactElement;
 }
 
-const TestComponent = <T,>({
+const TestForm = <T,>({
   field,
   initialValue,
   renderField,
-}: TestComponentProps<T>) => {
-  const { control } = useForm<FieldValues>({
+}: TestFormProps<T>) => {
+  const methods = useForm<FieldValues>({
     mode: 'onChange',
     defaultValues: { [field.id]: initialValue },
   });
-  return renderField(control);
+  return (
+    <form onSubmit={methods.handleSubmit(noop)}>
+      {renderField(methods.control)}
+      <button type="submit" data-hook={SUBMIT_HOOK} />
+    </form>
+  );
 };
 
 export function makeField(overrides: Partial<Field> = {}): Field {

package/src/components/address/form-address.driver.ts

@@ -0,0 +1,19 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { FormFieldUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+
+import {
+  baseUniDriverFactory,
+  getFormFieldLabelText,
+} from '../../testkit/base-driver';
+
+export function FormAddressDriver(base: UniDriver, body: UniDriver) {
+  const formField = FormFieldUniDriver(base, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: () => getFormFieldLabelText(formField),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    isRequired: () => formField.isRequired(),
+  };
+}

package/src/components/address/form-address.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { FormField } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+
+import { BaseInputProps } from '../../types/base-input';
+import type { Address } from '../../types/address';
+import { isEmpty } from '../../validations/value';
+
+import { FormAddressInput } from './input/form-address-input';
+
+export interface FormAddressProps extends BaseInputProps<Address> {}
+
+const _FormAddress = (props: FormAddressProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: pt } = useWixPatternsContainer();
+
+  const controller = useController({
+    name: field.id,
+    control: formControl,
+    defaultValue: data?.[field.id],
+    rules: {
+      validate: (value) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return pt('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      },
+    },
+  });
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+    >
+      <FormAddressInput
+        autoFocus={false}
+        data={controller.field.value}
+        onChange={(value) => controller.field.onChange?.(value)}
+        dataHook={`address-${field.id}`}
+        field={field.id}
+      />
+    </FormField>
+  );
+};
+
+export const FormAddress = observer(_FormAddress);

package/src/components/address/index.ts

@@ -1,2 +1,3 @@
+export * from './form-address';
 export * from './input';
 export * from './view';