From c643aa71fefae72d05d432b4ffca258bd7308f6c Mon Sep 17 00:00:00 2001
From: Jon Ambas <jon@jonambas.com>
Date: Thu, 11 Apr 2024 09:30:06 -0400
Subject: [PATCH] test: add async await to all tests (#31)

---
 .gitignore            |  2 +-
 e2e/codegen.spec.ts   | 33 ++++++++++++++++++
 e2e/parser.spec.ts    | 45 ++++++++++++++++++++++++
 playwright.config.ts  |  2 +-
 playwright/ct.spec.ts | 79 -------------------------------------------
 5 files changed, 80 insertions(+), 81 deletions(-)
 create mode 100644 e2e/codegen.spec.ts
 create mode 100644 e2e/parser.spec.ts
 delete mode 100644 playwright/ct.spec.ts

diff --git a/.gitignore b/.gitignore
index 553383b..4820fda 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,4 +17,4 @@ styled-system-studio
 /test-results/
 /playwright-report/
 /blob-report/
-/playwright/.cache/
+/e2e/.cache/
diff --git a/e2e/codegen.spec.ts b/e2e/codegen.spec.ts
new file mode 100644
index 0000000..7e09205
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/e2e/parser.spec.ts b/e2e/parser.spec.ts
new file mode 100644
index 0000000..d9fba23
--- /dev/null
+++ b/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)');
+  });
+});
diff --git a/playwright.config.ts b/playwright.config.ts
index 8e2ddbc..87f3456 100644
--- a/playwright.config.ts
+++ b/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,
diff --git a/playwright/ct.spec.ts b/playwright/ct.spec.ts
deleted file mode 100644
index f49e9a0..0000000
--- a/playwright/ct.spec.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-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', ({ page }) => {
-    expect(page.getByText('{colors.tone.positive}')).toHaveClass(
-      'bg_{colors.tone.positive}',
-    );
-    expect(page.getByText('{colors.tone.negative}')).toHaveClass(
-      'bg_{colors.tone.negative}',
-    );
-  });
-
-  test('raw values', ({ page }) => {
-    expect(page.getByText('#0000ff')).toHaveClass('bg_#0000ff');
-    expect(page.getByText('#ff0000')).toHaveClass('bg_#ff0000');
-  });
-
-  test('value keys', ({ page }) => {
-    expect(page.getByText('#9a9a9a')).toHaveClass('bg_#9a9a9a');
-    expect(
-      page.getByText('{"base":"#000","lg":"#555","_hover":"#999"}'),
-    ).toHaveClass('bg_#000 lg:bg_#555 hover:bg_#999');
-  });
-});
-
-test.describe('parser', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/');
-  });
-
-  test('semantic tokens', ({ page }) => {
-    expect(page.getByText('{colors.tone.positive}')).toHaveCSS(
-      'background-color',
-      'rgb(34, 197, 94)',
-    );
-
-    expect(page.getByText('{colors.tone.positive}')).toHaveCSS(
-      'background-color',
-      'rgb(34, 197, 94)',
-    );
-  });
-
-  test('raw values', ({ page }) => {
-    expect(page.getByText('#0000ff')).toHaveCSS(
-      'background-color',
-      'rgb(0, 0, 255)',
-    );
-    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 = await 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)');
-  });
-});