Add commands export to index.ts

[kohlmannj-nyt]

Hello!

I'm attempting to use storybook-addon-vis with a custom Playwright browser command:

vitest.config.ts

import { defineConfig } from 'vitest/config';
import { join } from 'node:path';
import react from '@vitejs/plugin-react';
import { BrowserCommand } from 'vitest/node';
import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
import { storybookVis } from 'storybook-addon-vis/vitest-plugin';
import { playwright } from '@vitest/browser-playwright';

/**
 * Configures Playwright to emulate [prefers-colors-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media feature, supported values are `'light'` and `'dark'`. Passing null resets emulation to system defaults.
 *
 * @see https://playwright.dev/docs/api/class-testoptions#test-options-color-scheme
 * @see https://vitest.dev/api/browser/commands.html#custom-playwright-commands
 * @see https://github.com/vitest-dev/vitest/discussions/7743
 */
const setPageColorScheme: BrowserCommand<[colorScheme: 'light' | 'dark' | null]> = async (
  ctx,
  colorScheme,
) => {
  if (ctx.provider.name !== 'playwright') {
    throw new Error(`provider ${ctx.provider.name} is not supported`);
  }

  await ctx.page.emulateMedia({ colorScheme });
};

export default defineConfig({
  plugins: [react()],
  test: {
    projects: [
      /* snip */
      {
        extends: true,
        plugins: [
          // The plugin will run tests for the stories defined in your Storybook config
          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
          storybookTest({
            configDir: join(import.meta.dirname, '.storybook'),
            storybookScript: 'storybook',
            storybookUrl: 'http://localhost:6006',
            disableAddonDocs: true,
          }),
          storybookVis({}),
        ],
        test: {
          name: 'storybook',
          browser: {
            enabled: true,
            headless: true,
            provider: playwright({}),
            commands: {
              setPageColorScheme,
            },
            instances: [{ browser: 'chromium' }],
          },
          setupFiles: ['./.vitest/storybook-addon-vis.setup.ts'],
        },
      },
    ],
  },
});

storybook-addon-vis.setup.ts

import { setProjectAnnotations } from '@storybook/react-vite';
import { vis, visAnnotations } from 'storybook-addon-vis/vitest-setup';
// @ts-expect-error -- this import doesn't currently exist --- hence this PR
import { commands } from 'storybook-addon-vis';
import { beforeAll } from 'vitest';
import * as projectAnnotations from '../.storybook/preview.js';

const annotations = setProjectAnnotations([projectAnnotations, visAnnotations]);

beforeAll(annotations.beforeAll);

vis.setup({
  auto: {
    async light() {
      await commands.setPageColorScheme('light');
    },
    async dark() {
      await commands.setPageColorScheme('dark');
    },
  },
});

Theoretically all I need for this to work is for storybook-addon-vis to re-export the Vitest Browser Mode commands export, hence this PR! Thanks for your consideration.

---

Aside: There are a few ways we could do this, but we want the underlying mechanism for switching to Dark Mode to be based on Playwright's page.emulateMedia(), as this is closely matches how a real user's system-wide Dark Mode setting would operate. Vitest Browser Mode's page object does not expose this method, hence the custom browser command.

[changeset-bot]

🦋 Changeset detected

Latest commit: 51f677c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
storybook-addon-vis	Minor

Not sure what this means? Click here to learn what changesets are.

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

[unional]

Hi @kohlmannj-nyt, thanks for contributing. I'm ok to expose it but you may need to double check if that's the approach you want to do.

There are some nuances in using that, as that code need to work in multiple environments. That's why you see the toMatchImageSnapshot in page stub out. So adding and reusing the code there is tricky.

So your best bet is generally provide your util outside.

btw, the CI failed due to formatting, can you adjust the code and try again?