apphouse/dist/utils/color/toHex.test.ts

Component library for React that uses observable state management and theme-able components.

import { toHex } from './toHex';

describe('toHex', () => {
  describe('with a valid RGB color string', () => {
    it('converts the color string to a hex color string', () => {
      expect(toHex('rgb(255, 0, 0)')).toBe('#ff0000');
      expect(toHex('rgb(0, 255, 0)')).toBe('#00ff00');
      expect(toHex('rgb(0, 0, 255)')).toBe('#0000ff');
      expect(toHex('rgb(255, 255, 255)')).toBe('#ffffff');
    });
  });

  describe('with a valid RGBA color string', () => {
    it('converts the color string to a hex color string', () => {
      expect(toHex('rgba(255, 0, 0, 1)')).toBe('#ff0000');
      expect(toHex('rgba(0, 255, 0, 0.5)')).toBe('#00ff0005');
      expect(toHex('rgba(0, 0, 255, 0.75)')).toBe('#0000ff4b');
      expect(toHex('rgba(255, 255, 255, 0)')).toBe('#ffffff');
    });
  });

  describe('with a valid HSL color string', () => {
    it('converts the color string to a hex color string', () => {
      expect(toHex('hsl(0, 100%, 50%)')).toBe('#ff0000');
      expect(toHex('hsl(120, 100%, 50%)')).toBe('#00ff00');
      expect(toHex('hsl(240, 100%, 50%)')).toBe('#0000ff');
      expect(toHex('hsl(0, 0%, 100%)')).toBe('#ffffff');
    });
  });

  describe('with a valid HSLA color string', () => {
    it('converts the color string to a hex color string', () => {
      expect(toHex('hsla(0, 100%, 50%, 1)')).toBe('#ff0000');
      expect(toHex('hsla(120, 100%, 50%, 0.5)')).toBe('#00ff00');
      expect(toHex('hsla(240, 100%, 50%, 0.75)')).toBe('#0000ff');
      expect(toHex('hsla(0, 0%, 100%, 0)')).toBe('#ffffff');
    });
  });

  describe('with an invalid color string', () => {
    it('returns an empty string', () => {
      expect(toHex('invalid')).toBe('');
      expect(toHex('#ffffff')).toBe('');
    });
  });
});