feat: Using Recoil JS for state management

.vscode/launch.json

@@ -81,7 +81,7 @@
       "name": "Server: Attach",
       "port": 9228,
       "sourceMaps": true
-    }
+    },
     {
       "type": "node",
       "request": "launch",
@@ -94,6 +94,22 @@
         "NODE_ENV": "development",
       },
       "outputCapture": "std"
+    },
+    {
+      "name": "Debug current jest test",
+      "type": "node",
+      "request": "launch",
+      "runtimeArgs": [
+        "--inspect-brk",
+        "${workspaceRoot}/Composer/node_modules/jest/bin/jest",
+        "--runInBand"
+      ],
+      "args": [
+        "${fileBasename}",
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "port": 9229
     }
   ]
 }

Composer/cypress/integration/Onboarding.spec.ts

@@ -8,7 +8,9 @@ context('Onboarding', () => {
 
     //enable onboarding setting
     cy.visitPage('Settings');
-    cy.findByText('Application Settings').click();
+    cy.findByTestId('ProjectTree').within(() => {
+      cy.findByText('Application Settings').click();
+    });
     cy.findByLabelText('Onboarding').click();
     cy.visitPage('Design');
   });

Composer/package.json

@@ -116,4 +116,4 @@
   "dependencies": {
     "cross-env": "^6.0.3"
   }
-}
+}

Composer/packages/client/__tests__/components/CreationFlow/CreateOptions/index.test.tsx

@@ -4,13 +4,12 @@
 import * as React from 'react';
 import { fireEvent } from '@bfc/test-utils';
 
-import { renderWithStore } from '../../../testUtils';
+import { renderWithRecoil } from '../../../testUtils';
 import { CreateOptions } from '../../../../src/components/CreationFlow/CreateOptions';
 
 describe('<CreateOptions/>', () => {
   const handleDismissMock = jest.fn();
   const handleCreateNextMock = jest.fn();
-  const saveTemplateMock = jest.fn();
   const templates = [
     {
       description: 'empty bot',
@@ -31,27 +30,13 @@ describe('<CreateOptions/>', () => {
       tags: ['Basic'],
     },
   ];
-  let storeContext;
 
   const renderComponent = () => {
-    return renderWithStore(
-      <CreateOptions path="create" templates={templates} onDismiss={handleDismissMock} onNext={handleCreateNextMock} />,
-      storeContext.state,
-      storeContext.action
+    return renderWithRecoil(
+      <CreateOptions path="create" templates={templates} onDismiss={handleDismissMock} onNext={handleCreateNextMock} />
     );
   };
 
-  beforeEach(() => {
-    storeContext = {
-      actions: {
-        saveTemplateId: saveTemplateMock,
-      },
-      state: {
-        templateId: '',
-      },
-    };
-  });
-
   it('should save empty bot template id', async () => {
     const component = renderComponent();
     const nextButton = await component.findByText('Next');

Composer/packages/client/__tests__/components/CreationFlow/DefineConversation/index.test.tsx

@@ -2,20 +2,20 @@
 // Licensed under the MIT License.
 
 import * as React from 'react';
-import { fireEvent } from '@bfc/test-utils';
+import { fireEvent, act, waitFor } from '@bfc/test-utils';
 
-import { renderWithStore } from '../../../testUtils';
-import { StorageFolder } from '../../../../src/store/types';
+import { renderWithRecoil } from '../../../testUtils';
+import { StorageFolder } from '../../../../src/recoilModel/types';
+import { focusedStorageFolderState, storagesState } from '../../../../src/recoilModel';
 import DefineConversation from '../../../../src/components/CreationFlow/DefineConversation';
 
 describe('<DefineConversation/>', () => {
   const onCurrentPathUpdateMock = jest.fn();
-  const saveTemplateMock = jest.fn();
   const onSubmitMock = jest.fn();
   const onDismissMock = jest.fn();
   const createFolder = jest.fn();
   const updateFolder = jest.fn();
-  let storeContext, locationMock;
+  let locationMock;
   const focusedStorageFolder: StorageFolder = {
     name: 'Desktop',
     parent: '/test-folder',
@@ -33,35 +33,24 @@ describe('<DefineConversation/>', () => {
     ],
   };
   function renderComponent() {
-    return renderWithStore(
+    return renderWithRecoil(
       <DefineConversation
         createFolder={createFolder}
         focusedStorageFolder={focusedStorageFolder}
         location={locationMock}
+        templateId={'EchoBot'}
         updateFolder={updateFolder}
         onCurrentPathUpdate={onCurrentPathUpdateMock}
         onDismiss={onDismissMock}
         onSubmit={onSubmitMock}
       />,
-      storeContext.state,
-      storeContext.action
+      ({ set }) => {
+        set(focusedStorageFolderState, '');
+        set(storagesState, [{ id: 'default' }]);
+      }
     );
   }
 
-  beforeEach(() => {
-    locationMock = {};
-    storeContext = {
-      actions: {
-        saveTemplateId: saveTemplateMock,
-      },
-      state: {
-        templateId: 'EchoBot',
-        focusedStorageFolder: '',
-        storages: [{ id: 'default' }],
-      },
-    };
-  });
-
   it('should render the component', () => {
     const component = renderComponent();
     expect(component.container).toBeDefined();
@@ -98,8 +87,11 @@ describe('<DefineConversation/>', () => {
   it('does not allow submission when the name is invalid', async () => {
     const component = renderComponent();
     const nameField = await component.getByTestId('NewDialogName');
-    fireEvent.change(nameField, { target: { value: 'invalidName;' } });
-    const node = await component.getByTestId('SubmitNewBotBtn');
+    act(() => {
+      fireEvent.change(nameField, { target: { value: 'invalidName;' } });
+    });
+
+    const node = await waitFor(() => component.getByTestId('SubmitNewBotBtn'));
     expect(node).toBeDisabled();
   });
 });

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

@@ -2,9 +2,9 @@
 // Licensed under the MIT License.
 
 import * as React from 'react';
-import { render, fireEvent } from '@bfc/test-utils';
+import { render, fireEvent, act } from '@bfc/test-utils';
 
-import { StorageFolder } from '../../../../src/store/types';
+import { StorageFolder } from '../../../../src/recoilModel/types';
 import { FileSelector } from '../../../../src/components/CreationFlow/FileSelector';
 
 describe('<FileSelector/>', () => {
@@ -55,7 +55,10 @@ describe('<FileSelector/>', () => {
   it('should open file', async () => {
     const component = renderComponent();
     const bot = await component.findByText('EchoBot-0');
-    fireEvent.click(bot);
+    act(() => {
+      fireEvent.click(bot);
+    });
+
     expect(onFileChosen).toBeCalledWith({
       name: 'EchoBot-0',
       type: 'bot',
@@ -70,7 +73,9 @@ describe('<FileSelector/>', () => {
     const comboBox = await component.findByTestId('FileSelectorComboBox');
     const dropdown = comboBox.querySelector('.ms-ComboBox-CaretDown-button');
     if (dropdown) {
-      fireEvent.click(dropdown);
+      act(() => {
+        fireEvent.click(dropdown);
+      });
     }
     expect(await component.findByText('C:\\test-folder')).toBeInTheDocument();
     expect(await component.findByText('C:\\')).toBeInTheDocument();

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

@@ -3,17 +3,19 @@
 
 import * as React from 'react';
 import { fireEvent } from '@bfc/test-utils';
+import { MutableSnapshot } from 'recoil';
 
-import { StorageFolder } from '../../../../src/store/types';
+import { StorageFolder } from '../../../../src/recoilModel/types';
+import { renderWithRecoil } from '../../../testUtils';
 import { LocationSelectContent } from '../../../../src/components/CreationFlow/LocationSelectContent';
-import { renderWithStore } from '../../../testUtils';
 import { CreationFlowStatus } from '../../../../src/constants';
+import { storageFileLoadingStatusState, creationFlowStatusState, storagesState } from '../../../../src/recoilModel';
 
 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',
@@ -37,61 +39,66 @@ describe('<LocationSelectContent/>', () => {
       },
     ],
   };
-  function renderComponent() {
-    return renderWithStore(
+
+  const storages = [
+    {
+      defaultPath: 'C:\\',
+      id: 'default',
+      name: 'This PC',
+      path: 'C:/test-folder/Desktop',
+      platform: 'win32',
+      type: 'LocalDisk',
+    },
+  ];
+
+  function renderComponent(recoilInitState: (obj: MutableSnapshot) => void) {
+    return renderWithRecoil(
       <LocationSelectContent
         focusedStorageFolder={focusedStorageFolder}
         operationMode={operationMode}
         onCurrentPathUpdate={onCurrentPathUpdateMock}
         onOpen={onOpenMock}
       />,
-      storeContext.state
+      recoilInitState
     );
   }
 
-  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 component = renderComponent(({ set }) => {
+      set(storageFileLoadingStatusState, 'pending');
+      set(creationFlowStatusState, CreationFlowStatus.OPEN);
+      set(storagesState, storages);
+    });
     const spinner = await component.findByTestId('locationSelectContentSpinner');
     expect(spinner).toBeDefined();
   });
 
   it('fail to render FileSelector', async () => {
-    storeContext.state.storageFileLoadingStatus = 'failure';
-    const component = renderComponent();
+    const component = renderComponent(({ set }) => {
+      set(storageFileLoadingStatusState, 'failure');
+      set(creationFlowStatusState, CreationFlowStatus.OPEN);
+      set(storagesState, storages);
+    });
     expect(await component.findByText('Can not connect the storage.')).toBeInTheDocument();
   });
 
   it('should open folder', async () => {
-    storeContext.state.storageFileLoadingStatus = 'success';
-    const component = renderComponent();
+    const component = renderComponent(({ set }) => {
+      set(storageFileLoadingStatusState, 'success');
+      set(creationFlowStatusState, CreationFlowStatus.OPEN);
+      set(storagesState, storages);
+    });
     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 component = renderComponent(({ set }) => {
+      set(storageFileLoadingStatusState, 'success');
+      set(storagesState, storages);
+      set(creationFlowStatusState, CreationFlowStatus.OPEN);
+    });
     const bot = await component.findByText('EchoBot-0');
     fireEvent.click(bot);
     expect(onOpenMock).toBeCalledWith('C:/test-folder/Desktop/EchoBot-0', 'default');