add tests

Author: arturbien

src/components/ColorInput/ColorInput.spec.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../test/utils';
+import ColorInput from './ColorInput';
+
+function rgb2hex(str) {
+  const rgb = str.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+  function hex(x) {
+    return `0${parseInt(x, 10).toString(16)}`.slice(-2);
+  }
+  return `#${hex(rgb[1])}${hex(rgb[2])}${hex(rgb[3])}`;
+}
+
+describe('<ColorInput />', () => {
+  // TODO
+  it('should call handlers', () => {});
+
+  it('should properly pass value to input element', () => {
+    const color = '#f0f0dd';
+    const { container } = renderWithTheme(<ColorInput value={color} />);
+    const input = container.querySelector(`[type="color"]`);
+
+    expect(input.value).toBe(color);
+  });
+  it('should display current color', () => {
+    const color = '#f0f0dd';
+    const { getByRole } = renderWithTheme(<ColorInput value={color} />);
+    const colorPreview = getByRole('presentation');
+    const displayedColor = window.getComputedStyle(colorPreview, null)
+      .background;
+
+    const displayedColorHex = rgb2hex(displayedColor);
+    expect(displayedColorHex).toBe(color);
+  });
+
+  describe('prop: disabled', () => {
+    it('should render disabled input', () => {
+      const { container } = renderWithTheme(<ColorInput disabled />);
+      const input = container.querySelector(`[type="color"]`);
+
+      expect(input).toHaveAttribute('disabled');
+    });
+
+    it('should be overridden by props', () => {
+      const { container, rerender } = renderWithTheme(<ColorInput disabled />);
+      rerender(<ColorInput disabled={false} />);
+      const input = container.querySelector(`[type="color"]`);
+
+      expect(input).not.toHaveAttribute('disabled');
+    });
+  });
+});