Huang Xin
ae2c421938
* fix(ui): restore highlight options layout and clean up color name editing Restore the pre-#3741 layout for both the AnnotationPopup highlight options row and the HighlightColorsEditor settings panel. HighlightOptions: re-add `justify-between` on the outer container and remove `flex-1` from the color strip so the gap between the style box and color strip responds to the number of colors. HighlightColorsEditor: restore `grid-cols-3 sm:grid-cols-5` grid, remove always-visible name inputs, and add a click-to-edit popover on each color circle with hover tooltip for the label. Add a browser screenshot test that renders the real AnnotationPopup component with Tailwind CSS and compares against baseline PNGs for 5, 10, and 15 colors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import tsconfigPaths from 'vite-tsconfig-paths';
|
|
import react from '@vitejs/plugin-react';
|
|
import { defineConfig } from 'vitest/config';
|
|
import { playwright } from '@vitest/browser-playwright';
|
|
import { loadEnvFile } from './vitest.env.mts';
|
|
|
|
// Load .env and .env.web so browser tests have the same env as the web app.
|
|
const env = { ...loadEnvFile('.env'), ...loadEnvFile('.env.web') };
|
|
|
|
export default defineConfig({
|
|
plugins: [tsconfigPaths(), react()],
|
|
define: {
|
|
'process.env': JSON.stringify(env),
|
|
},
|
|
resolve: {
|
|
conditions: ['development'],
|
|
},
|
|
optimizeDeps: {
|
|
include: [
|
|
'js-md5',
|
|
'@tauri-apps/plugin-fs',
|
|
'@tauri-apps/plugin-http',
|
|
'@tauri-apps/api/path',
|
|
'@tauri-apps/api/core',
|
|
'@zip.js/zip.js',
|
|
'franc-min',
|
|
'iso-639-2',
|
|
'iso-639-3',
|
|
'uuid',
|
|
'jwt-decode',
|
|
'@supabase/supabase-js',
|
|
],
|
|
exclude: [
|
|
'@tursodatabase/database-wasm',
|
|
'@tursodatabase/database-wasm-common',
|
|
'@tursodatabase/database-common',
|
|
],
|
|
},
|
|
server: {
|
|
headers: {
|
|
'Cross-Origin-Embedder-Policy': 'require-corp',
|
|
'Cross-Origin-Opener-Policy': 'same-origin',
|
|
},
|
|
},
|
|
test: {
|
|
include: ['src/**/*.browser.test.ts', 'src/**/*.browser.test.tsx'],
|
|
onConsoleLog(_log, type) {
|
|
if (type === 'stdout') return false;
|
|
},
|
|
browser: {
|
|
enabled: true,
|
|
headless: true,
|
|
provider: playwright({
|
|
contextOptions: {
|
|
viewport: { width: 1920, height: 1080 },
|
|
deviceScaleFactor: 2,
|
|
},
|
|
}),
|
|
instances: [{ browser: 'chromium' }],
|
|
expect: {
|
|
toMatchScreenshot: {
|
|
comparatorName: 'pixelmatch',
|
|
comparatorOptions: {
|
|
threshold: 0.1,
|
|
allowedMismatchedPixelRatio: 0.02,
|
|
},
|
|
// Strip platform from the path so one baseline works on macOS and Linux.
|
|
// The path is relative to the project root (not the test file).
|
|
resolveScreenshotPath: ({ arg, browserName, ext, testFileDirectory, testFileName }) =>
|
|
`${testFileDirectory}/__screenshots__/${testFileName}/${arg}-${browserName}${ext}`,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|