@hackoregon/component-library/es/Scatterplot/Scatterplot.test.js

Official repo for Hack Oregon React component library

import React from "react";
import { shallow } from "enzyme";
import Scatterplot from "./Scatterplot";
var simpleData = [{
  x: 100,
  y: 1
}, {
  x: 200,
  y: 2
}, {
  x: 300,
  y: 3
}, {
  x: 400,
  y: 4
}];
var customData = [{
  x: 100,
  y: 1
}, {
  x: 200,
  y: 2
}, {
  x: 300,
  y: 3
}, {
  x: 400,
  y: 4
}, {
  x: 500,
  y: 5
}];
var simpleDataDomain = {
  x: [100, 400],
  y: [0, 4]
};
var customDataDomain = {
  x: [100, 500],
  y: [0, 5]
};
var multiSeriesData = [{
  amount: 100,
  rate: 1,
  series: "first"
}, {
  amount: 200,
  rate: 2,
  series: "first"
}, {
  amount: 100,
  rate: 3,
  series: "second"
}, {
  amount: 200,
  rate: 3,
  series: "second"
}];
var unstructuredMultiSeriesData = [{
  amount: 100,
  rate: 1,
  type: "first"
}, {
  amount: 200,
  rate: 2,
  type: "first"
}, {
  amount: 100,
  rate: 3,
  type: "second"
}, {
  amount: 200,
  rate: 3,
  type: "second"
}];
describe("Scatterplot", function () {
  it("renders a VictoryChart", function () {
    var wrapper = shallow(React.createElement(Scatterplot, {
      data: simpleData
    }));
    expect(wrapper.find("VictoryChart").length).to.eql(1);
  });
  it("renders a Scatterplot with simple data", function () {
    var wrapper = shallow(React.createElement(Scatterplot, {
      data: simpleData
    }));
    expect(wrapper.find({
      title: "Scatter Plot"
    }).length).to.eql(1);
    expect(wrapper.find({
      title: "Scatter Plot"
    }).props().data).to.eql([{
      dataKey: 100,
      dataValue: 1,
      label: "X: 100 • Y: 1",
      series: undefined
    }, {
      dataKey: 200,
      dataValue: 2,
      label: "X: 200 • Y: 2",
      series: undefined
    }, {
      dataKey: 300,
      dataValue: 3,
      label: "X: 300 • Y: 3",
      series: undefined
    }, {
      dataKey: 400,
      dataValue: 4,
      label: "X: 400 • Y: 4",
      series: undefined
    }]);
  });
  it("renders an updated Scatterplot when passed new data", function () {
    var wrapper = shallow(React.createElement(Scatterplot, {
      data: simpleData
    }));
    expect(wrapper.find({
      title: "Scatter Plot"
    }).length).to.eql(1);
    wrapper.setProps({
      data: customData
    });
    expect(wrapper.find({
      title: "Scatter Plot"
    }).props().data).to.eql([{
      dataKey: 100,
      dataValue: 1,
      label: "X: 100 • Y: 1",
      series: undefined
    }, {
      dataKey: 200,
      dataValue: 2,
      label: "X: 200 • Y: 2",
      series: undefined
    }, {
      dataKey: 300,
      dataValue: 3,
      label: "X: 300 • Y: 3",
      series: undefined
    }, {
      dataKey: 400,
      dataValue: 4,
      label: "X: 400 • Y: 4",
      series: undefined
    }, {
      dataKey: 500,
      dataValue: 5,
      label: "X: 500 • Y: 5",
      series: undefined
    }]);
  });
  it("renders both axes", function () {
    var wrapper = shallow(React.createElement(Scatterplot, {
      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("should properly set a domain based on the data if not provided with one", function () {
    var wrapper = shallow(React.createElement(Scatterplot, {
      data: simpleData
    }));
    var chart = wrapper.find("VictoryChart");
    expect(chart.props().domain).to.eql(simpleDataDomain);
  });
  it("should properly set a domain if provided with one", function () {
    var wrapper = shallow(React.createElement(Scatterplot, {
      data: simpleData,
      domain: customDataDomain
    }));
    var chart = wrapper.find("VictoryChart");
    expect(chart.props().domain).to.eql(customDataDomain);
  });
  it("renders multi-series data", function () {
    var props = {
      data: multiSeriesData,
      dataKey: "amount",
      dataValue: "rate",
      dataSeries: "series"
    };
    var wrapper = shallow(React.createElement(Scatterplot, props));
    expect(wrapper.find({
      title: "Scatter Plot"
    }).props().data).to.eql([{
      dataKey: 100,
      dataValue: 1,
      label: "X: 100 • Y: 1",
      series: "first"
    }, {
      dataKey: 200,
      dataValue: 2,
      label: "X: 200 • Y: 2",
      series: "first"
    }, {
      dataKey: 100,
      dataValue: 3,
      label: "X: 100 • Y: 3",
      series: "second"
    }, {
      dataKey: 200,
      dataValue: 3,
      label: "X: 200 • Y: 3",
      series: "second"
    }]);
  });
  it("renders a legend if dataSeries is specified", function () {
    var props = {
      data: multiSeriesData,
      dataKey: "amount",
      dataValue: "rate"
    };
    var wrapper = shallow(React.createElement(Scatterplot, props));
    expect(wrapper.find(".legend").length).to.eql(0);
    wrapper.setProps({
      dataSeries: "series"
    });
    expect(wrapper.find(".legend").length).to.eql(1);
    expect(wrapper.find(".legend").props().legendData).to.eql([{
      name: "first"
    }, {
      name: "second"
    }]);
  });
  it("renders unstructured multi-series data", function () {
    var props = {
      data: unstructuredMultiSeriesData,
      dataKey: "amount",
      dataValue: "rate",
      dataSeries: "type"
    };
    var wrapper = shallow(React.createElement(Scatterplot, props));
    expect(wrapper.find({
      title: "Scatter Plot"
    }).props().data).to.eql([{
      dataKey: 100,
      dataValue: 1,
      label: "X: 100 • Y: 1",
      series: "first"
    }, {
      dataKey: 200,
      dataValue: 2,
      label: "X: 200 • Y: 2",
      series: "first"
    }, {
      dataKey: 100,
      dataValue: 3,
      label: "X: 100 • Y: 3",
      series: "second"
    }, {
      dataKey: 200,
      dataValue: 3,
      label: "X: 200 • Y: 3",
      series: "second"
    }]);
  });
  it("renders a legend from unstructured multi-series data if dataSeries is specified", function () {
    var props = {
      data: unstructuredMultiSeriesData,
      dataKey: "amount",
      dataValue: "rate"
    };
    var wrapper = shallow(React.createElement(Scatterplot, props));
    expect(wrapper.find(".legend").length).to.eql(0);
    wrapper.setProps({
      dataSeries: "type"
    });
    expect(wrapper.find(".legend").length).to.eql(1);
    expect(wrapper.find(".legend").props().legendData).to.eql([{
      name: "first"
    }, {
      name: "second"
    }]);
  });
});