vite-config.test.ts

import { mkdirSync, mkdtempSync, rmSync } from 'node:fs';
import { join } from 'node:path';
import { tmpdir } from 'node:os';

import { afterEach, describe, expect, it, vi } from 'vitest';

import { Channel } from 'storybook/internal/channels';
import type { Options, Presets } from 'storybook/internal/types';

import { loadConfigFromFile } from 'vite';

import { storybookConfigPlugin } from './plugins/storybook-config-plugin.ts';
import { commonConfig } from './vite-config.ts';

vi.mock('vite', async (importOriginal) => ({
  ...(await importOriginal<typeof import('vite')>()),
  loadConfigFromFile: vi.fn(async () => ({})),
  defaultClientConditions: undefined,
}));
const loadConfigFromFileMock = vi.mocked(loadConfigFromFile);

const dummyOptions: Options = {
  configType: 'DEVELOPMENT',
  configDir: '',
  packageJson: {},
  channel: new Channel({}),
  presets: {
    apply: async (key: string) =>
      ({
        framework: {
          name: '',
        },
        addons: [],
        core: {
          builder: {},
        },
        options: {},
      })[key],
  } as Presets,
  presetsList: [],
};

const createOptions = ({
  configDir = '',
  staticDirs = [],
}: {
  configDir?: string;
  staticDirs?: unknown[];
} = {}) =>
  ({
    ...dummyOptions,
    configDir,
    presets: {
      apply: async (key: string) =>
        (
          ({
            framework: {
              name: '',
            },
            addons: [],
            core: {
              builder: {},
            },
            options: {},
            staticDirs,
          }) as Record<string, unknown>
        )[key],
    } as Presets,
  }) satisfies Options;

const createTempProject = () => {
  const projectRoot = mkdtempSync(join(tmpdir(), 'storybook-builder-vite-'));
  const configDir = join(projectRoot, '.storybook');

  mkdirSync(configDir, { recursive: true });

  return { projectRoot, configDir };
};

afterEach(() => {
  loadConfigFromFileMock.mockReset();
});

describe('commonConfig', () => {
  it('should set configFile to false and include plugins', async () => {
    loadConfigFromFileMock.mockReturnValueOnce(
      Promise.resolve({
        config: {},
        path: '',
        dependencies: [],
      })
    );
    const config = await commonConfig(dummyOptions, 'development');
    expect(config.configFile).toBe(false);
    expect(config.plugins).toBeDefined();
  });

  it('disables Vite publicDir for builds when staticDirs already includes the public directory', async () => {
    const { projectRoot, configDir } = createTempProject();
    const publicDir = join(projectRoot, 'public');
    mkdirSync(publicDir, { recursive: true });

    loadConfigFromFileMock.mockReturnValueOnce(
      Promise.resolve({
        config: {},
        path: '',
        dependencies: [],
      })
    );

    try {
      const config = await commonConfig(
        createOptions({
          configDir,
          staticDirs: [{ from: '../public', to: '/foo' }],
        }),
        'build'
      );

      expect(config.publicDir).toBe(false);
    } finally {
      rmSync(projectRoot, { recursive: true, force: true });
    }
  });

  it('keeps Vite publicDir enabled during development even when staticDirs includes the public directory', async () => {
    const { projectRoot, configDir } = createTempProject();
    const publicDir = join(projectRoot, 'public');
    mkdirSync(publicDir, { recursive: true });

    loadConfigFromFileMock.mockReturnValueOnce(
      Promise.resolve({
        config: {},
        path: '',
        dependencies: [],
      })
    );

    try {
      const config = await commonConfig(
        createOptions({
          configDir,
          staticDirs: [{ from: '../public', to: '/foo' }],
        }),
        'development'
      );

      expect(config.publicDir).toBeUndefined();
    } finally {
      rmSync(projectRoot, { recursive: true, force: true });
    }
  });

  it('disables a custom Vite publicDir when staticDirs already includes the same directory', async () => {
    const { projectRoot, configDir } = createTempProject();
    const assetsDir = join(projectRoot, 'assets');
    mkdirSync(assetsDir, { recursive: true });

    loadConfigFromFileMock.mockReturnValueOnce(
      Promise.resolve({
        config: { publicDir: 'assets' },
        path: '',
        dependencies: [],
      })
    );

    try {
      const config = await commonConfig(
        createOptions({
          configDir,
          staticDirs: [{ from: '../assets', to: '/foo' }],
        }),
        'build'
      );

      expect(config.publicDir).toBe(false);
    } finally {
      rmSync(projectRoot, { recursive: true, force: true });
    }
  });

  it('keeps Vite publicDir enabled for builds when staticDirs points somewhere else', async () => {
    const { projectRoot, configDir } = createTempProject();
    const publicDir = join(projectRoot, 'public');
    const assetsDir = join(projectRoot, 'assets');
    mkdirSync(publicDir, { recursive: true });
    mkdirSync(assetsDir, { recursive: true });

    loadConfigFromFileMock.mockReturnValueOnce(
      Promise.resolve({
        config: {},
        path: '',
        dependencies: [],
      })
    );

    try {
      const config = await commonConfig(
        createOptions({
          configDir,
          staticDirs: [{ from: '../assets', to: '/foo' }],
        }),
        'build'
      );

      expect(config.publicDir).toBeUndefined();
    } finally {
      rmSync(projectRoot, { recursive: true, force: true });
    }
  });
});

describe('storybookConfigPlugin', () => {
  it('should set default envPrefix when no user envPrefix is set', async () => {
    const plugins = storybookConfigPlugin({ configDir: '/test/.storybook' });
    const configPlugin = plugins.find((p) => p.name === 'storybook:config-plugin')!;

    // The config hook receives the current Vite config and returns partial config to merge
    const result = await (configPlugin.config as Function)({}, {});
    expect(result.envPrefix).toStrictEqual(['VITE_', 'STORYBOOK_']);
  });

  it('should include storybook resolve conditions', async () => {
    const plugins = storybookConfigPlugin({ configDir: '/test/.storybook' });
    const configPlugin = plugins.find((p) => p.name === 'storybook:config-plugin')!;

    const result = await (configPlugin.config as Function)({}, {});
    expect(result.resolve.conditions).toContain('storybook');
    expect(result.resolve.conditions).toContain('stories');
    expect(result.resolve.conditions).toContain('test');
  });

  it('should not set base when not provided', async () => {
    const plugins = storybookConfigPlugin({ configDir: '/test/.storybook' });
    const configPlugin = plugins.find((p) => p.name === 'storybook:config-plugin')!;

    const result = await (configPlugin.config as Function)({}, {});
    expect(result.base).toBeUndefined();
  });

  it('should allow storybook dir when server fs allow list exists', () => {
    const plugins = storybookConfigPlugin({ configDir: '/test/.storybook' });
    const allowPlugin = plugins.find((p) => p.name === 'storybook:allow-storybook-dir')!;

    const config = { server: { fs: { allow: ['/some/path'] } } };
    (allowPlugin.config as Function)(config);
    expect(config.server.fs.allow).toContain('/test/.storybook');
  });
});