test: adds tests for color widget

Author: geotrev

packages/netlify-cms-widget-colorstring/src/ColorControl.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
 import ChromePicker from 'react-color';
 import validateColor from 'validate-color';
@@ -79,6 +80,7 @@ const ClickOutsideDiv = styled.div`
 
 export default class ColorControl extends React.Component {
   static propTypes = {
+    field: ImmutablePropTypes.map.isRequired,
     onChange: PropTypes.func.isRequired,
     forID: PropTypes.string,
     value: PropTypes.node,
@@ -140,7 +142,7 @@ export default class ColorControl extends React.Component {
       <>
         {' '}
         {showClearButton && (
-          <ClearButtonWrapper>
+          <ClearButtonWrapper data-testid="clear-btn-wrapper">
             <ClearButton onClick={this.handleClear}>
               <ClearIcon />
             </ClearButton>
@@ -155,8 +157,8 @@ export default class ColorControl extends React.Component {
           ?
         </ColorSwatch>
         {this.state.showColorPicker && (
-          <ColorPickerContainer>
-            <ClickOutsideDiv onClick={this.handleClose} />
+          <ColorPickerContainer data-testid="color-picker-container">
+            <ClickOutsideDiv onClick={this.handleClose} data-testid="picker-bg" />
             <ChromePicker
               color={value || ''}
               onChange={this.handleChange}

packages/netlify-cms-widget-colorstring/src/__tests__/__snapshots__/color.spec.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Color widget field.allowInput is false renders input as readonly 1`] = `
+<input
+  class="test-classname"
+  id="test-string"
+  readonly=""
+  style="padding-left: 75px; padding-right: 70px; color: rgb(187, 187, 187);"
+  type="text"
+  value=""
+/>
+`;

packages/netlify-cms-widget-colorstring/src/__tests__/color.spec.js

@@ -0,0 +1,130 @@
+import React from 'react';
+import { fromJS } from 'immutable';
+import { render, fireEvent } from '@testing-library/react';
+
+import { NetlifyCmsWidgetColorString } from '../';
+
+const ColorControl = NetlifyCmsWidgetColorString.controlComponent;
+
+const fieldSettings = {
+  allowInput: false,
+};
+
+function setup({ field, defaultValue } = {}) {
+  const setActiveSpy = jest.fn();
+  const setInactiveSpy = jest.fn();
+  const onChangeSpy = jest.fn();
+
+  const helpers = render(
+    <ColorControl
+      field={field}
+      value={defaultValue}
+      onChange={onChangeSpy}
+      forID="test-string"
+      classNameWrapper="test-classname"
+      setActiveStyle={setActiveSpy}
+      setInactiveStyle={setInactiveSpy}
+    />,
+  );
+
+  const input = helpers.container.querySelector('input');
+
+  jest.useFakeTimers();
+
+  return {
+    ...helpers,
+    setActiveSpy,
+    setInactiveSpy,
+    onChangeSpy,
+    input,
+  };
+}
+
+describe('Color widget', () => {
+  it('renders with default value', () => {
+    const field = fromJS(fieldSettings);
+    const testValue = '#fff000';
+    const { input } = setup({ field, defaultValue: testValue });
+
+    expect(input.value).toEqual(testValue);
+  });
+
+  describe('field.allowInput is false', () => {
+    it('renders input as readonly', () => {
+      const field = fromJS(fieldSettings);
+      const { input } = setup({ field });
+
+      expect(input).toMatchSnapshot();
+    });
+
+    it('opens picker on input click', () => {
+      const field = fromJS(fieldSettings);
+      const { input, queryByTestId } = setup({ field });
+
+      fireEvent.click(input);
+
+      expect(queryByTestId('color-picker-container')).not.toBeNull();
+    });
+
+    it('displays clear button when input is present', () => {
+      const field = fromJS(fieldSettings);
+      const { queryByTestId } = setup({ field, defaultValue: '#fff000' });
+
+      expect(queryByTestId('clear-btn-wrapper')).not.toBeNull();
+    });
+  });
+
+  describe('field.allowInput is true', () => {
+    const field = fromJS({ ...fieldSettings, allowInput: true });
+
+    it('calls onChange when input changes', () => {
+      const testValue = '#fff000';
+      const { input, onChangeSpy } = setup({ field });
+
+      fireEvent.focus(input);
+      fireEvent.change(input, { target: { value: testValue } });
+
+      jest.runAllTimers();
+
+      expect(onChangeSpy).toHaveBeenCalledTimes(1);
+      expect(onChangeSpy).toHaveBeenCalledWith(testValue);
+    });
+
+    it('sets input value', () => {
+      const testValue = '#fff000';
+      const { input } = setup({ field });
+
+      fireEvent.focus(input);
+      fireEvent.change(input, { target: { value: testValue } });
+
+      jest.runAllTimers();
+
+      expect(input.value).toEqual(testValue);
+    });
+
+    it('does not open picker on input click', () => {
+      const { input, queryByTestId } = setup({ field });
+
+      fireEvent.click(input);
+
+      expect(queryByTestId('color-picker-container')).toBeNull();
+    });
+
+    it('calls setActiveStyle when input focused', () => {
+      const { input, setActiveSpy } = setup({ field });
+
+      fireEvent.focus(input);
+
+      expect(setActiveSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls setInactiveSpy when input blurred', () => {
+      const { input, setInactiveSpy } = setup({ field });
+
+      fireEvent.focus(input);
+      fireEvent.blur(input);
+
+      expect(setInactiveSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+});