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

package/src/SourceDropdown/SourceDropdown.spec.tsx

@@ -1,433 +1,107 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
 import React from 'react';
-import { screen, render, waitFor } from '@testing-library/react';
+import { screen, render, waitFor, act, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import SourceDropdown from './SourceDropdown';
-import { Source } from '../types';
-import { mockScopedSource, mockSource, mockResource } from '../__mocks__/MockModels';
-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()],
-  },
-];
-
-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,
-      },
-    ],
-  }),
-];
+import { mockSource } from '../__mocks__/MockModels';
+import { ResourceBrowserSource } from '../types';
 
 describe('SourceDropdown', () => {
-  it('Render generic label if no source provided', async () => {
-    render(
-      <SourceDropdown
-        sources={sources}
-        selectedSource={null}
-        isLoading={false}
-        onRootSelect={() => {}}
-        onSourceSelect={() => {}}
-        setSource={() => {}}
-        currentResource={mockResource()}
-        recentSources={mockRecentSources}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'Source quick select' })).toHaveTextContent(
-        'view All available sources',
-      );
-    });
-  });
-
-  it('Show loading state if isLoading true', async () => {
-    render(
-      <SourceDropdown
-        sources={sources}
-        selectedSource={null}
-        isLoading={true}
-        onRootSelect={() => {}}
-        onSourceSelect={() => {}}
-        setSource={() => {}}
-        currentResource={mockResource()}
-        recentSources={mockRecentSources}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByLabelText('Loading sources')).toBeTruthy();
-    });
-  });
+    it('Render empty fragment if no sources are provided', async () => {
+        const sources: Array<ResourceBrowserSource> = [];
 
-  it('Render title of currentSource if provided', async () => {
-    render(
-      <SourceDropdown
-        sources={sources}
-        selectedSource={mockScopedSource({
-          source: {
-            name: 'Active source',
-          },
-          resource: {
-            name: 'Active scoped resource',
-          },
-        })}
-        isLoading={false}
-        onRootSelect={() => {}}
-        onSourceSelect={() => {}}
-        setSource={() => {}}
-        currentResource={mockResource()}
-        recentSources={mockRecentSources}
-      />,
-    );
+        const { baseElement } = render(<SourceDropdown sources={sources} selectedSource={mockSource()} onSourceSelect={() => {}} />);
 
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'Source quick select' })).toHaveTextContent(
-        'current source Active scoped resource',
-      );
+        await waitFor(() => {
+            const button = baseElement.querySelector(`button[aria-label="Source quick select"]`) as HTMLButtonElement;
+            expect(button).toBeFalsy();
+        });
     });
-  });
 
-  it('Sources are rendered when dropdown clicked', async () => {
-    render(
-      <SourceDropdown
-        sources={sources}
-        selectedSource={null}
-        isLoading={false}
-        onRootSelect={() => {}}
-        onSourceSelect={() => {}}
-        setSource={() => {}}
-        currentResource={mockResource()}
-        recentSources={mockRecentSources}
-      />,
-    );
+    it('Render title of the selected source', async () => {
+        const sources = [mockSource(), mockSource({ id: '2', name: 'Selected source' })];
 
-    const user = userEvent.setup();
-    user.click(screen.getByRole('button', { name: 'Source quick select' }));
+        render(<SourceDropdown sources={sources} selectedSource={sources[1]} onSourceSelect={() => {}} />);
 
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'All available sources' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'Site Node 1' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'Site Node 2' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'Site Node 3' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'Site Node 4' })).toBeTruthy();
+        await waitFor(() => {
+            expect(screen.getByRole('button', { name: 'Source quick select' })).toHaveTextContent('Selected source');
+        });
     });
-  });
 
-  it('Source menu closes on focus loss', async () => {
-    render(
-      <div>
-        <SourceDropdown
-          sources={sources}
-          selectedSource={null}
-          isLoading={false}
-          onRootSelect={() => {}}
-          onSourceSelect={() => {}}
-          setSource={() => {}}
-          currentResource={mockResource()}
-          recentSources={mockRecentSources}
-        />
-        <input />
-      </div>,
-    );
+    it('Sources are rendered when dropdown clicked', async () => {
+        const sources = [mockSource({ name: 'Source 1' }), mockSource({ id: '2', name: 'Source 2' })];
 
-    const user = userEvent.setup();
-    const buttonDropdown = screen.getByRole('button', { name: 'Source quick select' });
-    user.click(buttonDropdown);
+        render(<SourceDropdown sources={sources} selectedSource={sources[0]} onSourceSelect={() => {}} />);
 
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'All available sources' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'Site Node 1' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'Site Node 2' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'Site Node 3' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'Site Node 4' })).toBeTruthy();
-    });
+        const user = userEvent.setup();
 
-    user.type(buttonDropdown, '{tab}');
-    user.type(buttonDropdown, '{tab}');
-    user.type(buttonDropdown, '{tab}');
-    user.type(buttonDropdown, '{tab}');
-    user.type(buttonDropdown, '{tab}');
+        await act(() => user.click(screen.getByRole('button', { name: 'Source quick select' })));
 
-    await waitFor(() => {
-      expect(screen.queryByRole('button', { name: 'All available sources' })).toBeFalsy();
-      expect(screen.queryByRole('button', { name: 'site Node 1' })).toBeFalsy();
-      expect(screen.queryByRole('button', { name: 'site Node 2' })).toBeFalsy();
-      expect(screen.queryByRole('button', { name: 'site Node 3' })).toBeFalsy();
-      expect(screen.queryByRole('button', { name: 'site Node 4' })).toBeFalsy();
+        await waitFor(() => {
+            expect(screen.getByRole('button', { name: 'dam Source 1 selected' })).toBeTruthy();
+            expect(screen.getByRole('button', { name: 'dam Source 2' })).toBeTruthy();
+        });
     });
-  });
 
-  it('Source menu closes on {esc}', async () => {
-    render(
-      <div>
-        <SourceDropdown
-          sources={sources}
-          selectedSource={null}
-          isLoading={false}
-          onRootSelect={() => {}}
-          onSourceSelect={() => {}}
-          setSource={() => {}}
-          currentResource={mockResource()}
-          recentSources={mockRecentSources}
-        />
-        <input />
-      </div>,
-    );
+    it('Source menu closes on focus loss', async () => {
+        const sources = [mockSource({ name: 'Source 1' }), mockSource({ id: '2', name: 'Source 2' })];
 
-    const user = userEvent.setup();
-    const buttonDropdown = screen.getByRole('button', { name: 'Source quick select' });
-    user.click(buttonDropdown);
+        render(<SourceDropdown sources={sources} selectedSource={sources[0]} onSourceSelect={() => {}} />);
 
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'All available sources' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'Site Node 1' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'Site Node 2' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'Site Node 3' })).toBeTruthy();
-      expect(screen.getByRole('button', { name: 'Site Node 4' })).toBeTruthy();
-    });
+        const user = userEvent.setup();
+        const buttonDropdown = screen.getByRole('button', { name: 'Source quick select' });
 
-    //fireEvent.keyDown(buttonDropdown, { keyCode: 13 })
+        await act(() => user.click(buttonDropdown));
 
-    userEvent.keyboard('{escape}');
+        await waitFor(() => {
+            expect(screen.queryByRole('button', { name: 'dam Source 1 selected' })).toBeTruthy();
+            expect(screen.queryByRole('button', { name: 'dam Source 2' })).toBeTruthy();
+        });
 
-    //user.type(buttonDropdown, '{escape}');
+        await act(() => fireEvent.blur(buttonDropdown));
 
-    await waitFor(() => {
-      expect(screen.queryByRole('button', { name: 'All available sources' })).toBeFalsy();
-      expect(screen.queryByRole('button', { name: 'Site Node 1' })).toBeFalsy();
-      expect(screen.queryByRole('button', { name: 'Site Node 2' })).toBeFalsy();
-      expect(screen.queryByRole('button', { name: 'Site Node 3' })).toBeFalsy();
-      expect(screen.queryByRole('button', { name: 'Site Node 4' })).toBeFalsy();
+        await waitFor(() => {
+            expect(screen.queryByRole('button', { name: 'dam Source 1 selected' })).toBeFalsy();
+            expect(screen.queryByRole('button', { name: 'dam Source 2' })).toBeFalsy();
+        });
     });
-  });
 
-  it('Selecting all available sources calls onRootSelect ', async () => {
-    const onRootSelect = jest.fn();
+    it('Source menu closes on {esc}', async () => {
+        const sources = [mockSource({ name: 'Source 1' }), mockSource({ id: '2', name: 'Source 2' })];
 
-    render(
-      <SourceDropdown
-        sources={sources}
-        selectedSource={null}
-        isLoading={false}
-        onRootSelect={onRootSelect}
-        onSourceSelect={() => {}}
-        setSource={() => {}}
-        currentResource={mockResource()}
-        recentSources={mockRecentSources}
-      />,
-    );
+        render(<SourceDropdown sources={sources} selectedSource={sources[0]} onSourceSelect={() => {}} />);
 
-    const user = userEvent.setup();
-    await user.click(screen.getByRole('button', { name: 'Source quick select' }));
-    await user.click(screen.getByRole('button', { name: 'All available sources' }));
-
-    await waitFor(() => {
-      expect(onRootSelect).toHaveBeenCalled();
-      expect(screen.queryByRole('button', { name: 'All available sources' })).toBeFalsy();
-    });
-  });
+        const user = userEvent.setup();
+        const buttonDropdown = screen.getByRole('button', { name: 'Source quick select' });
 
-  it('Selecting node calls onSourceSelect ', async () => {
-    const onSourceSelect = jest.fn();
+        await act(() => user.click(buttonDropdown));
 
-    render(
-      <SourceDropdown
-        sources={sources}
-        selectedSource={null}
-        isLoading={false}
-        onRootSelect={() => {}}
-        onSourceSelect={onSourceSelect}
-        setSource={() => {}}
-        currentResource={mockResource()}
-        recentSources={mockRecentSources}
-      />,
-    );
+        await waitFor(() => {
+            expect(screen.queryByRole('button', { name: 'dam Source 1 selected' })).toBeTruthy();
+            expect(screen.queryByRole('button', { name: 'dam Source 2' })).toBeTruthy();
+        });
 
-    const user = userEvent.setup();
-    await user.click(screen.getByRole('button', { name: 'Source quick select' }));
-    await user.click(screen.getByRole('button', { name: 'Site Node 1' }));
+        await act(() => userEvent.keyboard('{escape}'));
 
-    await waitFor(() => {
-      expect(onSourceSelect).toHaveBeenCalledWith({ source: sources[0], resource: sources[0].nodes[0] });
-      expect(screen.queryByRole('button', { name: 'All available sources' })).toBeFalsy();
+        await waitFor(() => {
+            expect(screen.queryByRole('button', { name: 'dam Source 1 selected' })).toBeFalsy();
+            expect(screen.queryByRole('button', { name: 'dam Source 2' })).toBeFalsy();
+        });
     });
-  });
 
-  it('Recent location sources are rendered when dropdown clicked', async () => {
-    render(
-      <SourceDropdown
-        sources={sources}
-        selectedSource={null}
-        isLoading={false}
-        onRootSelect={() => {}}
-        onSourceSelect={() => {}}
-        setSource={() => {}}
-        currentResource={mockResource()}
-        recentSources={mockRecentSources}
-      />,
-    );
-
-    const user = userEvent.setup();
-    user.click(screen.getByRole('button', { name: 'Source quick select' }));
-
-    await waitFor(() => {
-      expect(screen.getByText('Test resource')).toBeInTheDocument();
-    });
-  });
+    it('Selecting node calls onSourceSelect ', async () => {
+        const onSourceSelect = jest.fn();
 
-  it('Selecting recent location calls setSource ', async () => {
-    const onSourceSelect = jest.fn();
-    const setSource = jest.fn();
+        const sources = [mockSource({ name: 'Source 1' }), mockSource({ id: '2', name: 'Source 2' })];
 
-    render(
-      <SourceDropdown
-        sources={sources}
-        selectedSource={null}
-        isLoading={false}
-        onRootSelect={() => {}}
-        onSourceSelect={onSourceSelect}
-        setSource={setSource}
-        currentResource={mockResource()}
-        recentSources={mockRecentSources}
-      />,
-    );
+        render(<SourceDropdown sources={sources} selectedSource={sources[0]} onSourceSelect={onSourceSelect} />);
 
-    const user = userEvent.setup();
-    await user.click(screen.getByRole('button', { name: 'Source quick select' }));
-    await user.click(screen.getByText('Test resource'));
+        const user = userEvent.setup();
 
-    await waitFor(() => {
-      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(() => user.click(screen.getByRole('button', { name: 'Source quick select' })));
+        await act(() => user.click(screen.getByRole('button', { name: 'dam Source 2' })));
 
-      expect(screen.queryByRole('button', { name: 'All available sources' })).toBeFalsy();
+        await waitFor(() => {
+            expect(onSourceSelect).toHaveBeenCalledWith(sources[1]);
+        });
     });
-  });
 });

package/src/SourceDropdown/SourceDropdown.stories.tsx

@@ -1,33 +1,30 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { StoryFn, Meta } from '@storybook/react';
-
 import SourceDropdown from './SourceDropdown';
-import sampleSources from '../SourceList/sample-sources.json';
+import sampleSources from '../__mocks__/sample-sources.json';
+import { ResourceBrowserSource } from '../types';
 
 export default {
-  title: 'Source Dropdown',
-  component: SourceDropdown,
+    title: 'Source dropdown',
+    component: SourceDropdown,
 } as Meta<typeof SourceDropdown>;
 
-const Template: StoryFn<typeof SourceDropdown> = ({ sources, selectedSource, isLoading }) => (
-  <SourceDropdown
-    sources={sources}
-    selectedSource={selectedSource}
-    isLoading={isLoading}
-    onSourceSelect={({ source, id }) => alert(`Source Select: ${source} - ${id}`)}
-    onRootSelect={() => alert(`Root Select`)}
-  />
-);
+const Template: StoryFn<typeof SourceDropdown> = (props) => {
+    const sources = sampleSources as ResourceBrowserSource[];
 
-export const Primary = Template.bind({});
-Primary.args = {
-  sources: sampleSources,
-  selectedSource: { source: sampleSources[0], resource: sampleSources[0].nodes[0] },
-  isLoading: false,
-};
+    const [selectedSource, setSelectedSource] = useState<ResourceBrowserSource>(sources[0]);
 
-export const Loading = Template.bind({});
-Loading.args = {
-  ...Primary.args,
-  isLoading: true,
+    return (
+        <div className="m-3">
+            <SourceDropdown
+                selectedSource={selectedSource}
+                sources={sources}
+                onSourceSelect={(source) => setSelectedSource(source)}
+            ></SourceDropdown>
+        </div>
+    );
 };
+
+export const Primary = Template.bind({});
+
+Primary.args = {};