@squiz/resource-browser 1.69.1 → 2.1.8-rc.0

package/src/SourceList/SourceList.spec.tsx

@@ -1,448 +1,55 @@
-/* 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 { mockResource, mockSource } from '../__mocks__/MockModels';
-import { useOverlayTriggerState, OverlayTriggerState } from 'react-stately';
+import { render, screen, act, fireEvent } from '@testing-library/react';
 import SourceList from './SourceList';
-import { Source } from '../types';
-import { RecentResourcesPaths } from '../Hooks/useRecentResourcesPaths';
 
-const mockRecentSources: RecentResourcesPaths[] = [
-  {
-    source: mockSource({
-      id: '1',
-      name: 'Source 1',
-      nodes: [
-        {
-          id: '1',
-          type: {
-            code: 'site',
-            name: 'Site',
-          },
-          name: 'Node 1',
-          childCount: 21,
-        },
-        {
-          id: '2',
-          type: {
-            code: 'site',
-            name: 'Site',
-          },
-          name: 'Node 2',
-          childCount: 13,
-        },
-      ],
-    }),
-    path: [mockResource()],
-  },
-];
+import { mockSource } from '../__mocks__/MockModels';
 
-const sources: Source[] = [
-  mockSource({
-    id: '1',
-    name: 'Source 1',
-    nodes: [
-      {
-        id: '1',
-        type: {
-          code: 'site',
-          name: 'Site',
-        },
-        name: 'Node 1',
-        childCount: 21,
-      },
-      {
-        id: '2',
-        type: {
-          code: 'site',
-          name: 'Site',
-        },
-        name: 'Node 2',
-        childCount: 13,
-      },
-    ],
-  }),
-  mockSource({
-    id: '2',
-    name: 'Source 2',
-    nodes: [
-      {
-        id: '3',
-        type: {
-          code: 'site',
-          name: 'Site',
-        },
-        name: 'Node 3',
-        childCount: 15,
-      },
-      {
-        id: '4',
-        type: {
-          code: 'site',
-          name: 'Site',
-        },
-        name: 'Node 4',
-        childCount: 10,
-      },
-    ],
-  }),
-];
-
-function SourceListTestWrapper({
-  constructFunction,
-}: {
-  constructFunction: (previewModalState: OverlayTriggerState) => JSX.Element;
-}) {
-  const previewModalState = useOverlayTriggerState({});
-  return constructFunction(previewModalState);
-}
+import GenericBrowserLib from '@squiz/generic-browser-lib'; // Import Functional Component
+jest.mock('@squiz/generic-browser-lib', () => {
+    return {
+        ...jest.requireActual('@squiz/generic-browser-lib'),
+    };
+});
 
 describe('SourceList', () => {
-  it('Shows loading when isLoading is true', async () => {
-    const reload = jest.fn();
-
-    render(
-      <SourceListTestWrapper
-        constructFunction={(previewModalState) => {
-          return (
-            <SourceList
-              sources={sources}
-              previewModalState={previewModalState}
-              isLoading={true}
-              onSourceSelect={() => {}}
-              onSourceDrilldown={() => {}}
-              error={null}
-              handleReload={reload}
-              setSource={() => {}}
-              recentSources={mockRecentSources}
-            />
-          );
-        }}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByLabelText('loading Source list')).toBeTruthy();
-    });
-  });
-
-  it('Source list render each source', async () => {
-    const reload = jest.fn();
-
-    render(
-      <SourceListTestWrapper
-        constructFunction={(previewModalState) => {
-          return (
-            <SourceList
-              sources={sources}
-              previewModalState={previewModalState}
-              isLoading={false}
-              onSourceSelect={() => {}}
-              onSourceDrilldown={() => {}}
-              error={null}
-              handleReload={reload}
-              setSource={() => {}}
-              recentSources={mockRecentSources}
-            />
-          );
-        }}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.queryByText('Source 1')).toBeTruthy();
-      expect(screen.queryByText('Source 2')).toBeTruthy();
-    });
-  });
-
-  it('Focus is moved to the source list', async () => {
-    const reload = jest.fn();
-
-    render(
-      <SourceListTestWrapper
-        constructFunction={(previewModalState) => {
-          return (
-            <SourceList
-              sources={sources}
-              previewModalState={previewModalState}
-              isLoading={false}
-              onSourceSelect={() => {}}
-              onSourceDrilldown={() => {}}
-              error={null}
-              handleReload={reload}
-              setSource={() => {}}
-              recentSources={mockRecentSources}
-            />
-          );
-        }}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.queryByLabelText('Source list')).toHaveFocus();
-    });
-  });
-
-  it('Source list renders each sources nodes', async () => {
-    const reload = jest.fn();
-
-    render(
-      <SourceListTestWrapper
-        constructFunction={(previewModalState) => {
-          return (
-            <SourceList
-              sources={sources}
-              previewModalState={previewModalState}
-              isLoading={false}
-              onSourceSelect={() => {}}
-              onSourceDrilldown={() => {}}
-              error={null}
-              handleReload={reload}
-              setSource={() => {}}
-              recentSources={mockRecentSources}
-            />
-          );
-        }}
-      />,
-    );
+    it('should render <li> for each provided source', () => {
+        const sources = [mockSource(), mockSource({ id: '2' })];
+        const onSourceSelect = jest.fn();
+        render(<SourceList sources={sources} onSourceSelect={onSourceSelect} />);
 
-    await waitFor(() => {
-      const source1 = screen.getByLabelText('Source 1 nodes');
-      expect(within(source1).queryByText('Node 1')).toBeTruthy();
-      expect(within(source1).queryByText('Node 2')).toBeTruthy();
-
-      const source2 = screen.getByLabelText('Source 2 nodes');
-      expect(within(source2).queryByText('Node 3')).toBeTruthy();
-      expect(within(source2).queryByText('Node 4')).toBeTruthy();
+        expect(screen.getByLabelText('environment list')).toBeInTheDocument();
+        expect(screen.getByLabelText('environment list').children.length).toEqual(2);
     });
-  });
-
-  it('Clicking node body triggers correct onSourceSelect', async () => {
-    const onSourceSelect = jest.fn();
-    const reload = jest.fn();
-
-    render(
-      <SourceListTestWrapper
-        constructFunction={(previewModalState) => {
-          return (
-            <SourceList
-              sources={sources}
-              previewModalState={previewModalState}
-              isLoading={false}
-              onSourceSelect={onSourceSelect}
-              onSourceDrilldown={() => {}}
-              error={null}
-              handleReload={reload}
-              setSource={() => {}}
-              recentSources={mockRecentSources}
-            />
-          );
-        }}
-      />,
-    );
-
-    const user = userEvent.setup();
-    const itemButton = screen.getByRole('button', { name: 'site Node 1' });
-    user.click(itemButton);
 
-    await waitFor(() => {
-      // Provides the item that was clicked and an id reference to the button that was clicked
-      expect(onSourceSelect).toHaveBeenCalledWith(
-        {
-          source: sources[0],
-          resource: sources[0].nodes[0],
-        },
-        { id: expect.any(String) },
-      );
+    it('should render Icon based on source type', () => {
+        jest.spyOn(GenericBrowserLib, 'Icon');
+        const sources = [mockSource({ type: 'dam' })];
+        const onSourceSelect = jest.fn();
+        render(<SourceList sources={sources} onSourceSelect={onSourceSelect} />);
+        expect(GenericBrowserLib.Icon).toHaveBeenCalledWith(expect.objectContaining({ icon: 'dam' }), {});
     });
-  });
 
-  it('Clicking node child count button triggers correct onSourceDrilldown', async () => {
-    const onSourceDrilldown = jest.fn();
-    const reload = jest.fn();
-
-    render(
-      <SourceListTestWrapper
-        constructFunction={(previewModalState) => {
-          return (
-            <SourceList
-              sources={sources}
-              previewModalState={previewModalState}
-              isLoading={false}
-              onSourceSelect={() => {}}
-              onSourceDrilldown={onSourceDrilldown}
-              error={null}
-              handleReload={reload}
-              setSource={() => {}}
-              recentSources={mockRecentSources}
-            />
-          );
-        }}
-      />,
-    );
-
-    const user = userEvent.setup();
-    const itemButton = screen.getByRole('button', { name: 'Drill down to Node 1 children' });
-    user.click(itemButton);
-
-    await waitFor(() => {
-      // Provides the item that was clicked and an id reference to the button that was clicked
-      expect(onSourceDrilldown).toHaveBeenCalledWith({
-        source: sources[0],
-        resource: sources[0].nodes[0],
-      });
+    it('should render using source name', () => {
+        const sources = [mockSource({ type: 'dam', name: 'mySource' })];
+        const onSourceSelect = jest.fn();
+        render(<SourceList sources={sources} onSourceSelect={onSourceSelect} />);
+        expect(screen.getByText('mySource')).toBeInTheDocument();
     });
-  });
-
-  it('Renders error state when an error occurs loading source list', async () => {
-    const reload = jest.fn();
 
-    const { getByText } = render(
-      <SourceListTestWrapper
-        constructFunction={(previewModalState) => {
-          return (
-            <SourceList
-              sources={sources}
-              previewModalState={previewModalState}
-              isLoading={false}
-              onSourceSelect={() => {}}
-              onSourceDrilldown={() => {}}
-              error={new Error('Source list error!')}
-              handleReload={reload}
-              setSource={() => {}}
-              recentSources={mockRecentSources}
-            />
-          );
-        }}
-      />,
-    );
-
-    await waitFor(() => {
-      const errorMessage = getByText('Source list error!');
-      expect(errorMessage).toBeInTheDocument();
+    it('should render using source id if name not provided', () => {
+        const sources = [mockSource({ type: 'dam', name: undefined, id: '1115544' })];
+        const onSourceSelect = jest.fn();
+        render(<SourceList sources={sources} onSourceSelect={onSourceSelect} />);
+        expect(screen.getByText('1115544')).toBeInTheDocument();
+        expect(screen.queryByText('mySource')).not.toBeInTheDocument();
     });
-  });
-
-  it('Renders recent locations section when local storage has data present', async () => {
-    const reload = jest.fn();
-    const setSource = jest.fn();
-
-    render(
-      <SourceListTestWrapper
-        constructFunction={(previewModalState) => {
-          return (
-            <SourceList
-              sources={sources}
-              previewModalState={previewModalState}
-              isLoading={false}
-              onSourceSelect={() => {}}
-              onSourceDrilldown={() => {}}
-              error={null}
-              handleReload={reload}
-              setSource={setSource}
-              recentSources={mockRecentSources}
-            />
-          );
-        }}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Recent locations')).toBeInTheDocument();
-      expect(screen.getByText('Test resource')).toBeInTheDocument();
-    });
-  });
-
-  it('Handles setSource on click of recent locations item', async () => {
-    const reload = jest.fn();
-    const setSource = jest.fn();
-
-    render(
-      <SourceListTestWrapper
-        constructFunction={(previewModalState) => {
-          return (
-            <SourceList
-              sources={sources}
-              previewModalState={previewModalState}
-              isLoading={false}
-              onSourceSelect={() => {}}
-              onSourceDrilldown={() => {}}
-              error={null}
-              handleReload={reload}
-              setSource={setSource}
-              recentSources={mockRecentSources}
-            />
-          );
-        }}
-      />,
-    );
 
-    const user = userEvent.setup();
-    const itemButton = screen.getByRole('button', { name: 'Drill down to Test resource children' });
-    user.click(itemButton);
+    it('should call onSourceSelect with source object when clicked', async () => {
+        const sources = [mockSource(), mockSource({ type: 'dam', name: 'mySource', id: '1115544' })];
+        const onSourceSelect = jest.fn();
+        render(<SourceList sources={sources} onSourceSelect={onSourceSelect} />);
 
-    await waitFor(() => {
-      // Provides the item that was clicked and an id reference to the button that was clicked
-      expect(setSource).toHaveBeenCalledWith(
-        {
-          resource: {
-            childCount: 0,
-            id: '1',
-            lineages: [],
-            name: 'Test resource',
-            status: {
-              code: 'live',
-              name: 'Live',
-            },
-            type: {
-              code: 'folder',
-              name: 'Folder',
-            },
-            url: 'https://no-where.com',
-            urls: [],
-          },
-          source: {
-            id: '1',
-            name: 'Source 1',
-            nodes: [
-              {
-                childCount: 21,
-                id: '1',
-                lineages: [],
-                name: 'Node 1',
-                status: {
-                  code: 'live',
-                  name: 'Live',
-                },
-                type: {
-                  code: 'site',
-                  name: 'Site',
-                },
-                url: 'https://no-where.com',
-                urls: [],
-              },
-              {
-                childCount: 13,
-                id: '2',
-                lineages: [],
-                name: 'Node 2',
-                status: {
-                  code: 'live',
-                  name: 'Live',
-                },
-                type: {
-                  code: 'site',
-                  name: 'Site',
-                },
-                url: 'https://no-where.com',
-                urls: [],
-              },
-            ],
-          },
-        },
-        [],
-      );
+        await act(() => fireEvent.click(screen.getByRole('button', { name: 'mySource' })));
+        expect(onSourceSelect).toHaveBeenCalledWith(sources[1]);
     });
-  });
 });

package/src/SourceList/SourceList.stories.tsx

@@ -1,48 +1,28 @@
 import React from 'react';
 import { StoryFn, Meta } from '@storybook/react';
-import { useOverlayTriggerState } from 'react-stately';
-
 import SourceList from './SourceList';
-import sampleSources from './sample-sources.json';
+import sampleSources from '../__mocks__/sample-sources.json';
+import { ResourceBrowserSource } from '../types';
 
 export default {
-  title: 'Source List',
-  component: SourceList,
+    title: 'Source list',
+    component: SourceList,
 } as Meta<typeof SourceList>;
 
-const Template: StoryFn<typeof SourceList> = ({ sources, isLoading }) => {
-  const previewModalState = useOverlayTriggerState({});
-
-  return (
-    <SourceList
-      sources={sources}
-      previewModalState={previewModalState}
-      isLoading={isLoading}
-      onSourceSelect={({ source, resource }) =>
-        alert(`Resource Select: ${source.name} - ${resource?.name}[${resource?.id}]`)
-      }
-      onSourceDrilldown={({ source, resource }) =>
-        alert(`Child Drill Down: ${source.name} - ${resource?.name}[${resource?.id}]`)
-      }
-      handleReload={() => {
-        console.log('Handle reload');
-      }}
-      setSource={() => {
-        alert(`Recent Location Selected`);
-      }}
-      error={null}
-    />
-  );
+const Template: StoryFn<typeof SourceList> = (props) => {
+    const sources = sampleSources as ResourceBrowserSource[];
+    return (
+        <div className="flex justify-center m-3">
+            <SourceList
+                sources={sources}
+                onSourceSelect={(source) => {
+                    console.log(`Source ${source?.name} / ${source.id} was selected`);
+                }}
+            ></SourceList>
+        </div>
+    );
 };
 
 export const Primary = Template.bind({});
-Primary.args = {
-  sources: sampleSources,
-  isLoading: false,
-};
 
-export const Loading = Template.bind({});
-Loading.args = {
-  ...Primary.args,
-  isLoading: true,
-};
+Primary.args = {};