test: add unit tests for location browser

Composer/packages/client/__tests__/components/CreationFlow/LocationBrowser/FileSelector.test.tsx

@@ -0,0 +1,76 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import * as React from 'react';
+import { render, fireEvent } from '@bfc/test-utils';
+
+import { StorageFolder } from '../../../../src/store/types';
+import { FileSelector } from '../../../../src/components/CreationFlow/LocationBrowser/FileSelector';
+
+describe('<FileSelector/>', () => {
+  const onFileChosen = jest.fn();
+  const checkShowItem = () => true;
+  const onCurrentPathUpdate = jest.fn();
+  const operationMode = { write: true, read: true };
+
+  const focusedStorageFolder: StorageFolder = {
+    name: 'Desktop',
+    parent: 'C:/test-folder',
+    writable: false,
+    type: 'folder',
+    path: 'C:/test-folder/Desktop',
+    children: [
+      {
+        name: 'EchoBot-0',
+        type: 'bot',
+        path: 'Desktop/EchoBot-11299',
+        lastModified: 'Wed Apr 22 2020 17:51:07 GMT-0700 (Pacific Daylight Time)',
+        size: 1,
+      },
+    ],
+  };
+  function renderComponent() {
+    return render(
+      <FileSelector
+        isWindows
+        checkShowItem={checkShowItem}
+        focusedStorageFolder={focusedStorageFolder}
+        operationMode={operationMode}
+        onCurrentPathUpdate={onCurrentPathUpdate}
+        onFileChosen={onFileChosen}
+      />
+    );
+  }
+
+  it('should render the component', () => {
+    const component = renderComponent();
+    expect(component.container).toBeDefined();
+  });
+
+  it('should open file', async () => {
+    const component = renderComponent();
+    const bot = await component.findByText('EchoBot-0');
+    fireEvent.click(bot);
+    expect(onFileChosen).toBeCalledWith({
+      name: 'EchoBot-0',
+      type: 'bot',
+      path: 'Desktop/EchoBot-11299',
+      lastModified: 'Wed Apr 22 2020 17:51:07 GMT-0700 (Pacific Daylight Time)',
+      size: 1,
+    });
+  });
+
+  it('should show parent of the current folder path in the dropdown list', async () => {
+    const component = renderComponent();
+    const list = await component.findByTestId('FileSelectorDropDown');
+    fireEvent.click(list);
+    expect(await component.findByText('C:\\test-folder')).toBeInTheDocument();
+    expect(await component.findByText('C:\\')).toBeInTheDocument();
+    expect(await component.findByText('/')).toBeInTheDocument();
+  });
+
+  it('should show errors when current folder is not writable', async () => {
+    const component = renderComponent();
+    expect(await component.findByText('You do not have permission to save bots here')).toBeInTheDocument();
+  });
+});

Composer/packages/client/__tests__/components/CreationFlow/LocationBrowser/LocationSelectContent.test.tsx

@@ -0,0 +1,99 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import * as React from 'react';
+import { fireEvent } from '@bfc/test-utils';
+
+import { StorageFolder } from '../../../../src/store/types';
+import { LocationSelectContent } from '../../../../src/components/CreationFlow/LocationBrowser/LocationSelectContent';
+import { renderWithStore } from '../../../testUtils';
+import { CreationFlowStatus } from '../../../../src/constants';
+
+describe('<LocationSelectContent/>', () => {
+  const onCurrentPathUpdateMock = jest.fn();
+  const onOpenMock = jest.fn();
+  const operationMode = { write: true, read: true };
+  let storeContext;
+  const focusedStorageFolder: StorageFolder = {
+    name: 'Desktop',
+    parent: 'C:/test-folder',
+    writable: false,
+    type: 'folder',
+    path: 'C:/test-folder/Desktop',
+    children: [
+      {
+        name: 'EchoBot-0',
+        type: 'bot',
+        path: 'C:/test-folder/Desktop/EchoBot-0',
+        lastModified: 'Wed Apr 22 2020 17:51:07 GMT-0700 (Pacific Daylight Time)',
+        size: 1,
+      },
+      {
+        name: 'normalFile',
+        type: 'other',
+        path: 'Desktop/normalFile',
+        lastModified: 'Wed Apr 22 2020 17:51:07 GMT-0700 (Pacific Daylight Time)',
+        size: 1,
+      },
+    ],
+  };
+  function renderComponent() {
+    return renderWithStore(
+      <LocationSelectContent
+        focusedStorageFolder={focusedStorageFolder}
+        operationMode={operationMode}
+        onCurrentPathUpdate={onCurrentPathUpdateMock}
+        onOpen={onOpenMock}
+      />,
+      storeContext.state
+    );
+  }
+
+  beforeEach(() => {
+    storeContext = {
+      state: {
+        storages: [
+          {
+            defaultPath: 'C:\\',
+            id: 'default',
+            name: 'This PC',
+            path: 'C:/test-folder/Desktop',
+            platform: 'win32',
+            type: 'LocalDisk',
+          },
+        ],
+        storageFileLoadingStatus: 'success',
+        creationFlowStatus: CreationFlowStatus.OPEN,
+      },
+    };
+  });
+
+  it('should render spinner', async () => {
+    storeContext.state.storageFileLoadingStatus = 'pending';
+    const component = renderComponent();
+    const spinner = await component.findByTestId('locationSelectContentSpinner');
+    expect(spinner).toBeDefined();
+  });
+
+  it('fail to render FileSelector', async () => {
+    storeContext.state.storageFileLoadingStatus = 'failure';
+    const component = renderComponent();
+    expect(await component.findByText('Can not connect the storage.')).toBeInTheDocument();
+  });
+
+  it('should open folder', async () => {
+    storeContext.state.storageFileLoadingStatus = 'success';
+    const component = renderComponent();
+    const parent = await component.findByText('..');
+    fireEvent.click(parent);
+    expect(onCurrentPathUpdateMock).toBeCalledWith('C:/test-folder', 'default');
+  });
+
+  it('should open bot', async () => {
+    storeContext.state.storageFileLoadingStatus = 'success';
+    const component = renderComponent();
+    const bot = await component.findByText('EchoBot-0');
+    fireEvent.click(bot);
+    expect(onOpenMock).toBeCalledWith('C:/test-folder/Desktop/EchoBot-0', 'default');
+  });
+});

Composer/packages/client/src/components/CreationFlow/LocationBrowser/FileSelector.tsx

@@ -229,12 +229,12 @@ export const FileSelector: React.FC<FileSelectorProps> = (props) => {
   const updateLocation = (e, item?: IDropdownOption) => {
     onCurrentPathUpdate(item ? (item.key as string) : '');
   };
-
   return (
     <Fragment>
       <Stack horizontal styles={stackinput} tokens={{ childrenGap: '2rem' }}>
         <StackItem grow={0} styles={halfstack}>
           <Dropdown
+            data-testid={'FileSelectorDropDown'}
             errorMessage={
               operationMode.write && !focusedStorageFolder.writable
                 ? formatMessage('You do not have permission to save bots here')

Composer/packages/client/src/components/CreationFlow/LocationBrowser/LocationSelectContent.tsx

@@ -65,7 +65,7 @@ export const LocationSelectContent: React.FC<LocationSelectContentProps> = (prop
         />
       )}
       {storageFileLoadingStatus === 'pending' && (
-        <div>
+        <div data-testId={'locationSelectContentSpinner'}>
           <Spinner css={loading} size={SpinnerSize.medium} />
         </div>
       )}