@vanilla-bean/components 1.0.0

package/styled/themeStyles.test.js

@@ -0,0 +1,135 @@
+/// <reference lib="dom" />
+
+import theme from '../theme';
+import { themeStyles } from './themeStyles';
+
+describe('themeStyles', () => {
+	test('processes theme function returning CSS string', () => {
+		const styleConfig = {
+			styles: ({ colors }) => `color: ${colors.red}; background: ${colors.blue};`,
+		};
+
+		const result = themeStyles(styleConfig);
+
+		expect(result).toContain(theme.colors.red.toString());
+		expect(result).toContain(theme.colors.blue.toString());
+		expect(typeof result).toBe('string');
+	});
+
+	test('wraps styles with scope when provided', () => {
+		const styleConfig = {
+			styles: () => 'color: red; font-size: 16px;',
+			scope: '.test-scope',
+		};
+
+		const result = themeStyles(styleConfig);
+
+		expect(result).toBe('.test-scope { color: red; font-size: 16px; }');
+	});
+
+	test('returns style object directly when function returns object', () => {
+		const styleObject = { color: 'red', fontSize: '16px' };
+		const styleConfig = {
+			styles: () => styleObject,
+		};
+
+		const result = themeStyles(styleConfig);
+
+		expect(result).toBe(styleObject);
+		expect(typeof result).toBe('object');
+	});
+
+	test('applies scope to object-returned styles', () => {
+		const styleObject = { color: 'blue', padding: '8px' };
+		const styleConfig = {
+			styles: () => styleObject,
+			scope: '.scoped',
+		};
+
+		const result = themeStyles(styleConfig);
+
+		expect(result).toBe(styleObject);
+	});
+
+	test('returns empty string for empty styles', () => {
+		expect(themeStyles({ styles: () => '' })).toBe('');
+		expect(themeStyles({ styles: () => '   ' })).toBe('');
+		expect(themeStyles({ styles: () => '\n\t ' })).toBe('');
+		expect(themeStyles({ styles: () => '\r\n  \t  ' })).toBe('');
+	});
+
+	test('passes complete theme object to styles function', () => {
+		let receivedTheme;
+		const styleConfig = {
+			styles: themeObj => {
+				receivedTheme = themeObj;
+				return 'color: red;';
+			},
+		};
+
+		themeStyles(styleConfig);
+
+		expect(receivedTheme).toBe(theme);
+		expect(receivedTheme).toHaveProperty('colors');
+		expect(receivedTheme).toHaveProperty('fonts');
+		expect(receivedTheme).toHaveProperty('button');
+		expect(receivedTheme).toHaveProperty('input');
+	});
+
+	test('handles complex theme function usage', () => {
+		const styleConfig = {
+			styles: ({ colors, fonts, button }) => `
+				${button}
+				${fonts.kodeMono}
+				color: ${colors.mostReadable(colors.blue, [colors.white, colors.black])};
+				background: ${colors.darker(colors.blue)};
+			`,
+		};
+
+		const result = themeStyles(styleConfig);
+
+		expect(result).toContain('display: inline-block');
+		expect(result).toContain('font-family');
+		expect(typeof result).toBe('string');
+		expect(result.length).toBeGreaterThan(0);
+	});
+
+	test('handles default empty styles function', () => {
+		const result = themeStyles({ styles: undefined });
+		expect(result).toBe('');
+	});
+
+	test('strips excess indentation from scoped output', () => {
+		const styleConfig = {
+			styles: () => `
+				color: red;
+				background: blue;
+			`,
+			scope: '.test',
+		};
+
+		const result = themeStyles(styleConfig);
+
+		expect(result).toContain('.test');
+		expect(result).toContain('color: red');
+		expect(result).toContain('background: blue');
+		expect(result).not.toMatch(/\t{4}/);
+	});
+
+	test('handles whitespace-only strings correctly', () => {
+		const testCases = [
+			{ input: '', expected: '' },
+			{ input: ' ', expected: '' },
+			{ input: '\n', expected: '' },
+			{ input: '\t', expected: '' },
+			{ input: '\r', expected: '' },
+			{ input: '  \n\t  ', expected: '' },
+			{ input: 'color:red;', expected: 'color:red;' },
+		];
+
+		testCases.forEach(({ input, expected }) => {
+			const result = themeStyles({ styles: () => input });
+			expect(result).toBe(expected);
+		});
+	});
+});

package/test-setup.js

@@ -0,0 +1,123 @@
+/// <reference lib="dom" />
+
+import { beforeEach, mock, spyOn, expect, setSystemTime } from 'bun:test';
+
+import * as matchers from '@testing-library/jest-dom/matchers';
+
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+// expose globals
+// - some weren't available otherwise and importing in the test files breaks the rest of the file
+global.mock = mock;
+global.spyOn = spyOn;
+global.setSystemTime = setSystemTime;
+
+GlobalRegistrator.register({ width: 1920, height: 1080 });
+
+global.EventTarget = (await import('happy-dom')).EventTarget;
+
+expect.extend(matchers);
+
+// happy dom doesn't support popovers yet
+HTMLElement.prototype.showPopover = function () {
+	this.style.display = 'block';
+};
+HTMLElement.prototype.hidePopover = function () {
+	this.style.display = 'none';
+};
+
+// happy dom doesn't support dialogs yet
+HTMLDialogElement.prototype.show = function () {
+	this.open = true;
+	this.style.display = 'block';
+};
+HTMLDialogElement.prototype.showModal = function () {
+	this.open = true;
+	this.style.display = 'block';
+};
+HTMLDialogElement.prototype.close = function () {
+	this.open = false;
+	this.style.display = 'none';
+};
+
+// happy dom doesn't support canvas yet
+HTMLCanvasElement.prototype.getContext = function () {
+	return {
+		closePath: () => {},
+		lineTo: () => {},
+		clearRect: () => {},
+	};
+};
+
+// happy dom doesn't support XPathResult yet
+global.XPathResult = {
+	ANY_TYPE: 0,
+	NUMBER_TYPE: 1,
+	STRING_TYPE: 2,
+	BOOLEAN_TYPE: 3,
+	UNORDERED_NODE_ITERATOR_TYPE: 4,
+	ORDERED_NODE_ITERATOR_TYPE: 5,
+	UNORDERED_NODE_SNAPSHOT_TYPE: 6,
+	ORDERED_NODE_SNAPSHOT_TYPE: 7,
+	ANY_UNORDERED_NODE_TYPE: 8,
+	FIRST_ORDERED_NODE_TYPE: 9,
+};
+
+// happy dom doesn't support document.evaluate yet
+document.evaluate = function (xPath, contextNode) {
+	// Mock implementation for getElementsContainingText
+	const elements = [];
+
+	// Extract element selector from XPath (e.g., ".//*" or ".//p")
+	const elementMatch = xPath.match(/\/\/([^[]+)/);
+	const elementSelector = elementMatch ? elementMatch[1] : '*';
+
+	// Simple text search implementation for testing
+	if (xPath.includes('contains(') && xPath.includes('translate(')) {
+		// Case insensitive search
+		const textMatch = xPath.match(/'([^']+)'/g);
+		if (textMatch && textMatch.length > 0) {
+			const searchText = textMatch[textMatch.length - 1].slice(1, -1); // Remove quotes
+			const selector = elementSelector === '*' ? '*' : elementSelector;
+			const allElements = Array.from((contextNode || document).querySelectorAll(selector));
+
+			for (const element of allElements) {
+				if (element.textContent && element.textContent.toLowerCase().includes(searchText.toLowerCase())) {
+					elements.push(element);
+				}
+			}
+		}
+	} else if (xPath.includes('contains(') && xPath.includes('text(),')) {
+		// Case sensitive search
+		const match = xPath.match(/text\(\),'([^']+)'/);
+		if (match) {
+			const searchText = match[1];
+			const selector = elementSelector === '*' ? '*' : elementSelector;
+			const allElements = Array.from((contextNode || document).querySelectorAll(selector));
+
+			for (const element of allElements) {
+				if (element.textContent && element.textContent.includes(searchText)) {
+					elements.push(element);
+				}
+			}
+		}
+	}
+
+	let currentIndex = 0;
+	return {
+		iterateNext: () => {
+			return currentIndex < elements.length ? elements[currentIndex++] : null;
+		},
+		snapshotLength: elements.length,
+		snapshotItem: index => {
+			return index < elements.length ? elements[index] : null;
+		},
+	};
+};
+
+global.container = document.body;
+
+beforeEach(() => {
+	mock.restore();
+	document.body.replaceChildren();
+});

package/theme/.test.js

@@ -0,0 +1,69 @@
+import { TinyColor } from '@ctrl/tinycolor';
+import theme from '.';
+
+const ORIGINAL_BLUE = 'hsl(209, 55%, 45%)';
+const ORIGINAL_GRAY = 'hsl(0, 0%, 45%)';
+
+afterEach(() => {
+	theme.colors.blue = new TinyColor(ORIGINAL_BLUE);
+	theme.colors.gray = new TinyColor(ORIGINAL_GRAY);
+});
+
+describe('theme colors', () => {
+	test('base colors are writable', () => {
+		const before = theme.colors.blue.toString();
+		theme.colors.blue = new TinyColor('hsl(120, 55%, 45%)');
+		expect(theme.colors.blue.toString()).not.toBe(before);
+	});
+
+	test('white derives from gray — updates when gray is reassigned', () => {
+		const before = theme.colors.white.toString();
+		theme.colors.gray = new TinyColor('hsl(200, 30%, 45%)');
+		expect(theme.colors.white.toString()).not.toBe(before);
+	});
+});
+
+describe('theme lazy strings', () => {
+	test('theme.button reflects a color mutation', () => {
+		const custom = new TinyColor('hsl(120, 55%, 45%)');
+		theme.colors.blue = custom;
+		expect(theme.button).toContain(custom.toString());
+	});
+
+	test('theme.table reflects a color mutation', () => {
+		const before = theme.table;
+		theme.colors.blue = new TinyColor('hsl(120, 55%, 45%)');
+		expect(theme.table).not.toBe(before);
+	});
+
+	test('theme.scrollbar reflects a color mutation', () => {
+		const custom = new TinyColor('hsl(120, 55%, 45%)');
+		theme.colors.blue = custom;
+		expect(theme.scrollbar).toContain(custom.toString());
+	});
+
+	test('theme.input reflects a color mutation', () => {
+		const custom = new TinyColor('hsl(120, 55%, 45%)');
+		theme.colors.blue = custom;
+		expect(theme.input).toContain(custom.toString());
+	});
+
+	test('theme.code reflects a color mutation', () => {
+		const before = theme.code;
+		theme.colors.blue = new TinyColor('hsl(120, 55%, 45%)');
+		expect(theme.code).not.toBe(before);
+	});
+
+	test('theme.page reflects a color mutation', () => {
+		const before = theme.page;
+		theme.colors.blue = new TinyColor('hsl(120, 55%, 45%)');
+		expect(theme.page).not.toBe(before);
+	});
+
+	test('two accesses with a mutation between return different strings', () => {
+		const before = theme.button;
+		theme.colors.blue = new TinyColor('hsl(120, 55%, 45%)');
+		const after = theme.button;
+		expect(before).not.toBe(after);
+	});
+});