optimizely-oui/dist/js/components/CodeDiff/tests/index.js

Optimizely's Component Library.

"use strict";

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

var _enzyme = require("enzyme");

var _reactDiffViewer = _interopRequireDefault(require("react-diff-viewer"));

var _CodeDiff = _interopRequireDefault(require("../CodeDiff"));

var _data = require("../data.json");

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

describe("components/CodeDiff", function () {
  it("testSection is added", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_CodeDiff["default"], {
      oldValue: "testing",
      newValue: "testing 123",
      testSection: "my-code-diff"
    }));
    expect(component.find('[data-test-section="my-code-diff"]').length).toBe(1);
  });
  it("codeFoldMessageRenderer prop for ReactDiffViewer contains OUI Icon when not provided", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_CodeDiff["default"], {
      oldValue: _data.JSON_DIFF.before,
      newValue: _data.JSON_DIFF.after,
      testSection: "my-code-diff"
    }));
    expect(component.find('[data-test-section="my-code-diff"]').find("Memo(Icon)").length).toBe(2);
  });
  it("codeFoldMessageRenderer prop for ReactDiffViewer contains OUI Icon even provided as prop", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_CodeDiff["default"], {
      oldValue: _data.JSON_DIFF.before,
      newValue: _data.JSON_DIFF.after,
      codeFoldMessageRenderer: function codeFoldMessageRenderer() {
        return _react["default"].createElement("div", null);
      } // eslint-disable-line react/jsx-no-bind
      ,
      testSection: "my-code-diff"
    }));
    expect(component.find('[data-test-section="my-code-diff"]').find("Memo(Icon)").length).toBe(2);
  });
  it("does not change string props for oldValue and newValue", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_CodeDiff["default"], {
      oldValue: "string1",
      newValue: "string2"
    }));
    expect(component.find("DiffViewer").props()).toEqual(expect.objectContaining({
      oldValue: "string1",
      newValue: "string2"
    }));
  });
  it("does stringify and format array values for oldValue and newValue", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_CodeDiff["default"], {
      oldValue: ["and", {
        audience_id: 123
      }, {
        audience_id: 456
      }],
      newValue: ["and", {
        audience_id: 123
      }]
    }));
    expect(component.find("DiffViewer").props()).toEqual(expect.objectContaining({
      oldValue: '[\n  "and",\n  {\n    "audience_id": 123\n  },\n  {\n    "audience_id": 456\n  }\n]',
      newValue: '[\n  "and",\n  {\n    "audience_id": 123\n  }\n]'
    }));
  });
  it("does stringify and format object values for oldValue and newValue", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_CodeDiff["default"], {
      oldValue: {
        test: 1
      },
      newValue: {
        test: 2
      }
    }));
    expect(component.find("DiffViewer").props()).toEqual(expect.objectContaining({
      oldValue: '{\n  "test": 1\n}',
      newValue: '{\n  "test": 2\n}'
    }));
  });
  it("does stringify number values for oldValue and newValue", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_CodeDiff["default"], {
      oldValue: 1,
      newValue: 2
    }));
    expect(component.find("DiffViewer").props()).toEqual(expect.objectContaining({
      oldValue: "1",
      newValue: "2"
    }));
  });
  describe("when given a className", function () {
    it("appends it to the root element", function () {
      var component = (0, _enzyme.shallow)(_react["default"].createElement(_CodeDiff["default"], {
        className: "extra-class",
        oldValue: "string1",
        newValue: "string2"
      }));
      expect(component.prop("className").includes("extra-class")).toBe(true);
    });
  });
  describe("when given an unknown prop", function () {
    it("passes it to the ReactDiffViewer element", function () {
      // @ts-ignore: `unknownProps` is not part of any typed interface and therefore a good test value.
      var component = (0, _enzyme.mount)(_react["default"].createElement(_CodeDiff["default"], {
        unknownProp: "some value",
        oldValue: "string1",
        newValue: "string2"
      })); // expect(component).toBe(true);

      expect(component.find(_reactDiffViewer["default"])).toHaveProp({
        unknownProp: "some value"
      });
    });
  });
});