test: add e2e tests (#25)

jonambas · Apr 10, 2024 · aaade82 · aaade82
1 parent d1cccfe
commit aaade82
Show file tree

Hide file tree

Showing 20 changed files with 4,118 additions and 41 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -0,0 +1,42 @@
+name: Playwright
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  test:
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Build plugin
+        run: npm run build
+
+      - name: Prepare Vite app
+        run: npm run vite:prepare
+
+      - name: Run Playwright tests
+        run: npx playwright test
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 14
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -9,7 +9,7 @@ on:
 jobs:
   test:
     runs-on: ubuntu-latest
-    timeout-minutes: 30
+    timeout-minutes: 15
 
     steps:
       - name: Checkout code
@@ -23,5 +23,8 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Typecheck
+        run: npm run typecheck
+
       - name: Test
         run: npm run test:ci
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,20 @@
-/node_modules
-/dist
-/apps
-/coverage
+node_modules
+dist
+
+/coverage
+
+## Panda
+styled-system
+styled-system-studio
+
+# WIP stuff
+/apps/fixtures/make.ts
+/apps/fixtures/scenarios.ts
+/apps/next-pages
+/apps/next-app
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/apps/fixtures/tokens.ts b/apps/fixtures/tokens.ts
@@ -0,0 +1,17 @@
+export const semanticTokens = {
+  colors: {
+    tone: {
+      positive: { value: '{colors.green.500}' },
+      negative: { value: '{colors.red.500}' },
+    },
+  },
+};
+
+export const componentTokens = {
+  raw: { red: '#ff0000', blue: '#0000ff' },
+  valueKey: {
+    string: { value: '#9a9a9a' },
+    object: { value: { base: '#000', lg: '#555', _hover: '#999' } },
+  },
+  semantic: { green: '{colors.tone.positive}', red: '{colors.tone.negative}' },
+};
diff --git a/apps/vite-react/index.html b/apps/vite-react/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>