@prezly/theme-kit-ui
Version:
UI components for Prezly themes
55 lines • 1.54 kB
JavaScript
import { expect } from '@playwright/test';
import { extendTheme } from "./theming.mjs";
describe('extendTheme', () => {
it('should extend an existing theme with additional class names', () => {
var theme = {
button: () => 'p-5 flex',
content: () => 'text-large'
};
var extended = extendTheme(theme, {
button: 'bg-primary'
});
expect(extended.button({})).toBe('p-5 flex bg-primary');
expect(extended.content({})).toBe('text-large');
});
it('should extend an existing theme with dynamic functions returning class names', () => {
var theme = {
button: () => 'p-5 flex',
content: () => 'text-large'
};
var extended = extendTheme(theme, {
button: _ref => {
var {
size
} = _ref;
return ['m-5', size];
}
});
expect(extended.button({
size: 'small'
})).toBe('p-5 flex m-5 small');
expect(extended.content({
size: 'small'
})).toBe('text-large');
});
it('should apply theme extension deduplicating class names with tailwind-merge', () => {
var theme = {
button: () => 'p-5 bg-primary',
content: () => 'text-large'
};
var extended = extendTheme(theme, {
button: _ref2 => {
var {
size
} = _ref2;
return ['p-6', size];
}
});
expect(extended.button({
size: 'medium'
})).toBe('bg-primary p-6 medium');
expect(extended.button({
size: 'small'
}, 'bg-secondary')).toBe('p-6 small bg-secondary');
});
});