Merge branch 'feature/41-manually-set-sort-direction-in-table' into d…

…evelop
gumgum · Oct 19, 2018 · 860183e · 860183e
2 parents 5d44f76 + 8d67358
commit 860183e
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 4 deletions.
diff --git a/_stories/molecules/Table/README.md b/_stories/molecules/Table/README.md
@@ -135,19 +135,21 @@ const People = () => <Table columns={columns} data={data} />;
 
 ### Custom Heading Props
 
-Props can be passed to the `<TableHeading>` component with the `headingProp` property.
+Props can be passed to the `<TableHeading>` component with the `headingProps` property. This is useful when you need to size columns or sort the table data externally such as from an API.
 
 ```jsx
 const columnsAdvanced = [
     { key: 'name' },
     {
         key: 'title',
+        disableSorting: true,
         headingProps: {
             className: 'custom-class',
             style: {
                 width: '10%'
             },
-            onClick: event => {}
+            onClick: this.sortColumn('title'), // sorting handled externally
+            sortDirection: this.state.sortDirection // one of 'asc' or 'desc'
         }
     },
     { key: 'age' },

diff --git a/_tests/atoms/__snapshots__/Button.test.js.snap b/_tests/atoms/__snapshots__/Button.test.js.snap
@@ -4,6 +4,7 @@ exports[`Expect <Button> to render 1`] = `
 <Button
   className="foo-class"
   context="danger"
+  group={false}
   isBlock={false}
   isGroup={false}
   onBlur={[Function]}
@@ -38,6 +39,7 @@ exports[`Expect <Button> to renders as a blocked button 1`] = `
 <Button
   className="foo-class"
   context="danger"
+  group={false}
   isBlock={true}
   isGroup={false}
   onBlur={[Function]}
@@ -72,6 +74,7 @@ exports[`Expect <Button> to renders as a group button 1`] = `
 <Button
   className="foo-class"
   context="danger"
+  group={false}
   isBlock={false}
   isGroup={true}
   onBlur={[Function]}

diff --git a/_tests/molecules/Table.test.js b/_tests/molecules/Table.test.js
@@ -58,4 +58,63 @@ describe('Expect <Table>', () => {
         const wrapper = mount(<Table {...props} />);
         expect(wrapper).toMatchSnapshot();
     });
+
+    it('sorts by alpha ascending/descending order when a heading is clicked', () => {
+        const props = {
+            hasHeader: true,
+            columns: ['foo'],
+            data: [{ foo: 'zoo' }, { foo: 'bar' }, { foo: 'ok' }]
+        };
+        const curOrder = ['zoo', 'bar', 'ok'];
+        const asc = ['bar', 'ok', 'zoo'];
+        const desc = ['zoo', 'ok', 'bar'];
+
+        const wrapper = mount(<Table {...props} />);
+        const data = wrapper.find('td');
+        data.forEach((node, i) => expect(node.text()).toBe(curOrder[i]));
+
+        const heading = wrapper.find('TableHeading');
+        heading.simulate('click');
+        data.forEach((node, i) => expect(node.text()).toBe(asc[i]));
+
+        heading.simulate('click');
+        data.forEach((node, i) => expect(node.text()).toBe(desc[i]));
+    });
+
+    it('sorts by numeric ascending/descending order when a heading is clicked', () => {
+        const props = {
+            hasHeader: true,
+            columns: ['foo'],
+            data: [{ foo: 1235 }, { foo: 99 }, { foo: 180 }]
+        };
+        const curOrder = [1235, 99, 180];
+        const asc = [99, 180, 1235];
+        const desc = [1235, 180, 99];
+
+        const wrapper = mount(<Table {...props} />);
+        const data = wrapper.find('td');
+        data.forEach((node, i) => expect(parseInt(node.text())).toEqual(curOrder[i]));
+
+        const heading = wrapper.find('TableHeading');
+        heading.simulate('click');
+        data.forEach((node, i) => expect(parseInt(node.text())).toEqual(asc[i]));
+
+        heading.simulate('click');
+        data.forEach((node, i) => expect(parseInt(node.text())).toEqual(desc[i]));
+    });
+
+    it('manually set sort direction', () => {
+        const props = {
+            hasHeader: true,
+            columns: [{ key: 'foo', children: 'Foo', headingProps: { sortDirection: 'asc' } }],
+            data: [{ foo: 'bar' }]
+        };
+
+        const wrapper = mount(<Table {...props} />);
+        expect(wrapper.find('th').hasClass('gds-table__header--sort-asc')).toEqual(true);
+        wrapper.setProps({
+            columns: [{ key: 'foo', children: 'Foo', headingProps: { sortDirection: 'desc' } }]
+        });
+        expect(wrapper.find('th').hasClass('gds-table__header--sort-desc')).toEqual(true);
+    });
 });
diff --git a/components/molecules/Table.jsx b/components/molecules/Table.jsx
@@ -123,13 +123,13 @@ class Table extends Component {
 
                                 return (
                                     <Heading
-                                        {...headingProps}
                                         isSecondary={isSecondary}
                                         key={reactKey}
                                         onClick={onClickHeading}
                                         sortDirection={
                                             sortBy.key === key ? sortBy.direction : undefined
-                                        }>
+                                        }
+                                        {...headingProps}>
                                         {children}
                                     </Heading>
                                 );