test: frontend e2e open and interact with logs from timeline (#13786)

airbytehq · Sep 4, 2024 · f621ae2 · f621ae2
1 parent 7791151
commit f621ae2
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 3 deletions.
diff --git a/airbyte-webapp/cypress/cypress.d.ts b/airbyte-webapp/cypress/cypress.d.ts
@@ -1,6 +1,7 @@
 declare namespace Cypress {
   interface AUTWindow {
     document: Document;
+    navigator: Navigator;
     _e2eOverwrites?: Partial<Experiments>;
   }
 }
diff --git a/airbyte-webapp/cypress/e2e/connection/timeline.cy.ts b/airbyte-webapp/cypress/e2e/connection/timeline.cy.ts
@@ -41,7 +41,7 @@ describe("Connection Timeline", () => {
     setFeatureFlags({});
   });
 
-  it("Should show correct events for empty, started, running, and cancelled jobs", () => {
+  it("Should list events and interact with job logs modal and links", () => {
     cy.visit("/");
 
     createNewConnectionViaApi(pokeApiSource, jsonDestination).then((connectionResponse) => {
@@ -52,7 +52,32 @@ describe("Connection Timeline", () => {
     cy.contains("No events to display").should("exist");
 
     startManualSync();
-
     cy.contains("manually started a sync").should("exist");
+    cy.contains("Sync running").should("exist");
+
+    cy.get('[data-testid="cancel-sync-button"]').click();
+    cy.contains("Yes, cancel sync").click();
+    cy.contains("Sync cancelled").should("exist");
+    // copying link from timeline works
+    cy.get('[data-testid="job-event-menu"]').should("exist").find("button").should("exist").click();
+    cy.get('[data-testid="copy-link-to-event"]').click({ force: true });
+
+    cy.window().then((win) => {
+      return win.navigator.clipboard.readText().then((result: string) => cy.visit(result));
+    });
+    cy.get('[data-testid="job-logs-modal"]', { timeout: 30000 }).should("exist");
+    cy.get('[data-testid="close-modal-button"]').click();
+
+    // view logs from menu + copying link from modal works
+    cy.get('[data-testid="job-event-menu"]').should("exist").find("button").should("exist").click();
+    cy.get('[data-testid="view-logs"]').click();
+    cy.get('[data-testid="job-logs-modal"]').should("exist");
+    cy.get('[data-testid="copy-link-to-attempt-button"]').click();
+    cy.get('[data-testid="close-modal-button"]').click();
+    cy.window().then((win) => {
+      return win.navigator.clipboard.readText().then((result: string) => cy.visit(result));
+    });
+    cy.get('[data-testid="job-logs-modal"]', { timeout: 30000 }).should("exist");
+    cy.get('[data-testid="close-modal-button"]').click();
   });
 });
diff --git a/airbyte-webapp/src/area/connection/components/JobLogsModal/JobLogsModal.tsx b/airbyte-webapp/src/area/connection/components/JobLogsModal/JobLogsModal.tsx
@@ -198,7 +198,7 @@ export const JobLogsModal: React.FC<JobLogsModalProps> = ({
   }, [inputValue]);
 
   return (
-    <FlexContainer direction="column" style={{ height: "100%" }}>
+    <FlexContainer direction="column" style={{ height: "100%" }} data-testid="job-logs-modal">
       <Box p="md" pb="none">
         <FlexContainer alignItems="center">
           <div className={styles.attemptDropdown}>

diff --git a/airbyte-webapp/src/area/connection/components/JobLogsModal/LinkToAttemptButton.tsx b/airbyte-webapp/src/area/connection/components/JobLogsModal/LinkToAttemptButton.tsx
@@ -61,6 +61,7 @@ export const LinkToAttemptButton: React.FC<Props> = ({
           onClick={onCopyLink}
           aria-label={formatMessage({ id: "connection.copyLogLink" })}
           icon="link"
+          data-testid="copy-link-to-attempt-button"
         />
       }
     >

diff --git a/airbyte-webapp/src/components/ui/Modal/Modal.tsx b/airbyte-webapp/src/components/ui/Modal/Modal.tsx
@@ -90,6 +90,7 @@ export const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
                       className={styles.card__closeButton}
                       onClick={onModalCancel}
                       aria-label={formatMessage({ id: "modal.closeButtonLabel" })}
+                      data-testid="close-modal-button"
                     >
                       <Icon type="cross" />
                     </button>

diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/JobEventMenu.tsx b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/JobEventMenu.tsx
@@ -177,22 +177,26 @@ export const JobEventMenu: React.FC<{ eventId?: string; jobId: number; attemptCo
   return (
     <DropdownMenu
       placement="bottom-end"
+      data-testid="job-event-menu"
       options={[
         {
           displayName: formatMessage({
             id: "jobHistory.copyLinkToEvent",
           }),
           value: JobMenuOptions.CopyLinkToEvent,
+          "data-testid": "copy-link-to-event",
         },
         {
           displayName: formatMessage({ id: "jobHistory.viewLogs" }),
           value: JobMenuOptions.OpenLogsModal,
           disabled: attemptCount === 0,
+          "data-testid": "view-logs",
         },
         {
           displayName: formatMessage({ id: "jobHistory.downloadLogs" }),
           value: JobMenuOptions.DownloadLogs,
           disabled: attemptCount === 0,
+          "data-testid": "download-logs",
         },
       ]}
       onChange={onChangeHandler}