add tests

sauercrowd · Sep 14, 2024 · c616d54 · c616d54
1 parent 79b44b7
commit c616d54
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 0 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,29 @@
+name: Varwind Tests
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Use Node.js
+      uses: actions/setup-node@v2
+      with:
+        node-version: '14'
+
+    - name: Install dependencies
+      run: |
+        cd test
+        npm ci
+
+    - name: Run tests
+      run: |
+        cd test
+        npm test
diff --git a/test/package.json b/test/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "varwind-tests",
+  "version": "1.0.0",
+  "description": "Tests for the varwind library",
+  "scripts": {
+    "test": "jest"
+  },
+  "devDependencies": {
+    "jest": "^27.0.6",
+    "puppeteer": "^10.2.0"
+  }
+}
diff --git a/test/test.html b/test/test.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Varwind Test</title>
+    <style>
+        :root {
+            --1: 4px;
+            --gray-500: #6b7280;
+            --8: 32px;
+            --my-color: #efefef;
+        }
+    </style>
+    <script src="../tailvars.js"></script>
+</head>
+<body>
+    <div id="test-element" x-css-vars="p--1 hover:bg--gray-500 pl-[8px] @sm:pr--8 bg--my-color">Test Element</div>
+</body>
+</html>
+
diff --git a/test/varwind.test.js b/test/varwind.test.js
@@ -0,0 +1,50 @@
+const puppeteer = require('puppeteer');
+const path = require('path');
+
+describe('Varwind Library Tests', () => {
+  let browser;
+  let page;
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch();
+    page = await browser.newPage();
+    await page.goto(`file:${path.join(__dirname, 'test.html')}`);
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  test('Basic styles are applied correctly', async () => {
+    const styles = await page.evaluate(() => {
+      const element = document.getElementById('test-element');
+      return window.getComputedStyle(element);
+    });
+
+    expect(styles.padding).toBe('4px');
+    expect(styles.paddingLeft).toBe('8px');
+    expect(styles.backgroundColor).toBe('rgb(239, 239, 239)');
+  });
+
+  test('Hover styles are applied correctly', async () => {
+    await page.hover('#test-element');
+
+    const hoverStyles = await page.evaluate(() => {
+      const element = document.getElementById('test-element');
+      return window.getComputedStyle(element);
+    });
+
+    expect(hoverStyles.backgroundColor).toBe('rgb(107, 114, 128)');
+  });
+
+  test('Media query styles are applied correctly', async () => {
+    await page.setViewport({ width: 800, height: 600 });
+
+    const mediaQueryStyles = await page.evaluate(() => {
+      const element = document.getElementById('test-element');
+      return window.getComputedStyle(element);
+    });
+
+    expect(mediaQueryStyles.paddingRight).toBe('32px');
+  });
+});