Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support disabling animations #815

Open
silicakes opened this issue Oct 31, 2023 · 0 comments
Open

Support disabling animations #815

silicakes opened this issue Oct 31, 2023 · 0 comments

Comments

@silicakes
Copy link

silicakes commented Oct 31, 2023

Is your feature request related to a problem? Please describe.
When running tests against image snapshots, I often come across discrepancies that stem from animated parts being in different phases.
Things like charts, graphs and even animated modals, can be phased out from the original snapshot which causes it to fail due to a too big of a difference

Describe the solution you'd like
@playwright/test has a solution where they allow you to disable animation in the following manner

animations "disabled"|"allow" (optional)
When set to "disabled", stops CSS animations, CSS transitions and Web Animations. Animations get different treatment depending on their duration:
finite animations are fast-forwarded to completion, so they'll fire transitionend event.
infinite animations are canceled to initial state, and then played over after the screenshot.
Defaults to "disabled" that disables animations.

Describe alternatives you've considered
Currently, I've implemented a sleep function that waits for all animations to be exhausted, which for obvious reasons, makes testing very slow:

const sleep = (ms: number) =>
  new Promise((resolve) => setTimeout(() => resolve(void 0), ms));

const config: TestRunnerConfig = {
  setup() {
    // using jest-image-snapshot
    expect.extend({ toMatchImageSnapshot });
  },
  async postRender(page, context) {
    const elementHandler = await page.$("#storybook-root");
    if (!elementHandler) throw new Error("No strybook root found");

   // no reason for this atm tbh
    await page.waitForLoadState("networkidle");

    // waiting for animations to complete
    await sleep(3000);
    const image = await page.screenshot();
    expect(image).toMatchImageSnapshot({
      customDiffDir,
      customSnapshotIdentifier: context.id,
      failureThreshold: 0.01,
      failureThresholdType: "percent",
    });
  },
};

Additional context
I'd love your advice on alternative implementations, even if this feature is currently missing or not planned.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant