Refactor of DataListToolbar. Creates a number of smaller components used by the toolbar. Adds support for passing in an add button node to the toolbar.

__tests__/components/ExpandCollapse.test.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { I18nProvider } from '@lingui/react';
+import ExpandCollapse from '../../src/components/ExpandCollapse';
+
+describe('<ExpandCollapse />', () => {
+  const onCompact = jest.fn();
+  const onExpand = jest.fn();
+  const isCompact = false;
+  test('initially renders without crashing', () => {
+    const wrapper = mount(
+      <I18nProvider>
+        <ExpandCollapse
+          onCompact={onCompact}
+          onExpand={onExpand}
+          isCompact={isCompact}
+        />
+      </I18nProvider>
+    );
+    expect(wrapper.length).toBe(1);
+    wrapper.unmount();
+  });
+});

__tests__/components/Search.test.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { I18nProvider } from '@lingui/react';
+import Search from '../../src/components/Search';
+
+describe('<Search />', () => {
+  let search;
+
+  afterEach(() => {
+    if (search) {
+      search.unmount();
+      search = null;
+    }
+  });
+
+  test('it triggers the expected callbacks', () => {
+    const columns = [{ name: 'Name', key: 'name', isSortable: true }];
+
+    const searchBtn = 'button[aria-label="Search"]';
+    const searchTextInput = 'input[aria-label="Search text input"]';
+
+    const onSearch = jest.fn();
+
+    search = mount(
+      <I18nProvider>
+        <Search
+          sortedColumnKey="name"
+          columns={columns}
+          onSearch={onSearch}
+        />
+      </I18nProvider>
+    );
+
+    search.find(searchTextInput).instance().value = 'test-321';
+    search.find(searchTextInput).simulate('change');
+    search.find(searchBtn).simulate('click');
+
+    expect(onSearch).toHaveBeenCalledTimes(1);
+    expect(onSearch).toBeCalledWith('test-321');
+  });
+
+  test('onSearchDropdownToggle properly updates state', async () => {
+    const columns = [{ name: 'Name', key: 'name', isSortable: true }];
+    const onSearch = jest.fn();
+    const wrapper = mount(
+      <I18nProvider>
+        <Search
+          sortedColumnKey="name"
+          columns={columns}
+          onSearch={onSearch}
+        />
+      </I18nProvider>
+    ).find('Search');
+    expect(wrapper.state('isSearchDropdownOpen')).toEqual(false);
+    wrapper.instance().onSearchDropdownToggle(true);
+    expect(wrapper.state('isSearchDropdownOpen')).toEqual(true);
+  });
+
+  test('onSearchDropdownSelect properly updates state', async () => {
+    const columns = [
+      { name: 'Name', key: 'name', isSortable: true },
+      { name: 'Description', key: 'description', isSortable: true }
+    ];
+    const onSearch = jest.fn();
+    const wrapper = mount(
+      <I18nProvider>
+        <Search
+          sortedColumnKey="name"
+          columns={columns}
+          onSearch={onSearch}
+        />
+      </I18nProvider>
+    ).find('Search');
+    expect(wrapper.state('searchKey')).toEqual('name');
+    wrapper.instance().onSearchDropdownSelect({ target: { innerText: 'Description' } });
+    expect(wrapper.state('searchKey')).toEqual('description');
+  });
+});

__tests__/components/Sort.test.jsx

@@ -0,0 +1,208 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { I18nProvider } from '@lingui/react';
+import Sort from '../../src/components/Sort';
+
+describe('<Sort />', () => {
+  let sort;
+
+  afterEach(() => {
+    if (sort) {
+      sort.unmount();
+      sort = null;
+    }
+  });
+
+  test('it triggers the expected callbacks', () => {
+    const columns = [{ name: 'Name', key: 'name', isSortable: true }];
+
+    const sortBtn = 'button[aria-label="Sort"]';
+
+    const onSort = jest.fn();
+
+    const wrapper = mount(
+      <I18nProvider>
+        <Sort
+          sortedColumnKey="name"
+          sortOrder="ascending"
+          columns={columns}
+          onSort={onSort}
+        />
+      </I18nProvider>
+    ).find('Sort');
+
+    wrapper.find(sortBtn).simulate('click');
+
+    expect(onSort).toHaveBeenCalledTimes(1);
+    expect(onSort).toBeCalledWith('name', 'descending');
+  });
+
+  test('onSort properly passes back descending when ascending was passed as prop', () => {
+    const multipleColumns = [
+      { name: 'Foo', key: 'foo', isSortable: true },
+      { name: 'Bar', key: 'bar', isSortable: true },
+      { name: 'Bakery', key: 'bakery', isSortable: true },
+      { name: 'Baz', key: 'baz' }
+    ];
+
+    const onSort = jest.fn();
+
+    const wrapper = mount(
+      <I18nProvider>
+        <Sort
+          sortedColumnKey="foo"
+          sortOrder="ascending"
+          columns={multipleColumns}
+          onSort={onSort}
+        />
+      </I18nProvider>
+    ).find('Sort');
+    const sortDropdownToggle = wrapper.find('Button');
+    expect(sortDropdownToggle.length).toBe(1);
+    sortDropdownToggle.simulate('click');
+    expect(onSort).toHaveBeenCalledWith('foo', 'descending');
+  });
+
+  test('onSort properly passes back ascending when descending was passed as prop', () => {
+    const multipleColumns = [
+      { name: 'Foo', key: 'foo', isSortable: true },
+      { name: 'Bar', key: 'bar', isSortable: true },
+      { name: 'Bakery', key: 'bakery', isSortable: true },
+      { name: 'Baz', key: 'baz' }
+    ];
+
+    const onSort = jest.fn();
+
+    const wrapper = mount(
+      <I18nProvider>
+        <Sort
+          sortedColumnKey="foo"
+          sortOrder="descending"
+          columns={multipleColumns}
+          onSort={onSort}
+        />
+      </I18nProvider>
+    ).find('Sort');
+    const sortDropdownToggle = wrapper.find('Button');
+    expect(sortDropdownToggle.length).toBe(1);
+    sortDropdownToggle.simulate('click');
+    expect(onSort).toHaveBeenCalledWith('foo', 'ascending');
+  });
+
+  test('Changing dropdown correctly passes back new sort key', () => {
+    const multipleColumns = [
+      { name: 'Foo', key: 'foo', isSortable: true },
+      { name: 'Bar', key: 'bar', isSortable: true },
+      { name: 'Bakery', key: 'bakery', isSortable: true },
+      { name: 'Baz', key: 'baz' }
+    ];
+
+    const onSort = jest.fn();
+
+    const wrapper = mount(
+      <I18nProvider>
+        <Sort
+          sortedColumnKey="foo"
+          sortOrder="ascending"
+          columns={multipleColumns}
+          onSort={onSort}
+        />
+      </I18nProvider>
+    ).find('Sort');
+
+    wrapper.instance().onSortDropdownSelect({ target: { innerText: 'Bar' } });
+    expect(onSort).toBeCalledWith('bar', 'ascending');
+  });
+
+  test('Opening dropdown correctly updates state', () => {
+    const multipleColumns = [
+      { name: 'Foo', key: 'foo', isSortable: true },
+      { name: 'Bar', key: 'bar', isSortable: true },
+      { name: 'Bakery', key: 'bakery', isSortable: true },
+      { name: 'Baz', key: 'baz' }
+    ];
+
+    const onSort = jest.fn();
+
+    const wrapper = mount(
+      <I18nProvider>
+        <Sort
+          sortedColumnKey="foo"
+          sortOrder="ascending"
+          columns={multipleColumns}
+          onSort={onSort}
+        />
+      </I18nProvider>
+    ).find('Sort');
+    expect(wrapper.state('isSortDropdownOpen')).toEqual(false);
+    wrapper.instance().onSortDropdownToggle(true);
+    expect(wrapper.state('isSortDropdownOpen')).toEqual(true);
+  });
+
+  test('It displays correct sort icon', () => {
+    const downNumericIconSelector = 'SortNumericDownIcon';
+    const upNumericIconSelector = 'SortNumericUpIcon';
+    const downAlphaIconSelector = 'SortAlphaDownIcon';
+    const upAlphaIconSelector = 'SortAlphaUpIcon';
+
+    const numericColumns = [{ name: 'ID', key: 'id', isSortable: true, isNumeric: true }];
+    const alphaColumns = [{ name: 'Name', key: 'name', isSortable: true, isNumeric: false }];
+    const onSort = jest.fn();
+
+    sort = mount(
+      <I18nProvider>
+        <Sort
+          sortedColumnKey="id"
+          sortOrder="descending"
+          columns={numericColumns}
+          onSort={onSort}
+        />
+      </I18nProvider>
+    );
+
+    const downNumericIcon = sort.find(downNumericIconSelector);
+    expect(downNumericIcon.length).toBe(1);
+
+    sort = mount(
+      <I18nProvider>
+        <Sort
+          sortedColumnKey="id"
+          sortOrder="ascending"
+          columns={numericColumns}
+          onSort={onSort}
+        />
+      </I18nProvider>
+    );
+
+    const upNumericIcon = sort.find(upNumericIconSelector);
+    expect(upNumericIcon.length).toBe(1);
+
+    sort = mount(
+      <I18nProvider>
+        <Sort
+          sortedColumnKey="name"
+          sortOrder="descending"
+          columns={alphaColumns}
+          onSort={onSort}
+        />
+      </I18nProvider>
+    );
+
+    const downAlphaIcon = sort.find(downAlphaIconSelector);
+    expect(downAlphaIcon.length).toBe(1);
+
+    sort = mount(
+      <I18nProvider>
+        <Sort
+          sortedColumnKey="name"
+          sortOrder="ascending"
+          columns={alphaColumns}
+          onSort={onSort}
+        />
+      </I18nProvider>
+    );
+
+    const upAlphaIcon = sort.find(upAlphaIconSelector);
+    expect(upAlphaIcon.length).toBe(1);
+  });
+});