Migrate cypress tests and commands to TypeScript (#13091)

* Migrate cypress tests and commands to TypeScript

* Cypress added plugins to tsconfig

* Update cypress plugins file to .ts

airbyte-webapp-e2e-tests/.gitignore

@@ -31,3 +31,4 @@ yarn-error.log*
 /cypress/screenshots
 /cypress/videos
 /cypress/fixtures
+/cypress/downloads

airbyte-webapp-e2e-tests/cypress.json

@@ -1,13 +1,7 @@
 {
   "projectId": "916nvw",
   "baseUrl": "http://localhost:3000",
-  "testFiles": [
-    "base.spec.js",
-    "onboarding.spec.js",
-    "connection.spec.js",
-    "destination.spec.js",
-    "source.spec.js"
-  ],
+  "testFiles": ["**/*.spec.*"],
   "viewportHeight": 800,
   "viewportWidth": 1280,
   "retries": {

airbyte-webapp-e2e-tests/cypress/support/commands/common.js → airbyte-webapp-e2e-tests/cypress/commands/common.ts

@@ -1,12 +1,12 @@
-Cypress.Commands.add("submitButtonClick", () => {
+export const submitButtonClick = () => {
   cy.get("button[type=submit]").click();
-})
+}
 
-Cypress.Commands.add("fillEmail", (email) => {
+export const fillEmail = (email: string) => {
   cy.get("input[name=email]").type(email);
-})
+}
 
-Cypress.Commands.add("fillTestLocalJsonForm", (name) => {
+export const fillTestLocalJsonForm = (name: string) => {
   cy.intercept("/api/v1/destination_definition_specifications/get").as("getDestinationSpecifications");
 
   cy.get("div[data-testid='serviceType']").click();
@@ -16,48 +16,48 @@ Cypress.Commands.add("fillTestLocalJsonForm", (name) => {
 
   cy.get("input[name=name]").clear().type(name);
   cy.get("input[name='connectionConfiguration.destination_path']").type("/local");
-})
+}
 
-Cypress.Commands.add("openSourcePage", () => {
+export const openSourcePage = () => {
   cy.intercept("/api/v1/sources/list").as("getSourcesList");
   cy.visit("/source");
   cy.wait("@getSourcesList");
-})
+}
 
-Cypress.Commands.add("openDestinationPage", () => {
+export const openDestinationPage = () => {
   cy.intercept("/api/v1/destinations/list").as("getDestinationsList");
   cy.visit("/destination");
   cy.wait("@getDestinationsList");
-})
+}
 
-Cypress.Commands.add("openNewSourceForm", () => {
-  cy.openSourcePage();
+export const openNewSourceForm = () => {
+  openSourcePage();
   cy.get("button[data-id='new-source'").click();
   cy.url().should("include", `/source/new-source`);
-})
+}
 
-Cypress.Commands.add("openNewDestinationForm", () => {
-  cy.openDestinationPage();
+export const openNewDestinationForm = () => {
+  openDestinationPage();
   cy.get("button[data-id='new-destination'").click();
   cy.url().should("include", `/destination/new-destination`);
-})
+}
 
-Cypress.Commands.add("updateField", (field, value) => {
+export const updateField = (field: string, value: string) => {
   cy.get("input[name='" + field + "']").clear().type(value);
-})
+}
 
-Cypress.Commands.add("openSettingForm", (name) => {
+export const openSettingForm = (name: string) => {
   cy.get("div").contains(name).click();
   cy.get("div[data-id='settings-step']").click();
-})
+}
 
-Cypress.Commands.add("deleteEntity", () => {
+export const deleteEntity = () => {
   cy.get("button[data-id='open-delete-modal']").click();
   cy.get("button[data-id='delete']").click();
-})
+}
 
-Cypress.Commands.add("clearApp", () => {
+export const clearApp = () => {
   indexedDB.deleteDatabase("firebaseLocalStorageDb");
   cy.clearLocalStorage();
   cy.clearCookies();
-});
+}

airbyte-webapp-e2e-tests/cypress/support/commands/connection.js → airbyte-webapp-e2e-tests/cypress/commands/connection.ts

@@ -1,9 +1,13 @@
-Cypress.Commands.add("createTestConnection", (sourceName, destinationName) => {
+import { submitButtonClick } from "./common";
+import { createTestDestination } from "./destination";
+import { createTestSource } from "./source";
+
+export const createTestConnection = (sourceName: string, destinationName: string) => {
   cy.intercept("/api/v1/sources/discover_schema").as("discoverSchema");
   cy.intercept("/api/v1/web_backend/connections/create").as("createConnection");
 
-  cy.createTestSource(sourceName);
-  cy.createTestDestination(destinationName);
+  createTestSource(sourceName);
+  createTestDestination(destinationName);
   cy.wait(3000);
 
   cy.get("div[data-testid='select-source']").click();
@@ -17,7 +21,7 @@ Cypress.Commands.add("createTestConnection", (sourceName, destinationName) => {
 
   cy.get("div[data-testid='namespaceDefinition']").click();
   cy.get("div[data-testid='namespaceDefinition-source']").click();
-  cy.submitButtonClick();
+  submitButtonClick();
 
   cy.wait("@createConnection");
-});
+};

airbyte-webapp-e2e-tests/cypress/commands/destination.ts

@@ -0,0 +1,32 @@
+import { deleteEntity, fillTestLocalJsonForm, openDestinationPage, openNewDestinationForm, openSettingForm, submitButtonClick, updateField } from "./common";
+
+export const createTestDestination = (name: string) => {
+  cy.intercept("/api/v1/scheduler/destinations/check_connection").as("checkDestinationConnection");
+  cy.intercept("/api/v1/destinations/create").as("createDestination");
+
+  openNewDestinationForm();
+  fillTestLocalJsonForm(name);
+  submitButtonClick();
+
+  cy.wait("@checkDestinationConnection");
+  cy.wait("@createDestination");
+}
+
+export const updateDestination = (name: string, field: string, value: string) => {
+  cy.intercept("/api/v1/destinations/check_connection_for_update").as("checkDestinationUpdateConnection");
+  cy.intercept("/api/v1/destinations/update").as("updateDestination");
+
+  openDestinationPage();
+  openSettingForm(name);
+  updateField(field, value);
+  submitButtonClick();
+
+  cy.wait("@checkDestinationUpdateConnection");
+  cy.wait("@updateDestination");
+}
+
+export const deleteDestination = (name: string) => {
+  openDestinationPage();
+  openSettingForm(name);
+  deleteEntity();
+}

airbyte-webapp-e2e-tests/cypress/commands/sidebar.ts

@@ -0,0 +1,3 @@
+export const openSettings = () => {
+  cy.get("nav a[href*='settings']").click();
+};

airbyte-webapp-e2e-tests/cypress/support/commands/source.js → airbyte-webapp-e2e-tests/cypress/commands/source.ts

@@ -1,4 +1,6 @@
-Cypress.Commands.add("fillPgSourceForm", (name) => {
+import { deleteEntity, openNewSourceForm, openSettingForm, openSourcePage, submitButtonClick, updateField } from "./common";
+
+export const fillPgSourceForm = (name: string) => {
   cy.intercept("/api/v1/source_definition_specifications/get").as(
     "getSourceSpecifications"
   );
@@ -16,39 +18,39 @@ Cypress.Commands.add("fillPgSourceForm", (name) => {
   cy.get("input[name='connectionConfiguration.password']").type(
     "secret_password"
   );
-});
+};
 
-Cypress.Commands.add("createTestSource", (name) => {
+export const createTestSource = (name: string) => {
   cy.intercept("/api/v1/scheduler/sources/check_connection").as(
     "checkSourceUpdateConnection"
   );
   cy.intercept("/api/v1/sources/create").as("createSource");
 
-  cy.openNewSourceForm();
-  cy.fillPgSourceForm(name);
-  cy.submitButtonClick();
+  openNewSourceForm();
+  fillPgSourceForm(name);
+  submitButtonClick();
 
   cy.wait("@checkSourceUpdateConnection");
   cy.wait("@createSource");
-});
+};
 
-Cypress.Commands.add("updateSource", (name, field, value) => {
+export const updateSource = (name: string, field: string, value: string) => {
   cy.intercept("/api/v1/sources/check_connection_for_update").as(
     "checkSourceConnection"
   );
   cy.intercept("/api/v1/sources/update").as("updateSource");
 
-  cy.openSourcePage();
-  cy.openSettingForm(name);
-  cy.updateField(field, value);
-  cy.submitButtonClick();
+  openSourcePage();
+  openSettingForm(name);
+  updateField(field, value);
+  submitButtonClick();
 
   cy.wait("@checkSourceConnection");
   cy.wait("@updateSource");
-});
+}
 
-Cypress.Commands.add("deleteSource", (name) => {
-  cy.openSourcePage();
-  cy.openSettingForm(name);
-  cy.deleteEntity();
-});
+export const deleteSource = (name: string) => {
+  openSourcePage();
+  openSettingForm(name);
+  deleteEntity();
+}

airbyte-webapp-e2e-tests/cypress/support/commands/workspaces.js → airbyte-webapp-e2e-tests/cypress/commands/workspaces.ts

@@ -1,4 +1,4 @@
-Cypress.Commands.add("initialSetupCompleted", (completed = true) => {
+export const initialSetupCompleted = (completed = true) => {
   // Modify the workspaces/list response to mark every workspace as "initialSetupComplete" to ensure we're not showing
   // the setup/preference page for any workspace if this method got called.
   cy.intercept("POST", "/api/v1/workspaces/get", (req) => {
@@ -7,4 +7,4 @@ Cypress.Commands.add("initialSetupCompleted", (completed = true) => {
       res.send(res.body);
     });
   });
-});
+};

airbyte-webapp-e2e-tests/cypress/global.d.ts

@@ -1,11 +1,2 @@
 declare global {
-  namespace Cypress {
-    interface Chainable {
-      clearApp(): Chainable<Element>;
-
-      // sidebar
-
-      openSettings(): Chainable<Element>;
-    }
-  }
 }

airbyte-webapp-e2e-tests/cypress/integration/connection.spec.js → airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts

@@ -1,10 +1,16 @@
+import { deleteEntity } from "commands/common";
+import { createTestConnection } from "commands/connection";
+import { deleteDestination } from "commands/destination";
+import { deleteSource } from "commands/source";
+import { initialSetupCompleted } from "commands/workspaces";
+
 describe("Connection main actions", () => {
   beforeEach(() => {
-    cy.initialSetupCompleted();
+    initialSetupCompleted();
   });
 
   it("Create new connection", () => {
-    cy.createTestConnection("Test connection source cypress", "Test destination cypress");
+    createTestConnection("Test connection source cypress", "Test destination cypress");
 
     cy.get("div").contains("Test connection source cypress").should("exist");
     cy.get("div").contains("Test destination cypress").should("exist");
@@ -13,7 +19,7 @@ describe("Connection main actions", () => {
   it("Update connection", () => {
     cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
 
-    cy.createTestConnection("Test update connection source cypress", "Test update connection destination cypress");
+    createTestConnection("Test update connection source cypress", "Test update connection destination cypress");
 
     cy.visit("/source");
     cy.get("div").contains("Test update connection source cypress").click();
@@ -29,17 +35,17 @@ describe("Connection main actions", () => {
 });
 
   it("Delete connection", () => {
-    cy.createTestConnection("Test delete connection source cypress", "Test delete connection destination cypress");
+    createTestConnection("Test delete connection source cypress", "Test delete connection destination cypress");
 
     cy.visit("/source");
     cy.get("div").contains("Test delete connection source cypress").click();
     cy.get("div").contains("Test delete connection destination cypress").click();
 
     cy.get("div[data-id='settings-step']").click();
 
-    cy.deleteEntity();
+    deleteEntity();
 
-    cy.deleteSource("Test delete connection source cypress");
-    cy.deleteDestination("Test delete connection destination cypress");
+    deleteSource("Test delete connection source cypress");
+    deleteDestination("Test delete connection destination cypress");
   });
 });

airbyte-webapp-e2e-tests/cypress/integration/destination.spec.ts

@@ -0,0 +1,30 @@
+import { createTestDestination, deleteDestination, updateDestination } from "commands/destination";
+import { initialSetupCompleted } from "commands/workspaces";
+
+describe("Destination main actions", () => {
+  beforeEach(() => {
+    initialSetupCompleted();
+  });
+
+  it("Create new destination", () => {
+    createTestDestination("Test destination cypress");
+
+    cy.url().should("include", `/destination/`);
+  });
+
+  it("Update destination", () => {
+    createTestDestination("Test destination cypress for update");
+    updateDestination("Test destination cypress for update", "connectionConfiguration.destination_path", "/local/my-json");
+
+    cy.get("div[data-id='success-result']").should("exist");
+    cy.get("input[value='/local/my-json']").should("exist");
+  });
+
+  it("Delete destination", () => {
+    createTestDestination("Test destination cypress for delete");
+    deleteDestination("Test destination cypress for delete");
+
+    cy.visit("/destination");
+    cy.get("div").contains("Test destination cypress for delete").should("not.exist");
+  });
+});

airbyte-webapp-e2e-tests/cypress/integration/onboarding.spec.js → airbyte-webapp-e2e-tests/cypress/integration/onboarding.spec.ts

@@ -1,16 +1,19 @@
+import { fillEmail, submitButtonClick } from "commands/common";
+import { initialSetupCompleted } from "commands/workspaces";
+
 describe("Preferences actions", () => {
   beforeEach(() => {
-    cy.initialSetupCompleted(false);
+    initialSetupCompleted(false);
   });
 
   it("Should redirect to onboarding after email is entered", () => {
     cy.visit("/preferences");
     cy.url().should("include", `/preferences`);
 
-    cy.fillEmail("test-email-onboarding@test-onboarding-domain.com");
+    fillEmail("test-email-onboarding@test-onboarding-domain.com");
     cy.get("input[name=securityUpdates]").parent().click();
 
-    cy.submitButtonClick();
+    submitButtonClick();
 
     cy.url().should("match", /.*\/onboarding/);
   });