Add tests for checking Unsaved changes modal (#19080)

 add tests

Author: SofiiaZaitseva

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

@@ -1,16 +1,20 @@
-import { appendRandomString } from "commands/common";
+import { appendRandomString, submitButtonClick } from "commands/common";
 import { createPostgresSource, deleteSource, updateSource } from "commands/source";
 import { initialSetupCompleted } from "commands/workspaces";
+import { goToSourcePage, openNewSourceForm } from "pages/sourcePage";
+import { openHomepage } from "pages/sidebar";
+import { selectServiceType } from "pages/createConnectorPage";
+import { fillPokeAPIForm } from "commands/connector";
 
 describe("Source main actions", () => {
-  beforeEach(() => {
-    initialSetupCompleted();
-  });
+  beforeEach(() => initialSetupCompleted());
 
   it("Create new source", () => {
+    cy.intercept("/api/v1/sources/create").as("createSource");
     createPostgresSource("Test source cypress");
 
-    cy.url().should("include", `/source/`);
+    cy.wait("@createSource", {timeout: 30000}).then((interception) => {
+      assert("include", `/source/${interception.response?.body.Id}`)});
   });
 
   //TODO: add update source on some other connector or create 1 more user for pg
@@ -32,3 +36,60 @@ describe("Source main actions", () => {
     cy.get("div").contains(sourceName).should("not.exist");
   });
 });
+
+describe("Unsaved changes modal", () => {
+  beforeEach(() => initialSetupCompleted());
+
+  it("Check leaving Source page without any changes", () => {
+    goToSourcePage();
+    openNewSourceForm();
+
+    openHomepage();
+
+    cy.url().should("include", "/onboarding");
+    cy.get("[data-testid='confirmationModal']").should("not.exist");
+  });
+
+  it("Check leaving Source page without any changes after selection type", () => {
+    goToSourcePage();
+    openNewSourceForm();
+    selectServiceType("PokeAPI");
+
+    openHomepage();
+
+    cy.url().should("include", "/onboarding");
+    cy.get("[data-testid='confirmationModal']").should("not.exist");
+  });
+
+  it("Check leaving Source page without any changes", () => {
+    goToSourcePage();
+    openNewSourceForm();
+    fillPokeAPIForm("testName", "ditto");
+
+    openHomepage();
+
+    cy.get("[data-testid='confirmationModal']").should("exist");
+    cy.get("[data-testid='confirmationModal']").contains("Discard changes");
+    cy.get("[data-testid='confirmationModal']")
+      .contains("There are unsaved changes. Are you sure you want to discard your changes?");
+  });
+
+  //BUG - https://github.com/airbytehq/airbyte/issues/18246
+  it.skip("Check leaving Source page after failing testing", () => {
+    cy.intercept("/api/v1/scheduler/sources/check_connection").as("checkSourceUpdateConnection");
+
+    goToSourcePage();
+    openNewSourceForm();
+    fillPokeAPIForm("testName", "name");
+    submitButtonClick();
+
+    cy.wait("@checkSourceUpdateConnection", {timeout: 5000});
+
+    openHomepage();
+
+    cy.get("[data-testid='confirmationModal']").should("exist");
+    cy.get("[data-testid='confirmationModal']").contains("Discard changes");
+    cy.get("[data-testid='confirmationModal']")
+      .contains("There are unsaved changes. Are you sure you want to discard your changes?");
+  });
+});

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

@@ -1,5 +1,10 @@
 const setting = "nav a[href*='settings']";
+const homepage = "[aria-label='Homepage']";
 
 export const openSettings = () => {
   cy.get(setting).click();
 };
+
+export const openHomepage = () => {
+  cy.get(homepage).click();
+};

airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.tsx

@@ -30,7 +30,7 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   const onSubmitBtnClick = () => startAction({ action: () => onSubmit() });
 
   return (
-    <Modal onClose={onClose} title={<FormattedMessage id={title} />}>
+    <Modal onClose={onClose} title={<FormattedMessage id={title} />} testId="confirmationModal">
       <div className={styles.content}>
         <FormattedMessage id={text} />
         <div className={styles.buttonContent}>