@squiz/resource-browser 1.69.2 → 2.1.9-rc.0

package/src/index.spec.tsx

@@ -1,104 +1,282 @@
 import React from 'react';
-import { act, fireEvent, screen, waitFor } from '@testing-library/react';
-import { ResourceBrowserInput, ResourceBrowserInputProps, ResourceReference } from './index';
-import { mockResource } from './__mocks__/MockModels';
+import { waitFor, act } from '@testing-library/react';
+import { ResourceBrowser, ResourceBrowserProps } from './index';
+import { mockSource, mockResource } from './__mocks__/MockModels';
 import { renderWithContext } from './__mocks__/renderWithContext';
+import { ResourceBrowserPlugin } from './types';
+
+import * as RBI from './ResourceBrowserInput/ResourceBrowserInput';
+jest.spyOn(RBI, 'ResourceBrowserInput');
 
 describe('Resource browser input', () => {
-  const mockRequestSources = jest.fn().mockResolvedValue([]);
-  const mockRequestChildren = jest.fn().mockResolvedValue([]);
-  const mockRequestResource = jest.fn();
-  const mockChange = jest.fn();
-  const renderComponent = (props: Partial<ResourceBrowserInputProps> = {}) => {
-    return renderWithContext(
-      <ResourceBrowserInput
-        modalTitle="Asset picker"
-        allowedTypes={['site', 'image', 'physical_file']}
-        onChange={mockChange}
-        value={null}
-        {...props}
-      />,
-      {
-        onRequestSources: mockRequestSources,
-        onRequestChildren: mockRequestChildren,
-        onRequestResource: mockRequestResource,
-      },
-    );
-  };
-
-  it('should render the related asset picker with the default label', () => {
-    renderComponent();
-    const pickerLabel = screen.getByText('Choose asset');
-
-    expect(pickerLabel).toBeInTheDocument();
-  });
-
-  it('should display the generic asset picking icon', () => {
-    renderComponent();
-    const pickerLabel = screen.getByText('Choose asset');
-    const pickerIcon = screen.getByTestId('AdsClickRoundedIcon');
-
-    expect(pickerLabel).toBeInTheDocument();
-    expect(pickerIcon).toBeInTheDocument();
-  });
-
-  it('should display the image icon when only images are allowed', () => {
-    renderComponent({ allowedTypes: ['image'] });
-    const pickerLabel = screen.getByText('Choose image');
-    const pickerIcon = screen.getByTestId('PhotoLibraryRoundedIcon');
-
-    expect(pickerLabel).toBeInTheDocument();
-    expect(pickerIcon).toBeInTheDocument();
-  });
-
-  it('should disallow removing and replacing selection if the input is disabled', async () => {
-    mockRequestResource.mockResolvedValue(
-      mockResource({
-        id: '100',
-        name: 'Mocked resource',
-      }),
-    );
-    renderComponent({ value: { source: '1', resource: '100' }, isDisabled: true });
-
-    await waitFor(() => expect(screen.queryByLabelText('Loading selection')).not.toBeInTheDocument());
-
-    expect(screen.getByRole('button', { name: 'Remove selection' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: 'Replace selection' })).toBeDisabled();
-  });
-
-  it('clicking the replace selection button should open the resource browser', async () => {
-    mockRequestResource.mockResolvedValue(
-      mockResource({
-        id: '100',
-        name: 'Mocked resource',
-      }),
-    );
-    renderComponent({ value: { source: '1', resource: '100' } });
-
-    await waitFor(() => expect(screen.queryByLabelText('Loading selection')).not.toBeInTheDocument());
-    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Replace selection' })));
-    expect(screen.getByRole('button', { name: 'Close Asset picker dialog' })).toBeInTheDocument();
-  });
-
-  it.each([
-    ['resource selected', { source: '1', resource: '100' }, 1],
-    ['resource not selected', null, 0],
-  ])(
-    'should only display the "replace" button if a resource has already been selected - %s',
-    async (description: string, value: ResourceReference | null, expectedReplaceSelectionButtons: number) => {
-      mockRequestResource.mockResolvedValue(
-        mockResource({
-          id: '100',
-          name: 'Mocked resource',
-        }),
-      );
-      renderComponent({ value });
-
-      await waitFor(() => expect(screen.queryByLabelText('Loading selection')).not.toBeInTheDocument());
-
-      expect(screen.queryAllByRole('button', { name: 'Replace selection' })).toHaveLength(
-        expectedReplaceSelectionButtons,
-      );
-    },
-  );
+    const mockChange = jest.fn();
+    const mockOnClear = jest.fn();
+
+    const mockRequestSources = jest.fn().mockResolvedValue([]);
+    const mockRenderSelectedResource = jest.fn();
+    const mockSourceBrowserComponent = jest.fn().mockReturnValue(() => <div>Source UI has been rendered</div>);
+    const mockResolveResource = jest.fn();
+    const mockUseResolveResource = jest.fn().mockReturnValue({
+        data: null,
+        error: null,
+        isLoading: false,
+    });
+    const mockDamPlugin = {
+        type: 'dam',
+        resolveResource: mockResolveResource,
+        renderSelectedResource: mockRenderSelectedResource,
+        sourceBrowserComponent: mockSourceBrowserComponent,
+        useResolveResource: mockUseResolveResource,
+    } as unknown as ResourceBrowserPlugin;
+
+    const renderComponent = (props: Partial<ResourceBrowserProps> = {}) => {
+        return renderWithContext(
+            <ResourceBrowser modalTitle="Asset picker" value={null} onChange={mockChange} onClear={mockOnClear} {...props} />,
+            {
+                onRequestSources: mockRequestSources,
+                plugins: [mockDamPlugin],
+            },
+        );
+    };
+
+    it('If only one valid source is provided will default to its Source and Plugin', async () => {
+        const source = mockSource({ type: 'dam' });
+        mockRequestSources.mockResolvedValueOnce([source]);
+        renderComponent();
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    source,
+                    plugin: mockDamPlugin,
+                }),
+                {},
+            );
+        });
+    });
+
+    it('If multiple valid source is provided will not default to its Source', async () => {
+        const sources = [mockSource(), mockSource()];
+        mockRequestSources.mockResolvedValueOnce(sources);
+        renderComponent();
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    sources,
+                    plugin: null,
+                }),
+                {},
+            );
+        });
+    });
+
+    it('If a resource is provided will default to its Source and Plugin to match', async () => {
+        const source = mockSource({ type: 'dam' });
+        mockRequestSources.mockResolvedValueOnce([source, mockSource({ type: 'matrix' })]);
+        mockResolveResource.mockResolvedValueOnce(mockResource({ source }));
+        renderComponent({ value: { sourceId: source.id, resourceId: '100' } });
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    source,
+                    plugin: mockDamPlugin,
+                }),
+                {},
+            );
+        });
+    });
+
+    it('If a resource is provided but its Source cannot be found it will error', async () => {
+        const source = mockSource({ type: 'dam' });
+        mockRequestSources.mockResolvedValueOnce([source, mockSource({ type: 'matrix' })]);
+        mockResolveResource.mockResolvedValueOnce(mockResource({ source }));
+        renderComponent({ value: { sourceId: 'not a real id', resourceId: '100' } });
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    error: expect.any(Error),
+                    source: null,
+                    plugin: null,
+                }),
+                {},
+            );
+        });
+    });
+
+    it('onSourceSelect will alter source passed to ResourceBrowserInput', async () => {
+        const sources = [mockSource({ type: 'dam' }), mockSource()];
+        mockRequestSources.mockResolvedValueOnce(sources);
+        renderComponent();
+
+        // Expect no source or plugin
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    sources,
+                    source: null,
+                    plugin: null,
+                }),
+                {},
+            );
+        });
+
+        // Get the provided callback
+        const { setSource } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        // Invoke it
+        act(() => {
+            setSource(sources[0]);
+        });
+
+        // Expect the source and plugin to be loaded
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    source: sources[0],
+                    plugin: mockDamPlugin,
+                }),
+                {},
+            );
+        });
+    });
+
+    it("When source is selected it will pass down its plugin's useResolveResource to maintain hook rules", async () => {
+        const source = mockSource({ type: 'dam' });
+        const resource = { resourceId: '12', sourceId: source.id };
+        mockRequestSources.mockResolvedValueOnce([source]);
+        renderComponent({ value: resource });
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    value: resource,
+                    source,
+                    plugin: mockDamPlugin,
+                }),
+                {},
+            );
+        });
+
+        await waitFor(() => {
+            expect(mockUseResolveResource).toHaveBeenCalledWith(resource.resourceId, source);
+        });
+    });
+
+    it('onModalStateChange called with false will reset the Source and Plugin', async () => {
+        const sources = [mockSource({ type: 'dam' }), mockSource()];
+        mockRequestSources.mockResolvedValueOnce(sources);
+        renderComponent();
+
+        // Expect no source or plugin
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    sources,
+                    source: null,
+                    plugin: null,
+                }),
+                {},
+            );
+        });
+
+        // Get the provided callback
+        const { setSource } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        // Invoke it
+        act(() => {
+            setSource(sources[0]);
+        });
+
+        // Expect the source and plugin to be loaded
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    source: sources[0],
+                    plugin: mockDamPlugin,
+                }),
+                {},
+            );
+        });
+
+        // Invoke modal close callback
+        const { onModalStateChange } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        onModalStateChange(false);
+
+        // Expect no source or plugin
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    sources,
+                    source: null,
+                    plugin: null,
+                }),
+                {},
+            );
+        });
+    });
+
+    it('onModalStateChange called with false will not reset the Source and Plugin if only one source exists', async () => {
+        const sources = [mockSource({ type: 'dam' })];
+        mockRequestSources.mockResolvedValueOnce(sources);
+        renderComponent();
+
+        // Expect the source and plugin to be loaded
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    source: sources[0],
+                    plugin: mockDamPlugin,
+                }),
+                {},
+            );
+        });
+
+        // Invoke modal close callback
+        const { onModalStateChange } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        act(() => {
+            onModalStateChange(false);
+        });
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    source: sources[0],
+                    plugin: mockDamPlugin,
+                }),
+                {},
+            );
+        });
+    });
+
+    it('onModalStateChange called with false will not reset the Source and Plugin if a value exists', async () => {
+        const sources = [mockSource({ type: 'dam' }), mockSource()];
+        mockRequestSources.mockResolvedValueOnce(sources);
+        renderComponent({ value: { sourceId: sources[0].id, resourceId: '123456' } });
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    sources,
+                    source: sources[0],
+                    plugin: mockDamPlugin,
+                }),
+                {},
+            );
+        });
+
+        // Invoke modal close callback
+        const { onModalStateChange } = (RBI.ResourceBrowserInput as unknown as jest.SpyInstance).mock.calls[0][0];
+        onModalStateChange(false);
+
+        await waitFor(() => {
+            expect(RBI.ResourceBrowserInput).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    source: sources[0],
+                    plugin: mockDamPlugin,
+                }),
+                {},
+            );
+        });
+    });
 });

package/src/index.stories.tsx

@@ -1,53 +1,79 @@
+import React, { useState } from 'react';
 import { StoryFn, Meta } from '@storybook/react';
-import { ResourceBrowserInput, ResourceBrowserContextProvider } from './index';
-import { createResourceBrowserCallbacks } from './__mocks__/StorybookHelpers';
-
+import { ResourceBrowser, ResourceBrowserContextProvider } from './index';
+import { createResourceBrowserCallbacks, createPlugins } from './__mocks__/StorybookHelpers';
+import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserUnresolvedResource, ResourceBrowserResource } from './types';
 export default {
-  title: 'Resource browser input',
-  component: ResourceBrowserInput,
-} as Meta<typeof ResourceBrowserInput>;
-
-const Template: StoryFn<typeof ResourceBrowserInput> = (props) => {
-  const { sourceIsLoading, resourceIsLoading, error, ...other } = props;
-  const { onRequestSources, onRequestChildren, onRequestResource, onChange } = createResourceBrowserCallbacks({
-    sourceIsLoading: !!sourceIsLoading,
-    resourceIsLoading: !!resourceIsLoading,
-    error,
-  });
-
-  return (
-    <div className="w-[400px] m-3">
-      <ResourceBrowserContextProvider value={{ onRequestSources, onRequestChildren, onRequestResource }}>
-        <ResourceBrowserInput {...other} onChange={onChange} />
-      </ResourceBrowserContextProvider>
-    </div>
-  );
+    title: 'Resource browser',
+    component: ResourceBrowser,
+} as Meta<typeof ResourceBrowser>;
+
+const Template: StoryFn<typeof ResourceBrowser> = (props) => {
+    const [resource, setResource] = useState<ResourceBrowserUnresolvedResource | null>(props?.value || null);
+    const { onRequestSources } = createResourceBrowserCallbacks({
+        sourceIsLoading: false,
+        singleSource: props.singleSource,
+    });
+
+    const onChange = (resource: ResourceBrowserResource | null) => {
+        if (resource) {
+            const { source } = resource;
+            setResource({
+                resourceId: resource.id,
+                sourceId: source.id,
+            });
+
+            console.log(
+                `Resource Browser has selected resource #${resource.id} (${resource.name}) from source #${source.id} (${source.name}).`,
+            );
+        } else {
+            setResource(null);
+            console.log(`Resource Browser has cleared selected resource.`);
+        }
+    };
+
+    const plugins: ResourceBrowserPlugin[] = createPlugins(props.callbackWait, props.headerPortal);
+
+    return (
+        <div className="w-[400px] m-3">
+            <ResourceBrowserContextProvider
+                value={{ onRequestSources: onRequestSources as () => Promise<ResourceBrowserSource[]>, plugins }}
+            >
+                <ResourceBrowser {...props} value={resource} onChange={onChange} onClear={undefined} />
+            </ResourceBrowserContextProvider>
+        </div>
+    );
 };
 
 export const Primary = Template.bind({});
 
 Primary.args = {
-  modalTitle: 'Choose asset',
-  sourceIsLoading: false,
-  resourceIsLoading: false,
-  error: '',
+    modalTitle: 'Choose asset',
+    sourceIsLoading: false,
+    resourceIsLoading: false,
+    error: '',
+    callbackWait: 0,
+    singleSource: false,
+    headerPortal: false,
 };
 
-export const SourceSelected = Template.bind({});
-SourceSelected.args = {
-  ...Primary.args,
-  value: { resource: '9999', source: '1' },
-};
-
-export const ResourceSelected = Template.bind({});
-ResourceSelected.args = {
-  ...Primary.args,
-  value: { resource: '33', source: '1' },
+export const Selected = Template.bind({});
+Selected.args = {
+    ...Primary.args,
+    value: {
+        resourceId: '1f7a25b4-380f-4540-9555-8be2dcab4019',
+        sourceId: 'c90feac1-55f3-4e1f-9b56-c22829e3f510',
+    },
 };
 
 export const ImagesOnly = Template.bind({});
-
 ImagesOnly.args = {
-  ...Primary.args,
-  allowedTypes: ['image'],
+    ...Primary.args,
+    allowedTypes: ['image'],
+};
+
+export const SingleSource = Template.bind({});
+SingleSource.args = {
+    ...Primary.args,
+    singleSource: true,
 };