@squiz/resource-browser 1.32.1-alpha.12

package/src/ResourcePickerContainer/ResourcePickerContainer.spec.tsx

@@ -0,0 +1,706 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react';
+import { screen, render, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Context as ResponsiveContext } from 'react-responsive';
+import { OverlayTriggerState } from 'react-stately';
+
+import type { Hierarchy } from '../index';
+import ResourcePickerContainer from './ResourcePickerContainer';
+
+import SourceList, { SourceListProps } from '../SourceList/SourceList'; // Import Functional Component
+jest.mock('../SourceList/SourceList'); // Mock the Functional Component
+const ActualSourceList = jest.requireActual('../SourceList/SourceList').default; // Grab the real copy of it as normally we don't want the mock
+const MockSourceList = SourceList as jest.MockedFunction<typeof SourceList>; // Cast the mocked function so TS stops complaining
+MockSourceList.mockImplementation(ActualSourceList); // Return the actual function unless overridden
+
+import ResourceList, { ResourceListProps } from '../ResourceList/ResourceList'; // Import Functional Component
+jest.mock('../ResourceList/ResourceList'); // Mock the Functional Component
+const ActualResourceList = jest.requireActual('../ResourceList/ResourceList').default; // Grab the real copy of it as normally we don't want the mock
+const MockResourceList = ResourceList as jest.MockedFunction<typeof ResourceList>; // Cast the mocked function so TS stops complaining
+MockResourceList.mockImplementation(ActualResourceList); // Return the actual function unless overridden
+
+import PreviewPanel, { PreviewPanelProps } from '../PreviewPanel/PreviewPanel'; // Import Functional Component
+jest.mock('../PreviewPanel/PreviewPanel'); // Mock the Functional Component
+const ActualPreviewPanel = jest.requireActual('../PreviewPanel/PreviewPanel').default; // Grab the real copy of it as normally we don't want the mock
+const MockPreviewPanel = PreviewPanel as jest.MockedFunction<typeof PreviewPanel>; // Cast the mocked function so TS stops complaining
+MockPreviewPanel.mockImplementation(ActualPreviewPanel); // Return the actual function unless overridden
+
+import ResourceBreadcrumb, { ResourceBreadcrumbProps } from '../ResourceBreadcrumb/ResourceBreadcrumb'; // Import Functional Component
+jest.mock('../ResourceBreadcrumb/ResourceBreadcrumb'); // Mock the Functional Component
+const ActualResourceBreadcrumb = jest.requireActual('../ResourceBreadcrumb/ResourceBreadcrumb').default; // Grab the real copy of it as normally we don't want the mock
+const MockResourceBreadcrumb = ResourceBreadcrumb as jest.MockedFunction<typeof ResourceBreadcrumb>; // Cast the mocked function so TS stops complaining
+MockResourceBreadcrumb.mockImplementation(ActualResourceBreadcrumb); // Return the actual function unless overridden
+
+const baseProps = {
+  title: 'Testing',
+  titleAriaProps: {},
+  allowedTypes: undefined,
+  onClose: () => {},
+  onRequestSources: () => {
+    return Promise.resolve([
+      {
+        id: '1',
+        name: 'Test system',
+        nodes: [
+          {
+            id: {
+              id: '1',
+              source: '1',
+            },
+            type: 'site',
+            selected: false,
+            label: 'Test Website',
+            childCount: 21,
+          },
+        ],
+      },
+    ]);
+  },
+  onRequestChildren: () => {
+    return Promise.resolve([
+      {
+        id: {
+          id: '1',
+          source: '1',
+        },
+        type: 'page',
+        selected: false,
+        label: 'Test Page',
+        childCount: 0,
+      },
+    ]);
+  },
+  onRequestResource: () => {
+    return Promise.resolve({
+      type: 'page',
+      name: 'Products',
+      properties: new Map([
+        ['assetId', '12345'],
+        ['status', 'UnderConstruction'],
+      ]),
+    });
+  },
+  onChange: () => {},
+};
+
+describe('ResourcePickerContainer', () => {
+  it('Queries onRequestSources for source list on startup', async () => {
+    const onRequestSources = jest.fn(() => {
+      return Promise.resolve([]);
+    });
+
+    const { getByLabelText } = render(<ResourcePickerContainer {...baseProps} onRequestSources={onRequestSources} />);
+    await waitFor(() => {
+      expect(getByLabelText('Source list')).toBeInTheDocument();
+    });
+
+    expect(onRequestSources).toHaveBeenCalled();
+  });
+
+  it('Renders provided sources from onRequestSources', async () => {
+    const onRequestSources = jest.fn(() => {
+      return Promise.resolve([
+        {
+          id: '1',
+          name: 'Test system 1',
+          nodes: [
+            {
+              id: {
+                id: '1',
+                source: '1',
+              },
+              type: 'site',
+              selected: false,
+              label: 'Test Website 1',
+              childCount: 21,
+            },
+          ],
+        },
+        {
+          id: '2',
+          name: 'Test system 2',
+          nodes: [
+            {
+              id: {
+                id: '1',
+                source: '2',
+              },
+              type: 'site',
+              selected: false,
+              label: 'Test Website 2',
+              childCount: 21,
+            },
+            {
+              id: {
+                id: '2',
+                source: '2',
+              },
+              type: 'site',
+              selected: false,
+              label: 'Test Website 3',
+              childCount: 21,
+            },
+          ],
+        },
+      ]);
+    });
+
+    const { getAllByText } = render(<ResourcePickerContainer {...baseProps} onRequestSources={onRequestSources} />);
+    await waitFor(() => {
+      expect(getAllByText('Test system 1')[0]).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      const sourceList = screen.getByLabelText('Source list');
+      expect(within(sourceList).getByText('Test system 1')).toBeTruthy();
+      expect(within(sourceList).getByText('Test Website 1')).toBeTruthy();
+
+      expect(within(sourceList).getByText('Test system 2')).toBeTruthy();
+      expect(within(sourceList).getByText('Test Website 2')).toBeTruthy();
+      expect(within(sourceList).getByText('Test Website 3')).toBeTruthy();
+    });
+  });
+
+  it('Selecting a child count drills down', async () => {
+    const onRequestChildren = jest.fn(() => {
+      return Promise.resolve([]);
+    });
+
+    // Component has finished initial render
+    const { getAllByText } = render(<ResourcePickerContainer {...baseProps} onRequestChildren={onRequestChildren} />);
+    await waitFor(() => {
+      expect(getAllByText('Test system')[0]).toBeInTheDocument();
+    });
+
+    // Click the drill down counter
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'Drill down to Test Website children' }));
+
+    await waitFor(() => {
+      expect(onRequestChildren).toHaveBeenCalled();
+    });
+  });
+
+  it('Drill down renders provided resources from onRequestChildren', async () => {
+    const onRequestChildren = jest.fn(() => {
+      return Promise.resolve([
+        {
+          id: {
+            id: '1',
+            source: '1',
+          },
+          type: 'page',
+          selected: false,
+          label: 'Test Page 1',
+          childCount: 0,
+        },
+        {
+          id: {
+            id: '2',
+            source: '1',
+          },
+          type: 'page',
+          selected: false,
+          label: 'Test Page 2',
+          childCount: 0,
+        },
+        {
+          id: {
+            id: '3',
+            source: '1',
+          },
+          type: 'folder',
+          selected: false,
+          label: 'Test Page 3',
+          childCount: 31,
+        },
+      ]);
+    });
+
+    // Component has finished initial render
+    const { getAllByText } = render(<ResourcePickerContainer {...baseProps} onRequestChildren={onRequestChildren} />);
+    await waitFor(() => {
+      expect(getAllByText('Test system')[0]).toBeInTheDocument();
+    });
+
+    // Click the drill down counter
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'Drill down to Test Website children' }));
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Page 1')).toBeTruthy();
+      expect(screen.getByText('Test Page 2')).toBeTruthy();
+      expect(screen.getByText('Test Page 3')).toBeTruthy();
+    });
+  });
+
+  it('Selecting a node shows its properties in the details panel', async () => {
+    const { getByText, getAllByText } = render(<ResourcePickerContainer {...baseProps} />);
+    await waitFor(() => {
+      expect(getAllByText('Test system')[0]).toBeInTheDocument();
+    });
+
+    // Is on base page
+    expect(screen.getByLabelText('Source list')).toBeTruthy();
+
+    // Click the drill down counter
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'site Test Website' }));
+
+    await waitFor(() => {
+      expect(getByText('Products')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Products')).toBeTruthy();
+      expect(screen.getByText('page')).toBeTruthy();
+      expect(screen.getByText('#12345')).toBeTruthy();
+    });
+  });
+
+  it('Mobile: Selecting a node shows its properties in the details panel', async () => {
+    const { getByText, getAllByText } = render(
+      <ResponsiveContext.Provider value={{ width: 360 }}>
+        <ResourcePickerContainer {...baseProps} />
+      </ResponsiveContext.Provider>,
+    );
+    await waitFor(() => {
+      expect(getAllByText('Test system')[0]).toBeInTheDocument();
+    });
+
+    // Click the drill down counter
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'site Test Website' }));
+
+    await waitFor(() => {
+      expect(getByText('Products')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Products')).toBeTruthy();
+      expect(screen.getByText('page')).toBeTruthy();
+      expect(screen.getByText('#12345')).toBeTruthy();
+    });
+  });
+
+  it('Closing the details panel deselects the node', async () => {
+    const { getByText, getAllByText } = render(
+      <ResponsiveContext.Provider value={{ width: 360 }}>
+        <ResourcePickerContainer {...baseProps} />
+      </ResponsiveContext.Provider>,
+    );
+    await waitFor(() => {
+      expect(getAllByText('Test system')[0]).toBeInTheDocument();
+    });
+
+    // Click the drill down counter
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'site Test Website' }));
+    await waitFor(() => {
+      expect(getByText('Products')).toBeInTheDocument();
+    });
+
+    user.click(screen.getByRole('button', { name: 'Close details' }));
+
+    await waitFor(() => {
+      // Is now on child page
+      expect(screen.queryByText('Products')).toBeFalsy();
+      expect(screen.queryByText('page')).toBeFalsy();
+      expect(screen.queryByText('#12345')).toBeFalsy();
+    });
+  });
+
+  it('Passes modal state down to child components: SourceList', async () => {
+    let mockModalState: OverlayTriggerState | null = null;
+
+    MockSourceList.mockImplementation((args: SourceListProps) => {
+      mockModalState = args.previewModalState;
+      return ActualSourceList(args);
+    });
+
+    render(<ResourcePickerContainer {...baseProps} />);
+
+    expect(mockModalState).toEqual(
+      expect.objectContaining({
+        close: expect.any(Function),
+        isOpen: expect.any(Boolean),
+        open: expect.any(Function),
+        setOpen: expect.any(Function),
+        toggle: expect.any(Function),
+      }),
+    );
+  });
+
+  it('Passes modal state down to child components: ResourceList', async () => {
+    let mockModalState: OverlayTriggerState | null = null;
+
+    MockResourceList.mockImplementation((args: ResourceListProps) => {
+      mockModalState = args.previewModalState;
+      return ActualResourceList(args);
+    });
+
+    const { getByText, getAllByText } = render(<ResourcePickerContainer {...baseProps} />);
+    await waitFor(() => {
+      expect(getAllByText('Test system')[0]).toBeInTheDocument();
+    });
+
+    // Click the drill down counter
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'Drill down to Test Website children' }));
+    await waitFor(() => {
+      expect(getByText('Test Page')).toBeInTheDocument();
+    });
+
+    expect(mockModalState).toEqual(
+      expect.objectContaining({
+        close: expect.any(Function),
+        isOpen: expect.any(Boolean),
+        open: expect.any(Function),
+        setOpen: expect.any(Function),
+        toggle: expect.any(Function),
+      }),
+    );
+  });
+
+  it('Passes modal state down to child components: Details Panel', async () => {
+    let mockModalState: OverlayTriggerState | null = null;
+
+    MockPreviewPanel.mockImplementation((args: PreviewPanelProps) => {
+      mockModalState = args.modalState;
+      return ActualPreviewPanel(args);
+    });
+
+    const { getAllByText } = render(<ResourcePickerContainer {...baseProps} />);
+    await waitFor(() => {
+      expect(getAllByText('Test system')[0]).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'site Test Website' }));
+
+    expect(mockModalState).toEqual(
+      expect.objectContaining({
+        close: expect.any(Function),
+        isOpen: expect.any(Boolean),
+        open: expect.any(Function),
+        setOpen: expect.any(Function),
+        toggle: expect.any(Function),
+      }),
+    );
+  });
+
+  it('Breadcrumb hierarchy is added to on drill down', async () => {
+    let mockHierarchy: Array<Hierarchy> = [];
+
+    MockResourceBreadcrumb.mockImplementation((args: ResourceBreadcrumbProps) => {
+      mockHierarchy = args.hierarchy;
+      return ActualResourceBreadcrumb(args);
+    });
+
+    const { getByLabelText, getAllByText } = render(<ResourcePickerContainer {...baseProps} />);
+    await waitFor(() => {
+      expect(getAllByText('Test system')[0]).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'Drill down to Test Website children' }));
+
+    // Breadcrumb is showing
+    await waitFor(() => {
+      expect(getByLabelText('Resource breadcrumb')).toBeInTheDocument();
+    });
+
+    // Expect the clicked child was added to breadcrumb
+    expect(mockHierarchy).toEqual([{ id: { id: '1', source: '1' }, label: 'Test Website' }]);
+  });
+
+  it('Multiple hierarchy is tracked on on drill down', async () => {
+    let mockHierarchy: Array<Hierarchy> = [];
+
+    MockResourceBreadcrumb.mockImplementation((args: ResourceBreadcrumbProps) => {
+      mockHierarchy = args.hierarchy;
+      return ActualResourceBreadcrumb(args);
+    });
+
+    const onRequestChildren = jest
+      .fn()
+      .mockImplementationOnce(() => {
+        return Promise.resolve([
+          {
+            id: {
+              id: '11',
+              source: '1',
+            },
+            type: 'page',
+            selected: false,
+            label: 'Test Page',
+            childCount: 4,
+          },
+        ]);
+      })
+      .mockImplementationOnce(() => {
+        return Promise.resolve([
+          {
+            id: {
+              id: '111',
+              source: '1',
+            },
+            type: 'page',
+            selected: false,
+            label: 'Second Page',
+            childCount: 0,
+          },
+        ]);
+      });
+
+    const { getByLabelText, getByText, getAllByText } = render(
+      <ResourcePickerContainer {...baseProps} onRequestChildren={onRequestChildren} />,
+    );
+    await waitFor(() => {
+      expect(getAllByText('Test system')[0]).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'Drill down to Test Website children' }));
+
+    // Breadcrumb is showing
+    await waitFor(() => {
+      expect(getByLabelText('Resource breadcrumb')).toBeInTheDocument();
+    });
+
+    // Drill down again
+    user.click(screen.getByRole('button', { name: 'Drill down to Test Page children' }));
+
+    await waitFor(() => {
+      expect(getByText('Second Page')).toBeInTheDocument();
+    });
+
+    // Expect the clicked child was added to breadcrumb
+    expect(mockHierarchy).toEqual([
+      {
+        id: {
+          id: '1',
+          source: '1',
+        },
+        label: 'Test Website',
+      },
+      {
+        id: {
+          id: '11',
+          source: '1',
+        },
+        label: 'Test Page',
+      },
+    ]);
+  });
+
+  it('Can track multiple hierarchy jumping back', async () => {
+    let mockHierarchy: Array<Hierarchy> = [];
+
+    MockResourceBreadcrumb.mockImplementation((args: ResourceBreadcrumbProps) => {
+      mockHierarchy = args.hierarchy;
+      return ActualResourceBreadcrumb(args);
+    });
+
+    const onRequestChildren = jest
+      .fn()
+      .mockImplementationOnce(() => {
+        return Promise.resolve([
+          {
+            id: {
+              id: '11',
+              source: '1',
+            },
+            type: 'page',
+            selected: false,
+            label: 'Test Page',
+            childCount: 4,
+          },
+        ]);
+      })
+      .mockImplementationOnce(() => {
+        return Promise.resolve([
+          {
+            id: {
+              id: '111',
+              source: '1',
+            },
+            type: 'page',
+            selected: false,
+            label: 'Second Page',
+            childCount: 0,
+          },
+        ]);
+      })
+      .mockImplementationOnce(() => {
+        return Promise.resolve([
+          {
+            id: {
+              id: '11',
+              source: '1',
+            },
+            type: 'page',
+            selected: false,
+            label: 'Test Page',
+            childCount: 4,
+          },
+        ]);
+      });
+
+    const { getByLabelText, getByText, getAllByText, queryByText } = render(
+      <ResourcePickerContainer {...baseProps} onRequestChildren={onRequestChildren} />,
+    );
+    await waitFor(() => {
+      expect(getAllByText('Test system')[0]).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'Drill down to Test Website children' }));
+
+    // Breadcrumb is showing
+    await waitFor(() => {
+      expect(getByLabelText('Resource breadcrumb')).toBeInTheDocument();
+    });
+
+    // Drill down again
+    user.click(screen.getByRole('button', { name: 'Drill down to Test Page children' }));
+
+    await waitFor(() => {
+      expect(getByText('Second Page')).toBeInTheDocument();
+    });
+
+    // Click on previous breadcrumb item
+    const breadcrumb = screen.getByLabelText('Resource breadcrumb');
+    user.click(within(breadcrumb).getByRole('button', { name: 'Test Website' }));
+
+    await waitFor(() => {
+      expect(queryByText('Second Page')).not.toBeInTheDocument();
+    });
+
+    // Expect the clicked child was added to breadcrumb
+    expect(mockHierarchy).toEqual([
+      {
+        id: {
+          id: '1',
+          source: '1',
+        },
+        label: 'Test Website',
+      },
+    ]);
+  });
+
+  it('Multiple hierarchy can handle reset to new source', async () => {
+    let mockHierarchy: Array<Hierarchy> = [];
+
+    MockResourceBreadcrumb.mockImplementation((args: ResourceBreadcrumbProps) => {
+      mockHierarchy = args.hierarchy;
+      return ActualResourceBreadcrumb(args);
+    });
+
+    const onRequestChildren = jest
+      .fn()
+      .mockImplementationOnce(() => {
+        return Promise.resolve([
+          {
+            id: {
+              id: '11',
+              source: '1',
+            },
+            type: 'page',
+            selected: false,
+            label: 'Test Page',
+            childCount: 4,
+          },
+        ]);
+      })
+      .mockImplementationOnce(() => {
+        return Promise.resolve([
+          {
+            id: {
+              id: '111',
+              source: '1',
+            },
+            type: 'page',
+            selected: false,
+            label: 'Second Page',
+            childCount: 0,
+          },
+        ]);
+      });
+
+    const onRequestSources = jest.fn().mockImplementation(() => {
+      return Promise.resolve([
+        {
+          id: '1',
+          name: 'Test system',
+          nodes: [
+            {
+              id: {
+                id: '1',
+                source: '1',
+              },
+              type: 'site',
+              selected: false,
+              label: 'Test Website',
+              childCount: 21,
+            },
+            {
+              id: {
+                id: '2',
+                source: '1',
+              },
+              type: 'site',
+              selected: false,
+              label: 'Second Website',
+              childCount: 21,
+            },
+          ],
+        },
+      ]);
+    });
+
+    const { getByLabelText, getAllByText, getByText, getByRole } = render(
+      <ResourcePickerContainer
+        {...baseProps}
+        onRequestSources={onRequestSources}
+        onRequestChildren={onRequestChildren}
+      />,
+    );
+    await waitFor(() => {
+      expect(getAllByText('Test system')[0]).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    user.click(screen.getByRole('button', { name: 'Drill down to Test Website children' }));
+
+    // Breadcrumb is showing
+    await waitFor(() => {
+      expect(getByLabelText('Resource breadcrumb')).toBeInTheDocument();
+    });
+
+    user.click(screen.getByRole('button', { name: 'Source quick select' }));
+
+    await waitFor(() => {
+      expect(getByRole('button', { name: 'site Second Website' })).toBeInTheDocument();
+    });
+
+    user.click(getByRole('button', { name: 'site Second Website' }));
+
+    await waitFor(() => {
+      expect(getByText('Second Page')).toBeInTheDocument();
+    });
+
+    // Expect the clicked child was added to breadcrumb
+    expect(mockHierarchy).toEqual([
+      {
+        id: {
+          id: '2',
+          source: '1',
+        },
+        label: 'Second Website',
+      },
+    ]);
+  });
+});