diff --git a/CHANGELOG.md b/CHANGELOG.md index 656f899f815..0438ea7954c 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/clients/privacy-center/cypress/e2e/consent-banner-tcf.cy.ts b/clients/privacy-center/cypress/e2e/consent-banner-tcf.cy.ts index 3db9de14250..bc8a8066131 100644 --- a/clients/privacy-center/cypress/e2e/consent-banner-tcf.cy.ts +++ b/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"); }); diff --git a/clients/privacy-center/cypress/e2e/consent-banner.cy.ts b/clients/privacy-center/cypress/e2e/consent-banner.cy.ts index ead757a3041..7e00d2e46bd 100644 --- a/clients/privacy-center/cypress/e2e/consent-banner.cy.ts +++ b/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 diff --git a/clients/privacy-center/cypress/support/commands.ts b/clients/privacy-center/cypress/support/commands.ts index 4ef273f4413..35151844df6 100644 --- a/clients/privacy-center/cypress/support/commands.ts +++ b/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 = { 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; } diff --git a/clients/privacy-center/public/fides-js-components-demo.html b/clients/privacy-center/public/fides-js-components-demo.html index e24ef16d0e2..8155c7dac38 100644 --- a/clients/privacy-center/public/fides-js-components-demo.html +++ b/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( + "", + ); + }