pass Kitbook defaults to playwright tests and don't clear snapshots a…

…s no longer needed

.github/workflows/component-tests_template.yml

@@ -30,8 +30,8 @@ jobs:
       - name: Install Dependencies
         run: pnpm install
 
-      - name: Run Playwright Component tests
-        run: pnpm build && pnpm -F template test:components
+      - name: Run Playwright Component tests to save all snapshots
+        run: pnpm build && pnpm -F template test:components:update
         env:
           CI: true
           PLAYWRIGHT_BASE_URL: ${{ github.event.deployment_status.target_url }}
@@ -50,3 +50,7 @@ jobs:
           PROJECT_ID: components-check
         with:
           args: storage cp --recursive ./packages/template/e2e/snapshots gs://component-snapshots/kitbook-template/main/**
+
+      # - name: Run Playwright Component tests to spit out snapshots comparison files
+      #   run: pnpm build && pnpm -F template test:components
+      #   continue-on-error: true

packages/kitbook/e2e/kitbook.spec.ts

@@ -1,12 +1,11 @@
 import { expect, test } from '@playwright/test'
-import { clearSnapshots, getVariants, runComponentTests } from '../src/lib/test'
+import { getVariants, runComponentTests } from '../src/lib/test'
 import kitbookConfig from '../kitbook.config'
 
 const skipFiles = [
   '/docs/1-variants/DefaultSlot',
   '/lib/routes/sandbox/[...file]/+page',
 ]
 
-clearSnapshots()
 const variantModules = await getVariants({ skipFiles })
 runComponentTests({ test, expect, kitbookConfig, variantModules })

packages/kitbook/src/docs/7-visual-regression-testing.md

@@ -13,11 +13,10 @@ pnpm install -D @playwright/test
 This function will take your current version of [Playwright](https://playwright.dev/) and your ([[0-config|Kitbook config]]) to construct urls to each variant found in your `variants.ts` files. It snapshots each url for all your viewports (and [[8-i18n|languages]] if applicable). 
 
 ```ts title="e2e/kitbook.spec.ts"
-import { clearSnapshots, getVariants, runComponentTests } from 'kitbook/test'
+import { getVariants, runComponentTests } from 'kitbook/test'
 import { expect, test } from '@playwright/test'
 import kitbookConfig from '../kitbook.config'
 
-clearSnapshots()
 const variantModules = await getVariants()
 runComponentTests({ test, expect, kitbookConfig, variantModules })
 ```
@@ -112,6 +111,8 @@ jobs:
       image: mcr.microsoft.com/playwright:v1.39.0-jammy # CHECK: keep version in sync with installed Playwright package https://playwright.dev/docs/ci#github-actions-via-containers
 
     steps:
+      - uses: actions/checkout@v3
+
       - uses: actions/setup-node@v3
         with:
           node-version: 18
@@ -165,15 +166,14 @@ If you need to pass a Svelte component into a variant as a prop, you'll need to
 
 ```ts title="e2e/kitbook.spec.ts" {5-7,10}
 import { expect, test } from '@playwright/test'
-import { clearSnapshots, getVariants, runComponentTests } from 'kitbook/test'
+import { getVariants, runComponentTests } from 'kitbook/test'
 import kitbookConfig from '../kitbook.config'
 
 const skipFiles = [
   '/routes/foo/+page',
   '/lib/ui/Button',
 ]
 
-clearSnapshots()
 const variantModules = await getVariants({ skipFiles })
 runComponentTests({ test, expect, kitbookConfig, variantModules })
 ```

packages/kitbook/src/lib/plugins/vite/constants.ts

@@ -1,4 +1,4 @@
-import type { Language } from '../../kitbook-types'
+import type { KitbookSettings, Language } from '../../kitbook-types'
 
 export const DEFAULT_IMPORT_MODULE_GLOBS = [
   '/src/**/*.{svelte,md,variants.ts,composition}',
@@ -13,3 +13,12 @@ export const UNSET_LANGUAGE: Language = { name: null, code: null }
 
 export const DEFAULT_ROUTES_DIR = 'src/routes'
 export const DEFAULT_KITBOOK_ROUTE = '/kitbook'
+
+export const DEFAULT_KITBOOK_SETTINGS: KitbookSettings = {
+  title: 'Kitbook',
+  description: 'Component workbench',
+  viewports: DEFAULT_VIEWPORTS,
+  routesDirectory: DEFAULT_ROUTES_DIR,
+  kitbookRoute: DEFAULT_KITBOOK_ROUTE,
+  languages: [UNSET_LANGUAGE],
+}

packages/kitbook/src/lib/plugins/vite/mergeUserSettingsWithDefaults.ts

@@ -1,17 +1,12 @@
 import type { KitbookSettings } from '../../kitbook-types'
-import { DEFAULT_KITBOOK_ROUTE, DEFAULT_ROUTES_DIR, DEFAULT_VIEWPORTS, UNSET_LANGUAGE } from './constants.js'
+import { DEFAULT_KITBOOK_SETTINGS } from './constants.js'
 import { DEFAULT_VIEWER_OPTIONS } from './viewer/options.js'
 
 export function mergeUserSettingsWithDefaults(userSettings: Partial<KitbookSettings>): KitbookSettings {
   checkLanguageSetup(userSettings)
 
   return {
-    title: 'Kitbook',
-    description: 'Component workbench',
-    viewports: DEFAULT_VIEWPORTS,
-    routesDirectory: DEFAULT_ROUTES_DIR,
-    kitbookRoute: DEFAULT_KITBOOK_ROUTE,
-    languages: [UNSET_LANGUAGE],
+    ...DEFAULT_KITBOOK_SETTINGS,
     ...userSettings,
     viewer: {
       ...DEFAULT_VIEWER_OPTIONS,

packages/kitbook/src/lib/test/runComponentTests.ts

@@ -1,6 +1,7 @@
 /* eslint-disable node/prefer-global/process */
 import type { Expect, test as playwrightTest } from '@playwright/test'
 import type { KitbookSettings, Variant, VariantsModule } from '../kitbook-types'
+import { mergeUserSettingsWithDefaults } from '../plugins/vite/mergeUserSettingsWithDefaults'
 import { preparePath } from './preparePath'
 
 interface PlaywrightPieces {
@@ -9,7 +10,7 @@ interface PlaywrightPieces {
 }
 
 interface KitbookPieces {
-  kitbookConfig: KitbookSettings
+  kitbookConfig: KitbookSettings | Partial<KitbookSettings>
   variantModules: [string, VariantsModule][]
 }
 
@@ -28,7 +29,8 @@ export function runComponentTests({
   kitbookConfig,
   variantModules,
 }: PlaywrightPieces & KitbookPieces) {
-  const testsToRun = prepareTestsToRun({ kitbookConfig, variantModules })
+  const settings = mergeUserSettingsWithDefaults(kitbookConfig)
+  const testsToRun = prepareTestsToRun({ kitbookConfig: settings, variantModules })
   for (const testToRun of testsToRun) {
     runTest({ test, expect, ...testToRun })
 

packages/template/e2e/kitbook.spec.ts

@@ -1,7 +1,6 @@
-import { clearSnapshots, getVariants, runComponentTests } from 'kitbook/test'
+import { getVariants, runComponentTests } from 'kitbook/test'
 import { expect, test } from '@playwright/test'
 import kitbookConfig from '../kitbook.config'
 
-clearSnapshots()
 const variantModules = await getVariants()
 runComponentTests({ test, expect, kitbookConfig, variantModules })

packages/template/package.json

@@ -11,7 +11,8 @@
     "package": "svelte-kit package",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-    "test:components": "playwright test kitbook --update-snapshots"
+    "test:components": "playwright test kitbook",
+    "test:components:update": "playwright test kitbook --update-snapshots"
   },
   "devDependencies": {
     "@playwright/test": "^1.39.0",