feat: QnA import url

Composer/cypress/integration/LGPage.spec.ts

@@ -13,7 +13,7 @@ context('LG Page', () => {
     cy.contains('TodoSample');
     cy.contains('All');
 
-    cy.get('.toggleEditMode button').as('switchButton');
+    cy.findByTestId('showcode').as('switchButton');
 
     // by default is table view
     cy.findByTestId('LGPage').findByTestId('table-view').should('exist');

Composer/cypress/integration/LUPage.spec.ts

@@ -13,7 +13,7 @@ context('LU Page', () => {
     cy.contains('__TestToDoBotWithLuisSample');
     cy.contains('All');
 
-    cy.get('.toggleEditMode button').should('not.exist');
+    cy.findByTestId('showcode').should('not.exist');
 
     // by default it goes to table view
     cy.findByTestId('LUPage').findByTestId('table-view').should('exist');
@@ -25,7 +25,7 @@ context('LU Page', () => {
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByText('__TestToDoBotWithLuisSample').click('left');
     });
-    cy.get('.toggleEditMode button').as('switchButton');
+    cy.findByTestId('showcode').as('switchButton');
     // goto edit-mode
     cy.get('@switchButton').click();
     cy.findByTestId('LUPage').get('.monaco-editor').should('exist');

Composer/cypress/integration/NotificationPage.spec.ts

@@ -9,8 +9,7 @@ context('Notification Page', () => {
   it('can show lg syntax error ', () => {
     cy.visitPage('Bot Responses');
 
-    cy.get('.toggleEditMode button').as('switchButton');
-    cy.get('@switchButton').click();
+    cy.findByTestId('showcode').click();
     cy.get('textarea').type('#', { delay: 200 });
 
     cy.findByTestId('LeftNav-CommandBarButtonNotifications').click();
@@ -29,7 +28,7 @@ context('Notification Page', () => {
       cy.findByText('__TestToDoBotWithLuisSample').click();
     });
 
-    cy.get('.toggleEditMode button').click();
+    cy.findByTestId('showcode').click();
     cy.get('textarea').type('t', { delay: 200 });
 
     cy.findByTestId('LeftNav-CommandBarButtonNotifications').click();

Composer/packages/client/__tests__/components/createQnAModal.test.tsx

@@ -0,0 +1,67 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { fireEvent } from '@bfc/test-utils';
+
+import { renderWithRecoil } from '../testUtils/renderWithRecoil';
+import CreateQnAFromUrlModal from '../../src/components/QnA/CreateQnAFromUrlModal';
+import { showCreateQnAFromUrlDialogState, showCreateQnAFromUrlDialogWithScratchState } from '../../src/recoilModel';
+
+describe('<CreateQnAFromUrlModal />', () => {
+  const onDismiss = jest.fn(() => {});
+  const onSubmit = jest.fn(() => {});
+  const projectId = 'test-create-qna';
+
+  it('renders <CreateQnAFromUrlModal /> and create from scratch', () => {
+    const container = renderWithRecoil(
+      <CreateQnAFromUrlModal
+        dialogId="test"
+        projectId={projectId}
+        qnaFiles={[]}
+        onDismiss={onDismiss}
+        onSubmit={onSubmit}
+      />,
+      ({ set }) => {
+        set(showCreateQnAFromUrlDialogState(projectId), true);
+        set(showCreateQnAFromUrlDialogWithScratchState(projectId), true);
+      }
+    );
+
+    const { getByTestId } = container;
+    const createFromScratchButton = getByTestId('createKnowledgeBaseFromScratch');
+    expect(createFromScratchButton).not.toBeNull();
+    fireEvent.click(createFromScratchButton);
+    // actions tobe called
+  });
+
+  it('create with name/url and validate the value', () => {
+    const container = renderWithRecoil(
+      <CreateQnAFromUrlModal
+        dialogId="test"
+        projectId={projectId}
+        qnaFiles={[]}
+        onDismiss={onDismiss}
+        onSubmit={onSubmit}
+      />,
+      () => {}
+    );
+
+    const { findByText, getByTestId } = container;
+    const inputName = getByTestId('knowledgeLocationTextField-name') as HTMLInputElement;
+    fireEvent.change(inputName, { target: { value: 'test' } });
+
+    const inputUrl = getByTestId('knowledgeLocationTextField-url') as HTMLInputElement;
+    fireEvent.change(inputUrl, { target: { value: 'test' } });
+
+    expect(inputUrl.value).toBe('test');
+    expect(findByText(/A valid url should start with/)).not.toBeNull();
+    fireEvent.change(inputUrl, { target: { value: 'http://test' } });
+
+    const createKnowledgeButton = getByTestId('createKnowledgeBase');
+    expect(createKnowledgeButton).not.toBeNull();
+    fireEvent.click(createKnowledgeButton);
+    expect(onSubmit).toBeCalled();
+    expect(onSubmit).toBeCalledWith({ url: 'http://test', name: 'test', multiTurn: false });
+  });
+});

Composer/packages/client/__tests__/pages/knowledge-base/QnAPage.test.tsx

@@ -3,6 +3,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React from 'react';
 
+import QnAPage from '../../../src/pages/knowledge-base/QnAPage';
 import TableView from '../../../src/pages/knowledge-base/table-view';
 import CodeEditor from '../../../src/pages/knowledge-base/code-editor';
 import { renderWithRecoil } from '../../testUtils';
@@ -26,12 +27,16 @@ answer
 
 const state = {
   projectId: 'test',
-  dialogs: [{ id: '1' }, { id: '2' }],
+  dialogs: [
+    { id: '1', content: '', skills: [] },
+    { id: '2', content: '', skills: [] },
+  ],
   locale: 'en-us',
   qnaFiles: [
     {
       id: 'a.en-us',
       content: initialContent,
+      imports: [],
       qnaSections: [
         {
           Questions: [{ content: 'question', id: 1 }],
@@ -63,16 +68,20 @@ const initRecoilState = ({ set }) => {
 
 describe('QnA page all up view', () => {
   it('should render QnA page table view', () => {
-    const { getByText, getByTestId } = renderWithRecoil(
+    const { getByTestId, getByText } = renderWithRecoil(
       <TableView dialogId={'a'} projectId={state.projectId} />,
       initRecoilState
     );
     getByTestId('table-view');
-    getByText('question (1)');
-    getByText('answer');
+    getByText('Question');
   });
 
   it('should render QnA page code editor', () => {
     renderWithRecoil(<CodeEditor dialogId={'a'} projectId={state.projectId} />, initRecoilState);
   });
+
+  it('should render QnA page', () => {
+    const { getByTestId } = renderWithRecoil(<QnAPage dialogId={'a'} projectId={state.projectId} />, initRecoilState);
+    getByTestId('QnAPage');
+  });
 });

Composer/packages/client/__tests__/pages/language-generation/LGPage.test.tsx

@@ -4,11 +4,11 @@
 import React from 'react';
 
 import { renderWithRecoil } from '../../testUtils';
+import LGPage from '../../../src/pages/language-generation/LGPage';
 import TableView from '../../../src/pages/language-generation/table-view';
 import CodeEditor from '../../../src/pages/language-generation/code-editor';
 import {
   localeState,
-  luFilesState,
   lgFilesState,
   settingsState,
   schemasState,
@@ -31,16 +31,16 @@ const initialTemplates = [
 
 const state = {
   projectId: 'test',
-  dialogs: [{ id: '1' }, { id: '2' }],
+  dialogs: [
+    { id: '1', content: '', diagnostics: [], skills: [] },
+    { id: '2', content: '', diagnostics: [], skills: [] },
+  ],
   locale: 'en-us',
   lgFiles: [
-    { id: 'a.en-us', content: initialContent, templates: initialTemplates },
-    { id: 'a.fr-fr', content: initialContent, templates: initialTemplates },
-  ],
-  luFiles: [
-    { id: 'a.en-us', content: initialContent, templates: initialTemplates },
-    { id: 'a.fr-fr', content: initialContent, templates: initialTemplates },
+    { id: 'a.en-us', content: initialContent, templates: initialTemplates, diagnostics: [] },
+    { id: 'a.fr-fr', content: initialContent, templates: initialTemplates, diagnostics: [] },
   ],
+
   settings: {
     defaultLanguage: 'en-us',
     languages: ['en-us', 'fr-fr'],
@@ -51,7 +51,6 @@ const initRecoilState = ({ set }) => {
   set(currentProjectIdState, state.projectId);
   set(localeState(state.projectId), state.locale);
   set(dialogsState(state.projectId), state.dialogs);
-  set(luFilesState(state.projectId), state.luFiles);
   set(lgFilesState(state.projectId), state.lgFiles);
   set(settingsState(state.projectId), state.settings);
   set(schemasState(state.projectId), mockProjectResponse.schemas);
@@ -70,4 +69,9 @@ describe('LG page all up view', () => {
   it('should render lg page code editor', () => {
     renderWithRecoil(<CodeEditor dialogId={'a'} projectId={state.projectId} />, initRecoilState);
   });
+
+  it('should render lg page', () => {
+    const { getByTestId } = renderWithRecoil(<LGPage dialogId={'a'} projectId={state.projectId} />, initRecoilState);
+    getByTestId('LGPage');
+  });
 });

Composer/packages/client/__tests__/pages/language-understanding/LUPage.test.tsx

@@ -3,14 +3,14 @@
 
 import React from 'react';
 
+import LUPage from '../../../src/pages/language-understanding/LUPage';
 import TableView from '../../../src/pages/language-understanding/table-view';
 import CodeEditor from '../../../src/pages/language-understanding/code-editor';
 import { renderWithRecoil } from '../../testUtils';
 import {
   localeState,
   dialogsState,
   luFilesState,
-  lgFilesState,
   settingsState,
   schemasState,
   currentProjectIdState,
@@ -22,17 +22,23 @@ const initialContent = `
 - hello
 `;
 
+const initialIntents = [
+  {
+    Name: 'Greeting',
+    Body: '- hello',
+  },
+];
+
 const state = {
   projectId: 'test',
-  dialogs: [{ id: '1' }, { id: '2' }],
-  locale: 'en-us',
-  lgFiles: [
-    { id: 'a.en-us', content: initialContent },
-    { id: 'a.fr-fr', content: initialContent },
+  dialogs: [
+    { id: '1', content: '', skills: [] },
+    { id: '2', content: '', skills: [] },
   ],
+  locale: 'en-us',
   luFiles: [
-    { id: 'a.en-us', content: initialContent },
-    { id: 'a.fr-fr', content: initialContent },
+    { id: 'a.en-us', content: initialContent, templates: initialIntents, diagnostics: [] },
+    { id: 'a.fr-fr', content: initialContent, templates: initialIntents, diagnostics: [] },
   ],
   settings: {
     defaultLanguage: 'en-us',
@@ -45,7 +51,6 @@ const initRecoilState = ({ set }) => {
   set(localeState(state.projectId), state.locale);
   set(dialogsState(state.projectId), state.dialogs);
   set(luFilesState(state.projectId), state.luFiles);
-  set(lgFilesState(state.projectId), state.lgFiles);
   set(settingsState(state.projectId), state.settings);
   set(schemasState(state.projectId), mockProjectResponse.schemas);
 };
@@ -63,4 +68,8 @@ describe('LU page all up view', () => {
   it('should render lu page code editor', () => {
     renderWithRecoil(<CodeEditor dialogId={'a'} projectId={state.projectId} />, initRecoilState);
   });
+
+  it('should render lu page', () => {
+    renderWithRecoil(<LUPage dialogId={'a'} projectId={state.projectId} />, initRecoilState);
+  });
 });