Moved some helper components for visits to visits/helpers

test/visits/helpers/GraphCard.test.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Doughnut, HorizontalBar } from 'react-chartjs-2';
+import { keys, values } from 'ramda';
+import GraphCard from '../../../src/visits/helpers/GraphCard';
+
+describe('<GraphCard />', () => {
+  let wrapper;
+  const stats = {
+    foo: 123,
+    bar: 456,
+  };
+
+  afterEach(() => wrapper && wrapper.unmount());
+
+  it('renders Doughnut when is not a bar chart', () => {
+    wrapper = shallow(<GraphCard title="The chart" stats={stats} />);
+    const doughnut = wrapper.find(Doughnut);
+    const horizontal = wrapper.find(HorizontalBar);
+
+    expect(doughnut).toHaveLength(1);
+    expect(horizontal).toHaveLength(0);
+
+    const { labels, datasets } = doughnut.prop('data');
+    const [{ title, data, backgroundColor, borderColor }] = datasets;
+    const { legend, scales } = doughnut.prop('options');
+
+    expect(title).toEqual('The chart');
+    expect(labels).toEqual(keys(stats));
+    expect(data).toEqual(values(stats));
+    expect(datasets).toHaveLength(1);
+    expect(backgroundColor).toEqual([
+      '#97BBCD',
+      '#F7464A',
+      '#46BFBD',
+      '#FDB45C',
+      '#949FB1',
+      '#57A773',
+      '#414066',
+      '#08B2E3',
+      '#B6C454',
+      '#DCDCDC',
+      '#463730',
+    ]);
+    expect(borderColor).toEqual('white');
+    expect(legend).toEqual({ position: 'right' });
+    expect(scales).toBeUndefined();
+  });
+
+  it('renders HorizontalBar when is not a bar chart', () => {
+    wrapper = shallow(<GraphCard isBarChart title="The chart" stats={stats} />);
+    const doughnut = wrapper.find(Doughnut);
+    const horizontal = wrapper.find(HorizontalBar);
+
+    expect(doughnut).toHaveLength(0);
+    expect(horizontal).toHaveLength(1);
+
+    const { datasets: [{ backgroundColor, borderColor }] } = horizontal.prop('data');
+    const { legend, scales } = horizontal.prop('options');
+
+    expect(backgroundColor).toEqual('rgba(70, 150, 229, 0.4)');
+    expect(borderColor).toEqual('rgba(70, 150, 229, 1)');
+    expect(legend).toEqual({ display: false });
+    expect(scales).toEqual({
+      xAxes: [
+        {
+          ticks: { beginAtZero: true, precision: 0 },
+          stacked: true,
+        },
+      ],
+      yAxes: [{ stacked: true }],
+    });
+  });
+
+  it.each([
+    [{ foo: 23 }, [ 100, 456 ], [ 23, 0 ]],
+    [{ foo: 50 }, [ 73, 456 ], [ 50, 0 ]],
+    [{ bar: 45 }, [ 123, 411 ], [ 0, 45 ]],
+    [{ bar: 20, foo: 13 }, [ 110, 436 ], [ 13, 20 ]],
+    [ undefined, [ 123, 456 ], undefined ],
+  ])('splits highlighted data from regular data', (highlightedStats, expectedData, expectedHighlightedData) => {
+    wrapper = shallow(<GraphCard isBarChart title="The chart" stats={stats} highlightedStats={highlightedStats} />);
+    const horizontal = wrapper.find(HorizontalBar);
+
+    const { datasets: [{ data, label }, highlightedData ] } = horizontal.prop('data');
+
+    expect(label).toEqual(highlightedStats ? 'Non-selected' : 'Visits');
+    expect(data).toEqual(expectedData);
+    expectedHighlightedData && expect(highlightedData.data).toEqual(expectedHighlightedData);
+    !expectedHighlightedData && expect(highlightedData).toBeUndefined();
+  });
+});

test/visits/helpers/SortableBarGraph.test.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { keys, range, values } from 'ramda';
+import SortableBarGraph from '../../../src/visits/helpers/SortableBarGraph';
+import GraphCard from '../../../src/visits/helpers/GraphCard';
+import SortingDropdown from '../../../src/utils/SortingDropdown';
+import PaginationDropdown from '../../../src/utils/PaginationDropdown';
+import { rangeOf } from '../../../src/utils/utils';
+
+describe('<SortableBarGraph />', () => {
+  let wrapper;
+  const sortingItems = {
+    name: 'Name',
+    amount: 'Amount',
+  };
+  const stats = {
+    Foo: 100,
+    Bar: 50,
+  };
+  const createWrapper = (withPagination = false, extraStats = {}) => {
+    wrapper = shallow(
+      <SortableBarGraph
+        title="Foo"
+        stats={{ ...stats, ...extraStats }}
+        sortingItems={sortingItems}
+        withPagination={withPagination}
+      />
+    );
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper && wrapper.unmount());
+
+  it('renders stats unchanged when no ordering is set', () => {
+    const wrapper = createWrapper();
+    const graphCard = wrapper.find(GraphCard);
+
+    expect(graphCard.prop('stats')).toEqual(stats);
+  });
+
+  describe('renders properly ordered stats when ordering is set', () => {
+    let assert;
+
+    beforeEach(() => {
+      const wrapper = createWrapper();
+      const dropdown = wrapper.renderProp('title')().find(SortingDropdown);
+
+      assert = (sortName, sortDir, expectedKeys, expectedValues, done) => {
+        dropdown.prop('onChange')(sortName, sortDir);
+        setImmediate(() => {
+          const stats = wrapper.find(GraphCard).prop('stats');
+
+          expect(keys(stats)).toEqual(expectedKeys);
+          expect(values(stats)).toEqual(expectedValues);
+          done();
+        });
+      };
+    });
+
+    it('name - ASC', (done) => assert('name', 'ASC', [ 'Bar', 'Foo' ], [ 50, 100 ], done));
+    it('name - DESC', (done) => assert('name', 'DESC', [ 'Foo', 'Bar' ], [ 100, 50 ], done));
+    it('value - ASC', (done) => assert('value', 'ASC', [ 'Bar', 'Foo' ], [ 50, 100 ], done));
+    it('value - DESC', (done) => assert('value', 'DESC', [ 'Foo', 'Bar' ], [ 100, 50 ], done));
+  });
+
+  describe('renders properly paginated stats when pagination is set', () => {
+    let assert;
+
+    beforeEach(() => {
+      const wrapper = createWrapper(true, range(1, 159).reduce((accum, value) => {
+        accum[`key_${value}`] = value;
+
+        return accum;
+      }, {}));
+      const dropdown = wrapper.renderProp('title')().find(PaginationDropdown);
+
+      assert = (itemsPerPage, expectedStats, done) => {
+        dropdown.prop('setValue')(itemsPerPage);
+        setImmediate(() => {
+          const stats = wrapper.find(GraphCard).prop('stats');
+
+          expect(keys(stats)).toEqual(expectedStats);
+          done();
+        });
+      };
+    });
+
+    const buildExpected = (size) => [ 'Foo', 'Bar', ...rangeOf(size - 2, (i) => `key_${i}`) ];
+
+    it('50 items per page', (done) => assert(50, buildExpected(50), done));
+    it('100 items per page', (done) => assert(100, buildExpected(100), done));
+    it('200 items per page', (done) => assert(200, buildExpected(160), done));
+    it('500 items per page', (done) => assert(500, buildExpected(160), done));
+  });
+
+  it('renders extra header content', () => {
+    wrapper = shallow(
+      <span>
+        <SortableBarGraph
+          title="Foo"
+          stats={stats}
+          sortingItems={sortingItems}
+          extraHeaderContent={() => (
+            <span>
+              <span className="foo-span">Foo</span>
+              <span className="bar-span">Bar</span>
+            </span>
+          )}
+        />
+      </span>
+    ).find(SortableBarGraph);
+    const header = wrapper.renderProp('extraHeaderContent')();
+
+    expect(header.find('.foo-span')).toHaveLength(1);
+    expect(header.find('.bar-span')).toHaveLength(1);
+  });
+});