@squiz/resource-browser 1.32.1-alpha.14 → 1.32.1-alpha.16

package/src/ResourcePickerContainer/ResourcePickerContainer.spec.tsx

@@ -2,11 +2,11 @@
 import React from 'react';
 import { screen, render, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
+import { mockResource, mockSource } from '../__mocks__/MockModels';
+import { Resource, Source, Hierarchy } from '../types';
 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
@@ -37,51 +37,39 @@ const baseProps = {
   title: 'Testing',
   titleAriaProps: {},
   allowedTypes: undefined,
-  onClose: () => {},
+  onClose: jest.fn(),
   onRequestSources: () => {
     return Promise.resolve([
-      {
+      mockSource({
         id: '1',
         name: 'Test system',
         nodes: [
           {
-            id: {
-              id: '1',
-              source: '1',
+            id: '1',
+            type: {
+              code: 'site',
+              name: 'Site',
             },
-            type: 'site',
-            selected: false,
-            label: 'Test Website',
+            name: 'Test Website',
             childCount: 21,
           },
         ],
-      },
+      }),
     ]);
   },
   onRequestChildren: () => {
     return Promise.resolve([
-      {
-        id: {
-          id: '1',
-          source: '1',
+      mockResource({
+        id: '123',
+        type: {
+          code: 'page',
+          name: 'Mocked Page',
         },
-        type: 'page',
-        selected: false,
-        label: 'Test Page',
+        name: 'Test Page',
         childCount: 0,
-      },
+      }),
     ]);
   },
-  onRequestResource: () => {
-    return Promise.resolve({
-      type: 'page',
-      name: 'Products',
-      properties: new Map([
-        ['assetId', '12345'],
-        ['status', 'UnderConstruction'],
-      ]),
-    });
-  },
   onChange: () => {},
 };
 
@@ -100,52 +88,47 @@ describe('ResourcePickerContainer', () => {
   });
 
   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,
+    const onRequestSources = jest.fn().mockResolvedValue([
+      mockSource({
+        id: '1',
+        name: 'Test system 1',
+        nodes: [
+          {
+            id: '1',
+            type: {
+              code: 'site',
+              name: 'Site',
             },
-          ],
-        },
-        {
-          id: '2',
-          name: 'Test system 2',
-          nodes: [
-            {
-              id: {
-                id: '1',
-                source: '2',
-              },
-              type: 'site',
-              selected: false,
-              label: 'Test Website 2',
-              childCount: 21,
+            name: 'Test Website 1',
+            childCount: 21,
+          },
+        ],
+      }),
+      mockSource({
+        id: '2',
+        name: 'Test system 2',
+        nodes: [
+          {
+            id: '1',
+            type: {
+              code: 'site',
+              name: 'Site',
             },
-            {
-              id: {
-                id: '2',
-                source: '2',
-              },
-              type: 'site',
-              selected: false,
-              label: 'Test Website 3',
-              childCount: 21,
+            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(() => {
@@ -154,12 +137,12 @@ describe('ResourcePickerContainer', () => {
 
     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 1')).toBeInTheDocument();
+      expect(within(sourceList).getByText('Test Website 1')).toBeInTheDocument();
 
-      expect(within(sourceList).getByText('Test system 2')).toBeTruthy();
-      expect(within(sourceList).getByText('Test Website 2')).toBeTruthy();
-      expect(within(sourceList).getByText('Test Website 3')).toBeTruthy();
+      expect(within(sourceList).getByText('Test system 2')).toBeInTheDocument();
+      expect(within(sourceList).getByText('Test Website 2')).toBeInTheDocument();
+      expect(within(sourceList).getByText('Test Website 3')).toBeInTheDocument();
     });
   });
 
@@ -184,40 +167,13 @@ describe('ResourcePickerContainer', () => {
   });
 
   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,
-        },
+    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' }),
       ]);
-    });
 
     // Component has finished initial render
     const { getAllByText } = render(<ResourcePickerContainer {...baseProps} onRequestChildren={onRequestChildren} />);
@@ -230,85 +186,75 @@ describe('ResourcePickerContainer', () => {
     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();
+      expect(screen.getByText('Test Page 1')).toBeInTheDocument();
+      expect(screen.getByText('Test Page 2')).toBeInTheDocument();
+      expect(screen.getByText('Test Page 3')).toBeInTheDocument();
     });
   });
 
-  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();
-    });
+  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) => {
+      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')).toBeTruthy();
+      // Is on base page
+      expect(screen.getByLabelText('Source list')).toBeInTheDocument();
 
-    // Click the drill down counter
-    const user = userEvent.setup();
-    user.click(screen.getByRole('button', { name: 'site Test Website' }));
+      // 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());
 
-    await waitFor(() => {
-      expect(getByText('Products')).toBeInTheDocument();
-    });
+      // Select the resource
+      user.click(screen.getByRole('button', { name: 'page Test Page' }));
 
-    await waitFor(() => {
-      expect(screen.getByText('Products')).toBeTruthy();
-      expect(screen.getByText('page')).toBeTruthy();
-      expect(screen.getByText('#12345')).toBeTruthy();
-    });
-  });
+      // 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('Mobile: Selecting a node shows its properties in the details panel', async () => {
-    const { getByText, getAllByText } = render(
+  it('Closing the details panel deselects the node', async () => {
+    render(
       <ResponsiveContext.Provider value={{ width: 360 }}>
         <ResourcePickerContainer {...baseProps} />
       </ResponsiveContext.Provider>,
     );
     await waitFor(() => {
-      expect(getAllByText('Test system')[0]).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Drill down to Test Website children' })).toBeInTheDocument();
     });
 
-    // Click the drill down counter
+    // Drill into the source
     const user = userEvent.setup();
-    user.click(screen.getByRole('button', { name: 'site Test Website' }));
+    user.click(screen.getByRole('button', { name: 'Drill down to Test Website children' }));
+    await waitFor(() => expect(screen.getByRole('button', { name: 'page Test Page' })).toBeInTheDocument());
 
-    await waitFor(() => {
-      expect(getByText('Products')).toBeInTheDocument();
-    });
+    // Select the resource
+    user.click(screen.getByRole('button', { name: 'page Test Page' }));
 
-    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();
-    });
+    // 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(() => {
-      // Is now on child page
-      expect(screen.queryByText('Products')).toBeFalsy();
-      expect(screen.queryByText('page')).toBeFalsy();
-      expect(screen.queryByText('#12345')).toBeFalsy();
+      // Resource should be unselected and preview modal should disappear
+      expect(screen.getByText('Mocked Page')).toBeInTheDocument();
+      expect(screen.getByText('#123')).toBeInTheDocument();
     });
   });
 
@@ -392,10 +338,10 @@ describe('ResourcePickerContainer', () => {
   });
 
   it('Breadcrumb hierarchy is added to on drill down', async () => {
-    let mockHierarchy: Array<Hierarchy> = [];
+    let mockHierarchy: Hierarchy<Source | Resource> = [];
 
-    MockResourceBreadcrumb.mockImplementation((args: ResourceBreadcrumbProps) => {
-      mockHierarchy = args.hierarchy;
+    MockResourceBreadcrumb.mockImplementation((args: ResourceBreadcrumbProps<unknown>) => {
+      mockHierarchy = args.hierarchy as Hierarchy<Source | Resource>;
       return ActualResourceBreadcrumb(args);
     });
 
@@ -413,47 +359,39 @@ describe('ResourcePickerContainer', () => {
     });
 
     // Expect the clicked child was added to breadcrumb
-    expect(mockHierarchy).toEqual([{ id: { id: '1', source: '1' }, label: 'Test Website' }]);
+    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: Array<Hierarchy> = [];
+    let mockHierarchy: Hierarchy<Source | Resource> = [];
 
-    MockResourceBreadcrumb.mockImplementation((args: ResourceBreadcrumbProps) => {
-      mockHierarchy = args.hierarchy;
+    MockResourceBreadcrumb.mockImplementation((args: ResourceBreadcrumbProps<unknown>) => {
+      mockHierarchy = args.hierarchy as Hierarchy<Source | Resource>;
       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,
-          },
-        ]);
-      });
+      .mockResolvedValueOnce([
+        mockResource({
+          id: '11',
+          name: 'Test Page',
+          childCount: 4,
+        }),
+      ])
+      .mockResolvedValueOnce([
+        mockResource({
+          id: '111',
+          name: 'Second Page',
+          childCount: 0,
+        }),
+      ]);
 
     const { getByLabelText, getByText, getAllByText } = render(
       <ResourcePickerContainer {...baseProps} onRequestChildren={onRequestChildren} />,
@@ -480,76 +418,51 @@ describe('ResourcePickerContainer', () => {
     // Expect the clicked child was added to breadcrumb
     expect(mockHierarchy).toEqual([
       {
-        id: {
-          id: '1',
-          source: '1',
-        },
+        key: 'source:1-resource:1',
         label: 'Test Website',
+        node: expect.any(Object),
       },
       {
-        id: {
-          id: '11',
-          source: '1',
-        },
+        key: '11',
         label: 'Test Page',
+        node: expect.any(Object),
       },
     ]);
   });
 
   it('Can track multiple hierarchy jumping back', async () => {
-    let mockHierarchy: Array<Hierarchy> = [];
+    let mockHierarchy: Hierarchy<Source | Resource> = [];
 
-    MockResourceBreadcrumb.mockImplementation((args: ResourceBreadcrumbProps) => {
-      mockHierarchy = args.hierarchy;
+    MockResourceBreadcrumb.mockImplementation((args: ResourceBreadcrumbProps<unknown>) => {
+      mockHierarchy = args.hierarchy as Hierarchy<Source | Resource>;
       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,
-          },
-        ]);
-      });
+      .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 { getByLabelText, getByText, getAllByText, queryByText } = render(
+    const { getByText, getAllByText, queryByText } = render(
       <ResourcePickerContainer {...baseProps} onRequestChildren={onRequestChildren} />,
     );
     await waitFor(() => {
@@ -561,14 +474,14 @@ describe('ResourcePickerContainer', () => {
 
     // Breadcrumb is showing
     await waitFor(() => {
-      expect(getByLabelText('Resource breadcrumb')).toBeInTheDocument();
+      expect(getByText('First Level')).toBeInTheDocument();
     });
 
     // Drill down again
-    user.click(screen.getByRole('button', { name: 'Drill down to Test Page children' }));
+    user.click(screen.getByRole('button', { name: 'Drill down to First Level children' }));
 
     await waitFor(() => {
-      expect(getByText('Second Page')).toBeInTheDocument();
+      expect(getByText('Second Level')).toBeInTheDocument();
     });
 
     // Click on previous breadcrumb item
@@ -576,88 +489,58 @@ describe('ResourcePickerContainer', () => {
     user.click(within(breadcrumb).getByRole('button', { name: 'Test Website' }));
 
     await waitFor(() => {
-      expect(queryByText('Second Page')).not.toBeInTheDocument();
+      expect(queryByText('Second Level')).not.toBeInTheDocument();
     });
 
     // Expect the clicked child was added to breadcrumb
     expect(mockHierarchy).toEqual([
       {
-        id: {
-          id: '1',
-          source: '1',
-        },
+        key: 'source:1-resource:1',
         label: 'Test Website',
+        node: expect.any(Object),
       },
     ]);
   });
 
   it('Multiple hierarchy can handle reset to new source', async () => {
-    let mockHierarchy: Array<Hierarchy> = [];
+    let mockHierarchy: Hierarchy<Source | Resource> = [];
 
-    MockResourceBreadcrumb.mockImplementation((args: ResourceBreadcrumbProps) => {
-      mockHierarchy = args.hierarchy;
+    MockResourceBreadcrumb.mockImplementation((args: ResourceBreadcrumbProps<unknown>) => {
+      mockHierarchy = args.hierarchy as Hierarchy<Source | Resource>;
       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,
-          },
-        ]);
-      });
+      .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: {
-                id: '1',
-                source: '1',
+              id: '1',
+              type: {
+                code: 'site',
+                name: 'Site',
               },
-              type: 'site',
-              selected: false,
-              label: 'Test Website',
+              name: 'Test Website',
               childCount: 21,
             },
             {
-              id: {
-                id: '2',
-                source: '1',
+              id: '2',
+              type: {
+                code: 'site',
+                name: 'Site',
               },
-              type: 'site',
-              selected: false,
-              label: 'Second Website',
+              name: 'Second Website',
               childCount: 21,
             },
           ],
-        },
+        }),
       ]);
     });
 
@@ -683,10 +566,10 @@ describe('ResourcePickerContainer', () => {
     user.click(screen.getByRole('button', { name: 'Source quick select' }));
 
     await waitFor(() => {
-      expect(getByRole('button', { name: 'site Second Website' })).toBeInTheDocument();
+      expect(getByRole('button', { name: 'Site Second Website' })).toBeInTheDocument();
     });
 
-    user.click(getByRole('button', { name: 'site Second Website' }));
+    user.click(getByRole('button', { name: 'Site Second Website' }));
 
     await waitFor(() => {
       expect(getByText('Second Page')).toBeInTheDocument();
@@ -695,11 +578,9 @@ describe('ResourcePickerContainer', () => {
     // Expect the clicked child was added to breadcrumb
     expect(mockHierarchy).toEqual([
       {
-        id: {
-          id: '2',
-          source: '1',
-        },
+        key: 'source:1-resource:2',
         label: 'Second Website',
+        node: expect.any(Object),
       },
     ]);
   });