From 105bd36a5ea966f29f5d596bee6775931d6ec11f Mon Sep 17 00:00:00 2001
From: Allen <ayu780129@hotmail.com>
Date: Tue, 10 Oct 2017 02:28:25 -0500
Subject: [PATCH] refine #78

* refine #78

* patch docs for caption prop
---
 docs/README.md                                     |  4 ++++
 .../{table-with-caption.js => caption-table.js}    |  0
 .../stories/index.js                               |  4 ++--
 .../test/bootstrap-table.test.js                   | 14 ++++++++++++--
 4 files changed, 18 insertions(+), 4 deletions(-)
 rename packages/react-bootstrap-table2-example/examples/basic/{table-with-caption.js => caption-table.js} (100%)

diff --git a/docs/README.md b/docs/README.md
index 3b7311f..3150a7b 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -8,6 +8,7 @@
 * [columns (**required**)](#columns)
 
 #### Optional
+* [caption](#caption)
 * [striped](#striped)
 * [bordered](#bordered)
 * [hover](#hover)
@@ -23,6 +24,9 @@ Assign your table data via `data` prop. It only accept an Array object.
 ### <a name='columns'>columns(**required**) - [Object]</a>
 `columns` props accept an Array object, please see [columns definition](./columns.md) for more detail.
 
+### <a name='caption'>caption - [String | Node]</a>
+Same as [caption tag](https://www.w3schools.com/TAgs/tag_caption.asp) in HTML. You can give a String or a React JSX.
+
 ### <a name='striped'>striped - [Bool]</a>
 Same as `.table-striped` class for adding zebra-stripes to a table
 ### <a name='bordered'>bordered - [Bool]</a>
diff --git a/packages/react-bootstrap-table2-example/examples/basic/table-with-caption.js b/packages/react-bootstrap-table2-example/examples/basic/caption-table.js
similarity index 100%
rename from packages/react-bootstrap-table2-example/examples/basic/table-with-caption.js
rename to packages/react-bootstrap-table2-example/examples/basic/caption-table.js
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 0b76845..62829ef 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -9,7 +9,7 @@ import BasicTable from 'examples/basic';
 import BorderlessTable from 'examples/basic/borderless-table';
 import StripHoverCondensedTable from 'examples/basic/striped-hover-condensed-table';
 import NoDataTable from 'examples/basic/no-data-table';
-import TableWithCaption from 'examples/basic/table-with-caption';
+import CaptionTable from 'examples/basic/caption-table';
 
 // work on columns
 import NestedDataTable from 'examples/columns/nested-data-table';
@@ -63,7 +63,7 @@ storiesOf('Basic Table', module)
   .add('striped, hover, condensed table', () => <StripHoverCondensedTable />)
   .add('borderless table', () => <BorderlessTable />)
   .add('Indication For Empty Table', () => <NoDataTable />)
-  .add('Table with caption', () => <TableWithCaption />);
+  .add('Table with caption', () => <CaptionTable />);
 
 storiesOf('Work on Columns', module)
   .add('Display Nested Data', () => <NestedDataTable />)
diff --git a/packages/react-bootstrap-table2/test/bootstrap-table.test.js b/packages/react-bootstrap-table2/test/bootstrap-table.test.js
index 71cf0e4..e426a5a 100644
--- a/packages/react-bootstrap-table2/test/bootstrap-table.test.js
+++ b/packages/react-bootstrap-table2/test/bootstrap-table.test.js
@@ -2,6 +2,7 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
+import Caption from '../src/caption';
 import Header from '../src/header';
 import Body from '../src/body';
 import BootstrapTable from '../src/bootstrap-table';
@@ -91,10 +92,19 @@ describe('BootstrapTable', () => {
 
   describe('when table should have a caption', () => {
     beforeEach(() => {
-      wrapper = shallow(<BootstrapTable caption={<span className="table-caption">test</span>} keyField="id" columns={ columns } data={ data } bordered={ false } />);
+      wrapper = shallow(
+        <BootstrapTable
+          caption={ <span className="table-caption">test</span> }
+          keyField="id"
+          columns={ columns }
+          data={ data }
+          bordered={ false }
+        />
+      );
     });
 
-    it('should render caption', () => {
+    it('should render caption correctly', () => {
+      expect(wrapper.find(Caption).length).toBe(1);
       expect(wrapper.find('.table-caption').length).toBe(1);
     });
   });