Merge branch 'add-e2e-test' into improve-dev

Author: owjs3901

.github/workflows/publish.yml

@@ -91,15 +91,36 @@ jobs:
           bun run --filter landing build
       - name: Install Playwright Browsers
         run: bunx playwright install chromium --with-deps
+      - name: Check for Existing E2E Snapshots
+        id: check-snapshots
+        run: |
+          SNAPSHOT_COUNT=$(find e2e -name '*.png' -path '*-snapshots/*' 2>/dev/null | wc -l)
+          echo "count=$SNAPSHOT_COUNT" >> $GITHUB_OUTPUT
+          echo "Found $SNAPSHOT_COUNT existing snapshot(s)"
+      - name: Generate E2E Snapshots
+        if: steps.check-snapshots.outputs.count == '0'
+        run: bunx playwright test --update-snapshots
+      - name: Commit E2E Snapshots
+        if: steps.check-snapshots.outputs.count == '0' && github.event_name == 'pull_request'
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: "chore: generate e2e visual snapshots from CI"
+          file_pattern: "e2e/**/*-snapshots/*.png"
       - name: Run E2E Tests
         run: bun run test:e2e
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: ./apps/landing/out
-        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
-      - uses: actions/deploy-pages@v4
-        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./apps/landing/out
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+      - uses: actions/deploy-pages@v4
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+      - name: Build Landing (singleCss)
+        run: |
+          rm -rf apps/landing/out apps/landing/.next apps/landing/df
+          DEVUP_SINGLE_CSS=1 bun run --filter landing build
+      - name: Run E2E Tests (singleCss)
+        run: bun run test:e2e
       - name: Upload to codecov.io
         uses: codecov/codecov-action@v5
         with:

apps/landing/next.config.ts

@@ -6,9 +6,14 @@ const withMDX = createMDX({
 })
 
 export default withMDX(
-  DevupUI({
-    pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
-    output: 'export',
-    reactCompiler: true,
-  }),
+  DevupUI(
+    {
+      pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
+      output: 'export',
+      reactCompiler: true,
+    },
+    {
+      singleCss: process.env.DEVUP_SINGLE_CSS === '1',
+    },
+  ),
 )

e2e/docs-pages.spec.ts

@@ -185,18 +185,17 @@ test.describe('Documentation Pages', () => {
       await context.close()
     })
 
-    // Dark mode screenshot requires JS for ThemeScript to set data-theme attribute.
-    // With javaScriptEnabled: false, the theme cannot switch to dark mode.
-    // Using colorScheme: 'dark' in context only sets prefers-color-scheme media,
-    // which is insufficient if the app relies on a JS-driven theme class/attribute.
-    test.skip('dark mode features section screenshot', async ({ browser }) => {
+    test('dark mode features section screenshot', async ({ browser }) => {
       const context = await browser.newContext({
-        javaScriptEnabled: false,
         viewport: { width: 1440, height: 900 },
         colorScheme: 'dark',
       })
       const page = await context.newPage()
       await page.goto('/')
+      await page.waitForLoadState('networkidle')
+      await page.evaluate(() =>
+        document.documentElement.setAttribute('data-theme', 'dark'),
+      )
       await page.waitForTimeout(500)
 
       const features = page.getByText('Features').first()

playwright.config.ts

@@ -22,17 +22,7 @@ export default defineConfig({
   projects: [
     {
       name: 'chromium',
-      use: {
-        ...devices['Desktop Chrome'],
-        launchOptions: {
-          args: [
-            '--font-render-hinting=none',
-            '--disable-font-subpixel-positioning',
-            '--disable-skia-runtime-opts',
-            '--disable-lcd-text',
-          ],
-        },
-      },
+      use: { ...devices['Desktop Chrome'] },
     },
   ],
   webServer: {