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

UI components for Prezly themes

"use strict";

var _test = require("@playwright/test");
var _theming = require("./theming.cjs");
describe('extendTheme', () => {
  it('should extend an existing theme with additional class names', () => {
    var theme = {
      button: () => 'p-5 flex',
      content: () => 'text-large'
    };
    var extended = (0, _theming.extendTheme)(theme, {
      button: 'bg-primary'
    });
    (0, _test.expect)(extended.button({})).toBe('p-5 flex bg-primary');
    (0, _test.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 = (0, _theming.extendTheme)(theme, {
      button: _ref => {
        var {
          size
        } = _ref;
        return ['m-5', size];
      }
    });
    (0, _test.expect)(extended.button({
      size: 'small'
    })).toBe('p-5 flex m-5 small');
    (0, _test.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 = (0, _theming.extendTheme)(theme, {
      button: _ref2 => {
        var {
          size
        } = _ref2;
        return ['p-6', size];
      }
    });
    (0, _test.expect)(extended.button({
      size: 'medium'
    })).toBe('bg-primary p-6 medium');
    (0, _test.expect)(extended.button({
      size: 'small'
    }, 'bg-secondary')).toBe('p-6 small bg-secondary');
  });
});