@wix/patterns-fields 1.86.0 → 1.88.0

package/src/__tests__/exports/controlled-inputs.spec.tsx

@@ -1,30 +1,64 @@
 import '../../testkit/test-polyfills';
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
+import { WixPatternsContainerProvider } from '@wix/bex-core/react';
+import type { WixPatternsContainer } from '@wix/bex-core';
 import { uniTestkitFactoryCreator } from '@wix/wix-ui-test-utils/testing-library';
 
 import {
   ControlledBooleanRadioGroupInput,
   FormCheckboxInput,
 } from '../../components/boolean';
+import { ControlledAudioInput } from '../../components/audio';
 import { ControlledColorInput } from '../../components/color-view';
 import { ControlledInputUniDriver } from '../../components/controlled-input.uni.driver';
 import { DateInput } from '../../components/date-input';
 import { DateTimeInput } from '../../components/datetime-input';
 import { ControlledEmailInput } from '../../components/email';
+import { ControlledImageInput, FormImageField } from '../../components/image';
 import { FormNumberInput } from '../../components/number-input';
 import { FormShortTextInput } from '../../components/text';
 import { FormUrlInput } from '../../components/url';
+import { ControlledVideoInput, FormVideoField } from '../../components/video';
 import { PatternsFieldsTestProvider } from '../../testkit/patterns-fields-test-provider';
 
 const controlledInputTestkitFactory = uniTestkitFactoryCreator(
   ControlledInputUniDriver,
 );
 
+const AUDIO_URI = 'wix:audio://v1/abc123.mp3/my-song.mp3';
+
+const IMAGE_URI =
+  'wix:image://v1/dafa67_9aa1f03ed7274a7795d2f2e18a245ac7~mv2.jpg/cute%20cat.jpg#originWidth=1024&originHeight=1024';
+
+const VIDEO_URI =
+  'wix:video://v1/abc123.mp4/video-file#posterUri=poster.jpg&posterWidth=1920&posterHeight=1080';
+
 const getInput = (container: HTMLElement, dataHook: string) =>
   controlledInputTestkitFactory({ wrapper: container, dataHook });
 
+// Media inputs read openMediaManager off the patterns container, so a test that
+// opens the picker has to supply one.
+const withMediaManager =
+  (openMediaManager: jest.Mock): React.FC =>
+  ({ children }) =>
+    (
+      <PatternsFieldsTestProvider>
+        <WixPatternsContainerProvider
+          value={
+            {
+              translate: (key: string) => key,
+              environment: { language: 'en' },
+              openMediaManager,
+            } as unknown as WixPatternsContainer
+          }
+        >
+          {children}
+        </WixPatternsContainerProvider>
+      </PatternsFieldsTestProvider>
+    );
+
 describe('controlled inputs', () => {
   it('follows checkbox prop changes and reports user edits', async () => {
     const onChange = jest.fn();
@@ -404,4 +438,646 @@ describe('controlled inputs', () => {
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenCalledWith('#778899');
   });
+  it('follows audio prop changes and reports user edits', async () => {
+    const onChange = jest.fn();
+    const { container, rerender } = render(
+      <ControlledAudioInput
+        data={undefined}
+        onChange={onChange}
+        dataHook="audio"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'audio').audio;
+
+    expect(await input.getAddButtonText()).toBe('CMS.audio.button.add');
+    expect(await input.audioPlayerExists()).toBe(false);
+
+    rerender(
+      <ControlledAudioInput
+        data={AUDIO_URI}
+        onChange={onChange}
+        dataHook="audio"
+      />,
+    );
+
+    // The empty and filled states are different elements, so the testkit has
+    // to be re-created after the swap — the old one holds the detached node.
+    const filled = getInput(container, 'audio').audio;
+
+    expect(await filled.getAudioName()).toBe('my-song.mp3');
+    expect(await filled.audioPlayerExists()).toBe(true);
+  });
+
+  it('reports deleting the audio as onChange(undefined)', async () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <ControlledAudioInput
+        data={AUDIO_URI}
+        onChange={onChange}
+        dataHook="audio-delete"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'audio-delete').audio;
+
+    await input.clickMore();
+    await input.clickDelete();
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
+
+  it('disables the audio replace and delete actions when readOnly', async () => {
+    const { container } = render(
+      <ControlledAudioInput
+        data={AUDIO_URI}
+        onChange={jest.fn()}
+        readOnly
+        dataHook="audio-readonly"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'audio-readonly').audio;
+
+    await input.clickMore();
+
+    expect(await input.isReplaceDisabled()).toBe(true);
+    expect(await input.isDeleteDisabled()).toBe(true);
+  });
+
+  it('does not focus the audio add button when autoFocus is not set', async () => {
+    const { container } = render(
+      <ControlledAudioInput
+        data={undefined}
+        onChange={jest.fn()}
+        dataHook="audio-no-focus"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'audio-no-focus').audio;
+
+    expect(await input.isAddButtonFocused()).toBe(false);
+  });
+
+  it('reports onBlur and keeps the value when the audio picker is dismissed', async () => {
+    const onChange = jest.fn();
+    const onBlur = jest.fn();
+    const openMediaManager = jest.fn().mockResolvedValue({ items: [] });
+    const { container } = render(
+      <ControlledAudioInput
+        data={undefined}
+        onChange={onChange}
+        onBlur={onBlur}
+        dataHook="audio-blur"
+      />,
+      { wrapper: withMediaManager(openMediaManager) },
+    );
+    const input = getInput(container, 'audio-blur').audio;
+
+    await input.clickAddButton();
+    await act(async () => {});
+
+    expect(openMediaManager).toHaveBeenCalledTimes(1);
+    expect(onBlur).toHaveBeenCalledTimes(1);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('forwards autoFocus to the audio add button', async () => {
+    const { container } = render(
+      <ControlledAudioInput
+        data={undefined}
+        onChange={jest.fn()}
+        autoFocus
+        dataHook="audio-focus"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'audio-focus').audio;
+
+    expect(await input.isAddButtonFocused()).toBe(true);
+  });
+
+  it('follows image prop changes and reports user edits', async () => {
+    const onChange = jest.fn();
+    const { container, rerender } = render(
+      <ControlledImageInput
+        data={undefined}
+        onChange={onChange}
+        dataHook="image"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'image').image;
+
+    expect(await input.isAddItemVisible()).toBe(true);
+
+    rerender(
+      <ControlledImageInput
+        data={IMAGE_URI}
+        onChange={onChange}
+        dataHook="image"
+      />,
+    );
+
+    expect(await input.isAddItemVisible()).toBe(false);
+    expect(await input.getImageUrl()).toContain(
+      'dafa67_9aa1f03ed7274a7795d2f2e18a245ac7',
+    );
+  });
+
+  it('reports removing the image as onChange(undefined)', async () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <ControlledImageInput
+        data={IMAGE_URI}
+        onChange={onChange}
+        dataHook="image-remove"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'image-remove').image;
+    await input.simulateImageLoad();
+
+    await input.clickRemove();
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
+
+  it('drops the image edit affordances when readOnly', async () => {
+    const { container } = render(
+      <ControlledImageInput
+        data={IMAGE_URI}
+        onChange={jest.fn()}
+        readOnly
+        dataHook="image-readonly"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'image-readonly').image;
+    await input.simulateImageLoad();
+
+    expect(await input.removeButtonExists()).toBe(false);
+    expect(await input.updateButtonExists()).toBe(false);
+  });
+
+  it('reports the picked image URI as onChange', async () => {
+    const onChange = jest.fn();
+    const openMediaManager = jest.fn().mockResolvedValue({
+      items: [{ media: { image: { image: IMAGE_URI } } }],
+    });
+    const { container } = render(
+      <ControlledImageInput
+        data={undefined}
+        onChange={onChange}
+        dataHook="image-pick"
+      />,
+      { wrapper: withMediaManager(openMediaManager) },
+    );
+    const input = getInput(container, 'image-pick').image;
+
+    await input.clickAddButton();
+    // The preset runs on fake timers, so the media-manager promise has to be
+    // drained through act rather than a timer.
+    await act(async () => {});
+
+    expect(openMediaManager).toHaveBeenCalledWith({
+      multiSelect: false,
+      category: 'IMAGE',
+    });
+    expect(onChange).toHaveBeenCalledWith(IMAGE_URI);
+  });
+
+  it('does not focus the image add button when autoFocus is not set', async () => {
+    const { container } = render(
+      <ControlledImageInput
+        data={undefined}
+        onChange={jest.fn()}
+        dataHook="image-no-focus"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+
+    const input = getInput(container, 'image-no-focus').image;
+
+    expect(await input.isAddButtonFocused()).toBe(false);
+  });
+
+  it('focuses the image once it has loaded, not while the loader is up', async () => {
+    const { container } = render(
+      <ControlledImageInput
+        data={IMAGE_URI}
+        onChange={jest.fn()}
+        autoFocus
+        dataHook="image-late-focus"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'image-late-focus').image;
+
+    expect(await input.containsFocus()).toBe(false);
+
+    await act(async () => {
+      await input.simulateImageLoad();
+    });
+
+    expect(await input.containsFocus()).toBe(true);
+  });
+
+  it('keeps the image and reports onBlur when the picker is dismissed', async () => {
+    const onChange = jest.fn();
+    const onBlur = jest.fn();
+    const openMediaManager = jest.fn().mockResolvedValue({ items: [] });
+    const { container } = render(
+      <ControlledImageInput
+        data={undefined}
+        onChange={onChange}
+        onBlur={onBlur}
+        dataHook="image-cancel"
+      />,
+      { wrapper: withMediaManager(openMediaManager) },
+    );
+    const input = getInput(container, 'image-cancel').image;
+
+    await input.clickAddButton();
+    await act(async () => {});
+
+    expect(openMediaManager).toHaveBeenCalledTimes(1);
+    expect(onBlur).toHaveBeenCalledTimes(1);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('opens the image picker once when the add button is clicked twice', async () => {
+    let resolvePick: (value: unknown) => void = () => {};
+    const openMediaManager = jest.fn().mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolvePick = resolve;
+        }),
+    );
+    const { container } = render(
+      <ControlledImageInput
+        data={undefined}
+        onChange={jest.fn()}
+        dataHook="image-double"
+      />,
+      { wrapper: withMediaManager(openMediaManager) },
+    );
+    const input = getInput(container, 'image-double').image;
+
+    await input.clickAddButton();
+    await input.clickAddButton();
+
+    expect(openMediaManager).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      resolvePick({ items: [] });
+    });
+  });
+
+  it('disables the image add button when readOnly', async () => {
+    const { container } = render(
+      <ControlledImageInput
+        data={undefined}
+        onChange={jest.fn()}
+        readOnly
+        dataHook="image-readonly-add"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+
+    const input = getInput(container, 'image-readonly-add').image;
+
+    expect(await input.isAddItemVisible()).toBe(true);
+    expect(await input.isAddButtonDisabled()).toBe(true);
+  });
+
+  it('hides the image remove button when no onClear is given', async () => {
+    const { container } = render(
+      <FormImageField
+        data={IMAGE_URI}
+        onChange={jest.fn()}
+        dataHook="image-no-clear"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'image-no-clear').image;
+    await input.simulateImageLoad();
+
+    expect(await input.removeButtonExists()).toBe(false);
+    expect(await input.updateButtonExists()).toBe(true);
+  });
+
+  it('reports image edits through onInput', async () => {
+    const onInput = jest.fn();
+    const openMediaManager = jest.fn().mockResolvedValue({
+      items: [{ media: { image: { image: IMAGE_URI } } }],
+    });
+    const { container } = render(
+      <FormImageField
+        data={undefined}
+        onChange={jest.fn()}
+        onClear={jest.fn()}
+        onInput={onInput}
+        dataHook="image-oninput"
+      />,
+      { wrapper: withMediaManager(openMediaManager) },
+    );
+    const input = getInput(container, 'image-oninput').image;
+
+    await input.clickAddButton();
+    await act(async () => {});
+
+    expect(onInput).toHaveBeenCalledTimes(1);
+  });
+
+  it('forwards autoFocus to the image add button', async () => {
+    const { container } = render(
+      <ControlledImageInput
+        data={undefined}
+        onChange={jest.fn()}
+        autoFocus
+        dataHook="image-focus"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+
+    const input = getInput(container, 'image-focus').image;
+
+    expect(await input.isAddButtonFocused()).toBe(true);
+  });
+
+  it('follows video prop changes and reports user edits', async () => {
+    const onChange = jest.fn();
+    const { container, rerender } = render(
+      <ControlledVideoInput
+        data={undefined}
+        onChange={onChange}
+        dataHook="video"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'video').video;
+
+    expect(await input.isAddItemVisible()).toBe(true);
+    expect(await input.hasReplaceButton()).toBe(false);
+
+    rerender(
+      <ControlledVideoInput
+        data={VIDEO_URI}
+        onChange={onChange}
+        dataHook="video"
+      />,
+    );
+
+    // The empty and filled states are different elements, so the testkit has
+    // to be re-created after the swap - the old one holds the detached node.
+    const filled = getInput(container, 'video').video;
+
+    expect(await filled.hasReplaceButton()).toBe(true);
+    expect(await filled.hasMoreButton()).toBe(true);
+  });
+
+  it('reports deleting the video as onChange(undefined)', async () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <ControlledVideoInput
+        data={VIDEO_URI}
+        onChange={onChange}
+        dataHook="video-delete"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'video-delete').video;
+
+    await input.clickMore();
+    await input.clickDelete();
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
+
+  it('disables the video replace and delete actions when readOnly', async () => {
+    const { container } = render(
+      <ControlledVideoInput
+        data={VIDEO_URI}
+        onChange={jest.fn()}
+        readOnly
+        dataHook="video-readonly"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'video-readonly').video;
+
+    expect(await input.isReplaceDisabled()).toBe(true);
+
+    await input.clickMore();
+    expect(await input.isDeleteDisabled()).toBe(true);
+  });
+
+  it('reports the picked video URI as onChange', async () => {
+    const onChange = jest.fn();
+    const openMediaManager = jest.fn().mockResolvedValue({
+      items: [{ media: { video: VIDEO_URI } }],
+    });
+    const { container } = render(
+      <ControlledVideoInput
+        data={undefined}
+        onChange={onChange}
+        dataHook="video-pick"
+      />,
+      { wrapper: withMediaManager(openMediaManager) },
+    );
+    const input = getInput(container, 'video-pick').video;
+
+    await input.clickAddButton();
+    // The preset runs on fake timers, so the media-manager promise has to be
+    // drained through act rather than a timer.
+    await act(async () => {});
+
+    expect(openMediaManager).toHaveBeenCalledWith({
+      multiSelect: false,
+      category: 'VIDEO',
+    });
+    expect(onChange).toHaveBeenCalledWith(VIDEO_URI);
+  });
+
+  it('does not focus the video add button when autoFocus is not set', async () => {
+    const { container } = render(
+      <ControlledVideoInput
+        data={undefined}
+        onChange={jest.fn()}
+        dataHook="video-no-focus"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+
+    const input = getInput(container, 'video-no-focus').video;
+
+    expect(await input.isAddButtonFocused()).toBe(false);
+  });
+
+  it('reads the picked video URI from the nested media shape', async () => {
+    const onChange = jest.fn();
+    const openMediaManager = jest.fn().mockResolvedValue({
+      items: [{ media: { video: { video: VIDEO_URI } } }],
+    });
+    const { container } = render(
+      <ControlledVideoInput
+        data={undefined}
+        onChange={onChange}
+        dataHook="video-nested"
+      />,
+      { wrapper: withMediaManager(openMediaManager) },
+    );
+    const input = getInput(container, 'video-nested').video;
+
+    await input.clickAddButton();
+    await act(async () => {});
+
+    expect(onChange).toHaveBeenCalledWith(VIDEO_URI);
+  });
+
+  it('keeps the video and reports onBlur when the picker is dismissed', async () => {
+    const onChange = jest.fn();
+    const onBlur = jest.fn();
+    const openMediaManager = jest.fn().mockResolvedValue({ items: [] });
+    const { container } = render(
+      <ControlledVideoInput
+        data={undefined}
+        onChange={onChange}
+        onBlur={onBlur}
+        dataHook="video-cancel"
+      />,
+      { wrapper: withMediaManager(openMediaManager) },
+    );
+    const input = getInput(container, 'video-cancel').video;
+
+    await input.clickAddButton();
+    await act(async () => {});
+
+    expect(openMediaManager).toHaveBeenCalledTimes(1);
+    expect(onBlur).toHaveBeenCalledTimes(1);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('opens the video picker once when the add button is clicked twice', async () => {
+    let resolvePick: (value: unknown) => void = () => {};
+    const openMediaManager = jest.fn().mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolvePick = resolve;
+        }),
+    );
+    const { container } = render(
+      <ControlledVideoInput
+        data={undefined}
+        onChange={jest.fn()}
+        dataHook="video-double"
+      />,
+      { wrapper: withMediaManager(openMediaManager) },
+    );
+    const input = getInput(container, 'video-double').video;
+
+    await input.clickAddButton();
+    await input.clickAddButton();
+
+    expect(openMediaManager).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      resolvePick({ items: [] });
+    });
+  });
+
+  it('disables the video add button when readOnly', async () => {
+    const { container } = render(
+      <ControlledVideoInput
+        data={undefined}
+        onChange={jest.fn()}
+        readOnly
+        dataHook="video-readonly-add"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+
+    const input = getInput(container, 'video-readonly-add').video;
+
+    expect(await input.isAddItemVisible()).toBe(true);
+    expect(await input.isAddButtonDisabled()).toBe(true);
+  });
+
+  it('disables the video delete action when no onClear is given', async () => {
+    const { container } = render(
+      <FormVideoField
+        data={VIDEO_URI}
+        onChange={jest.fn()}
+        dataHook="video-no-clear"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'video-no-clear').video;
+
+    await input.clickMore();
+
+    expect(await input.isDeleteDisabled()).toBe(true);
+  });
+
+  it('reports video edits through onInput', async () => {
+    const onInput = jest.fn();
+    const openMediaManager = jest.fn().mockResolvedValue({
+      items: [{ media: { video: VIDEO_URI } }],
+    });
+    const { container } = render(
+      <FormVideoField
+        data={undefined}
+        onChange={jest.fn()}
+        onClear={jest.fn()}
+        onInput={onInput}
+        dataHook="video-oninput"
+      />,
+      { wrapper: withMediaManager(openMediaManager) },
+    );
+    const input = getInput(container, 'video-oninput').video;
+
+    await input.clickAddButton();
+    await act(async () => {});
+
+    expect(onInput).toHaveBeenCalledTimes(1);
+  });
+
+  it('forwards autoFocus to the video add button', async () => {
+    const { container } = render(
+      <ControlledVideoInput
+        data={undefined}
+        onChange={jest.fn()}
+        autoFocus
+        dataHook="video-focus"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+
+    const input = getInput(container, 'video-focus').video;
+
+    expect(await input.isAddButtonFocused()).toBe(true);
+  });
+
+  it('titles the video preview "Preview" when previewTitle is not given', async () => {
+    const { container } = render(
+      <ControlledVideoInput
+        data={VIDEO_URI}
+        onChange={jest.fn()}
+        dataHook="video-preview-title"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'video-preview-title').video;
+
+    await input.clickMore();
+    await input.clickPreview();
+
+    expect(await input.getPreviewTitle()).toBe(
+      'auto-patterns.fields.preview_video',
+    );
+  });
 });