@wix/patterns-fields 1.36.0 → 1.37.0

package/dist/types/exports/form-document-field.d.ts

@@ -1,2 +1,3 @@
+export { FormDocument } from '../components/document/form-document';
 export { FormDocumentField } from '../components/document/form-document-field';
 //# sourceMappingURL=form-document-field.d.ts.map

package/dist/types/exports/form-document-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-document-field.d.ts","sourceRoot":"","sources":["../../../src/exports/form-document-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC"}
+{"version":3,"file":"form-document-field.d.ts","sourceRoot":"","sources":["../../../src/exports/form-document-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC"}

package/dist/types/exports/form-media-gallery-field.d.ts

@@ -1,2 +1,4 @@
 export { FormMediaGalleryField } from '../components/media-gallery/form-media-gallery-field';
+export { FormMediaGallery } from '../components/media-gallery/form-media-gallery';
+export type { FormMediaGalleryProps } from '../components/media-gallery/form-media-gallery';
 //# sourceMappingURL=form-media-gallery-field.d.ts.map

package/dist/types/exports/form-media-gallery-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-media-gallery-field.d.ts","sourceRoot":"","sources":["../../../src/exports/form-media-gallery-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sDAAsD,CAAC"}
+{"version":3,"file":"form-media-gallery-field.d.ts","sourceRoot":"","sources":["../../../src/exports/form-media-gallery-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sDAAsD,CAAC;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,gDAAgD,CAAC;AAClF,YAAY,EAAE,qBAAqB,EAAE,MAAM,gDAAgD,CAAC"}

package/dist/types/exports/form-rich-content-input.d.ts

@@ -1,2 +1,4 @@
 export { FormRichContentInput } from '../components/rich-content/rich-content-input/form-input/form-input';
+export { FormRichContent } from '../components/rich-content/form-rich-content';
+export type { FormRichContentProps } from '../components/rich-content/form-rich-content';
 //# sourceMappingURL=form-rich-content-input.d.ts.map

package/dist/types/exports/form-rich-content-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-rich-content-input.d.ts","sourceRoot":"","sources":["../../../src/exports/form-rich-content-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qEAAqE,CAAC"}
+{"version":3,"file":"form-rich-content-input.d.ts","sourceRoot":"","sources":["../../../src/exports/form-rich-content-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qEAAqE,CAAC;AAC3G,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,YAAY,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC"}

package/dist/types/testkit/base-driver.d.ts

@@ -11,4 +11,7 @@ export declare function baseUniDriverFactory(base: UniDriver): {
         timeBudget?: number | undefined;
     }, any>;
 };
+export declare function getFormFieldLabelText(formField: {
+    getLabel: () => Promise<HTMLElement | null>;
+}): Promise<string>;
 //# sourceMappingURL=base-driver.d.ts.map

package/dist/types/testkit/base-driver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-driver.d.ts","sourceRoot":"","sources":["../../../src/testkit/base-driver.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAG7D,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,SAAS;;;;;;;;;;;EAQnD"}
+{"version":3,"file":"base-driver.d.ts","sourceRoot":"","sources":["../../../src/testkit/base-driver.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAG7D,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,SAAS;;;;;;;;;;;EAQnD;AAED,wBAAsB,qBAAqB,CAAC,SAAS,EAAE;IACrD,QAAQ,EAAE,MAAM,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC7C,GAAG,OAAO,CAAC,MAAM,CAAC,CAGlB"}

package/dist/types/testkit/patterns-fields-test-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"patterns-fields-test-provider.d.ts","sourceRoot":"","sources":["../../../src/testkit/patterns-fields-test-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAyB1B,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAM9C,CAAC"}
+{"version":3,"file":"patterns-fields-test-provider.d.ts","sourceRoot":"","sources":["../../../src/testkit/patterns-fields-test-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA0B1B,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAM9C,CAAC"}

package/dist/types/utils/get-image-url.d.ts

@@ -0,0 +1,3 @@
+export declare const getImageUrl: (image: string | undefined | null) => string | undefined;
+export declare function isAbsoluteUrl(url: string): boolean;
+//# sourceMappingURL=get-image-url.d.ts.map

package/dist/types/utils/get-image-url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-image-url.d.ts","sourceRoot":"","sources":["../../../src/utils/get-image-url.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,UAAW,MAAM,GAAG,SAAS,GAAG,IAAI,uBAU3D,CAAC;AAEF,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAOlD"}

package/dist/types/utils/media-constants.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared media dimension constants for consistent sizing across form fields.
+ * These values ensure media thumbnails maintain a consistent appearance
+ * in entity page forms, matching CMS-WEB behavior.
+ */
+/** Height for media thumbnails in form fields */
+export declare const MEDIA_HEIGHT = "120px";
+/** Maximum width for media thumbnails to prevent oversized display */
+export declare const MEDIA_MAX_WIDTH = "240px";
+/** Border radius for media thumbnails in view mode */
+export declare const MEDIA_BORDER_RADIUS = "8px";
+//# sourceMappingURL=media-constants.d.ts.map

package/dist/types/utils/media-constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-constants.d.ts","sourceRoot":"","sources":["../../../src/utils/media-constants.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,iDAAiD;AACjD,eAAO,MAAM,YAAY,UAAU,CAAC;AAEpC,sEAAsE;AACtE,eAAO,MAAM,eAAe,UAAU,CAAC;AAEvC,sDAAsD;AACtD,eAAO,MAAM,mBAAmB,QAAQ,CAAC"}

package/dist/types/validations/array.d.ts

@@ -1,3 +1,4 @@
 export declare const isValid: (data: any) => data is any[];
+export declare const isEmpty: (value: readonly unknown[] | null | undefined) => boolean;
 export declare const hardConvert: (data: any) => any;
 //# sourceMappingURL=array.d.ts.map

package/dist/types/validations/array.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"array.d.ts","sourceRoot":"","sources":["../../../src/validations/array.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,SAAU,GAAG,kBAEhC,CAAC;AAEF,eAAO,MAAM,WAAW,SAAU,GAAG,QAgBpC,CAAC"}
+{"version":3,"file":"array.d.ts","sourceRoot":"","sources":["../../../src/validations/array.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,SAAU,GAAG,kBAEhC,CAAC;AAEF,eAAO,MAAM,OAAO,UACX,SAAS,OAAO,EAAE,GAAG,IAAI,GAAG,SAAS,KAC3C,OAAoD,CAAC;AAExD,eAAO,MAAM,WAAW,SAAU,GAAG,QAgBpC,CAAC"}

package/dist/types/validations/string.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"string.d.ts","sourceRoot":"","sources":["../../../src/validations/string.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,UAAW,MAAM,GAAG,IAAI,GAAG,SAAS,KAAG,OACJ,CAAC;AAExD,eAAO,MAAM,aAAa,UAAW,MAAM,OAAO,MAAM,KAAG,OACvC,CAAC;AAErB,eAAO,MAAM,YAAY,UAAW,MAAM,OAAO,MAAM,KAAG,OACtC,CAAC"}
+{"version":3,"file":"string.d.ts","sourceRoot":"","sources":["../../../src/validations/string.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,UAAW,MAAM,GAAG,IAAI,GAAG,SAAS,KAAG,OACtB,CAAC;AAEtC,eAAO,MAAM,aAAa,UAAW,MAAM,OAAO,MAAM,KAAG,OACvC,CAAC;AAErB,eAAO,MAAM,YAAY,UAAW,MAAM,OAAO,MAAM,KAAG,OACtC,CAAC"}

package/dist/types/validations/value.d.ts

@@ -0,0 +1,2 @@
+export declare const isEmpty: (value: unknown) => value is null | undefined;
+//# sourceMappingURL=value.d.ts.map

package/dist/types/validations/value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.d.ts","sourceRoot":"","sources":["../../../src/validations/value.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,UAAW,OAAO,8BACC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns-fields",
-  "version": "1.36.0",
+  "version": "1.37.0",
   "license": "UNLICENSED",
   "author": {
     "name": "Kobi",
@@ -112,9 +112,10 @@
     "@wix/atlas": "^1.0.35",
     "@wix/data": "^1.0.323",
     "@wix/media": "^1.0.231",
-    "@wix/patterns-fields-utils": "1.17.0",
+    "@wix/patterns-fields-utils": "1.18.0",
     "@wix/rich-content": "1.0.37",
     "@wix/ricos": "^10.155.2",
+    "@wix/sdk": "^1.17.2",
     "@wix/wix-ui-icons-common": "^3.100.0",
     "color": "^2.0.1",
     "draft-js": "^0.11.7",
@@ -139,11 +140,10 @@
     "@types/jest": "^27.5.2",
     "@types/lodash": "^4.17.20",
     "@types/react": "^16.14.68",
-    "@wix/bex-core": "2.314.0",
+    "@wix/bex-core": "2.315.0",
     "@wix/design-system": "^1.271.0",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/jest-yoshi-preset": "^6.74.0",
-    "@wix/sdk": "^1.17.2",
     "@wix/wix-data-items-common": "^1.0.270",
     "@wix/wix-ui-test-utils": "^1.3.3",
     "@wix/yoshi-flow-library": "^6.74.0",
@@ -193,5 +193,5 @@
       "type": "yoshi-flow-library"
     }
   },
-  "falconPackageHash": "ba209c34e73bc90996cc51de45ecf6e8d5edc1835fec31c21599ec1d"
+  "falconPackageHash": "47a42828cc3c43ec2df4b07f0900e0df3477c90dcedf6ca585afded2"
 }

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

@@ -0,0 +1,48 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormAddress } from '../../../components/address/form-address';
+import { FormAddressDriver } from '../../../components/address/form-address.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (overrides: { field?: Field; initialValue?: any } = {}) => {
+  const driver = new FormFieldDriver({
+    Component: FormAddress,
+    UniDriverFactory: FormAddressDriver,
+    dataHook: (f) => `address-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'ADDRESS' }),
+    initialValue: overrides.initialValue,
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormAddress 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: 'ADDRESS', 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: 'ADDRESS', 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/array/form-array.spec.tsx

@@ -0,0 +1,61 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormArray } from '../../../components/array/form-array';
+import { FormArrayDriver } from '../../../components/array/form-array.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (overrides: { field?: Field; initialValue?: any } = {}) => {
+  const driver = new FormFieldDriver({
+    Component: FormArray,
+    UniDriverFactory: FormArrayDriver,
+    dataHook: (f) => `array-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'ARRAY' }),
+    initialValue: overrides.initialValue ?? ['a', 'b', 'c'],
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormArray 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: 'ARRAY', validation: { required: true } }),
+    });
+
+    expect(await driver.tk.isRequired()).toBe(true);
+  });
+
+  it('does not show a type-mismatch suffix for a valid array value', async () => {
+    const driver = setup({ initialValue: ['a', 'b', 'c'] });
+
+    expect(await driver.tk.hasSuffix()).toBe(false);
+  });
+
+  it('shows a type-mismatch suffix when value is not a valid array', async () => {
+    const driver = setup({ initialValue: 'invalid json' });
+
+    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: 'ARRAY', 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/audio/form-audio.spec.tsx

@@ -0,0 +1,63 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormAudio } from '../../../components/audio/audio-field/form-audio';
+import { FormAudioDriver } from '../../../components/audio/audio-field/form-audio.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (overrides: { field?: Field; initialValue?: string } = {}) => {
+  const driver = new FormFieldDriver({
+    Component: FormAudio,
+    UniDriverFactory: FormAudioDriver,
+    dataHook: (f) => `audio-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'AUDIO' }),
+    initialValue: overrides.initialValue ?? '',
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormAudio 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 empty state when no audio is set', async () => {
+    const driver = setup();
+
+    expect(await driver.tk.audioFieldExists()).toBe(true);
+  });
+
+  it('renders the audio name and player when audio is set', async () => {
+    const driver = setup({
+      initialValue: 'wix:audio://v1/abc123.mp3/my-song.mp3',
+    });
+
+    expect(await driver.tk.getAudioName()).toBe('my-song.mp3');
+    expect(await driver.tk.audioPlayerExists()).toBe(true);
+  });
+
+  it('marks the field as required when validation.required is true', async () => {
+    const driver = setup({
+      field: makeField({ type: 'AUDIO', 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: 'AUDIO', 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/color-view/form-color.spec.tsx

@@ -0,0 +1,49 @@
+import '../../../testkit/test-polyfills';
+
+import { FormColor } from '../../../components/color-view/form-color';
+import { FormColorDriver } from '../../../components/color-view/form-color.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (initialValue: string) => {
+  const driver = new FormFieldDriver({
+    Component: FormColor,
+    UniDriverFactory: FormColorDriver,
+    dataHook: (f) => `color-field-${f.id}`,
+    field: makeField({ type: 'COLOR' }),
+    initialValue,
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormColor 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 hex value with the hash omitted', async () => {
+    const driver = setup('#FF5733');
+
+    expect(await driver.tk.getValue()).toBe('FF5733');
+  });
+
+  it('shows an empty value when no color is set', async () => {
+    const driver = setup('');
+
+    expect(await driver.tk.getValue()).toBe('');
+  });
+
+  it('renders the FillButton when no color is set', async () => {
+    const driver = setup('');
+
+    expect(await driver.tk.getFillButton().exists()).toBe(true);
+  });
+
+  it('renders the FillPreview when a color is set', async () => {
+    const driver = setup('#FF5733');
+
+    expect(await driver.tk.getFillPreview().exists()).toBe(true);
+  });
+});

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

@@ -0,0 +1,43 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormDateInput } from '../../../components/date-input/form-date-input';
+import { FormDateInputDriver } from '../../../components/date-input/form-date-input.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (
+  overrides: { field?: Field; initialValue?: string | null } = {},
+) => {
+  const driver = new FormFieldDriver({
+    Component: FormDateInput,
+    UniDriverFactory: FormDateInputDriver,
+    dataHook: (f) => `date-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'DATE' }),
+    initialValue: overrides.initialValue ?? null,
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormDateInput 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 date picker', async () => {
+    const driver = setup();
+
+    expect(await driver.tk.datePickerExists()).toBe(true);
+  });
+
+  it('marks the field as required when validation.required is true', async () => {
+    const driver = setup({
+      field: makeField({ type: 'DATE', validation: { required: true } }),
+    });
+
+    expect(await driver.tk.isRequired()).toBe(true);
+  });
+});

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

@@ -0,0 +1,61 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormDateTime } from '../../../components/datetime-input/form-date-time';
+import { FormDateTimeDriver } from '../../../components/datetime-input/form-date-time.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (
+  overrides: { field?: Field; initialValue?: string | null } = {},
+) => {
+  const driver = new FormFieldDriver({
+    Component: FormDateTime,
+    UniDriverFactory: FormDateTimeDriver,
+    dataHook: (f) => `datetime-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'DATETIME' }),
+    initialValue: overrides.initialValue ?? null,
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormDateTime field', () => {
+  it('renders the field displayName as the label', async () => {
+    const driver = setup();
+
+    expect(await driver.tk.getLabel()).toBe(driver.field.displayName);
+  });
+
+  it('renders both the date and time inputs', async () => {
+    const driver = setup();
+
+    expect(await driver.tk.dateExists()).toBe(true);
+    expect(await driver.tk.timeExists()).toBe(true);
+  });
+
+  it('marks the field as required when validation.required is true', async () => {
+    const driver = setup({
+      field: makeField({ type: 'DATETIME', validation: { required: true } }),
+    });
+
+    expect(await driver.tk.isRequired()).toBe(true);
+  });
+
+  it('shows a required-field error on both inputs after the form is submitted with no value', async () => {
+    const driver = setup({
+      field: makeField({ type: 'DATETIME', validation: { required: true } }),
+    });
+
+    await driver.submit();
+
+    expect(await driver.tk.dateHasError()).toBe(true);
+    expect(await driver.tk.getDateErrorMessage()).toBe(
+      'cairo.fieldValidation.requiredField',
+    );
+    expect(await driver.tk.timeHasError()).toBe(true);
+    expect(await driver.tk.getTimeErrorMessage()).toBe(
+      'cairo.fieldValidation.requiredField',
+    );
+  });
+});

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

@@ -0,0 +1,54 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormDocument } from '../../../components/document/form-document';
+import { FormDocumentDriver } from '../../../components/document/form-document.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (overrides: { field?: Field; initialValue?: string } = {}) => {
+  const driver = new FormFieldDriver({
+    Component: FormDocument,
+    UniDriverFactory: FormDocumentDriver,
+    dataHook: (f) => `document-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'DOCUMENT' }),
+    initialValue: overrides.initialValue ?? '',
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormDocument 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 document field when no document is set', async () => {
+    const driver = setup();
+
+    expect(await driver.tk.documentFieldExists()).toBe(true);
+  });
+
+  it('marks the field as required when validation.required is true', async () => {
+    const driver = setup({
+      field: makeField({ type: 'DOCUMENT', 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: 'DOCUMENT', 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/email/form-email.spec.tsx

@@ -0,0 +1,85 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormEmail } from '../../../components/email/form-email';
+import { FormEmailDriver } from '../../../components/email/form-email.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (overrides: { field?: Field; initialValue?: string } = {}) => {
+  const driver = new FormFieldDriver({
+    Component: FormEmail,
+    UniDriverFactory: FormEmailDriver,
+    dataHook: (f) => `email-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'EMAIL' }),
+    initialValue: overrides.initialValue ?? '',
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormEmail 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: 'test@example.com' });
+
+    expect(await driver.tk.getValue()).toBe('test@example.com');
+  });
+
+  it('updates the displayed value as the user types', async () => {
+    const driver = setup();
+
+    await driver.tk.enterText('hello@wix.com');
+
+    expect(await driver.tk.getValue()).toBe('hello@wix.com');
+  });
+
+  it('marks the field as required when validation.required is true', async () => {
+    const driver = setup({
+      field: makeField({ type: 'EMAIL', validation: { required: true } }),
+    });
+
+    expect(await driver.tk.isRequired()).toBe(true);
+  });
+
+  it('accepts a valid email without showing an error', async () => {
+    const driver = setup();
+
+    await driver.tk.enterText('user@example.com');
+
+    expect(await driver.tk.hasError()).toBe(false);
+  });
+
+  it('shows an invalid-email error when the value is not a valid email', async () => {
+    const driver = setup({
+      field: makeField({ type: 'EMAIL', validation: { required: true } }),
+      initialValue: 'user@example.com',
+    });
+
+    await driver.tk.enterText('not-an-email');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'auto-patterns.fields.email_input_error',
+    );
+  });
+
+  it('shows a required error when the user clears a required field', async () => {
+    const driver = setup({
+      field: makeField({ type: 'EMAIL', validation: { required: true } }),
+      initialValue: 'user@example.com',
+    });
+
+    await driver.tk.enterText('');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.requiredField',
+    );
+  });
+});