@prezly/theme-kit-ui
Version:
UI components for Prezly themes
61 lines • 2.14 kB
JavaScript
import { expect } from '@playwright/test';
import { createStyling } from "./styling.mjs";
describe('createStyling', () => {
it('should create a styling function', () => {
var styling = createStyling('hello');
expect(typeof styling).toBe('function');
});
it('should compile plain string class names list', () => {
var styling = createStyling('hello world');
expect(styling()).toBe('hello world');
});
it('should compile list of class names strings', () => {
var styling = createStyling('hello world', 'this is me');
expect(styling()).toBe('hello world this is me');
});
it('should compile arrays of class names strings', () => {
var styling = createStyling(['hello world', 'this is me'], ['how about', 'another list', ['with', 'nested', 'values']]);
expect(styling()).toBe('hello world this is me how about another list with nested values');
});
it('should compile mapping of enum props to class names', () => {
var styling = createStyling('hello world', 'this is me', {
size: {
small: 'small size',
large: 'large size'
}
});
expect(styling({
size: 'large'
})).toBe('hello world this is me large size');
});
it('should compile on/off mapping of enum props to class names', () => {
var styling = createStyling('hello world', 'this is me', {
size: {
$on: 'size-present',
small: 'small-size',
large: 'large-size'
}
});
expect(styling({
size: 'large'
})).toBe('hello world this is me size-present large-size');
});
it('should compile on/off mapping for boolean props to class names', () => {
var styling = createStyling('hello world', 'this is me', {
loading: {
$on: 'loading',
$off: 'not-loading'
}
});
expect(styling({
loading: true
})).toBe('hello world this is me loading');
expect(styling({
loading: false
})).toBe('hello world this is me not-loading');
});
it('should deduplicate classes with tailwind-merge', () => {
var styling = createStyling('p-1', 'p-5');
expect(styling()).toBe('p-5');
});
});