react-data-grid/vite.config.ts at 3017cd6ee1787cb241ec448dd384b45ea9d759e6 · Comcast/react-data-grid · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import { tanstackStart } from '@tanstack/react-start/plugin/vite';
import react from '@vitejs/plugin-react-oxc';
import wyw from '@wyw-in-js/vite';
import { defineConfig } from 'vite';
import type { BrowserCommand } from 'vitest/node';

const isCI = process.env.CI === 'true';
const isTest = process.env.NODE_ENV === 'test';

// TODO: remove when `userEvent.pointer` is supported
const resizeColumn: BrowserCommand<[resizeBy: number | readonly number[]]> = async (
  context,
  resizeBy
) => {
  const page = context.page;
  const frame = await context.frame();
  const resizeHandle = frame.locator('[role="columnheader"][aria-colindex="2"] div');
  const { x, y } = (await resizeHandle.boundingBox())!;
  await resizeHandle.hover({
    position: { x: 5, y: 5 }
  });
  await page.mouse.down();
  resizeBy = Array.isArray(resizeBy) ? resizeBy : [resizeBy];
  let newX = x + 5;
  for (const value of resizeBy) {
    newX += value;
    await page.mouse.move(newX, y);
  }
  await page.mouse.up();
};

// TODO: remove when `userEvent.pointer` is supported
const dragFill: BrowserCommand<[from: string, to: string]> = async (context, from, to) => {
  const page = context.page;
  const frame = await context.frame();
  await frame.getByRole('gridcell', { name: from }).click();
  await frame.locator('.rdg-cell-drag-handle').hover();
  await page.mouse.down();
  const toCell = frame.getByRole('gridcell', { name: to });
  await toCell.hover();
  await page.mouse.up();
};

const viewport = { width: 1920, height: 1080 } as const;

export default defineConfig(({ command, isPreview }) => ({
  base: '/react-data-grid/',
  cacheDir: '.cache/vite',
  clearScreen: false,
  build: {
    modulePreload: { polyfill: false },
    sourcemap: true,
    reportCompressedSize: false,
    // https://github.com/parcel-bundler/lightningcss/issues/873
    cssMinify: 'esbuild'
  },
  plugins: [
    (!isTest || isPreview) &&
      tanstackStart({
        customViteReactPlugin: true,
        tsr: {
          srcDirectory: 'website',
          // @ts-expect-error types are not correct
          autoCodeSplitting: true,
          verboseFileRoutes: false
        },
        prerender: {
          enabled: true,
          crawlLinks: true
        }
      }),
    react({
      exclude: ['./.cache/**/*']
    }),
    wyw({
      exclude: ['./.cache/**/*', '**/*.d.ts', '**/*.gen.ts'],
      preprocessor: 'none',
      displayName: command === 'serve'
    })
  ],
  server: {
    open: true
  },
  test: {
    globals: true,
    coverage: {
      provider: 'v8',
      enabled: isCI,
      include: ['src/**/*.{ts,tsx}'],
      reporter: ['json']
    },
    testTimeout: isCI ? 10000 : 5000,
    restoreMocks: true,
    sequence: {
      shuffle: true
    },
    projects: [
      {
        extends: true,
        test: {
          name: 'browser',
          include: ['test/browser/**/*.test.*'],
          browser: {
            enabled: true,
            provider: 'playwright',
            instances: [
              {
                browser: 'chromium',
                context: { viewport }
              }
            ],
            commands: { resizeColumn, dragFill },
            viewport,
            headless: true,
            screenshotFailures: process.env.CI !== 'true'
          },
          setupFiles: ['test/setupBrowser.ts']
        }
      },
      {
        extends: true,
        test: {
          name: 'node',
          include: ['test/node/**/*.test.*'],
          environment: 'node'
        }
      }
    ]
  }
}));