import { expect, it } from 'vitest';
|
|
import { updateCSSVariables } from '../update-css-variables';
|
|
it('updateCSSVariables should update CSS variables in :root selector', () => {
|
// 模拟初始的内联样式表内容
|
const initialStyleContent = ':root { --primaryColor: red; }';
|
document.head.innerHTML = `<style id="custom-styles">${initialStyleContent}</style>`;
|
|
// 要更新的CSS变量和它们的新值
|
const updatedVariables = {
|
fontSize: '16px',
|
primaryColor: 'blue',
|
secondaryColor: 'green',
|
};
|
|
// 调用函数来更新CSS变量
|
updateCSSVariables(updatedVariables, 'custom-styles');
|
|
// 获取更新后的样式内容
|
const styleElement = document.querySelector('#custom-styles');
|
const updatedStyleContent = styleElement ? styleElement.textContent : '';
|
|
// 检查更新后的样式内容是否包含正确的更新值
|
expect(
|
updatedStyleContent?.includes('primaryColor: blue;') &&
|
updatedStyleContent?.includes('secondaryColor: green;') &&
|
updatedStyleContent?.includes('fontSize: 16px;'),
|
).toBe(true);
|
});
|
|
it('updateCSSVariables should support a custom selector', () => {
|
document.head.innerHTML = `<style id="tdesign-styles"></style>`;
|
|
// 使用自定义选择器（如 TDesign 的 theme-mode 选择器）更新 CSS 变量
|
updateCSSVariables(
|
{ '--td-brand-color': 'rgb(0, 82, 217)' },
|
'tdesign-styles',
|
":root[theme-mode='dark']",
|
);
|
|
const styleElement = document.querySelector('#tdesign-styles');
|
const content = styleElement?.textContent ?? '';
|
|
// 选择器与变量都应正确写入
|
expect(content.startsWith(":root[theme-mode='dark'] {")).toBe(true);
|
expect(content.includes('--td-brand-color: rgb(0, 82, 217);')).toBe(true);
|
});
|
