chore: 3000 snapshots

.storybook/test-runner.ts

@@ -2,10 +2,11 @@ import { toMatchImageSnapshot } from 'jest-image-snapshot'
 import { getStoryContext, TestRunnerConfig, TestContext, waitForPageReady } from '@storybook/test-runner'
 import type { Locator, Page, LocatorScreenshotOptions } from '@playwright/test'
 import type { Mocks } from '~/mocks/utils'
-import { StoryContext } from '@storybook/types'
+import { StoryContext } from '@storybook/csf'
 
 // 'firefox' is technically supported too, but as of June 2023 it has memory usage issues that make is unusable
 type SupportedBrowserName = 'chromium' | 'webkit'
+type SnapshotTheme = 'legacy' | 'light' | 'dark'
 
 // Extend Storybook interface `Parameters` with Chromatic parameters
 declare module '@storybook/types' {
@@ -35,12 +36,18 @@ declare module '@storybook/types' {
             snapshotBrowsers?: SupportedBrowserName[]
             /** If taking a component snapshot, you can narrow it down by specifying the selector. */
             snapshotTargetSelector?: string
+            /** Include snapshots of buttons in 3000. */
+            include3000?: boolean
         }
         msw?: {
             mocks?: Mocks
         }
         [name: string]: any
     }
+
+    interface Globals {
+        theme: SnapshotTheme
+    }
 }
 
 const RETRY_TIMES = 3
@@ -68,7 +75,7 @@ module.exports = {
     },
     async postVisit(page, context) {
         const browserContext = page.context()
-        const storyContext = (await getStoryContext(page, context)) as StoryContext
+        const storyContext = await getStoryContext(page, context)
         const { snapshotBrowsers = ['chromium'] } = storyContext.parameters?.testOptions ?? {}
 
         browserContext.setDefaultTimeout(PLAYWRIGHT_TIMEOUT_MS)
@@ -92,12 +99,14 @@ async function expectStoryToMatchSnapshot(
         waitForLoadersToDisappear = true,
         waitForSelector,
         excludeNavigationFromSnapshot = false,
+        include3000 = false,
     } = storyContext.parameters?.testOptions ?? {}
 
     let check: (
         page: Page,
         context: TestContext,
         browser: SupportedBrowserName,
+        theme: SnapshotTheme,
         targetSelector?: string
     ) => Promise<void>
     if (storyContext.parameters?.layout === 'fullscreen') {
@@ -129,37 +138,55 @@ async function expectStoryToMatchSnapshot(
         Array.from(document.querySelectorAll('img')).every((i: HTMLImageElement) => i.complete)
     )
 
-    await check(page, context, browser, storyContext.parameters?.testOptions?.snapshotTargetSelector)
+    await check(page, context, browser, 'legacy', storyContext.parameters?.testOptions?.snapshotTargetSelector)
+
+    if (include3000) {
+        await page.evaluate(() => {
+            document.body.classList.add('posthog-3000')
+            document.body.setAttribute('theme', 'light')
+        })
+
+        await check(page, context, browser, 'light', storyContext.parameters?.testOptions?.snapshotTargetSelector)
+
+        await page.evaluate(() => {
+            document.body.setAttribute('theme', 'dark')
+        })
+
+        await check(page, context, browser, 'dark', storyContext.parameters?.testOptions?.snapshotTargetSelector)
+    }
 }
 
 async function expectStoryToMatchFullPageSnapshot(
     page: Page,
     context: TestContext,
-    browser: SupportedBrowserName
+    browser: SupportedBrowserName,
+    theme: SnapshotTheme
 ): Promise<void> {
-    await expectLocatorToMatchStorySnapshot(page, context, browser)
+    await expectLocatorToMatchStorySnapshot(page, context, browser, theme)
 }
 
 async function expectStoryToMatchSceneSnapshot(
     page: Page,
     context: TestContext,
-    browser: SupportedBrowserName
+    browser: SupportedBrowserName,
+    theme: SnapshotTheme
 ): Promise<void> {
     await page.evaluate(() => {
         // The screenshot gets clipped by the overflow hidden of the sidebar
         document.querySelector('.SideBar')?.setAttribute('style', 'overflow: visible;')
     })
 
-    await expectLocatorToMatchStorySnapshot(page.locator('.main-app-content'), context, browser)
+    await expectLocatorToMatchStorySnapshot(page.locator('.main-app-content'), context, browser, theme)
 }
 
 async function expectStoryToMatchComponentSnapshot(
     page: Page,
     context: TestContext,
     browser: SupportedBrowserName,
+    theme: SnapshotTheme,
     targetSelector: string = '#storybook-root'
 ): Promise<void> {
-    await page.evaluate(() => {
+    await page.evaluate((theme) => {
         const rootEl = document.getElementById('storybook-root')
         if (!rootEl) {
             throw new Error('Could not find root element')
@@ -183,21 +210,27 @@ async function expectStoryToMatchComponentSnapshot(
                 rootEl.style.width = `${-popoverBoundingClientRect.left + currentRootBoundingClientRect.right}px`
             }
         })
-        // Make the body transparent to take the screenshot without background
-        document.body.style.background = 'transparent'
-    })
+        // For legacy style, make the body transparent to take the screenshot without background
+        document.body.style.background = theme === 'legacy' ? 'transparent' : 'var(--bg-3000)'
+    }, theme)
 
-    await expectLocatorToMatchStorySnapshot(page.locator(targetSelector), context, browser, { omitBackground: true })
+    await expectLocatorToMatchStorySnapshot(page.locator(targetSelector), context, browser, theme, {
+        omitBackground: true,
+    })
 }
 
 async function expectLocatorToMatchStorySnapshot(
     locator: Locator | Page,
     context: TestContext,
     browser: SupportedBrowserName,
+    theme: SnapshotTheme,
     options?: LocatorScreenshotOptions
 ): Promise<void> {
     const image = await locator.screenshot({ ...options })
     let customSnapshotIdentifier = context.id
+    if (theme !== 'legacy') {
+        customSnapshotIdentifier += `--${theme}`
+    }
     if (browser !== 'chromium') {
         customSnapshotIdentifier += `--${browser}`
     }

frontend/src/lib/lemon-ui/LemonButton/LemonButton.stories.tsx

@@ -30,6 +30,9 @@ const meta: Meta<typeof LemonButton> = {
             type: 'function',
         },
     },
+    parameters: {
+        testOptions: { include3000: true },
+    },
 }
 export default meta
 const BasicTemplate: StoryFn<typeof LemonButton> = (props: LemonButtonProps) => {