test(test.ts*): add unit tests and style integration test, pass.

Author: refirst11

test/compiler.test.ts

@@ -0,0 +1,18 @@
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import path from 'path';
+
+const execPromise = promisify(exec);
+
+test('CSS compilation logs contain expected output', async () => {
+  const { stdout } = await execPromise('npm run compile', {
+    cwd: path.join(__dirname, '../e2e/site'),
+  });
+
+  console.log('stdout:', stdout);
+  expect(stdout).toContain('Generating module static css');
+  expect(stdout).toContain('.e2e_');
+  expect(stdout).toContain('color: pink;');
+  expect(stdout).toContain('@media (max-width: 1024px)');
+  expect(stdout).toContain('color: aqua;');
+});

test/create.test.ts

@@ -0,0 +1,24 @@
+import { create } from '../src/core/method/create';
+
+test('Style.create returns an object with string values', () => {
+  const styleObject = {
+    test: {
+      color: 'red',
+      fontSize: '16px',
+    },
+  };
+
+  const styles = create(styleObject);
+  expect(typeof styles).toBe('object');
+  expect(typeof styles.test).toBe('string');
+
+  const styleElement = document.createElement('style');
+  styleElement.textContent = `.${styles.test} { color: ${styleObject.test.color}; font-size: ${styleObject.test.fontSize}; }`;
+  document.head.appendChild(styleElement);
+
+  document.body.innerHTML = `<div class="${styles.test}">Test Element</div>`;
+  const element = document.querySelector(`.${styles.test}`) as HTMLElement;
+  const computedStyle = window.getComputedStyle(element);
+  expect(computedStyle.color).toBe('red');
+  expect(computedStyle.fontSize).toBe('16px');
+});

test/global.test.ts

@@ -0,0 +1,16 @@
+import { global } from '../src/core/method/global';
+
+test('Style.global insert style into the head with data-scope="global"', () => {
+  global({
+    h1: {
+      fontSize: 24,
+    },
+  });
+
+  const styleElements = document.head.querySelectorAll('style[data-scope="global"]');
+  expect(styleElements.length).toBeGreaterThan(0);
+
+  const styleContent = styleElements[0].textContent;
+  expect(styleContent).toContain('h1');
+  expect(styleContent).toContain('font-size: 24px');
+});

test/root.test.ts

@@ -0,0 +1,13 @@
+import { root } from '../src/core/method/root';
+
+test('Style.root insert style into the head with data-scope="root"', () => {
+  root({
+    '--color-heading': '#333',
+  });
+
+  const styleElements = document.head.querySelectorAll('style[data-scope="root"]');
+  expect(styleElements.length).toBeGreaterThan(0);
+
+  const styleContent = styleElements[0].textContent;
+  expect(styleContent).toContain('--color-heading: #333');
+});

test/set.test.ts

@@ -0,0 +1,21 @@
+import { set } from '../src/core/method/set';
+
+test('Style.set creates a class with correct styles', () => {
+  const styleObject = {
+    color: 'blue',
+    margin: '10px',
+  };
+
+  const style = set(styleObject);
+  expect(typeof style).toBe('string');
+
+  const styleElement = document.createElement('style');
+  styleElement.textContent = `.${style} { color: ${styleObject.color}; margin: ${styleObject.margin}; }`;
+  document.head.appendChild(styleElement);
+
+  document.body.innerHTML = `<div class="${style}">Test Element</div>`;
+  const element = document.querySelector(`.${style}`) as HTMLElement;
+  const computedStyle = window.getComputedStyle(element);
+  expect(computedStyle.color).toBe('blue');
+  expect(computedStyle.margin).toBe('10px');
+});

test/style-integration.test.ts

@@ -0,0 +1,22 @@
+import Style from '../src/core';
+
+test('Style.create returns an object with string values', () => {
+  const styles = Style.create({ test: { color: 'aqua' } });
+  expect(typeof styles).toBe('object');
+  expect(typeof styles.test).toBe('string');
+});
+
+test('Style.set returns a string', () => {
+  const styleClass = Style.set({ color: 'aqua' });
+  expect(typeof styleClass).toBe('string');
+});
+
+test('Style.global returns undefined', () => {
+  const result = Style.global({});
+  expect(result).toBeUndefined();
+});
+
+test('Style.root returns undefined', () => {
+  const result = Style.root({});
+  expect(result).toBeUndefined();
+});