feat(storage-browser): integrate browser navigation events

packages/react-storage/jest.config.ts

@@ -16,10 +16,10 @@ const config: Config = {
       // functions: 90,
       // lines: 95,
       // statements: 95,
-      branches: 81,
-      functions: 83,
-      lines: 91,
-      statements: 90,
+      branches: 80,
+      functions: 86,
+      lines: 92,
+      statements: 91,
     },
   },
   moduleNameMapper: { '^uuid$': '<rootDir>/../../node_modules/uuid' },

packages/react-storage/src/components/StorageBrowser/__tests__/StorageBrowserDefault.spec.tsx

@@ -1,122 +1,66 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
-import * as ActionsModule from '../do-not-import-from-here/actions';
-import * as ControlsModule from '../context/control';
-import { ViewsProvider } from '../views/context';
+import * as StoreModule from '../providers/store';
+import * as ViewsModule from '../views/context';
 import { StorageBrowserDefault } from '../StorageBrowserDefault';
 
-jest.spyOn(ActionsModule, 'useLocationsData').mockReturnValue([
-  {
-    isLoading: false,
-    data: { result: [], nextToken: undefined },
-    hasError: false,
-    message: undefined,
-  },
-  jest.fn(),
-]);
-
-jest.spyOn(ActionsModule, 'useAction').mockReturnValue([
-  {
-    data: { result: [], nextToken: undefined },
-    hasError: false,
-    isLoading: false,
-    message: undefined,
-  },
-  jest.fn(),
-]);
-
-const INITIAL_NAVIGATE_STATE = [
-  { location: undefined, history: [], path: undefined },
-  jest.fn(),
-];
-const INITIAL_LOCATION_ACTIONS_STATE = [
-  { selected: { type: undefined, items: undefined }, actions: {} },
-  jest.fn(),
-];
+jest.spyOn(ViewsModule, 'useViews').mockReturnValue({
+  LocationsView: () => <div data-testid="LOCATIONS_VIEW" />,
+  LocationDetailView: () => <div data-testid="LOCATION_DETAIL_VIEW" />,
+  LocationActionView: () => <div data-testid="LOCATION_ACTION_VIEW" />,
+});
 
-const useControlSpy = jest.spyOn(ControlsModule, 'useControl');
+const useStoreSpy = jest.spyOn(StoreModule, 'useStore');
 
-const WrappedStorageBrowser = () => (
-  <ViewsProvider>
-    <StorageBrowserDefault />
-  </ViewsProvider>
-);
+const location = {
+  id: 'an-id-👍🏼',
+  bucket: 'test-bucket',
+  permission: 'READWRITE',
+  prefix: 'test-prefix/',
+  type: 'PREFIX',
+};
 
 describe('StorageBrowserDefault', () => {
-  beforeEach(() => {
-    useControlSpy.mockClear();
+  afterEach(jest.clearAllMocks);
+
+  it('renders the `LocationsView` by default', () => {
+    useStoreSpy.mockReturnValueOnce([
+      {
+        actionType: undefined,
+        history: { current: undefined, previous: undefined },
+      } as StoreModule.UseStoreState,
+      jest.fn(),
+    ]);
+    const { getByTestId } = render(<StorageBrowserDefault />);
+
+    expect(getByTestId('LOCATIONS_VIEW')).toBeInTheDocument();
   });
 
-  it('renders the `LocationsView` by default', async () => {
-    useControlSpy.mockImplementation(
-      (type) =>
-        ({
-          LOCATION_ACTIONS: INITIAL_LOCATION_ACTIONS_STATE,
-          NAVIGATE: INITIAL_NAVIGATE_STATE,
-        })[type]
-    );
+  it('renders the `LocationDetailView` when a location is selected', () => {
+    useStoreSpy.mockReturnValueOnce([
+      {
+        actionType: undefined,
+        history: { current: location, previous: [location] },
+      } as StoreModule.UseStoreState,
+      jest.fn(),
+    ]);
 
-    await waitFor(() => {
-      render(<WrappedStorageBrowser />);
-    });
+    const { getByTestId } = render(<StorageBrowserDefault />);
 
-    expect(screen.getByTestId('LOCATIONS_VIEW')).toBeInTheDocument();
+    expect(getByTestId('LOCATION_DETAIL_VIEW')).toBeInTheDocument();
   });
 
-  it('renders the `LocationDetailView` when a location is selected', async () => {
-    useControlSpy.mockImplementation(
-      (type) =>
-        ({
-          LOCATION_ACTIONS: INITIAL_LOCATION_ACTIONS_STATE,
-          NAVIGATE: [
-            {
-              location: {
-                scope: 's3://test-bucket/*',
-                permission: 'READWRITE',
-                type: 'BUCKET',
-              },
-              history: [{ prefix: '', position: 0 }],
-            },
-          ],
-        })[type]
-    );
-
-    await waitFor(() => {
-      render(<WrappedStorageBrowser />);
-    });
-
-    expect(screen.getByTestId('LOCATION_DETAIL_VIEW')).toBeInTheDocument();
-  });
-
-  it('renders the `LocationActionView` when an action is selected', async () => {
-    useControlSpy.mockImplementation(
-      (type) =>
-        ({
-          LOCATION_ACTIONS: [
-            {
-              actions: { CREATE_FOLDER: {} },
-              selected: { type: 'CREATE_FOLDER', items: undefined },
-            },
-            jest.fn(),
-          ],
-          NAVIGATE: [
-            {
-              location: {
-                scope: 's3://test-bucket/*',
-                permission: 'READWRITE',
-                type: 'BUCKET',
-              },
-              history: [{ prefix: '', position: 0 }],
-            },
-          ],
-        })[type]
-    );
-
-    render(<WrappedStorageBrowser />);
-
-    await waitFor(() => {
-      expect(screen.getByTestId('LOCATION_ACTION_VIEW')).toBeInTheDocument();
-    });
+  it('renders the `LocationActionView` when an action is selected', () => {
+    useStoreSpy.mockReturnValueOnce([
+      {
+        actionType: 'super-coll-action-type',
+        history: { current: location, previous: [location] },
+      } as StoreModule.UseStoreState,
+      jest.fn(),
+    ]);
+    const { getByTestId } = render(<StorageBrowserDefault />);
+
+    expect(getByTestId('LOCATION_ACTION_VIEW')).toBeInTheDocument();
   });
 });

packages/react-storage/src/components/StorageBrowser/__tests__/createStorageBrowser.spec.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 
 import * as ActionsModule from '../do-not-import-from-here/actions';
-import * as ControlsModule from '../context/control';
 
 import { createStorageBrowser } from '../createStorageBrowser';
 
@@ -35,8 +34,6 @@ const INITIAL_ACTION_STATE = [
   jest.fn(),
 ];
 
-const useControlSpy = jest.spyOn(ControlsModule, 'useControl');
-
 const accountId = '012345678901';
 const getLocationCredentials = jest.fn();
 const listLocations = jest.fn();
@@ -53,10 +50,6 @@ const config = {
 const input = { config };
 
 describe('createStorageBrowser', () => {
-  beforeEach(() => {
-    useControlSpy.mockClear();
-  });
-
   it('throws when registerAuthListener is not a function', () => {
     const input = {
       config: { getLocationCredentials, listLocations, region },
@@ -69,13 +62,6 @@ describe('createStorageBrowser', () => {
   });
 
   it('renders the `LocationsView` by default', async () => {
-    useControlSpy.mockImplementation(
-      (type) =>
-        ({
-          LOCATION_ACTIONS: INITIAL_ACTION_STATE,
-          NAVIGATE: INITIAL_NAVIGATE_STATE,
-        })[type]
-    );
     const { StorageBrowser } = createStorageBrowser(input);
 
     await waitFor(() => {

packages/react-storage/src/components/StorageBrowser/actions/configs/__tests__/defaults.spec.ts

@@ -8,6 +8,7 @@ import {
 
 const file = {
   key: 'key',
+  id: 'id',
   lastModified: new Date(),
   size: 100,
   type: 'FILE' as const,

packages/react-storage/src/components/StorageBrowser/actions/handlers/__tests__/copy.spec.ts

@@ -12,7 +12,8 @@ const baseInput: CopyHandlerInput = {
     credentials: jest.fn(),
     region: 'region',
   },
-  data: { key: 'key', payload: { destinationPrefix: 'destination/' } },
+  key: 'key',
+  data: { id: 'identity', payload: { destinationPrefix: 'destination/' } },
 };
 
 describe('copyHandler', () => {
@@ -33,14 +34,14 @@ describe('copyHandler', () => {
       source: {
         expectedBucketOwner: `${baseInput.config.accountId}`,
         bucket,
-        path: `${baseInput.prefix}${baseInput.data.key}`,
+        path: `${baseInput.prefix}${baseInput.key}`,
       },
       options: {
         locationCredentialsProvider: baseInput.config.credentials,
       },
     };
 
     expect(copySpy).toHaveBeenCalledWith(expected);
-    expect(key).toBe(baseInput.data.key);
+    expect(key).toBe(baseInput.key);
   });
 });

packages/react-storage/src/components/StorageBrowser/actions/handlers/__tests__/delete.spec.ts

@@ -6,6 +6,7 @@ const removeSpy = jest.spyOn(StorageModule, 'remove');
 
 const baseInput: DeleteHandlerInput = {
   prefix: 'prefix/',
+  key: 'key',
   config: {
     accountId: '012345678901',
     bucket: 'bucket',
@@ -20,7 +21,7 @@ describe('deleteHandler', () => {
     const { key } = deleteHandler(baseInput);
 
     const expected: StorageModule.RemoveInput = {
-      path: `${baseInput.prefix}${baseInput.data.key}`,
+      path: `${baseInput.prefix}${baseInput.key}`,
       options: {
         expectedBucketOwner: baseInput.config.accountId,
         bucket: {

packages/react-storage/src/components/StorageBrowser/actions/handlers/__tests__/upload.spec.ts

@@ -30,7 +30,8 @@ const onProgress = jest.fn();
 
 const baseInput: UploadHandlerInput = {
   config,
-  data: { key: payload.name, payload },
+  key: payload.name,
+  data: { id: 'an-id', payload },
   prefix,
 };
 
@@ -61,9 +62,9 @@ describe('uploadHandler', () => {
 
     expect(await result).toBe('COMPLETE');
 
-    expect(key).toBe(baseInput.data.key);
+    expect(key).toBe(baseInput.key);
     expect(onComplete).toHaveBeenCalledTimes(1);
-    expect(onComplete).toHaveBeenCalledWith(baseInput.data.key);
+    expect(onComplete).toHaveBeenCalledWith(baseInput.key);
   });
 
   it('calls upload with the expected values', () => {
@@ -108,9 +109,9 @@ describe('uploadHandler', () => {
 
     expect(await result).toBe('COMPLETE');
 
-    expect(key).toBe(baseInput.data.key);
+    expect(key).toBe(baseInput.key);
     expect(onProgress).toHaveBeenCalledTimes(1);
-    expect(onProgress).toHaveBeenCalledWith(baseInput.data.key, 1);
+    expect(onProgress).toHaveBeenCalledWith(baseInput.key, 1);
   });
 
   it('calls provided onProgress callback as expected when `totalBytes` is `undefined`', async () => {
@@ -134,9 +135,9 @@ describe('uploadHandler', () => {
 
     expect(await result).toBe('COMPLETE');
 
-    expect(key).toBe(baseInput.data.key);
+    expect(key).toBe(baseInput.key);
     expect(onProgress).toHaveBeenCalledTimes(1);
-    expect(onProgress).toHaveBeenCalledWith(baseInput.data.key, undefined);
+    expect(onProgress).toHaveBeenCalledWith(baseInput.key, undefined);
   });
 
   it('returns the expected callback values for a file size greater than 5 mb', async () => {
@@ -155,7 +156,8 @@ describe('uploadHandler', () => {
 
     const { key, result, ...callbacks } = uploadHandler({
       ...baseInput,
-      data: { key: bigFile.name, payload: bigFile },
+      key: bigFile.name,
+      data: { id: 'hi!', payload: bigFile },
     });
 
     expect(await result).toBe('COMPLETE');
@@ -177,7 +179,8 @@ describe('uploadHandler', () => {
 
     const { key, result, ...callbacks } = uploadHandler({
       ...baseInput,
-      data: { key: smallFile.name, payload: smallFile },
+      key: smallFile.name,
+      data: { id: 'ohh', payload: smallFile },
     });
 
     expect(await result).toBe('COMPLETE');
@@ -200,7 +203,7 @@ describe('uploadHandler', () => {
     expect(await result).toBe('FAILED');
 
     expect(onError).toHaveBeenCalledTimes(1);
-    expect(onError).toHaveBeenCalledWith(baseInput.data.key, error.message);
+    expect(onError).toHaveBeenCalledWith(baseInput.key, error.message);
   });
 
   it('handles a cancel failure as expected', async () => {
@@ -220,6 +223,6 @@ describe('uploadHandler', () => {
     expect(await result).toBe('CANCELED');
 
     expect(onCancel).toHaveBeenCalledTimes(1);
-    expect(onCancel).toHaveBeenCalledWith(baseInput.data.key);
+    expect(onCancel).toHaveBeenCalledWith(baseInput.key);
   });
 });

packages/react-storage/src/components/StorageBrowser/do-not-import-from-here/actions/__tests__/listLocationItemsAction.spec.ts

@@ -4,6 +4,16 @@ import {
   parseResult,
 } from '../listLocationItemsAction';
 
+let uuid = 0;
+Object.defineProperty(globalThis, 'crypto', {
+  value: {
+    randomUUID: () => {
+      uuid++;
+      return uuid.toString();
+    },
+  },
+});
+
 const listSpy = jest.spyOn(StorageModule, 'list');
 const config = {
   bucket: 'bucket',
@@ -151,13 +161,13 @@ describe('parseResult', () => {
     const result = parseResult(output, prefix);
     expect(result).toHaveLength(3); // excludes prefix
     const subFolderWithObject = result[0];
-    expect(subFolderWithObject.key).toBe('Cloudberry/');
+    expect(subFolderWithObject.key).toBe(`${prefix}Cloudberry/`);
     expect(subFolderWithObject.type).toBe('FOLDER');
     const zeroByteSubFolder = result[1];
-    expect(zeroByteSubFolder.key).toBe('Banana/');
+    expect(zeroByteSubFolder.key).toBe(`${prefix}Banana/`);
     expect(zeroByteSubFolder.type).toBe('FOLDER');
     const file = result[2];
-    expect(file.key).toBe('Orange.jpg');
+    expect(file.key).toBe(`${prefix}Orange.jpg`);
     expect(file.type).toBe('FILE');
   });