Feature/postgres cypress tests (#13311)

Add Postgress tests to Cypress test suite

This commit is introducing a new feature by adding a possibility to test Postgress related issues. It adds an updated CI configuration that plays nice with [Docker QA database](https://github.com/metabase/metabase-qa) (postgress-12).
It also adds a few repros, listed below:

* Add repro for #12762
* Add repro for #13263 (#13303)
---
* Add an example for how to run metabase-qa postgres in CI
* Add e2e test for adding/connecting PostgreSQL database (#13296)

Co-authored-by: @dacort 

.circleci/config.yml

@@ -175,6 +175,11 @@ executors:
       - image: circleci/clojure:lein-2.8.1-node-browsers
       - image: circleci/mongo:4.0
 
+  fe-postgres-12:
+    working_directory: /home/circleci/metabase/metabase/
+    docker:
+      - image: circleci/clojure:lein-2.8.1-node-browsers
+      - image: metabase/qa-databases:postgres-sample-12
 
 ########################################################################################################################
 #                                                       COMMANDS                                                       #
@@ -980,6 +985,16 @@ workflows:
           only-single-database: true
           test-files-location: frontend/test/metabase-db/mongo
 
+      - fe-tests-cypress:
+          name: fe-tests-cypress-postgres-12
+          requires:
+            - build-uberjar
+            - fe-deps
+          e: fe-postgres-12
+          cypress-group: "postgres"
+          only-single-database: true
+          test-files-location: frontend/test/metabase-db/postgres
+
       - deploy-master:
           requires:
             - yaml-linter

frontend/test/metabase-db/postgres/add.cy.spec.js

+import {
+  signInAsAdmin,
+  restore,
+  modal,
+  typeAndBlurUsingLabel,
+} from "__support__/cypress";
+
+function addPostgresDatabase() {
+  cy.visit("/admin/databases/create");
+  cy.contains("Database type")
+    .closest(".Form-field")
+    .find("a")
+    .click();
+  cy.contains("PostgreSQL").click({ force: true });
+  cy.contains("Additional JDBC connection string options");
+
+  typeAndBlurUsingLabel("Name", "QA Postgres12");
+  typeAndBlurUsingLabel("Host", "localhost");
+  // TODO: "Port" label and input field are misconfigured (input field is missing `aria-labeledby` attribute)
+  // typeAndBlurUsingLabel("Port", "5432") => this will not work (switching to placeholder temporarily)
+  cy.findByPlaceholderText("5432")
+    .click()
+    .type("5432");
+  typeAndBlurUsingLabel("Database name", "sample");
+  typeAndBlurUsingLabel("Username", "metabase");
+  typeAndBlurUsingLabel("Password", "metasample123");
+
+  cy.findByText("Save")
+    .should("not.be.disabled")
+    .click();
+}
+
+describe("postgres > admin > add", () => {
+  beforeEach(() => {
+    restore();
+    signInAsAdmin();
+    cy.server();
+  });
+
+  it("should add a database and redirect to listing", () => {
+    cy.route({
+      method: "POST",
+      url: "/api/database",
+    }).as("createDatabase");
+
+    addPostgresDatabase();
+
+    cy.wait("@createDatabase");
+
+    cy.url().should("match", /\/admin\/databases\?created=\d+$/);
+    cy.contains("Your database has been added!");
+    modal()
+      .contains("I'm good thanks")
+      .click();
+  });
+
+  it.skip("should show row details when clicked on its entity key (metabase#13263)", () => {
+    cy.route({
+      method: "POST",
+      url: "/api/database",
+    }).as("createDatabase");
+
+    addPostgresDatabase();
+
+    cy.wait("@createDatabase");
+
+    cy.url().should("match", /\/admin\/databases\?created=\d+$/);
+    cy.contains("Your database has been added!");
+    modal()
+      .contains("I'm good thanks")
+      .click();
+
+    // Repro starts here
+    cy.visit("/");
+    cy.findByText("Ask a question").click();
+    cy.findByText("Simple question").click();
+    cy.findByText("QA Postgres12").click();
+    cy.findByText("Orders").click();
+
+    // We're clicking on ID: 1 (the first order) => do not change!
+    // It is tightly coupled to the assertion ("37.65"), which is "Subtotal" value for that order.
+    cy.get(".Table-ID")
+      .eq(0)
+      .click();
+
+    // Wait until "doing science" spinner disappears (DOM is ready for assertions)
+    // TODO: if this proves to be reliable, extract it as a helper function for waiting on DOM to render
+    cy.get(".LoadingSpinner").should("not.exist");
+
+    // Assertions
+    cy.log("**Fails in v0.36.6**");
+    // This could be omitted because real test is searching for "37.65" on the page
+    cy.findByText("There was a problem with your question").should("not.exist");
+    cy.contains("37.65");
+  });
+});

frontend/test/metabase/scenarios/question/custom_column.cy.spec.js

@@ -55,4 +55,53 @@ describe("scenarios > question > custom columns", () => {
     firstCell("contain", 1);
     firstCell("not.contain", 14);
   });
+
+  it.skip("should create custom column with fields from aggregated data (metabase#12762)", () => {
+    // go straight to "orders" in custom questions
+    cy.visit("/question/new?database=1&table=2&mode=notebook");
+
+    cy.findByText("Summarize").click();
+
+    popover().within(() => {
+      cy.findByText("Sum of ...").click();
+      cy.findByText("Subtotal").click();
+    });
+
+    // TODO: There isn't a single unique parent that can be used to scope this icon within
+    // (a good candidate would be `.NotebookCell`)
+    cy.get(".Icon-add")
+      .last() // This is brittle.
+      .click();
+
+    popover().within(() => {
+      cy.findByText("Sum of ...").click();
+      cy.findByText("Total").click();
+    });
+
+    cy.findByText("Pick a column to group by").click();
+    cy.findByText("Created At").click();
+
+    // Add custom column based on previous aggregates
+    const columnName = "MegaTotal";
+    cy.findByText("Custom column").click();
+    popover().within(() => {
+      cy.get("[contenteditable='true']")
+        .click()
+        .type("[Sum of Subtotal] + [Sum of Total]");
+      cy.findByPlaceholderText("Something nice and descriptive")
+        .click()
+        .type(columnName);
+      cy.findByText("Done").click();
+    });
+
+    cy.server();
+    cy.route("POST", "/api/dataset").as("dataset");
+
+    cy.findByText("Visualize").click();
+    cy.wait("@dataset");
+    cy.findByText("There was a problem with your question").should("not.exist");
+    // This is a pre-save state of the question but the column name should appear
+    // both in tabular and graph views (regardless of which one is currently selected)
+    cy.get(".Visualization").contains(columnName);
+  });
 });

frontend/test/snapshot-creators/default.cy.snap.js

@@ -194,6 +194,11 @@ describe("snapshots", () => {
       cy.request("POST", "/api/database/2/rescan_values");
       cy.wait(1000); // wait for sync
       snapshot("withSqlite");
+      // TODO: Temporary HACK that requires further investigation and a better solution.
+      // sqlite driver was messing with the sync of postres database in CY tests
+      // ("probably some weird race condition" @Damon)
+      // Deleting it here keeps snapshots intact, and enables for unobstructed postgres testing.
+      cy.request("DELETE", "/api/database/2");
       restore("blank");
     });
   });