feat: wait for idle network before auto snapshot, expose waitForIdleNetwork API

[AriPerkkio]

Issue: Related to #295

Stacks on #300.

What Changed

Implement smart network traffic detector that can be used before writing archives.

waitForIdleNetwork()

Users can use waitForIdleNetwork() API before they take manual snapshots using takeSnapshot(). As we are already intercepting the network before any user code runs, we can detect network activity using Chrome DevTool’s Network Domain events.

In @chromatic-com/playwright we are using Playwright’s page.waitForLoadState("networkidle") for detecting idle network. This API works only for initial page load, not for dynamic changes that trigger network requests. In component testing users cannot navigate to any page, so it’s not possible to wait for page loads. Users can use this API to work-around that. We will also use this method internally when waiting for final archives at the end of the test case.

import { takeSnapshot, waitForIdleNetwork } from "@chromatic-com/vitest";

test("accordion", () => {
  await render(<Accordion />);

	// Wait for fonts, CSS and images to load
	await waitForIdleNetwork(1_000);

	await takeSnapshot();
});

The function requires timeout: number argument, that is used as timeout before the promise is rejected with error message Timed out waiting for network to be idle.

Network is considered idle, when there has been no network activity for a specific time. By default this time is 100 ms. It can be configured using idleNetworkInterval option.

import { defineConfig } from 'vitest/config';
import { chromaticPlugin } from '@chromatic-com/vitest/plugin'; 

export default defineConfig({
  plugins: [chromaticPlugin({
    // Network is idle when there has been no activity in 300ms
    idleNetworkInterval: 300,
  })],
})

How to test

$ cd <project-root>
$ yarn test:unit
$ yarn test:vitest
$ yarn archive-storybook:vitest

[changeset-bot]

⚠️ No Changeset found

Latest commit: 292902a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codecov]

Codecov Report

❌ Patch coverage is 69.23077% with 20 lines in your changes missing coverage. Please review.
✅ Project coverage is 91.63%. Comparing base (9fa172d) to head (292902a).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/vitest/src/node/NetworkIdleTracker.ts	64.44%	15 Missing and 1 partial ⚠️
...es/vitest/src/browser/public/waitForIdleNetwork.ts	62.50%	3 Missing ⚠️
packages/vitest/src/node/commands.ts	91.66%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #301      +/-   ##
==========================================
- Coverage   94.43%   91.63%   -2.80%     
==========================================
  Files          19       21       +2     
  Lines         521      586      +65     
  Branches       92       98       +6     
==========================================
+ Hits          492      537      +45     
- Misses         27       46      +19     
- Partials        2        3       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.