remove transitions from banner on FidesJS tests

CHANGELOG.md

@@ -50,6 +50,9 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 - Action center table's checkboxes were improved, also improved change indications [#6021](https://github.com/ethyca/fides/pull/6021)
 - Changed how TCF Publisher Overrides gets configured in consent settings [#6013](https://github.com/ethyca/fides/pull/6013)
 
+### Developer Experience
+- Reduced animations on Cypress tests in Privacy Center for quicker results [#5976](https://github.com/ethyca/fides/pull/5976)
+
 ### Fixed
 - Updated relationships for Comments, Attachments and PrivacyRequests to remove overlap sqlalchemy error. [#5929](https://github.com/ethyca/fides/pull/5929)
 - Hide "Reclassify" option on fields in D&D tables [#5956](https://github.com/ethyca/fides/pull/5956)

clients/privacy-center/cypress/e2e/consent-banner-tcf.cy.ts

@@ -222,11 +222,6 @@ describe("Fides-js TCF", () => {
         });
       });
       cy.waitUntilFidesInitialized().then(() => {
-        // The banner has a delay, so in order to assert its non-existence, we have
-        // to give it a chance to come up first. Otherwise, the following gets will
-        // pass regardless.
-        // eslint-disable-next-line cypress/no-unnecessary-waiting
-        cy.wait(500);
         cy.get("@FidesUIShown").should("not.have.been.called");
         cy.get("div#fides-banner").should("not.exist");
       });
@@ -236,11 +231,6 @@ describe("Fides-js TCF", () => {
 
       stubTCFExperience({ stubOptions: { fidesDisableBanner: true } });
       cy.waitUntilFidesInitialized().then(() => {
-        // The banner has a delay, so in order to assert its non-existence, we have
-        // to give it a chance to come up first. Otherwise, the following gets will
-        // pass regardless.
-        // eslint-disable-next-line cypress/no-unnecessary-waiting
-        cy.wait(500);
         cy.get("@FidesUIShown").should("not.have.been.called");
         cy.get("div#fides-banner").should("not.exist");
       });

clients/privacy-center/cypress/e2e/consent-banner.cy.ts

@@ -100,11 +100,6 @@ describe("Consent overlay", () => {
 
     it("should not render the banner or modal", () => {
       cy.waitUntilFidesInitialized().then(() => {
-        // The banner has a delay, so in order to assert its non-existence, we have
-        // to give it a chance to come up first. Otherwise, the following gets will
-        // pass regardless.
-        // eslint-disable-next-line cypress/no-unnecessary-waiting
-        cy.wait(500);
         cy.get("@FidesUIShown").should("not.have.been.called");
         cy.get("div#fides-banner").should("not.exist");
         // can display the modal link but it shouldn't do anything
@@ -115,6 +110,55 @@ describe("Consent overlay", () => {
   });
 
   describe("when overlay is enabled", () => {
+    describe("when animation is not disabled", () => {
+      beforeEach(() => {
+        cy.getCookie(CONSENT_COOKIE_NAME).should("not.exist");
+        stubConfig(
+          {
+            options: {
+              isOverlayEnabled: true,
+            },
+          },
+          undefined,
+          undefined,
+          { disable_animations: "false" },
+        );
+      });
+      it("slides banner from the bottom automaticallly", () => {
+        cy.get("div#fides-banner-container.fides-banner-hidden")
+          .should(
+            "have.css",
+            "transition",
+            "transform 1s ease 0s, visibility 1s ease 0s",
+          )
+          .should("have.css", "transform", "matrix(1, 0, 0, 1, 0, 313.5)");
+        cy.get("div#fides-banner").should("not.be.visible");
+        cy.get("div#fides-banner-container").should(
+          "have.css",
+          "transform",
+          "matrix(1, 0, 0, 1, 0, 0)",
+        );
+        cy.get("div#fides-banner").should("be.visible");
+      });
+      it("slides banner to the bottom when dismissed", () => {
+        cy.get("div#fides-banner-container").should(
+          "have.css",
+          "transform",
+          "matrix(1, 0, 0, 1, 0, 0)",
+        );
+        cy.get("div#fides-banner").should("be.visible");
+        cy.get("div#fides-banner-container").within(() => {
+          cy.get("button.fides-close-button").click();
+        });
+        cy.get("div#fides-banner").should("exist");
+        cy.get("div#fides-banner").should("not.be.visible");
+        cy.get("div#fides-banner-container").should(
+          "have.css",
+          "transform",
+          "matrix(1, 0, 0, 1, 0, 313.5)",
+        );
+      });
+    });
     describe("when overlay is shown", () => {
       beforeEach(() => {
         cy.getCookie(CONSENT_COOKIE_NAME).should("not.exist");
@@ -221,11 +265,6 @@ describe("Consent overlay", () => {
           },
         });
         cy.waitUntilFidesInitialized().then(() => {
-          // The banner has a delay, so in order to assert its non-existence, we have
-          // to give it a chance to come up first. Otherwise, the following gets will
-          // pass regardless.
-          // eslint-disable-next-line cypress/no-unnecessary-waiting
-          cy.wait(500);
           cy.get("@FidesUIShown").should("not.have.been.called");
           cy.get("div#fides-banner").should("not.exist");
           // can still open the modal

clients/privacy-center/cypress/support/commands.ts

@@ -11,6 +11,12 @@ import {
 import type { AppDispatch } from "~/app/store";
 import VisitOptions = Cypress.VisitOptions;
 
+declare global {
+  interface Window {
+    config: any;
+  }
+}
+
 Cypress.Commands.add("getByTestId", (selector, ...args) =>
   cy.get(`[data-testid='${selector}']`, ...args),
 );
@@ -109,29 +115,19 @@ Cypress.Commands.add(
 
 Cypress.Commands.add(
   "visitConsentDemo",
-  (
-    options?: FidesConfig,
-    queryParams?: Cypress.VisitOptions["qs"] | null,
-    windowParams?: any,
-  ) => {
+  (options?: FidesConfig, queryParams?: any, windowParams?: any) => {
     const visitOptions: Partial<VisitOptions> = {
       onBeforeLoad: (win) => {
-        // eslint-disable-next-line no-param-reassign
         win.fidesConfig = options;
 
         if (windowParams) {
-          // @ts-ignore
-          // eslint-disable-next-line no-param-reassign
           if (options?.options.customOptionsPath) {
             // hard-code path for now, as dynamically assigning to win obj is challenging in Cypress
-            // @ts-ignore
-            // eslint-disable-next-line no-param-reassign
             win.config = {
               tc_info: undefined,
               overrides: windowParams,
             };
           } else {
-            // eslint-disable-next-line no-param-reassign
             win.fides_overrides = windowParams;
           }
         }
@@ -160,11 +156,16 @@ Cypress.Commands.add(
         });
 
         // Add GTM stub
-        // eslint-disable-next-line no-param-reassign
         win.dataLayer = [];
         cy.stub(win.dataLayer, "push").as("dataLayerPush");
       },
     };
+    if (!queryParams || !queryParams.disable_animations) {
+      if (!queryParams) {
+        queryParams = {};
+      }
+      queryParams.disable_animations = "true";
+    }
     if (queryParams) {
       visitOptions.qs = queryParams;
     }

clients/privacy-center/public/fides-js-components-demo.html

@@ -29,6 +29,11 @@
           "fides_consent=;Path=/;expires='Thu, 01 Jan 1970 00:00:01 GMT';";
         location.reload();
       };
+      if (params.get("disable_animations") === "true") {
+        document.write(
+          "<style>div#fides-banner-container:not(.fides-embedded) { transition: none !important; }</style>",
+        );
+      }
     </script>
     <script>
       // Our cypress test suite requires injecting consent options through an obj on window