Revise tests for bar components

src/ui/bar/test/bars.test.js

@@ -2,23 +2,21 @@ import React from 'react';
 import chai, { expect } from 'chai';
 import chaiEnzyme from 'chai-enzyme';
 import { shallow } from 'enzyme';
-import drop from 'lodash/drop';
-import maxBy from 'lodash/maxBy';
-import minBy from 'lodash/minBy';
-import map from 'lodash/map';
-import uniqBy from 'lodash/uniqBy';
-import { scaleLinear, scaleBand } from 'd3';
+import noop from 'lodash/noop';
 import { dataGenerator } from '../../../utils';
 
-import { Bars, Bar } from '../';
+import {
+  Bar,
+  Bars,
+} from '../';
 
 chai.use(chaiEnzyme());
 
 describe('<Bars />', () => {
   const yearField = 'year_id';
   const populationField = 'population';
 
-  const years = [2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009];
+  const years = [2016, 2017, 2018];
 
   const data = dataGenerator({
     primaryKeys: [{
@@ -39,8 +37,8 @@ describe('<Bars />', () => {
     height: 400
   };
 
-  const focus = data[2];
-  const selection = [data[1], data[3]];
+  const focus = data[0];
+  const selection = [data[1], data[2]];
 
   const component = (
     <Bars
@@ -51,34 +49,49 @@ describe('<Bars />', () => {
         value: populationField,
       }}
       fill="steelblue"
+      className="bars"
+      style={{ strokeWeight: 2 }}
+      rectClassName="bar"
+      rectStyle={{ opacity: 0.9 }}
       focus={focus}
       focusedClassName="focused"
+      focusedStyle={{ stroke: 'yellow' }}
       selection={selection}
       selectedClassName="selected"
-      selectedStyle={{ stroke: 'aqua' }}
-      rectClassName="symbol"
-      rectStyle={{ fill: 'bluesteel' }}
+      selectedStyle={{ stroke: 'red' }}
+      onClick={noop}
+      onMouseLeave={noop}
+      onMouseMove={noop}
+      onMouseOver={noop}
       {...chartDimensions}
     />
   );
 
-  it('renders number of bars based on array length of prop `data`', () => {
+  it('renders a `Bar` component for each element in `data`', () => {
     const wrapper = shallow(component);
     expect(wrapper.find(Bar)).to.have.length(data.length);
   });
 
-  it('passes specified properties to its children', () => {
+  it('passes specified properties to its descendant `Bar` components', () => {
     const inheritedProps = [
+      'x',
+      'y',
+      'height',
+      'width',
+      'datum',
       'className',
+      'fill',
+      'style',
+      'focused',
       'focusedClassName',
       'focusedStyle',
+      'selected',
+      'selectedClassName',
+      'selectedStyle',
       'onClick',
       'onMouseLeave',
       'onMouseMove',
       'onMouseOver',
-      'selectedClassName',
-      'selectedStyle',
-      'style',
     ];
 
     const assertion = (bar) => {
@@ -90,13 +103,18 @@ describe('<Bars />', () => {
     shallow(component).find(Bar).forEach(assertion);
   });
 
-  it('selects a bar when prop `selection` is passed', () => {
+  it('focuses on a `Bar` whose `datum` prop matches the value of prop `focus`', () => {
     const wrapper = shallow(component);
-    expect(wrapper.find({ selected: true })).to.have.length(selection.length);
+    const focusedBar = wrapper.find(Bar).filter({
+      focused: true,
+      datum: focus,
+    });
+    expect(focusedBar).to.have.length(1);
   });
 
-  it('focuses on a bar when prop `focused` is passed', () => {
+  it('selects every `Bar` whose `datum` prop is included in prop `selection`', () => {
     const wrapper = shallow(component);
-    expect(wrapper.find({ focused: true })).to.have.length(1);
+    const selectedBars = wrapper.find(Bar).filter({ selected: true });
+    expect(selectedBars).to.have.length(selection.length);
   });
 });

src/ui/bar/test/grouped-bars.test.js

@@ -2,9 +2,8 @@ import React from 'react';
 import chai, { expect } from 'chai';
 import chaiEnzyme from 'chai-enzyme';
 import { shallow } from 'enzyme';
-import maxBy from 'lodash/maxBy';
 import noop from 'lodash/noop';
-import { schemeCategory10, scaleLinear, scaleBand, scaleOrdinal } from 'd3';
+import { schemeCategory10, scaleOrdinal } from 'd3';
 import { dataGenerator } from '../../../utils';
 
 import {
@@ -15,73 +14,65 @@ import {
 chai.use(chaiEnzyme());
 
 describe('<GroupedBars />', () => {
-  const yearField = 'year_id';
-  const populationField = 'population';
-  const locationField = 'location';
+  const chartDimensions = {
+    width: 600,
+    height: 400,
+  };
+
+  // used to compute fill color
+  const colorScale = scaleOrdinal(schemeCategory10);
+
+  // groups
+  const categoryField = 'location';
+  const categories = ['Brazil', 'Russia'];
+  // subgroups
+  const subcategoryField = 'year_id';
+  const subcategories = [2016, 2017, 2018];
 
-  const years = [2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007];
-  const locations = [
-    'Brazil',
-    'Russia',
-    'India',
-    'China',
-    'Mexico',
-    'Indonesia',
-    'Nigeria',
-    'Vietnam',
-  ];
+  const valueField = 'population';
 
   const data = dataGenerator({
     primaryKeys: [{
-      name: 'location',
-      values: locations,
+      name: categoryField,
+      values: categories,
     }],
     valueKeys: [{
-      name: populationField,
+      name: valueField,
       range: [100, 900],
-      uncertainty: true
+      uncertainty: false,
     }],
-    year: years[0],
-    length: years.length,
+    year: subcategories[0],
+    length: subcategories.length,
   });
 
-  const chartDimensions = {
-    width: 600,
-    height: 400,
-  };
-
-  const dataRange = [0, maxBy(data, populationField)[populationField]];
-  const colorScale = scaleOrdinal(schemeCategory10);
-
-  const domainScale = scaleBand()
-    .domain(locations)
-    .range([0, chartDimensions.width]);
-  const rangeScale = scaleLinear()
-    .domain(dataRange)
-    .range([chartDimensions.height, 0]);
+  const focus = data[0];
+  const selection = [data[1], data[2]];
 
   const component = (
     <GroupedBars
-      categories={locations}
-      subcategories={years}
+      categories={categories}
+      subcategories={subcategories}
       data={data}
       dataAccessors={{
-        category: locationField,
-        subcategory: yearField,
-        value: populationField,
+        category: categoryField,
+        subcategory: subcategoryField,
+        value: valueField,
       }}
-      rectClassName="grouped-bars"
-      fill={(datum) => colorScale(datum[yearField])}
+      fill={(datum) => colorScale(datum[subcategoryField])}
+      className="bars"
+      style={{ strokeWeight: 2 }}
+      rectClassName="bar"
+      rectStyle={{ opacity: 0.9 }}
+      focus={focus}
       focusedClassName="focused"
       focusedStyle={{ stroke: 'yellow' }}
-      focus={data[0]}
+      selection={selection}
+      selectedClassName="selected"
+      selectedStyle={{ stroke: 'red' }}
       onClick={noop}
       onMouseLeave={noop}
       onMouseMove={noop}
       onMouseOver={noop}
-      selectedClassName="selected"
-      selectedStyle={{ stroke: 'red' }}
-      style={{ strokeWeight: 2 }}
       {...chartDimensions}
     />
   );
@@ -91,12 +82,12 @@ describe('<GroupedBars />', () => {
   //   test that it can render with scales
   //   test that it determines positioning correctly
 
-  it('renders number of a `Bar` for each element in `data`', () => {
+  it('renders a `Bar` component for each element in `data`', () => {
     const wrapper = shallow(component);
     expect(wrapper.find(Bar)).to.have.length(data.length);
   });
 
-  it('passes specified properties to its children', () => {
+  it('passes specified properties to its descendant `Bar` components', () => {
     const childProps = [
       'x',
       'y',
@@ -124,4 +115,19 @@ describe('<GroupedBars />', () => {
       });
     });
   });
+
+  it('focuses on a `Bar` whose `datum` prop matches the value of prop `focus`', () => {
+    const wrapper = shallow(component);
+    const focusedBar = wrapper.find(Bar).filter({
+      focused: true,
+      datum: focus,
+    });
+    expect(focusedBar).to.have.length(1);
+  });
+
+  it('selects every `Bar` whose `datum` prop is included in prop `selection`', () => {
+    const wrapper = shallow(component);
+    const selectedBars = wrapper.find(Bar).filter({ selected: true });
+    expect(selectedBars).to.have.length(selection.length);
+  });
 });