import { Meta } from "@storybook/addon-docs/blocks";

<Meta title="setup/vis" />

# `vis`

`vis` object from `vitest-plugin-vis/setup` provides the API to setup the plugin on the client side.

## Basic Setup

```ts
// vitest.setup.ts
import { vis } from 'vitest-plugin-vis/setup'

// Basic setup - enables visual testing without auto snapshots
vis.setup()

// Enable auto snapshots for all tests
vis.setup({ auto: true })

// Disable auto snapshots (same as `vis.setup()`)
vis.setup({ auto: false })
```

## Conditional Auto Snapshots

You can control when auto snapshots are taken based on test metadata:

```ts
// vitest.setup.ts
import { vis } from 'vitest-plugin-vis/setup'

// Take snapshots only for tests with specific metadata
vis.setup({
	auto: async ({ meta }) => meta['visualTest'] === true
})

// Skip snapshots for tests marked as 'skipSnapshot'
vis.setup({
	auto: async ({ meta }) => !meta['skipSnapshot']
})
```

The function will be called during the `afterEach()` phase of the test.

## Multi-Theme Setup

Set up automatic snapshots for multiple themes (e.g., light and dark mode):

```ts
// vitest.setup.ts
import { vis } from 'vitest-plugin-vis/setup'

vis.setup({
	auto: {
		light: async () => {
			document.body.classList.remove('dark')
			document.body.classList.add('light')
		},
		dark: async () => {
			document.body.classList.add('dark')
			document.body.classList.remove('light')
		}
	}
})
```

## Conditional Theme Snapshots

You can conditionally skip themes based on test metadata:

```ts
// vitest.setup.ts
import { vis } from 'vitest-plugin-vis/setup'

vis.setup({
	auto: {
		light: async ({ meta }) => {
			if (meta['skipLight']) return false
			document.body.classList.remove('dark')
		},
		dark: async ({ meta }) => {
			if (meta['skipDark']) return false
			document.body.classList.add('dark')
		}
	}
})
```

## Advanced Theme Configuration

You can set up more complex theme configurations:

```ts
// vitest.setup.ts
import { vis } from 'vitest-plugin-vis/setup'

vis.setup({
	auto: {
		desktop: async () => {
			document.body.style.width = '1200px'
			document.body.classList.add('desktop')
		},
		tablet: async () => {
			document.body.style.width = '768px'
			document.body.classList.add('tablet')
		},
		mobile: async () => {
			document.body.style.width = '375px'
			document.body.classList.add('mobile')
		},
		'dark-desktop': async ({ meta }) => {
			if (meta['skipDark']) return false
			document.body.style.width = '1200px'
			document.body.classList.add('desktop', 'dark')
		}
	}
})
```