feat: Settings page

Composer/packages/client/__tests__/pages/botProjectsSettings/AppIdAndPassword.test.tsx

@@ -0,0 +1,73 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { act, fireEvent } from '@botframework-composer/test-utils';
+
+import { AppIdAndPassword } from '../../../src/pages/botProject/AppIdAndPassword';
+import { renderWithRecoilAndCustomDispatchers } from '../../testUtils';
+import { dispatcherState } from '../../../src/recoilModel';
+import { settingsState, currentProjectIdState } from '../../../src/recoilModel';
+
+const state = {
+  projectId: 'test',
+  settings: {
+    defaultLanguage: 'en-us',
+    languages: ['en-us', 'fr-fr'],
+  },
+};
+
+describe('App Id and Password', () => {
+  it('should submit settings', async () => {
+    const setSettingsMock = jest.fn();
+    const initRecoilState = ({ set }) => {
+      set(currentProjectIdState, state.projectId);
+      set(settingsState(state.projectId), state.settings);
+      set(dispatcherState, {
+        setSettings: setSettingsMock,
+      });
+    };
+    const { getByTestId } = renderWithRecoilAndCustomDispatchers(
+      <AppIdAndPassword projectId={state.projectId} />,
+      initRecoilState
+    );
+    const textField1 = getByTestId('MicrosoftAppId');
+    await act(async () => {
+      await fireEvent.change(textField1, {
+        target: { value: 'myMicrosoftAppId' },
+      });
+      await fireEvent.blur(textField1);
+    });
+    expect(setSettingsMock).toBeCalledWith('test', {
+      defaultLanguage: 'en-us',
+      languages: ['en-us', 'fr-fr'],
+      luis: {
+        authoringKey: '',
+        authoringRegion: '',
+      },
+      qna: {
+        subscriptionKey: '',
+      },
+      MicrosoftAppId: 'myMicrosoftAppId',
+    });
+    const textField2 = getByTestId('MicrosoftPassword');
+    await act(async () => {
+      await fireEvent.change(textField2, {
+        target: { value: 'myMicrosoftPassword' },
+      });
+      await fireEvent.blur(textField2);
+    });
+    expect(setSettingsMock).toBeCalledWith('test', {
+      defaultLanguage: 'en-us',
+      languages: ['en-us', 'fr-fr'],
+      luis: {
+        authoringKey: '',
+        authoringRegion: '',
+      },
+      qna: {
+        subscriptionKey: '',
+      },
+      MicrosoftAppPassword: 'myMicrosoftPassword',
+    });
+  });
+});

Composer/packages/client/__tests__/pages/botProjectsSettings/BotLanguage.test.tsx

@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { act, fireEvent, within } from '@botframework-composer/test-utils';
+
+import { BotLanguage } from '../../../src/pages/botProject/BotLanguage';
+import { renderWithRecoilAndCustomDispatchers } from '../../testUtils';
+import { dispatcherState } from '../../../src/recoilModel';
+import { settingsState, currentProjectIdState } from '../../../src/recoilModel';
+
+const state = {
+  projectId: 'test',
+  settings: {
+    defaultLanguage: 'en-us',
+    languages: ['en-us', 'fr-fr'],
+  },
+};
+
+describe('Bot Language', () => {
+  it('should submit settings', () => {
+    const setSettingsMock = jest.fn();
+    const setLocaleMock = jest.fn();
+    const deleteLanguages = jest.fn();
+    const initRecoilState = ({ set }) => {
+      set(currentProjectIdState, state.projectId);
+      set(settingsState(state.projectId), state.settings);
+      set(dispatcherState, {
+        setSettings: setSettingsMock,
+        setLocale: setLocaleMock,
+        deleteLanguages: deleteLanguages,
+      });
+    };
+    const { getByTestId } = renderWithRecoilAndCustomDispatchers(
+      <BotLanguage projectId={state.projectId} />,
+      initRecoilState
+    );
+    const defaultLanguageContainer = getByTestId('defaultLanguage');
+    expect(within(defaultLanguageContainer).getByText('English (United States)')).toBeInTheDocument();
+    const setDefaultLanguage = getByTestId('setDefaultLanguage');
+    act(() => {
+      fireEvent.click(setDefaultLanguage);
+    });
+    expect(setLocaleMock).toBeCalledWith('fr-fr', 'test');
+    const remove = getByTestId('remove');
+    act(() => {
+      fireEvent.click(remove);
+    });
+    expect(deleteLanguages).toBeCalledWith({ languages: ['fr-fr'], projectId: 'test' });
+  });
+});

Composer/packages/client/__tests__/pages/botProjectsSettings/DeleteBotButton.test.tsx

@@ -0,0 +1,24 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import React from 'react';
+import { act, fireEvent } from '@botframework-composer/test-utils';
+
+import { DeleteBotButton } from '../../../src/pages/botProject/DeleteBotButton';
+import { renderWithRecoil } from '../../testUtils';
+
+const state = {
+  projectId: 'test',
+};
+
+describe('Delete Bot Button', () => {
+  it('should render Delete Bot Button', () => {
+    const { getByText } = renderWithRecoil(<DeleteBotButton projectId={state.projectId} />);
+    const deleteButton = getByText('Delete');
+    act(() => {
+      fireEvent.click(deleteButton);
+    });
+    expect(getByText('Delete Bot')).toBeInTheDocument();
+  });
+});

Composer/packages/client/__tests__/pages/botProjectsSettings/PublishTarget.test.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import React from 'react';
+import { act, fireEvent } from '@botframework-composer/test-utils';
+
+import { PublishTargets } from '../../../src/pages/botProject/PublishTargets';
+import { renderWithRecoilAndCustomDispatchers } from '../../testUtils';
+import { dispatcherState, publishTypesState } from '../../../src/recoilModel';
+const state = {
+  projectId: 'test',
+  publishTypes: [{ name: 'azureFunctionsPublish', description: 'Publish bot to Azure Functions (Preview)' }],
+};
+describe('Publish Target', () => {
+  const setPublishTargetsMock = jest.fn();
+  const initRecoilState = ({ set }) => {
+    set(dispatcherState, {
+      setPublishTargets: setPublishTargetsMock,
+      getPublishTargetTypes: () => {},
+    });
+    set(publishTypesState(state.projectId), [
+      { name: 'azureFunctionsPublish', description: 'Publish bot to Azure Functions (Preview)' },
+    ]);
+  };
+  it('should add new publish profile', () => {
+    const { getByTestId, getByText } = renderWithRecoilAndCustomDispatchers(
+      <PublishTargets projectId={state.projectId} />,
+      initRecoilState
+    );
+    const addNewPublishProfile = getByTestId('addNewPublishProfile');
+    act(() => {
+      fireEvent.click(addNewPublishProfile);
+    });
+    expect(getByText('Add a publish profile')).toBeInTheDocument();
+  });
+});

Composer/packages/client/__tests__/pages/botProjectsSettings/RootBotExternalService.test.tsx

@@ -0,0 +1,128 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { act, fireEvent } from '@botframework-composer/test-utils';
+
+import { RootBotExternalService } from '../../../src/pages/botProject/RootBotExternalService';
+import { renderWithRecoilAndCustomDispatchers } from '../../testUtils';
+import { dispatcherState } from '../../../src/recoilModel';
+import {
+  settingsState,
+  currentProjectIdState,
+  projectMetaDataState,
+  botProjectIdsState,
+  dialogState,
+  luFilesState,
+} from '../../../src/recoilModel';
+
+const state = {
+  dialogs: [
+    {
+      content: {
+        recognizer: '',
+      },
+      id: 'dialog1',
+    },
+    {
+      content: {
+        recognizer: '',
+      },
+      id: 'dialog2',
+    },
+  ],
+  qnaFiles: [
+    {
+      content: '',
+      empty: true,
+      id: 'dialog1.en-us',
+    },
+  ],
+  luFiles: [
+    {
+      content: '',
+      empty: true,
+      id: 'dialog1.en-us',
+    },
+  ],
+  projectId: 'test',
+  settings: {},
+  projectMetaDataState: {
+    isRootBot: true,
+    isRemote: false,
+  },
+  botProjectIdsState: ['test'],
+};
+
+describe('Root Bot External Service', () => {
+  it('should submit settings', async () => {
+    const setSettingsMock = jest.fn();
+    const setQnASettingsMock = jest.fn();
+    const initRecoilState = ({ set }) => {
+      set(currentProjectIdState, state.projectId);
+      set(dialogState({ projectId: state.projectId, dialogId: state.dialogs[0].id }), state.dialogs[0]);
+      set(dialogState({ projectId: state.projectId, dialogId: state.dialogs[1].id }), state.dialogs[1]);
+      set(botProjectIdsState, state.botProjectIdsState);
+      set(luFilesState(state.projectId), state.luFiles);
+      set(projectMetaDataState(state.projectId), state.projectMetaDataState);
+      set(settingsState(state.projectId), state.settings);
+      set(dispatcherState, {
+        setSettings: setSettingsMock,
+        setQnASettings: setQnASettingsMock,
+      });
+    };
+    const { getByTestId } = renderWithRecoilAndCustomDispatchers(
+      <RootBotExternalService projectId={state.projectId} />,
+      initRecoilState
+    );
+    const textField1 = getByTestId('rootLUISKey');
+    await act(async () => {
+      await fireEvent.change(textField1, {
+        target: { value: 'myRootLUISKey' },
+      });
+      await fireEvent.blur(textField1);
+    });
+    expect(setSettingsMock).toBeCalledWith('test', {
+      luis: {
+        authoringKey: 'myRootLUISKey',
+        authoringRegion: '',
+      },
+      qna: {
+        subscriptionKey: '',
+      },
+    });
+    const textField2 = getByTestId('rootLUISRegion');
+    await act(async () => {
+      await fireEvent.change(textField2, {
+        target: { value: 'myRootLUISRegion' },
+      });
+      await fireEvent.blur(textField2);
+    });
+    expect(setSettingsMock).toBeCalledWith('test', {
+      luis: {
+        authoringKey: '',
+        authoringRegion: 'myRootLUISRegion',
+      },
+      qna: {
+        subscriptionKey: '',
+      },
+    });
+    const textField3 = getByTestId('QnASubscriptionKey');
+    await act(async () => {
+      await fireEvent.change(textField3, {
+        target: { value: 'myQnASubscriptionKey' },
+      });
+      await fireEvent.blur(textField3);
+    });
+    expect(setSettingsMock).toBeCalledWith('test', {
+      luis: {
+        authoringKey: '',
+        authoringRegion: '',
+      },
+      qna: {
+        subscriptionKey: 'myQnASubscriptionKey',
+      },
+    });
+    expect(setQnASettingsMock).toBeCalledWith('test', 'myQnASubscriptionKey');
+  });
+});

Composer/packages/client/__tests__/pages/botProjectsSettings/SkillHostEndPoint.test.tsx

@@ -0,0 +1,54 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { act, fireEvent } from '@botframework-composer/test-utils';
+
+import { SkillHostEndPoint } from '../../../src/pages/botProject/SkillHostEndPoint';
+import { renderWithRecoilAndCustomDispatchers } from '../../testUtils';
+import { dispatcherState } from '../../../src/recoilModel';
+import { settingsState, currentProjectIdState } from '../../../src/recoilModel';
+
+const state = {
+  projectId: 'test',
+  settings: {
+    defaultLanguage: 'en-us',
+    languages: ['en-us', 'fr-fr'],
+  },
+};
+
+describe('SkillHostEndPoint', () => {
+  it('should submit settings', async () => {
+    const setSettingsMock = jest.fn();
+    const initRecoilState = ({ set }) => {
+      set(currentProjectIdState, state.projectId);
+      set(settingsState(state.projectId), state.settings);
+      set(dispatcherState, {
+        setSettings: setSettingsMock,
+      });
+    };
+    const { getByTestId } = renderWithRecoilAndCustomDispatchers(
+      <SkillHostEndPoint projectId={state.projectId} />,
+      initRecoilState
+    );
+    const textField = getByTestId('SkillHostEndPointTextField');
+    await act(async () => {
+      await fireEvent.change(textField, {
+        target: { value: 'mySkillHostEndPoint' },
+      });
+      await fireEvent.blur(textField);
+    });
+    expect(setSettingsMock).toBeCalledWith('test', {
+      defaultLanguage: 'en-us',
+      languages: ['en-us', 'fr-fr'],
+      skillHostEndpoint: 'mySkillHostEndPoint',
+      luis: {
+        authoringKey: '',
+        authoringRegion: '',
+      },
+      qna: {
+        subscriptionKey: '',
+      },
+    });
+  });
+});

Composer/packages/client/__tests__/testUtils/renderWithRecoil.tsx

@@ -16,6 +16,13 @@ export function renderWithRecoil(subject, initRecoilState: (mutableSnapshot: Mut
   );
 }
 
+export function renderWithRecoilAndCustomDispatchers(
+  subject,
+  initRecoilState: (mutableSnapshot: MutableSnapshot) => void = noop
+) {
+  return render(<RecoilRoot initializeState={initRecoilState}>{subject}</RecoilRoot>);
+}
+
 export function wrapWithRecoil(subject, initRecoilState: (mutableSnapshot: MutableSnapshot) => void = noop) {
   return (
     <RecoilRoot initializeState={initRecoilState}>