feat: add option to support animations (#555)

ojeytonwilliams · web-flow · commit 76d2b5747420 · 2025-12-08T11:32:10.000+02:00
diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
@@ -20,6 +20,7 @@ interface EvaluatorConfig {
     afterEach?: string;
     afterAll?: string;
   };
+  allowAnimations?: boolean;
   loadEnzyme?: boolean;
 }
 
@@ -53,7 +54,15 @@ export class FCCTestRunner {
   }
 
   async createTestRunner(
-    { source, type, code, assetPath, hooks, loadEnzyme }: EvaluatorConfig,
+    {
+      source,
+      type,
+      code,
+      assetPath,
+      hooks,
+      loadEnzyme,
+      allowAnimations,
+    }: EvaluatorConfig,
     { timeout }: RunnerConfig = { timeout: 20000 },
   ) {
     let testRunner: DOMTestRunner | WorkerTestRunner | null = null;
@@ -82,7 +91,10 @@ export class FCCTestRunner {
         break;
     }
 
-    await testRunner.init({ code, source, loadEnzyme, hooks }, timeout);
+    await testRunner.init(
+      { code, source, loadEnzyme, hooks, allowAnimations },
+      timeout,
+    );
 
     return testRunner;
   }
diff --git a/packages/main/src/test-runner.ts b/packages/main/src/test-runner.ts
@@ -91,6 +91,24 @@ const hideFrame = (iframe: HTMLIFrameElement) => {
   iframe.style.visibility = "hidden";
 };
 
+const hideAllowingAnimations = (iframe: HTMLIFrameElement) => {
+  iframe.style.width = "0px";
+  iframe.style.height = "0px";
+  iframe.style.opacity = "0";
+  iframe.style.pointerEvents = "none";
+};
+
+const resetCSS = (iframe: HTMLIFrameElement) => {
+  iframe.style.position = "";
+  iframe.style.left = "";
+  iframe.style.top = "";
+  iframe.style.visibility = "";
+  iframe.style.width = "";
+  iframe.style.height = "";
+  iframe.style.opacity = "";
+  iframe.style.pointerEvents = "";
+};
+
 export class DOMTestRunner implements Runner {
   #testEvaluator: HTMLIFrameElement;
   #script: string;
@@ -101,7 +119,6 @@ export class DOMTestRunner implements Runner {
     iframe.sandbox.add("allow-scripts", "allow-forms");
     iframe.allow = "autoplay";
     iframe.id = "test-frame";
-    hideFrame(iframe);
 
     const scriptUrl = getFullAssetPath(assetPath) + script;
     const scriptHTML = `<script id='${TEST_EVALUATOR_SCRIPT_ID}' src='${scriptUrl}'></script>`;
@@ -165,6 +182,17 @@ ${this.#script}
 ${hooksScript}
 ${opts.source}`;
 
+    resetCSS(this.#testEvaluator);
+    // Whether or not animations will run depends on the browser. By default, at
+    // time of writing, Firefox allows animations in offscreen iframes, while
+    // Chrome does not. If this option is set, we try and allow animations by
+    // making the frame tiny but visible.
+    if (opts.allowAnimations) {
+      hideAllowingAnimations(this.#testEvaluator);
+    } else {
+      hideFrame(this.#testEvaluator);
+    }
+
     document.body.appendChild(this.#testEvaluator);
     await isReady;
 
diff --git a/packages/shared/src/interfaces/test-evaluator.ts b/packages/shared/src/interfaces/test-evaluator.ts
@@ -41,6 +41,7 @@ export interface InitTestFrameOptions {
     afterEach?: string;
     afterAll?: string;
   };
+  allowAnimations?: boolean;
 }
 
 export interface InitWorkerOptions {
diff --git a/packages/tests/integration-tests/index.test.ts b/packages/tests/integration-tests/index.test.ts
@@ -849,6 +849,35 @@ const getFive = () => 5;
       });
     });
 
+    it("should use a different approach to hide the iframe when using allowAnimations", async () => {
+      await page.evaluate(async () => {
+        await window.FCCTestRunner.createTestRunner({
+          type: "dom",
+          allowAnimations: true,
+        });
+      });
+
+      const iframe = await page.$("iframe");
+      const style = await iframe?.evaluate((iframe) => {
+        const style = window.getComputedStyle(iframe);
+        return {
+          width: style.width,
+          height: style.height,
+          opacity: style.opacity,
+          pointerEvents: style.pointerEvents,
+          visbility: style.visibility,
+        };
+      });
+
+      expect(style).toEqual({
+        width: "0px",
+        height: "0px",
+        opacity: "0",
+        pointerEvents: "none",
+        visbility: "visible", // This confirms that the default style has been reverted
+      });
+    });
+
     it("should layout the iframe correctly", async () => {
       const source = `<body>
 				indented text
@@ -1264,6 +1293,42 @@ checkBtn.click();
 
       expect(result).toEqual([{ pass: true }, { pass: true }]);
     });
+
+    it("should be possible to test CSS transitions", async () => {
+      const source = `<style>
+      #box {
+        width: 100px;
+        transition: width 0.1s;
+      }
+      #box.expanded {
+        width: 200px;
+      }
+    </style>
+    <div id="box"></div>`;
+
+      const result = await page.evaluate(async (source) => {
+        const runner = await window.FCCTestRunner.createTestRunner({
+          source,
+          type: "dom",
+          allowAnimations: true,
+        });
+
+        return runner.runTest(`
+        const box = document.getElementById('box');
+        box.classList.add('expanded');
+
+        // Wait for the transition to complete
+        await new Promise((resolve) => {
+          box.addEventListener('transitionend', resolve, { once: true });
+        });
+
+        const computedStyle = window.getComputedStyle(box);
+        assert.equal(computedStyle.width, '200px');
+      `);
+      }, source);
+
+      expect(result).toEqual({ pass: true });
+    });
   });
 
   describe("Javascript evaluator", () => {

Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@ export interface InitTestFrameOptions {`
`41`	`41`	`afterEach?: string;`
`42`	`42`	`afterAll?: string;`
`43`	`43`	`};`
	`44`	`+ allowAnimations?: boolean;`
`44`	`45`	`}`
`45`	`46`
`46`	`47`	`export interface InitWorkerOptions {`