@hackoregon/component-library/dist/HorizontalBarChart/HorizontalBarChart.test.js

Official repo for Hack Oregon React component library

"use strict";

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

var _enzyme = require("enzyme");

var _HorizontalBarChart = _interopRequireDefault(require("./HorizontalBarChart"));

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

var simpleData = [{
  x: 100,
  y: "cat"
}, {
  x: 200,
  y: "dog"
}, {
  x: 300,
  y: "fish"
}, {
  x: 400,
  y: "rat"
}];
var updatedSimpleData = [{
  x: 100,
  y: "cat"
}, {
  x: 200,
  y: "dog"
}, {
  x: 300,
  y: "fish"
}, {
  x: 400,
  y: "rat"
}, {
  x: 500,
  y: "bat"
}];
var simpleDataDomain = {
  x: [0, 400],
  y: [0, 4]
};
var sampleUnstructuredData = [{
  population: 2000,
  label: "Labrador Retriever"
}, {
  population: 8000,
  label: "Standard Poodle"
}, {
  population: 6000,
  label: "French Bulldog"
}];
describe("HorizontalBarChart", function () {
  it("renders a VictoryChart", function () {
    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_HorizontalBarChart["default"], {
      data: simpleData
    }));
    expect(wrapper.find("VictoryChart").length).to.eql(1);
  });
  it("renders a HorizontalBarChart with sample data", function () {
    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_HorizontalBarChart["default"], {
      data: simpleData
    }));
    expect(wrapper.find({
      title: "Horizontal Bar Chart"
    }).length).to.eql(1);
    expect(wrapper.find({
      title: "Horizontal Bar Chart"
    }).props().data).to.eql([{
      sortOrder: 1,
      dataValue: 100,
      label: "cat: 100"
    }, {
      sortOrder: 2,
      dataValue: 200,
      label: "dog: 200"
    }, {
      sortOrder: 3,
      dataValue: 300,
      label: "fish: 300"
    }, {
      sortOrder: 4,
      dataValue: 400,
      label: "rat: 400"
    }]);
  });
  it("renders an updated HorizontalBarChart when passed new data", function () {
    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_HorizontalBarChart["default"], {
      data: simpleData
    }));
    expect(wrapper.find({
      title: "Horizontal Bar Chart"
    }).length).to.eql(1);
    wrapper.setProps({
      data: updatedSimpleData
    });
    expect(wrapper.find({
      title: "Horizontal Bar Chart"
    }).props().data).to.eql([{
      sortOrder: 1,
      dataValue: 100,
      label: "cat: 100"
    }, {
      sortOrder: 2,
      dataValue: 200,
      label: "dog: 200"
    }, {
      sortOrder: 3,
      dataValue: 300,
      label: "fish: 300"
    }, {
      sortOrder: 4,
      dataValue: 400,
      label: "rat: 400"
    }, {
      sortOrder: 5,
      dataValue: 500,
      label: "bat: 500"
    }]);
  });
  it("should render a VictoryBar inside a ChartContainer", function () {
    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_HorizontalBarChart["default"], {
      data: simpleData
    }));
    expect(wrapper.find("ChartContainer")).to.have.length(1);
    expect(wrapper.find("ChartContainer").children().find("VictoryBar")).to.have.length(2);
  });
  it("conditionally passes title to ChartContainer", function () {
    var sampleTitle = "Hey there";
    var titlelessWrapper = (0, _enzyme.shallow)(_react["default"].createElement(_HorizontalBarChart["default"], {
      data: simpleData
    }));
    var titledWrapper = (0, _enzyme.shallow)(_react["default"].createElement(_HorizontalBarChart["default"], {
      data: simpleData,
      title: sampleTitle
    }));
    expect(titlelessWrapper.find("ChartContainer").prop("title")).to.equal(null);
    expect(titledWrapper.find("ChartContainer").prop("title")).to.equal(sampleTitle);
  });
  it("conditionally passes subtitle to ChartContainer", function () {
    var sampleSubtitle = "Almost as good as a title!";
    var noSubtitleWrapper = (0, _enzyme.shallow)(_react["default"].createElement(_HorizontalBarChart["default"], {
      data: simpleData
    }));
    var subtitleWrapper = (0, _enzyme.shallow)(_react["default"].createElement(_HorizontalBarChart["default"], {
      data: simpleData,
      subtitle: sampleSubtitle
    }));
    expect(noSubtitleWrapper.find("ChartContainer").prop("subtitle")).to.equal(null);
    expect(subtitleWrapper.find("ChartContainer").prop("subtitle")).to.equal(sampleSubtitle);
  });
  it("renders both axes", function () {
    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_HorizontalBarChart["default"], {
      data: simpleData
    }));
    var axes = wrapper.find("VictoryAxis");
    var xAxis = wrapper.find({
      title: "X Axis"
    });
    var yAxis = wrapper.find({
      title: "Y Axis"
    });
    expect(axes.length).to.eql(2);
    expect(xAxis.length).to.eql(1);
    expect(yAxis.length).to.eql(1);
  });
  it("renders two axis and a VictoryBar within VictoryChart", function () {
    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_HorizontalBarChart["default"], {
      data: simpleData
    }));
    var victoryComponents = wrapper.find("VictoryChart").children();
    expect(victoryComponents.find("VictoryAxis")).to.have.length(2);
    expect(victoryComponents.find("VictoryBar")).to.have.length(2);
  });
  it("should properly set a domain if provided with one", function () {
    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_HorizontalBarChart["default"], {
      data: simpleData,
      domain: simpleDataDomain
    }));
    var chart = wrapper.find("VictoryChart");
    expect(chart.props().domain).to.eql(simpleDataDomain);
  });
  it("renders unstructured data", function () {
    var props = {
      data: sampleUnstructuredData,
      dataLabel: "label",
      dataValue: "population"
    };
    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_HorizontalBarChart["default"], props));
    expect(wrapper.find({
      title: "Horizontal Bar Chart"
    }).props().data).to.eql([{
      sortOrder: 1,
      dataValue: 2000,
      label: "Labrador Retriever: 2,000"
    }, {
      sortOrder: 2,
      dataValue: 8000,
      label: "Standard Poodle: 8,000"
    }, {
      sortOrder: 3,
      dataValue: 6000,
      label: "French Bulldog: 6,000"
    }]);
  });
  it("sends in data in usable format", function () {
    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_HorizontalBarChart["default"], {
      data: simpleData
    }));
    var dataProp = wrapper.find("VictoryBar").first().prop("data");
    expect(dataProp).to.have.length(4);
    var firstDataProp = dataProp[0];
    expect(firstDataProp).to.have.property("sortOrder");
    expect(firstDataProp).to.have.property("dataValue");
    expect(firstDataProp).to.have.property("label");
    var xProp = wrapper.find("VictoryBar").first().prop("x");
    var yProp = wrapper.find("VictoryBar").first().prop("y");
    expect(xProp).to.eql("sortOrder");
    expect(yProp).to.eql("dataValue");
  });
});