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

Optimizely's Component Library.

"use strict";

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

var _index = _interopRequireDefault(require("../index"));

var _enzyme = require("enzyme");

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

var basicColumns = [{
  header: "Overall Conversion Rate",
  bodyContent: {
    value: "10,795",
    color: "red",
    isNumber: true
  }
}, {
  header: "Test header",
  bodyContent: {
    value: "Test content",
    color: "black",
    isNumber: false
  }
}, {
  header: "Overall Conversion Rate",
  bodyContent: {
    value: "+33pp +6p",
    color: "green",
    isNumber: true
  }
}, {
  header: "Rate",
  bodyContent: {
    value: "Increase in unique conversions per visitor for Register Button event",
    color: "black",
    isNumber: false
  }
}];
var tooManyColumns = [{
  header: "Overall Conversion Rate",
  bodyContent: {
    value: "10,795",
    color: "red",
    isNumber: true
  }
}, {
  header: "Test header",
  bodyContent: {
    value: "Test content",
    color: "black",
    isNumber: false
  }
}, {
  header: "Overall Conversion Rate",
  bodyContent: {
    value: "+33pp +6p",
    color: "green",
    isNumber: true
  }
}, {
  header: "Rate",
  bodyContent: {
    value: "Increase in unique conversions per visitor for Register Button event",
    color: "black",
    isNumber: false
  }
}, {
  header: "Overall Conversion Rate",
  bodyContent: {
    value: "+33pp +6p",
    color: "green",
    isNumber: true
  }
}, {
  header: "Rate",
  bodyContent: {
    value: "Increase in unique conversions per visitor for Register Button event",
    color: "black",
    isNumber: false
  }
}];
var popOverColumns = [{
  header: "Overall Conversion Rate",
  bodyContent: {
    value: "10,795",
    color: "red",
    isNumber: true,
    headerHelpTooltip: "Test tooltip content"
  },
  headerHelpTooltip: "Test tooltip header"
}, {
  header: "Test header",
  bodyContent: {
    value: "Test content",
    color: "black",
    isNumber: false
  }
}];
describe("components/SummaryBar", function () {
  it("should render correctly", function () {
    var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
      testSection: "summary-bar-test",
      columns: basicColumns,
      title: "Test bar"
    }));
    expect(component.find('[data-test-section="summary-bar-test"]').find('[data-test-section="summary-bar-test-col-1-header"]').text()).toBe("Test header");
    expect(component.find('[data-test-section="summary-bar-test"]').find('[data-test-section="summary-bar-test-col-1-content"]').text()).toBe("Test content");
  });
  it("should not render over 5 columns", function () {
    var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
      testSection: "summary-bar-test",
      columns: tooManyColumns,
      title: "Test bar"
    }));
    expect(component.find('[data-test-section="summary-bar-test"]').find('[data-test-section="summary-bar-test-col-5-header"]').exists()).toBeFalsy();
    expect(component.find('[data-test-section="summary-bar-test"]').find('[data-test-section="summary-bar-test-col-5-content"]').exists()).toBeFalsy();
  });
  it("should render a popover when tooltip is clicked", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      testSection: "summary-bar-test",
      columns: popOverColumns,
      title: "Test bar"
    }));
    component.find('[data-test-section="summary-bar-test"]').find('[data-test-section="summary-bar-test-col-0-header"]').find("HelpPopover").simulate("click");
    var popOverContent = component.find("Popover");
    expect(popOverContent.length).toBe(1);
    expect(popOverContent.text()).toContain("Test tooltip header");
  });
  describe("when given a className", function () {
    it("appends it to the root element", function () {
      var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
        className: "extra-class",
        columns: basicColumns,
        title: "Test bar"
      }));
      expect(component.prop("className").includes("extra-class")).toBe(true);
    });
  });
  describe("when given an unknown prop", function () {
    it("passes it to the root element", function () {
      // @ts-ignore: `unknownProps` is not part of any typed interface and therefore a good test value.
      var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
        unknownProp: "some value",
        columns: basicColumns,
        title: "Test bar"
      }));
      expect(component).toHaveProp({
        unknownProp: "some value"
      });
    });
  });
});