refactor: convert cypress tests to typescript (#1630)

* remove eslint typechecking rules

causes too many issues with vscode for now

* consolidate tsconfig

* set up cypress for typescript

* remove unused files

* only need to lint ts and tsx

* use base tsconifg

* fix lint errors and TS errors

* set up integration tests for typescript

* remove old js files

* configure eslint for cypress

* convert support files to typescript

* fix create bot command

* remove waits

* update create bot spec

* restore before each cleanup task

* convert home page spec to typescript

* convert LeftNavBar spec to typescript

* convert LGPage spec to typescript

* convert LuisDeploy spec to typescript

* convert LUPage spec to typescript

* convert NewDialog spec to typescript

* convert NotificationPage spec to typescript

* convert Onboarding spec to typescript

* convert RemoveDialog spec to typescript

* remove commented waits

* convert SaveAs spec to typescript

* remove switch condition spec

too unstable

* convert ToDo spec to typescript

* convert VisualDesigner spec to typescript

* remove unused cypress commands

Composer/.eslintrc.js

@@ -3,7 +3,6 @@ module.exports = {
     'eslint:recommended',
     'plugin:prettier/recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:@typescript-eslint/recommended-requiring-type-checking',
     'plugin:@typescript-eslint/eslint-recommended',
     'prettier/@typescript-eslint',
     'plugin:@bfc/bfcomposer/recommended',

Composer/cypress.json

@@ -4,6 +4,7 @@
     "**/examples/*",
     "*.hot-update.js"
   ],
+  "supportFile": "cypress/support/index.ts",
   "video": false,
   "videoUploadOnPasses": false,
   "viewportWidth": 1600,

Composer/cypress/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['../.eslintrc.js', 'plugin:cypress/recommended'],
+};

Composer/cypress/integration/Breadcrumb.spec.ts

@@ -0,0 +1,66 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+context('breadcrumb', () => {
+  beforeEach(() => {
+    cy.visit(Cypress.env('COMPOSER_URL'));
+    cy.createBot('TodoSample');
+
+    // Return to Main.dialog
+    cy.findByTestId('ProjectTree').within(() => {
+      cy.findByText('__TestTodoSample.Main').click();
+    });
+  });
+
+  function hasBreadcrumbItems(cy: Cypress.cy, items: (string | RegExp)[]) {
+    cy.findByTestId('Breadcrumb')
+      .get('li')
+      .should($li => {
+        items.forEach((item, idx) => {
+          expect($li.eq(idx)).to.contain(item);
+        });
+      });
+  }
+
+  it('can show dialog name in breadcrumb', () => {
+    // Should path = main dialog at first render
+    hasBreadcrumbItems(cy, ['__TestTodoSample.Main']);
+
+    // Click on AddToDo dialog
+    cy.findByTestId('ProjectTree').within(() => {
+      cy.findByText('AddToDo').click();
+    });
+    hasBreadcrumbItems(cy, ['AddToDo']);
+
+    // Return to Main.dialog
+    cy.findByTestId('ProjectTree').within(() => {
+      cy.findByText('__TestTodoSample.Main').click();
+    });
+
+    hasBreadcrumbItems(cy, ['__TestTodoSample']);
+  });
+
+  it('can show event name in breadcrumb', () => {
+    cy.findByTestId('ProjectTree').within(() => {
+      cy.findByText('AddToDo').click();
+      cy.findByText('Dialog started (BeginDialog)').click();
+    });
+
+    hasBreadcrumbItems(cy, ['AddToDo', 'Dialog started (BeginDialog)']);
+  });
+
+  it('can show action name in breadcrumb', () => {
+    cy.findByTestId('ProjectTree').within(() => {
+      cy.findByText('Greeting (ConversationUpdate)').click();
+    });
+
+    // Click on an action
+    cy.withinEditor('VisualEditor', () => {
+      cy.findByTestId('RuleEditor').within(() => {
+        cy.findByText('Send a response').click();
+      });
+    });
+
+    hasBreadcrumbItems(cy, ['__TestTodoSample.Main', 'Greeting (ConversationUpdate)', 'Send a response']);
+  });
+});

Composer/cypress/integration/CreateNewBot.spec.ts

@@ -0,0 +1,35 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+context('Creating a new bot', () => {
+  beforeEach(() => {
+    cy.visit(Cypress.env('COMPOSER_URL'));
+    cy.findByTestId('LeftNav-CommandBarButtonHome').click();
+    cy.findByTestId('homePage-ToolBar-New').within(() => {
+      cy.findByText('New').click();
+    });
+  });
+
+  it('can create a new bot', () => {
+    cy.findByTestId('Create from scratch').click();
+    cy.findByTestId('NextStepButton').click();
+    cy.findByTestId('NewDialogName').type('{selectall}__TestNewProject{enter}');
+    cy.findByTestId('ProjectTree').within(() => {
+      cy.findByText('__TestNewProject.Main').should('exist');
+    });
+  });
+
+  it('can create a bot from the ToDo template', () => {
+    cy.findByTestId('Create from template').click();
+    cy.findByTestId('TodoSample').click();
+    cy.findByTestId('NextStepButton').click();
+    cy.findByTestId('NewDialogName').type('{selectall}__TestNewProject{enter}');
+    cy.findByTestId('ProjectTree').within(() => {
+      cy.findByText('__TestNewProject.Main').should('exist');
+      cy.findByText('AddToDo').should('exist');
+      cy.findByText('ClearToDos').should('exist');
+      cy.findByText('DeleteToDo').should('exist');
+      cy.findByText('ShowToDos').should('exist');
+    });
+  });
+});

Composer/cypress/integration/HomePage.spec.ts

@@ -0,0 +1,22 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+context('Home Page ', () => {
+  beforeEach(() => {
+    cy.visit(Cypress.env('COMPOSER_URL'));
+  });
+
+  it('can open buttons in home page', () => {
+    cy.findByTestId('LeftNav-CommandBarButtonHome').click();
+    cy.findByTestId('homePage-ToolBar-New').click();
+    cy.findByText('Create from scratch?').should('exist');
+    cy.findByText('Cancel').should('exist');
+    cy.findByText('Cancel').click();
+    cy.findByTestId('homePage-ToolBar-Open').click();
+    cy.findByText('Select a Bot').should('exist');
+    cy.findByText('Cancel').should('exist');
+    cy.findByText('Cancel').click();
+    cy.findByTestId('homePage-body-New').click();
+    cy.findByText('Create from scratch?').should('exist');
+  });
+});

Composer/cypress/integration/LGPage.spec.js → Composer/cypress/integration/LGPage.spec.ts

@@ -1,31 +1,36 @@
-/// <reference types="Cypress" />
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 
-context('check language generation page', () => {
+context('LG Page', () => {
   beforeEach(() => {
     cy.visit(Cypress.env('COMPOSER_URL'));
     cy.createBot('TodoSample');
   });
 
   it('can open language generation page', () => {
-    cy.get('[data-testid="LeftNav-CommandBarButtonBot Responses"]').click();
+    cy.findByTestId('LeftNav-CommandBarButtonBot Responses').click();
     // left nav tree
     cy.contains('TodoSample.Main');
     cy.contains('All');
 
     cy.get('.toggleEditMode button').as('switchButton');
 
     // by default is table view
-    cy.get('[data-testid="LGEditor"] [data-testid="table-view"]').should('exist');
+    cy.findByTestId('LGEditor')
+      .findByTestId('table-view')
+      .should('exist');
     // goto edit-mode
     cy.get('@switchButton').click();
-    cy.get('[data-testid="LGEditor"] .monaco-editor').should('exist');
+    cy.findByTestId('LGEditor')
+      .get('.monaco-editor')
+      .should('exist');
 
     // back to table view
     cy.get('@switchButton').click();
 
     // nav to Main dialog
     cy.get('.dialogNavTree a[title="__TestTodoSample.Main"]').click();
-    cy.wait(300);
+    // cy.wait(300);
 
     // dialog filter, edit mode button is disabled.
     cy.get('@switchButton').should('be.disabled');

Composer/cypress/integration/LUPage.spec.js → Composer/cypress/integration/LUPage.spec.ts

@@ -1,13 +1,14 @@
-/// <reference types="Cypress" />
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 
-context('check language understanding page', () => {
+context('LU Page', () => {
   before(() => {
     cy.visit(Cypress.env('COMPOSER_URL'));
     cy.createBot('ToDoBotWithLuisSample');
   });
 
   it('can open language understanding page', () => {
-    cy.get('[data-testid="LeftNav-CommandBarButtonUser Input"]').click();
+    cy.findByTestId('LeftNav-CommandBarButtonUser Input').click();
 
     // left nav tree
     cy.contains('ToDoBotWithLuisSample.Main');
@@ -19,18 +20,23 @@ context('check language understanding page', () => {
     cy.get('@switchButton').should('be.disabled');
 
     // by default is table view
-    cy.get('[data-testid="LUEditor"] [data-testid="table-view"]').should('exist');
+    cy.findByTestId('LUEditor')
+      .findByTestId('table-view')
+      .should('exist');
 
     // nav to ToDoBotWithLuisSample.main dialog
     cy.get('.dialogNavTree button[title="__TestToDoBotWithLuisSample.Main"]').click({ multiple: true });
-    cy.wait(300);
 
     // goto edit-mode
     cy.get('@switchButton').click();
-    cy.get('[data-testid="LUEditor"] .monaco-editor').should('exist');
+    cy.findByTestId('LUEditor')
+      .get('.monaco-editor')
+      .should('exist');
 
     // back to all table view
     cy.get('.dialogNavTree button[title="All"]').click();
-    cy.get('[data-testid="LUEditor"] [data-testid="table-view"]').should('exist');
+    cy.findByTestId('LUEditor')
+      .findByTestId('table-view')
+      .should('exist');
   });
 });

Composer/cypress/integration/LeftNavBar.spec.ts

@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+context('Left Nav Bar', () => {
+  beforeEach(() => {
+    cy.visit(Cypress.env('COMPOSER_URL'));
+    cy.createBot('TodoSample');
+  });
+
+  it('can expand left Nav Bar', () => {
+    cy.findByTestId('LeftNavButton').click();
+    cy.findByTestId('LeftNav-CommandBarButtonDesign Flow').should('exist');
+    cy.findByTestId('LeftNav-CommandBarButtonBot Responses').click();
+    cy.url().should('include', 'language-generation');
+    cy.findByTestId('LeftNav-CommandBarButtonUser Input').click();
+    cy.url().should('include', 'language-understanding');
+    cy.findByTestId('LeftNav-CommandBarButtonSettings').click();
+    cy.url().should('include', 'setting');
+  });
+});