// @flow
import React from 'react';
import { getPaletteColor } from '../../../mixins/branding';
import {
  mountWrappedComponent,
  currentTheme,
  renderSnapshot,
} from '../../../../utils/tests';

import { Span } from './index';

describe('Span', () => {
  describe('snapshot', () => {
    it('matches the previous snapshot', () => {
      const span = renderSnapshot(<Span />);
      expect(span).toMatchSnapshot();
    });
  });

  it('sets span color correctly', () => {
    const colorNames = ['error-fg', 'error-bg', 'success-fg', 'success-bg'];

    colorNames.forEach((color) => {
      const span = mountWrappedComponent(<Span colorName={color} />);
      expect(span).toHaveStyleRule(
        'color',
        getPaletteColor(color)({ theme: currentTheme }),
      );
    });
  });
});
