From bb396a7919889f692baa429098f82e15207eb4b9 Mon Sep 17 00:00:00 2001
From: "Hugh A. Miles II" <hughmil3s@gmail.com>
Date: Tue, 29 Jun 2021 10:08:38 -0700
Subject: [PATCH] test: Add e2e testing (#15376)

* create boilerplate for cypress test

* added 1 more test

* add more test cases

* saving this for development

* lit

* remove name

* update pass

* remove unused test
---
 .../integration/database/modal.test.ts        | 91 +++++++------------
 .../data/database/DatabaseModal/index.tsx     |  2 +
 2 files changed, 37 insertions(+), 56 deletions(-)

diff --git a/superset-frontend/cypress-base/cypress/integration/database/modal.test.ts b/superset-frontend/cypress-base/cypress/integration/database/modal.test.ts
index e54a600ecacff..5a5a97ef47817 100644
--- a/superset-frontend/cypress-base/cypress/integration/database/modal.test.ts
+++ b/superset-frontend/cypress-base/cypress/integration/database/modal.test.ts
@@ -21,71 +21,50 @@ import { DATABASE_LIST } from './helper';
 describe('Add database', () => {
   beforeEach(() => {
     cy.login();
-  });
-
-  xit('should keep create modal open when error', () => {
     cy.visit(DATABASE_LIST);
-
-    // open modal
+    cy.wait(3000);
     cy.get('[data-test="btn-create-database"]').click();
+  });
 
-    // values should be blank
-    cy.get('[data-test="database-modal"] input[name="database_name"]').should(
-      'have.value',
-      '',
-    );
-    cy.get('[data-test="database-modal"] input[name="sqlalchemy_uri"]').should(
-      'have.value',
-      '',
-    );
-
-    // type values
-    cy.get('[data-test="database-modal"] input[name="database_name"]')
-      .focus()
-      .type('cypress');
-    cy.get('[data-test="database-modal"] input[name="sqlalchemy_uri"]')
-      .focus()
-      .type('bad_db_uri');
-
-    // click save
-    cy.get('[data-test="modal-confirm-button"]:not(:disabled)').click();
-
-    // should show error alerts and keep modal open
-    cy.get('.toast').contains('error');
-    cy.wait(1000); // wait for potential (incorrect) closing annimation
-    cy.get('[data-test="database-modal"]').should('be.visible');
+  it('should open dynamic form', () => {
+    // click postgres dynamic form
+    cy.get('.preferred > :nth-child(1)').click();
 
-    // should be able to close modal
-    cy.get('[data-test="modal-cancel-button"]').click();
-    cy.get('[data-test="database-modal"]').should('not.be.visible');
+    // make sure all the fields are rendering
+    cy.get('input[name="host"]').should('have.value', '');
+    cy.get('input[name="port"]').should('have.value', '');
+    cy.get('input[name="database"]').should('have.value', '');
+    cy.get('input[name="password"]').should('have.value', '');
+    cy.get('input[name="database_name"]').should('have.value', '');
   });
 
-  xit('should keep update modal open when error', () => {
-    // open modal
-    cy.get('[data-test="database-edit"]:last').click();
-
-    // it should show saved values
-    cy.get('[data-test="database-modal"]:last input[name="sqlalchemy_uri"]')
-      .invoke('val')
-      .should('not.be.empty');
-    cy.get('[data-test="database-modal"] input[name="database_name"]')
-      .invoke('val')
-      .should('not.be.empty');
+  it('should open sqlalchemy form', () => {
+    // click postgres dynamic form
+    cy.get('.preferred > :nth-child(1)').click();
 
-    cy.get('[data-test="database-modal"]:last input[name="sqlalchemy_uri"]')
-      .focus()
-      .dblclick()
-      .type('{selectall}{backspace}bad_uri');
+    cy.get('[data-test="sqla-connect-btn"]').click();
 
-    // click save
-    cy.get('[data-test="modal-confirm-button"]:not(:disabled)').click();
+    // check if the sqlalchemy form is showing up
+    cy.get('[data-test=database-name-input]').should('be.visible');
+    cy.get('[data-test="sqlalchemy-uri-input"]').should('be.visible');
+  });
 
-    // should show error alerts
-    // TODO(hugh): Update this test
-    // cy.get('.toast').contains('error').should('be.visible');
+  it('show error alerts on dynamic form for bad host', () => {
+    // click postgres dynamic form
+    cy.get('.preferred > :nth-child(1)').click();
+    cy.get('input[name="host"]').focus().type('badhost');
+    cy.get('input[name="port"]').focus().type('5432');
+    cy.get('.ant-form-item-explain-error').contains(
+      "The hostname provided can't be resolved",
+    );
+  });
 
-    // modal should still be open
-    // cy.wait(1000); // wait for potential (incorrect) closing annimation
-    // cy.get('[data-test="database-modal"]').should('be.visible');
+  it('show error alerts on dynamic form for bad port', () => {
+    // click postgres dynamic form
+    cy.get('.preferred > :nth-child(1)').click();
+    cy.get('input[name="host"]').focus().type('localhost');
+    cy.get('input[name="port"]').focus().type('123');
+    cy.get('input[name="database"]').focus();
+    cy.get('.ant-form-item-explain-error').contains('The port is closed');
   });
 });
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
index bda4b72aede73..a40357afed9c0 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -650,6 +650,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             key="submit"
             buttonStyle="primary"
             onClick={onClose}
+            data-test="modal-confirm-button"
           >
             Finish
           </StyledFooterButton>
@@ -1080,6 +1081,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 />
                 <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
                   <Button
+                    data-test="sqla-connect-btn"
                     buttonStyle="link"
                     onClick={() =>
                       setDB({