import { color, font, gray } from '../index';

describe('Style Guide', () => {
  it('snapshots', () => {
    expect(color).toMatchSnapshot('colors');
    expect(font).toMatchSnapshot('fonts');
    expect(gray).toMatchSnapshot('grays');
  });

  it('Exports black, white and gray(s)', () => {
    expect(color.black).toBeTruthy();
    expect(color.gray).toBeTruthy();
    expect(color.white).toBeTruthy();
  });

  it('Exports a color for specific roles/use-cases', () => {
    expect(color.primary).toBeTruthy();
    expect(color.secondary).toBeTruthy();
    expect(color.link).toBeTruthy();
  });

  it('Exports shades of grey 0 - 9', () => {
    const keysExpected = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
    const keysActual = Object.keys(gray);

    expect(keysActual).toEqual(keysExpected);

    keysActual.forEach((key: string) => {
      expect(gray[key]).toBeTruthy();
      expect(color.gray[key]).toBeTruthy();
    });
  });

  it('Exports our colors', () => {
    // prettier-ignore
    const keysExpected = ["transparent", "black", "gray", "white", "red", "orange", "yellow", "green", "blue", "indigo", "violet", "link", "primary", "secondary"];
    const keysActual = Object.keys(color);

    expect(keysActual).toEqual(keysExpected);

    keysActual.forEach((key: string) => {
      const value = color[key];
      expect(value).toBeTruthy();
    });
  });
});