Disable animations

During integration testing you can face a problem of flaky tests caused by animations. It is especially crucial if you are writing screenshot tests. For example, you want to make screenshot of a dialog content: you click button which opens dialog and take a screenshot. Sometimes screenshots can be made too early (before dialog fully opens) and test fails.

To avoid this we recommend to toggle all animation off for integration tests.

@taiga-ui/cdk used TUI_REDUCED_MOTION token which disables all animations for taiga-ui components. This token is based on prefers-reduced-motion . The prefers-reduced-motion CSS media feature is used to detect if the user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that removes, reduces, or replaces motion-based animations.

    
      import {defineConfig} from 'cypress';

export default defineConfig({
  // setupNodeEvents can be defined in either
  // the e2e or component configuration
  e2e: {
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser = {}, launchOptions) => {
        /* ... */

        if (browser.name === `chrome`) {
          launchOptions.args.push(`--force-prefers-reduced-motion`);
        }
      });
    },
  },
});
    

      
        Copy
      
      
    
  

    
      import {defineConfig, devices} from '@playwright/test';

export default defineConfig({
  // ...
  use: {
    // ...
    contextOptions: {
      reducedMotion: `reduce`,
    },
  },
  expect: {
    toHaveScreenshot: {
      animations: `disabled`,
      caret: `hide`,
      scale: `device`,
    },
  },
});
    

      
        Copy