Preemptively fix the E2E flake in alerty types (#44344)

e2e/test/scenarios/sharing/alert/alert-types.cy.spec.js

@@ -3,12 +3,7 @@ import {
   ORDERS_BY_YEAR_QUESTION_ID,
   ORDERS_QUESTION_ID,
 } from "e2e/support/cypress_sample_instance_data";
-import {
-  restore,
-  setupSMTP,
-  visitQuestion,
-  leftSidebar,
-} from "e2e/support/helpers";
+import { restore, setupSMTP, visitQuestion } from "e2e/support/helpers";
 
 const { PEOPLE, PEOPLE_ID } = SAMPLE_DATABASE;
 
@@ -73,41 +68,27 @@ describe("scenarios > alert > types", { tags: "@external" }, () => {
 
   describe("goal based alerts", () => {
     it("should work for timeseries questions with a set goal", () => {
-      // Set goal on timeseries question
-      visitQuestion(timeSeriesQuestionId);
-
-      // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-      cy.findByText("Visualization").click();
-      leftSidebar().within(() => {
-        cy.icon("line").realHover();
-        cy.icon("gear").click();
+      cy.request("PUT", `/api/card/${timeSeriesQuestionId}`, {
+        visualization_settings: {
+          "graph.show_goal": true,
+          "graph.goal_value": 7000,
+          "graph.dimensions": ["CREATED_AT"],
+          "graph.metrics": ["count"],
+        },
       });
-      // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-      cy.findByText("Line options");
-      // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-      cy.findByText("Display").click();
-
-      setGoal("7000");
 
-      // Save question
-      // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-      cy.findByText("Save").click();
-      cy.findByTestId("save-question-modal").within(modal => {
-        cy.findByText("Save").click();
-      });
-      // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-      cy.findByText("Save question").should("not.exist");
+      cy.log("Set the goal on timeseries question");
+      visitQuestion(timeSeriesQuestionId);
+      cy.findByTestId("chart-container").should("contain", "Goal");
 
       openAlertModal();
+      cy.findByTestId("alert-create").within(() => {
+        cy.findByText("Reaches the goal line").click();
+        cy.findByText("The first time").click();
+        cy.button("Done").click();
+      });
 
-      // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-      cy.findByText("Reaches the goal line").click();
-      // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-      cy.findByText("The first time").click();
-
-      cy.button("Done").click();
-
-      // Check the API response
+      cy.log("Check the API response");
       cy.wait("@savedAlert").then(({ response: { body } }) => {
         expect(body.alert_condition).to.equal("goal");
         expect(body.alert_above_goal).to.equal(true);
@@ -139,14 +120,5 @@ describe("scenarios > alert > types", { tags: "@external" }, () => {
 
 function openAlertModal() {
   cy.icon("bell").click();
-  cy.findByText("Set up an alert").click();
-}
-
-function setGoal(goal) {
-  // Enable the toggle
-  cy.findByText("Goal line").next().click();
-
-  cy.findByDisplayValue("0").clear().type(goal);
-
-  cy.button("Done").click();
+  cy.findByText("Set up an alert").should("be.visible").click();
 }

frontend/src/metabase/query_builder/components/AlertModals/AlertModals.jsx

@@ -153,7 +153,7 @@ class CreateAlertModalContentInner extends Component {
 
     // TODO: Remove PulseEdit css hack
     return (
-      <ModalContent onClose={onCancel}>
+      <ModalContent data-testid="alert-create" onClose={onCancel}>
         <div
           className={cx(CS.mlAuto, CS.mrAuto, CS.mb4)}
           style={{ maxWidth: "550px" }}