react-oui-icons/dist/Icon/index.test.js

Icons for the Optimizely application and other OUI projects.

"use strict";

var _react = _interopRequireDefault(require("react"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _enzyme = require("enzyme");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

describe('<Icon/> Component', function () {
  it('size prop is equal to medium', function () {
    var component = (0, _enzyme.shallow)(_react["default"].createElement(_Icon["default"], {
      name: "ab",
      size: "large"
    }));
    expect(component.props().height).toEqual('24');
  });
  it('name prop is equal to ab', function () {
    var component = (0, _enzyme.shallow)(_react["default"].createElement(_Icon["default"], {
      name: "ab"
    }));
    expect(component.props().name).toEqual('ab');
  });
  it('stroke prop is equal tomato', function () {
    var component = (0, _enzyme.shallow)(_react["default"].createElement(_Icon["default"], {
      name: "ab",
      size: "medium",
      stroke: "tomato"
    }));
    expect(component.props().stroke).toEqual('tomato');
  });
  it('fill is equal tomato', function () {
    var component = (0, _enzyme.shallow)(_react["default"].createElement(_Icon["default"], {
      name: "ab",
      size: "medium",
      fill: "tomato"
    }));
    expect(component.props().style).toEqual({
      "fill": "tomato",
      "stroke": "none"
    });
  });
  it('style is equal to obj with color style and does not affect fill', function () {
    var component = (0, _enzyme.shallow)(_react["default"].createElement(_Icon["default"], {
      name: "ab",
      size: "medium",
      fill: "tomato",
      style: {
        "color": "blue"
      }
    }));
    expect(component.props().style).toEqual({
      "color": "blue",
      "fill": "tomato",
      "stroke": "none"
    });
  });
  it('role prop is equal to ab icon', function () {
    var component = (0, _enzyme.shallow)(_react["default"].createElement(_Icon["default"], {
      name: "ab",
      size: "medium",
      role: "ab icon"
    }));
    expect(component.props().role).toEqual('ab icon');
  });
  it('when description provided render <desc>{description}</desc>', function () {
    var component = (0, _enzyme.shallow)(_react["default"].createElement(_Icon["default"], {
      name: "ab",
      description: "ab"
    }));
    expect(component.contains(_react["default"].createElement("desc", null, "ab"))).toEqual(true);
  });
  describe('When title prop is provided', function () {
    var props;
    var testTitle = 'test title';
    beforeEach(function () {
      props = {
        title: testTitle,
        name: 'winner'
      };
    });
    describe('When component mounts', function () {
      var wrapper;
      beforeEach(function () {
        wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Icon["default"], props));
      });
      it('should contain <title> with the provided title', function () {
        expect(wrapper.contains(_react["default"].createElement("title", null, testTitle))).toBeTruthy();
      });
    });
  });
  describe('When title prop is not provided', function () {
    var props;
    describe('When icon is different than "help"', function () {
      var testName = 'ab';
      beforeEach(function () {
        props = {
          name: testName
        };
      });
      describe('When component mounts', function () {
        var wrapper;
        beforeEach(function () {
          wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Icon["default"], props));
        });
        it('should contain <title> with the name of the icon', function () {
          expect(wrapper.find('title').exists()).toBeTruthy();
          expect(wrapper.contains(_react["default"].createElement("title", null, testName))).toBeTruthy();
        });
      });
    });
    describe('When the "help" icon is used', function () {
      var testName = 'help';
      beforeEach(function () {
        props = {
          name: testName
        };
      });
      describe('When component mounts', function () {
        var wrapper;
        beforeEach(function () {
          wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Icon["default"], props));
        });
        it('should not contain a <title> element', function () {
          expect(wrapper.contains(_react["default"].createElement("title", null, testName))).toBeFalsy();
          expect(wrapper.find('title').exists()).toBeFalsy();
        });
      });
    });
  });
});