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

package/src/ResourcePickerContainer/ResourcePickerContainer.spec.tsx

@@ -1,780 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import React from 'react';
-import { screen, render, waitFor, within, act } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { mockResource, mockSource } from '../__mocks__/MockModels';
-import { Resource, Source, Hierarchy, ResourceReference } from '../types';
-import { Context as ResponsiveContext } from 'react-responsive';
-import { OverlayTriggerState } from 'react-stately';
-
-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: jest.fn(),
-  onRequestSources: jest.fn().mockResolvedValue([
-    mockSource({
-      id: '1',
-      name: 'Test system',
-      nodes: [
-        {
-          id: '1',
-          type: {
-            code: 'site',
-            name: 'Site',
-          },
-          name: 'Test Website',
-          childCount: 21,
-        },
-      ],
-    }),
-  ]),
-  onRequestResource: jest.fn().mockRejectedValue(new Error('onRequestResource has not been mocked.')),
-  onRequestChildren: jest.fn().mockResolvedValue([
-    mockResource({
-      id: '123',
-      type: {
-        code: 'page',
-        name: 'Mocked Page',
-      },
-      name: 'Test Page',
-      childCount: 0,
-    }),
-  ]),
-  onChange: jest.fn(),
-};
-
-describe('ResourcePickerContainer', () => {
-  beforeEach(() => {
-    localStorage.setItem(
-      'rb_recent_locations',
-      JSON.stringify([
-        { resource: '32', source: '1' },
-        { resource: '20', source: '1' },
-      ]),
-    );
-  });
-
-  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().mockResolvedValue([
-      mockSource({
-        id: '1',
-        name: 'Test system 1',
-        nodes: [
-          {
-            id: '1',
-            type: {
-              code: 'site',
-              name: 'Site',
-            },
-            name: 'Test Website 1',
-            childCount: 21,
-          },
-        ],
-      }),
-      mockSource({
-        id: '2',
-        name: 'Test system 2',
-        nodes: [
-          {
-            id: '1',
-            type: {
-              code: 'site',
-              name: 'Site',
-            },
-            name: 'Test Website 2',
-            childCount: 21,
-          },
-          {
-            id: '2',
-            type: {
-              code: 'site',
-              name: 'Site',
-            },
-            name: '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')).toBeInTheDocument();
-      expect(within(sourceList).getByText('Test Website 1')).toBeInTheDocument();
-
-      expect(within(sourceList).getByText('Test system 2')).toBeInTheDocument();
-      expect(within(sourceList).getByText('Test Website 2')).toBeInTheDocument();
-      expect(within(sourceList).getByText('Test Website 3')).toBeInTheDocument();
-    });
-  });
-
-  it('The preselected resource is selected', async () => {
-    const resources: Record<string, Resource> = {
-      1: mockResource({ id: '1', name: 'Root Folder' }),
-      100: mockResource({ id: '100', name: 'Source root node #1' }),
-      200: mockResource({ id: '200', name: 'Source root node #2' }),
-      201: mockResource({ id: '201', name: 'Child #1' }),
-      202: mockResource({ id: '202', name: 'Child #2' }),
-      203: mockResource({
-        id: '203',
-        name: 'Leaf',
-        lineages: [
-          {
-            resourceIds: ['1', '200', '201', '202', '203'],
-          },
-        ],
-      }),
-      204: mockResource({ id: '204', name: 'Another leaf' }),
-      300: mockResource({ id: '300', name: 'Source root node #3' }),
-    };
-    const sources: Record<string, Source> = {
-      1: mockSource({
-        id: '1',
-        name: 'Test system 1',
-        nodes: [resources[100]],
-      }),
-      2: mockSource({
-        id: '2',
-        name: 'Test system 2',
-        nodes: [resources[200], resources[300]],
-      }),
-    };
-
-    const onRequestSources = jest.fn().mockResolvedValue(Object.values(sources));
-    const onRequestResource = jest.fn((reference: ResourceReference) => Promise.resolve(resources[reference.resource]));
-    const onRequestChildren = jest.fn().mockResolvedValue([resources[203], resources[204]]);
-    const preselectedSourceId = '2';
-    const preselectedResource = resources[203];
-
-    render(
-      <ResourcePickerContainer
-        {...baseProps}
-        onRequestSources={onRequestSources}
-        onRequestResource={onRequestResource}
-        onRequestChildren={onRequestChildren}
-        preselectedSourceId={preselectedSourceId}
-        preselectedResource={preselectedResource}
-      />,
-    );
-
-    await waitFor(() => expect(screen.getByRole('button', { name: 'folder Leaf selected' })).toBeInTheDocument());
-
-    const breadcrumbs = within(screen.getByLabelText('Resource breadcrumb')).getAllByRole('listitem');
-
-    // Breadcrumbs should be populated, source should be populated.
-    // "Leaf" resource should be selected, "Another leaf" resource should not be selected.
-    expect(breadcrumbs.map((item) => item.textContent)).toEqual(['', 'Source root node #2', 'Child #1', 'Child #2']);
-    expect(screen.getByLabelText('Source quick select')).toHaveTextContent(/Source root node #2/);
-    expect(screen.getByRole('button', { name: 'folder Leaf selected' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'folder Another leaf' })).toBeInTheDocument();
-  });
-
-  it.each([
-    ['the preselected resource is a root node', 10],
-    ['the preselected resource lineage does not exist under a root node', 100],
-    ['the preselected resource lineage does not appear under a root node', 200],
-  ])('The source list is displayed if %s', async (description: string, preselectedResourceId: number) => {
-    localStorage.clear();
-
-    const resources: Record<string, Resource> = {
-      10: mockResource({
-        id: '100',
-        name: 'Source root node #1',
-        lineages: [{ resourceIds: ['1', '10'] }],
-      }),
-      100: mockResource({
-        id: '100',
-        name: 'Resource without lineages',
-        lineages: undefined,
-      }),
-      200: mockResource({
-        id: '200',
-        name: 'Resource not available under a root node',
-        lineages: [{ resourceIds: ['1', '20', '200'] }],
-      }),
-    };
-    const sources: Record<string, Source> = {
-      1: mockSource({
-        id: '1',
-        name: 'Test system 1',
-        nodes: [resources[10]],
-      }),
-    };
-
-    const onRequestSources = jest.fn().mockResolvedValue(Object.values(sources));
-    const onRequestResource = jest.fn((reference: ResourceReference) => Promise.resolve(resources[reference.resource]));
-    const onRequestChildren = jest.fn().mockResolvedValue([]);
-    const preselectedSourceId = '1';
-    const preselectedResource = resources[preselectedResourceId];
-
-    render(
-      <ResourcePickerContainer
-        {...baseProps}
-        onRequestSources={onRequestSources}
-        onRequestResource={onRequestResource}
-        onRequestChildren={onRequestChildren}
-        preselectedSourceId={preselectedSourceId}
-        preselectedResource={preselectedResource}
-      />,
-    );
-
-    await waitFor(() => expect(screen.queryByRole('list', { name: 'Source list' })).toBeInTheDocument());
-
-    // Breadcrumbs should not be displayed.
-    // Source list should be displayed.
-    // "Leaf" resource should be selected, "Another leaf" resource should not be selected.
-    await waitFor(() => expect(screen.queryByLabelText('Resource breadcrumb')).not.toBeInTheDocument());
-    await waitFor(() =>
-      expect(screen.getByRole('button', { name: 'Drill down to Source root node #1 children' })).toBeInTheDocument(),
-    );
-  });
-
-  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()
-      .mockResolvedValue([
-        mockResource({ id: '1', name: 'Test Page 1' }),
-        mockResource({ id: '2', name: 'Test Page 2' }),
-        mockResource({ id: '3', name: 'Test Page 3' }),
-      ]);
-
-    const { getAllByText } = await act(async () => {
-      // Component has finished initial render
-      return 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')).toBeInTheDocument();
-      expect(screen.getByText('Test Page 2')).toBeInTheDocument();
-      expect(screen.getByText('Test Page 3')).toBeInTheDocument();
-    });
-  });
-
-  it.each([
-    ['mobile', 360, 1],
-    ['desktop', 1920, 0],
-  ])(
-    'Selecting a node on %s shows its properties in the details panel',
-    async (description: string, width: number, expectedPreviewPanelCloseButtons: number) => {
-      await act(async () =>
-        render(
-          <ResponsiveContext.Provider value={{ width }}>
-            <ResourcePickerContainer {...baseProps} />
-          </ResponsiveContext.Provider>,
-        ),
-      );
-      await waitFor(() => {
-        expect(screen.getByRole('button', { name: 'Drill down to Test Website children' })).toBeInTheDocument();
-      });
-
-      // Is on base page
-      expect(screen.getByLabelText('Source list')).toBeInTheDocument();
-
-      // Drill into the source
-      const user = userEvent.setup();
-      user.click(screen.getByRole('button', { name: 'Drill down to Test Website children' }));
-      await waitFor(() => expect(screen.getByRole('button', { name: 'page Test Page' })).toBeInTheDocument());
-
-      // Select the resource
-      user.click(screen.getByRole('button', { name: 'page Test Page' }));
-
-      // Asset that the preview panel containing the asset type/ID/etc. is visible
-      await waitFor(() => expect(screen.getByText('Asset ID')).toBeInTheDocument());
-      expect(screen.getByText('Mocked Page')).toBeInTheDocument();
-      expect(screen.getByText('#123')).toBeInTheDocument();
-      expect(screen.queryAllByRole('button', { name: 'Close details' })).toHaveLength(expectedPreviewPanelCloseButtons);
-    },
-  );
-
-  it('Closing the details panel deselects the node', async () => {
-    render(
-      <ResponsiveContext.Provider value={{ width: 360 }}>
-        <ResourcePickerContainer {...baseProps} />
-      </ResponsiveContext.Provider>,
-    );
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'Drill down to Test Website children' })).toBeInTheDocument();
-    });
-
-    // Drill into the source
-    const user = userEvent.setup();
-    user.click(screen.getByRole('button', { name: 'Drill down to Test Website children' }));
-    await waitFor(() => expect(screen.getByRole('button', { name: 'page Test Page' })).toBeInTheDocument());
-
-    // Select the resource
-    user.click(screen.getByRole('button', { name: 'page Test Page' }));
-
-    // Wait for the preview panel to open
-    await waitFor(() => expect(screen.getByText('Mocked Page')).toBeInTheDocument());
-    await waitFor(() => expect(screen.getByText('#123')).toBeInTheDocument());
-
-    // Close the preview panel
-    user.click(screen.getByRole('button', { name: 'Close details' }));
-
-    await waitFor(() => {
-      // Resource should be unselected and preview modal should disappear
-      expect(screen.getByText('Mocked Page')).toBeInTheDocument();
-      expect(screen.getByText('#123')).toBeInTheDocument();
-    });
-  });
-
-  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: 'Drill down to Test Website children' }));
-
-    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: Hierarchy<Source | Resource> = [];
-
-    MockResourceBreadcrumb.mockImplementation((args: ResourceBreadcrumbProps<unknown>) => {
-      mockHierarchy = args.hierarchy as Hierarchy<Source | Resource>;
-      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([
-      {
-        key: 'source:1-resource:1',
-        label: 'Test Website',
-        node: expect.any(Object),
-      },
-    ]);
-  });
-
-  it('Multiple hierarchy is tracked on on drill down', async () => {
-    let mockHierarchy: Hierarchy<Source | Resource> = [];
-
-    MockResourceBreadcrumb.mockImplementation((args: ResourceBreadcrumbProps<unknown>) => {
-      mockHierarchy = args.hierarchy as Hierarchy<Source | Resource>;
-      return ActualResourceBreadcrumb(args);
-    });
-
-    const onRequestChildren = jest
-      .fn()
-      .mockResolvedValueOnce([
-        mockResource({
-          id: '11',
-          name: 'Test Page',
-          childCount: 4,
-        }),
-      ])
-      .mockResolvedValueOnce([
-        mockResource({
-          id: '111',
-          name: 'Second Page',
-          childCount: 0,
-        }),
-      ]);
-
-    const { getByLabelText, getByText, getAllByText, queryAllByText } = 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();
-    });
-
-    // Loading is done
-    await waitFor(() => {
-      expect(queryAllByText('loading Resource list')).toHaveLength(0);
-    });
-
-    // 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([
-      {
-        key: 'source:1-resource:1',
-        label: 'Test Website',
-        node: expect.any(Object),
-      },
-      {
-        key: '11',
-        label: 'Test Page',
-        node: expect.any(Object),
-      },
-    ]);
-  });
-
-  it('Can track multiple hierarchy jumping back', async () => {
-    let mockHierarchy: Hierarchy<Source | Resource> = [];
-
-    MockResourceBreadcrumb.mockImplementation((args: ResourceBreadcrumbProps<unknown>) => {
-      mockHierarchy = args.hierarchy as Hierarchy<Source | Resource>;
-      return ActualResourceBreadcrumb(args);
-    });
-
-    const onRequestChildren = jest
-      .fn()
-      .mockResolvedValueOnce([
-        mockResource({
-          id: '11',
-          name: 'First Level',
-          childCount: 4,
-        }),
-      ])
-      .mockResolvedValueOnce([
-        mockResource({
-          id: '111',
-          name: 'Second Level',
-          childCount: 0,
-        }),
-      ])
-      .mockResolvedValueOnce([
-        mockResource({
-          id: '11',
-          name: 'First Level',
-          childCount: 4,
-        }),
-      ]);
-
-    const { 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(getByText('First Level')).toBeInTheDocument();
-    });
-
-    // Drill down again
-    user.click(screen.getByRole('button', { name: 'Drill down to First Level children' }));
-
-    await waitFor(() => {
-      expect(getByText('Second Level')).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 Level')).not.toBeInTheDocument();
-    });
-
-    // Expect the clicked child was added to breadcrumb
-    expect(mockHierarchy).toEqual([
-      {
-        key: 'source:1-resource:1',
-        label: 'Test Website',
-        node: expect.any(Object),
-      },
-    ]);
-  });
-
-  it('Multiple hierarchy can handle reset to new source', async () => {
-    let mockHierarchy: Hierarchy<Source | Resource> = [];
-
-    MockResourceBreadcrumb.mockImplementation((args: ResourceBreadcrumbProps<unknown>) => {
-      mockHierarchy = args.hierarchy as Hierarchy<Source | Resource>;
-      return ActualResourceBreadcrumb(args);
-    });
-
-    const onRequestChildren = jest
-      .fn()
-      .mockResolvedValueOnce([mockResource({ name: 'Test Page' })])
-      .mockResolvedValueOnce([mockResource({ name: 'Second Page' })]);
-
-    const onRequestSources = jest.fn().mockImplementation(() => {
-      return Promise.resolve([
-        mockSource({
-          id: '1',
-          name: 'Test system',
-          nodes: [
-            {
-              id: '1',
-              type: {
-                code: 'site',
-                name: 'Site',
-              },
-              name: 'Test Website',
-              childCount: 21,
-            },
-            {
-              id: '2',
-              type: {
-                code: 'site',
-                name: 'Site',
-              },
-              name: '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([
-      {
-        key: 'source:1-resource:2',
-        label: 'Second Website',
-        node: expect.any(Object),
-      },
-    ]);
-  });
-
-  describe('handleDetailSelect() tests', () => {
-    it('Source select works', async () => {
-      const onChangeMock = jest.fn();
-      const onCloseMock = jest.fn();
-      const { getAllByText } = render(
-        <ResourcePickerContainer {...baseProps} onChange={onChangeMock} onClose={onCloseMock} />,
-      );
-
-      await waitFor(() => {
-        expect(getAllByText('Test system')[0]).toBeInTheDocument();
-      });
-
-      const user = userEvent.setup();
-
-      // Select the resource
-      user.click(screen.getByRole('button', { name: 'site Test Website' }));
-
-      // Wait for the preview panel to open
-      await waitFor(() => expect(screen.getByText('Site')).toBeInTheDocument());
-      await waitFor(() => expect(screen.getByText('#1')).toBeInTheDocument());
-
-      user.click(screen.getByRole('button', { name: 'Select' }));
-
-      await waitFor(() => expect(onChangeMock).toHaveBeenCalled());
-      await waitFor(() => expect(onCloseMock).toHaveBeenCalled());
-    });
-
-    it('Resource select works', async () => {
-      const onChangeMock = jest.fn();
-      const onCloseMock = jest.fn();
-      const { getAllByText } = render(
-        <ResourcePickerContainer {...baseProps} onChange={onChangeMock} onClose={onCloseMock} />,
-      );
-
-      await waitFor(() => {
-        expect(getAllByText('Test system')[0]).toBeInTheDocument();
-      });
-
-      const user = userEvent.setup();
-      user.click(screen.getByRole('button', { name: 'Drill down to Test Website children' }));
-      await waitFor(() => expect(screen.getByRole('button', { name: 'page Test Page' })).toBeInTheDocument());
-
-      // Select the resource
-      user.click(screen.getByRole('button', { name: 'page Test Page' }));
-
-      // Wait for the preview panel to open
-      await waitFor(() => expect(screen.getByText('Mocked Page')).toBeInTheDocument());
-      await waitFor(() => expect(screen.getByText('#123')).toBeInTheDocument());
-
-      user.click(screen.getByRole('button', { name: 'Select' }));
-
-      await waitFor(() => expect(onChangeMock).toHaveBeenCalled());
-      await waitFor(() => expect(onCloseMock).toHaveBeenCalled());
-    });
-  });
-});