@wix/patterns-fields 1.36.0 → 1.38.0

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ImageViewField } from '../../../components/image/image-view-field';
+import { PatternsFieldsTestProvider } from '../../../testkit/patterns-fields-test-provider';
+
+const WIX_MEDIA_URI =
+  'wix:image://v1/dafa67_9aa1f03ed7274a7795d2f2e18a245ac7~mv2.jpg/cute%20cat.jpg#originWidth=1024&originHeight=1024';
+
+const renderField = (
+  props: Partial<React.ComponentProps<typeof ImageViewField>> = {},
+) =>
+  render(
+    <ImageViewField value={undefined} displayName="" id="img-1" {...props} />,
+    {
+      wrapper: PatternsFieldsTestProvider,
+    },
+  );
+
+describe('ImageViewField', () => {
+  it('renders a placeholder dash when value is not a string', () => {
+    renderField({ value: undefined });
+    expect(screen.getByText('-')).toBeInTheDocument();
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+
+  it('renders a placeholder dash when value is an empty string', () => {
+    renderField({ value: '' });
+    expect(screen.getByText('-')).toBeInTheDocument();
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+
+  it('resolves a Wix media URI to a CDN URL and renders an img', () => {
+    renderField({ value: WIX_MEDIA_URI, displayName: 'Cute Cat' });
+    const img = screen.getByRole('img') as HTMLImageElement;
+    expect(img.src).toContain(
+      'dafa67_9aa1f03ed7274a7795d2f2e18a245ac7~mv2.jpg',
+    );
+  });
+
+  it('passes through an absolute URL value unchanged', () => {
+    const ABSOLUTE = 'https://example.com/cat.jpg';
+    renderField({ value: ABSOLUTE, displayName: 'Cat' });
+    expect((screen.getByRole('img') as HTMLImageElement).src).toBe(ABSOLUTE);
+  });
+
+  it('uses displayName as the alt text', () => {
+    renderField({ value: WIX_MEDIA_URI, displayName: 'Cute Cat' });
+    expect(screen.getByAltText('Cute Cat')).toBeInTheDocument();
+  });
+
+  it('falls back to id for alt text when displayName is empty', () => {
+    renderField({ value: WIX_MEDIA_URI, displayName: '', id: 'image-field-7' });
+    expect(screen.getByAltText('image-field-7')).toBeInTheDocument();
+  });
+});

package/src/__tests__/components/media-gallery/form-media-gallery.spec.tsx

@@ -0,0 +1,74 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormMediaGallery } from '../../../components/media-gallery/form-media-gallery';
+import { FormMediaGalleryDriver } from '../../../components/media-gallery/form-media-gallery.driver';
+import type { WixCodeGalleryItem } from '../../../auto-field-types';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (
+  overrides: { field?: Field; initialValue?: WixCodeGalleryItem[] } = {},
+) => {
+  const driver = new FormFieldDriver({
+    Component: FormMediaGallery,
+    UniDriverFactory: FormMediaGalleryDriver,
+    dataHook: (f) => `media-gallery-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'MEDIA_GALLERY' }),
+    initialValue: overrides.initialValue ?? [],
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormMediaGallery 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: 'MEDIA_GALLERY',
+        validation: { required: true },
+      }),
+    });
+
+    expect(await driver.tk.isRequired()).toBe(true);
+  });
+
+  it('shows a required-field error after submitting with an empty array', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'MEDIA_GALLERY',
+        validation: { required: true },
+      }),
+    });
+
+    await driver.submit();
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.requiredField',
+    );
+  });
+
+  it('does not show a required-field error after submitting with items', async () => {
+    const items: WixCodeGalleryItem[] = [
+      { type: 'image', src: 'wix:image://v1/abc.jpg/image.jpg', slug: 'abc' },
+    ];
+    const driver = setup({
+      field: makeField({
+        type: 'MEDIA_GALLERY',
+        validation: { required: true },
+      }),
+      initialValue: items,
+    });
+
+    await driver.submit();
+
+    expect(await driver.tk.hasError()).toBe(false);
+  });
+});

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

@@ -0,0 +1,60 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormMultiDocument } from '../../../components/multi-document/multi-document-input/form-multi-document';
+import { FormMultiDocumentDriver } from '../../../components/multi-document/multi-document-input/form-multi-document.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (overrides: { field?: Field; initialValue?: string[] } = {}) => {
+  const driver = new FormFieldDriver({
+    Component: FormMultiDocument,
+    UniDriverFactory: FormMultiDocumentDriver,
+    dataHook: (f) => `multi-document-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'MULTI_DOCUMENT' }),
+    initialValue: overrides.initialValue ?? [],
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormMultiDocument 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 multi-document field when no documents are set', async () => {
+    const driver = setup();
+
+    expect(await driver.tk.multiDocumentFieldExists()).toBe(true);
+  });
+
+  it('marks the field as required when validation.required is true', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'MULTI_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: 'MULTI_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/object/form-object.spec.tsx

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