@prezly/theme-kit-ui/build/styler/styling.test.cjs

UI components for Prezly themes

"use strict";

var _test = require("@playwright/test");
var _styling = require("./styling.cjs");
describe('createStyling', () => {
  it('should create a styling function', () => {
    var styling = (0, _styling.createStyling)('hello');
    (0, _test.expect)(typeof styling).toBe('function');
  });
  it('should compile plain string class names list', () => {
    var styling = (0, _styling.createStyling)('hello world');
    (0, _test.expect)(styling()).toBe('hello world');
  });
  it('should compile list of class names strings', () => {
    var styling = (0, _styling.createStyling)('hello world', 'this is me');
    (0, _test.expect)(styling()).toBe('hello world this is me');
  });
  it('should compile arrays of class names strings', () => {
    var styling = (0, _styling.createStyling)(['hello world', 'this is me'], ['how about', 'another list', ['with', 'nested', 'values']]);
    (0, _test.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 = (0, _styling.createStyling)('hello world', 'this is me', {
      size: {
        small: 'small size',
        large: 'large size'
      }
    });
    (0, _test.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 = (0, _styling.createStyling)('hello world', 'this is me', {
      size: {
        $on: 'size-present',
        small: 'small-size',
        large: 'large-size'
      }
    });
    (0, _test.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 = (0, _styling.createStyling)('hello world', 'this is me', {
      loading: {
        $on: 'loading',
        $off: 'not-loading'
      }
    });
    (0, _test.expect)(styling({
      loading: true
    })).toBe('hello world this is me loading');
    (0, _test.expect)(styling({
      loading: false
    })).toBe('hello world this is me not-loading');
  });
  it('should deduplicate classes with tailwind-merge', () => {
    var styling = (0, _styling.createStyling)('p-1', 'p-5');
    (0, _test.expect)(styling()).toBe('p-5');
  });
});