@wordpress/components
Version:
UI components for WordPress.
59 lines (55 loc) • 2.01 kB
text/typescript
/**
* Internal dependencies
*/
import {
extractColorNameFromCurrentValue,
showTransparentBackground,
normalizeColorValue,
} from '../utils';
describe( 'ColorPalette: Utils', () => {
describe( 'extractColorNameFromCurrentValue', () => {
test( 'should support hex values', () => {
const result = extractColorNameFromCurrentValue( '#00f', [
{ name: 'Red', color: '#f00' },
{ name: 'Blue', color: '#00f' },
] );
expect( result ).toBe( 'Blue' );
} );
test( 'should support CSS variables', () => {
const result = extractColorNameFromCurrentValue( 'var(--blue)', [
{ name: 'Red', color: 'var(--red)' },
{ name: 'Blue', color: 'var(--blue)' },
] );
expect( result ).toBe( 'Blue' );
} );
} );
describe( 'showTransparentBackground', () => {
test( 'should return true for undefined color values', () => {
expect( showTransparentBackground( undefined ) ).toBe( true );
} );
test( 'should return true for transparent colors', () => {
expect( showTransparentBackground( 'transparent' ) ).toBe( true );
expect( showTransparentBackground( '#75757500' ) ).toBe( true );
} );
test( 'should return false for non-transparent colors', () => {
expect( showTransparentBackground( '#FFF' ) ).toBe( false );
expect( showTransparentBackground( '#757575' ) ).toBe( false );
expect( showTransparentBackground( '#f5f5f524' ) ).toBe( false ); // 0.14 alpha.
} );
} );
describe( 'normalizeColorValue', () => {
test( 'should return the value as is if the color value is not a CSS variable', () => {
const element = document.createElement( 'div' );
expect( normalizeColorValue( '#ff0000', element ) ).toBe(
'#ff0000'
);
} );
test( 'should return the background color computed from a element if the color value is a CSS variable', () => {
const element = document.createElement( 'div' );
element.style.backgroundColor = '#ff0000';
expect( normalizeColorValue( 'var(--red)', element ) ).toBe(
'#ff0000'
);
} );
} );
} );