test: add async await to all tests (#31)

.gitignore

@@ -17,4 +17,4 @@ styled-system-studio
 /test-results/
 /playwright-report/
 /blob-report/
-/playwright/.cache/
+/e2e/.cache/

e2e/codegen.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test';
+
+test('Vite is running', async ({ page }) => {
+  await page.goto('/');
+  await expect(page).toHaveTitle(/Vite \+ React/);
+});
+
+test.describe('codegen', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('semantic token references', async ({ page }) => {
+    await expect(page.getByText('{colors.tone.positive}')).toHaveClass(
+      'bg_{colors.tone.positive}',
+    );
+    await expect(page.getByText('{colors.tone.negative}')).toHaveClass(
+      'bg_{colors.tone.negative}',
+    );
+  });
+
+  test('raw values', async ({ page }) => {
+    await expect(page.getByText('#0000ff')).toHaveClass('bg_#0000ff');
+    await expect(page.getByText('#ff0000')).toHaveClass('bg_#ff0000');
+  });
+
+  test('value keys', async ({ page }) => {
+    await expect(page.getByText('#9a9a9a')).toHaveClass('bg_#9a9a9a');
+    await expect(
+      page.getByText('{"base":"#000","lg":"#555","_hover":"#999"}'),
+    ).toHaveClass('bg_#000 lg:bg_#555 hover:bg_#999');
+  });
+});

e2e/parser.spec.ts

@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('parser', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('semantic tokens', async ({ page }) => {
+    await expect(page.getByText('{colors.tone.positive}')).toHaveCSS(
+      'background-color',
+      'rgb(34, 197, 94)',
+    );
+
+    await expect(page.getByText('{colors.tone.positive}')).toHaveCSS(
+      'background-color',
+      'rgb(34, 197, 94)',
+    );
+  });
+
+  test('raw values', async ({ page }) => {
+    await expect(page.getByText('#0000ff')).toHaveCSS(
+      'background-color',
+      'rgb(0, 0, 255)',
+    );
+    await expect(page.getByText('#ff0000')).toHaveCSS(
+      'background-color',
+      'rgb(255, 0, 0)',
+    );
+  });
+
+  test('value keys', async ({ page }) => {
+    await expect(page.getByText('#9a9a9a')).toHaveCSS(
+      'background-color',
+      'rgb(154, 154, 154)',
+    );
+
+    const el = page.getByText('{"base":"#000","lg":"#555","_hover":"#999"}');
+
+    await expect(el).toHaveCSS('background-color', 'rgb(85, 85, 85)');
+    await page.setViewportSize({ width: 320, height: 568 });
+    await expect(el).toHaveCSS('background-color', 'rgb(0, 0, 0)');
+    await el.hover();
+    await expect(el).toHaveCSS('background-color', 'rgb(153, 153, 153)');
+  });
+});

playwright.config.ts

@@ -4,7 +4,7 @@ import { defineConfig, devices } from '@playwright/test';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: './playwright',
+  testDir: './e2e',
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,