Created SortableBarGraph test

test/visits/SortableBarGraph.test.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { keys, values } from 'ramda';
+import SortableBarGraph from '../../src/visits/SortableBarGraph';
+import GraphCard from '../../src/visits/GraphCard';
+import SortingDropdown from '../../src/utils/SortingDropdown';
+
+describe('<SortableBarGraph />', () => {
+  let wrapper;
+  const sortingItems = {
+    name: 'Name',
+    amount: 'Amount',
+  };
+  const stats = {
+    Foo: 100,
+    Bar: 50,
+  };
+  const createWrapper = (extraHeaderContent = []) => {
+    wrapper = shallow(
+      <SortableBarGraph title="Foo" stats={stats} sortingItems={sortingItems} extraHeaderContent={extraHeaderContent} />
+    );
+
+    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.find(SortingDropdown);
+
+      assert = (sortName, sortDir, expectedKeys, expectedValues, done) => {
+        dropdown.prop('onChange')(sortName, sortDir);
+        setImmediate(() => {
+          const graphCard = wrapper.find(GraphCard);
+          const statsKeys = keys(graphCard.prop('stats'));
+          const statsValues = values(graphCard.prop('stats'));
+
+          expect(statsKeys).toEqual(expectedKeys);
+          expect(statsValues).toEqual(expectedValues);
+          done();
+        });
+      };
+    });
+
+    // eslint-disable-next-line no-magic-numbers
+    it('name - ASC', (done) => assert('name', 'ASC', [ 'Bar', 'Foo' ], [ 50, 100 ], done));
+
+    // eslint-disable-next-line no-magic-numbers
+    it('name - DESC', (done) => assert('name', 'DESC', [ 'Foo', 'Bar' ], [ 100, 50 ], done));
+
+    // eslint-disable-next-line no-magic-numbers
+    it('value - ASC', (done) => assert('value', 'ASC', [ 'Bar', 'Foo' ], [ 50, 100 ], done));
+
+    // eslint-disable-next-line no-magic-numbers
+    it('value - DESC', (done) => assert('value', 'DESC', [ 'Foo', 'Bar' ], [ 100, 50 ], done));
+  });
+
+  it('renders extra header functions', () => {
+    const wrapper = createWrapper([
+      () => <span className="foo-span">Foo</span>,
+      () => <span className="bar-span">Bar</span>,
+    ]);
+
+    expect(wrapper.find('.foo-span')).toHaveLength(1);
+    expect(wrapper.find('.bar-span')).toHaveLength(1);
+  });
+});