diff --git a/README-zh_CN.md b/README-zh_CN.md
index 2fead4df9..83ff673a3 100644
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -6,6 +6,7 @@
# [Ant Design Vue](https://vuecomponent.github.io/ant-design/)
[](https://travis-ci.org/vueComponent/ant-design)
+[](https://codecov.io/gh/vueComponent/ant-design)
[](https://beta.gemnasium.com/projects/github.com/vueComponent/ant-design)
[](https://www.npmjs.org/package/vue-antd-ui)
[](http://www.npmtrends.com/vue-antd-ui)
diff --git a/README.md b/README.md
index 70c435791..3b2d6520c 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,7 @@
# [Ant Design Vue](https://vuecomponent.github.io/ant-design/)
[](https://travis-ci.org/vueComponent/ant-design)
+[](https://codecov.io/gh/vueComponent/ant-design)
[](https://beta.gemnasium.com/projects/github.com/vueComponent/ant-design)
[](https://www.npmjs.org/package/vue-antd-ui)
[](http://www.npmtrends.com/vue-antd-ui)
diff --git a/components/_util/ContainerRender.jsx b/components/_util/ContainerRender.jsx
index 523922b95..9540e6db4 100644
--- a/components/_util/ContainerRender.jsx
+++ b/components/_util/ContainerRender.jsx
@@ -1,8 +1,6 @@
import Vue from 'vue'
import PropTypes from './vue-types'
-import antRefDirective from './antRefDirective'
-Vue.use(antRefDirective)
export default {
props: {
diff --git a/components/calendar/__tests__/__snapshots__/demo.test.js.snap b/components/calendar/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..46891212f
--- /dev/null
+++ b/components/calendar/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,1658 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
+<div class=" ant-fullcalendar-fullscreen">
+ <div class="ant-fullcalendar-header">
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled ant-fullcalendar-year-select">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="2016" class="ant-select-selection-selected-value" style="display:block;opacity:1;">2016</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled ant-fullcalendar-month-select">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="Nov" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Nov</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <div class="ant-radio-group ant-radio-group-default">
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Month</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Year</span></label>
+ </div>
+ </div>
+ <div tabIndex="0" class="ant-fullcalendar ant-fullcalendar-full ant-fullcalendar-fullscreen">
+ <div class="ant-fullcalendar-calendar-body">
+ <table cellSpacing="0" role="grid" class="ant-fullcalendar-table">
+ <thead>
+ <tr role="row">
+ <th role="columnheader" title="Sun" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Su</span></th>
+ <th role="columnheader" title="Mon" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Mo</span></th>
+ <th role="columnheader" title="Tue" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Tu</span></th>
+ <th role="columnheader" title="Wed" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">We</span></th>
+ <th role="columnheader" title="Thu" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Th</span></th>
+ <th role="columnheader" title="Fri" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Fr</span></th>
+ <th role="columnheader" title="Sat" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Sa</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-fullcalendar-tbody">
+ <tr role="row">
+ <td role="gridcell" title="October 30, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">30</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="October 31, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell ant-fullcalendar-last-day-of-month">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">31</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 1, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">01</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 2, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">02</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 3, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">03</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 4, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">04</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 5, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">05</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="November 6, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">06</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 7, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">07</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 8, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">08</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 9, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">09</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 10, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">10</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 11, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">11</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 12, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">12</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="November 13, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">13</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 14, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">14</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 15, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">15</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 16, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">16</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 17, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">17</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 18, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">18</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 19, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">19</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row" class="ant-fullcalendar-current-week ant-fullcalendar-active-week">
+ <td role="gridcell" title="November 20, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">20</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 21, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">21</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 22, 2016" class="ant-fullcalendar-cell ant-fullcalendar-today ant-fullcalendar-selected-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">22</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 23, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">23</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 24, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">24</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 25, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">25</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 26, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">26</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="November 27, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">27</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 28, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">28</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 29, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">29</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 30, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">30</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 1, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">01</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 2, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">02</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 3, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">03</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="December 4, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">04</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 5, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">05</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 6, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">06</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 7, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">07</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 8, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">08</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 9, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">09</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 10, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">10</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
+<div style="width:300px;border:1px solid #d9d9d9;border-radius:4px;">
+ <div>
+ <div class="ant-fullcalendar-header">
+ <div class="ant-select-sm ant-select ant-select-enabled ant-select-sm ant-select ant-select-enabled ant-select-sm ant-fullcalendar-year-select">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="2016" class="ant-select-selection-selected-value" style="display:block;opacity:1;">2016</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <div class="ant-select-sm ant-select ant-select-enabled ant-select-sm ant-select ant-select-enabled ant-select-sm ant-fullcalendar-month-select">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="Nov" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Nov</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <div class="ant-radio-group ant-radio-group-small">
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Month</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Year</span></label>
+ </div>
+ </div>
+ <div tabIndex="0" class="ant-fullcalendar ant-fullcalendar-full">
+ <div class="ant-fullcalendar-calendar-body">
+ <table cellSpacing="0" role="grid" class="ant-fullcalendar-table">
+ <thead>
+ <tr role="row">
+ <th role="columnheader" title="Sun" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Su</span></th>
+ <th role="columnheader" title="Mon" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Mo</span></th>
+ <th role="columnheader" title="Tue" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Tu</span></th>
+ <th role="columnheader" title="Wed" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">We</span></th>
+ <th role="columnheader" title="Thu" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Th</span></th>
+ <th role="columnheader" title="Fri" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Fr</span></th>
+ <th role="columnheader" title="Sat" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Sa</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-fullcalendar-tbody">
+ <tr role="row">
+ <td role="gridcell" title="October 30, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">30</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="October 31, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell ant-fullcalendar-last-day-of-month">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">31</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 1, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">01</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 2, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">02</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 3, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">03</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 4, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">04</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 5, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">05</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="November 6, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">06</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 7, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">07</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 8, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">08</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 9, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">09</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 10, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">10</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 11, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">11</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 12, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">12</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="November 13, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">13</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 14, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">14</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 15, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">15</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 16, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">16</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 17, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">17</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 18, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">18</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 19, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">19</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row" class="ant-fullcalendar-current-week ant-fullcalendar-active-week">
+ <td role="gridcell" title="November 20, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">20</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 21, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">21</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 22, 2016" class="ant-fullcalendar-cell ant-fullcalendar-today ant-fullcalendar-selected-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">22</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 23, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">23</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 24, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">24</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 25, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">25</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 26, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">26</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="November 27, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">27</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 28, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">28</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 29, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">29</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 30, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">30</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 1, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">01</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 2, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">02</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 3, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">03</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="December 4, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">04</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 5, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">05</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 6, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">06</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 7, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">07</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 8, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">08</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 9, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">09</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 10, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">10</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
+<div class=" ant-fullcalendar-fullscreen">
+ <div class="ant-fullcalendar-header">
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled ant-fullcalendar-year-select">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="2016" class="ant-select-selection-selected-value" style="display:block;opacity:1;">2016</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled ant-fullcalendar-month-select">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="Nov" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Nov</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <div class="ant-radio-group ant-radio-group-default">
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Month</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Year</span></label>
+ </div>
+ </div>
+ <div tabIndex="0" class="ant-fullcalendar ant-fullcalendar-full ant-fullcalendar-fullscreen">
+ <div class="ant-fullcalendar-calendar-body">
+ <table cellSpacing="0" role="grid" class="ant-fullcalendar-table">
+ <thead>
+ <tr role="row">
+ <th role="columnheader" title="Sun" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Su</span></th>
+ <th role="columnheader" title="Mon" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Mo</span></th>
+ <th role="columnheader" title="Tue" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Tu</span></th>
+ <th role="columnheader" title="Wed" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">We</span></th>
+ <th role="columnheader" title="Thu" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Th</span></th>
+ <th role="columnheader" title="Fri" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Fr</span></th>
+ <th role="columnheader" title="Sat" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Sa</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-fullcalendar-tbody">
+ <tr role="row">
+ <td role="gridcell" title="October 30, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">30</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="October 31, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell ant-fullcalendar-last-day-of-month">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">31</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 1, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">01</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 2, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">02</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 3, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">03</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 4, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">04</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 5, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">05</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="November 6, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">06</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 7, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">07</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 8, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">08</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events">
+ <li><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text">This is warning event.</span></span>
+ </li>
+ <li><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text">This is usual event.</span></span>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 9, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">09</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 10, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">10</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events">
+ <li><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text">This is warning event.</span></span>
+ </li>
+ <li><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text">This is usual event.</span></span>
+ </li>
+ <li><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">This is error event.</span></span>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 11, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">11</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 12, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">12</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="November 13, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">13</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 14, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">14</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 15, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">15</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events">
+ <li><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text">This is warning event</span></span>
+ </li>
+ <li><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text">This is very long usual event。。....</span></span>
+ </li>
+ <li><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">This is error event 1.</span></span>
+ </li>
+ <li><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">This is error event 2.</span></span>
+ </li>
+ <li><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">This is error event 3.</span></span>
+ </li>
+ <li><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">This is error event 4.</span></span>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 16, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">16</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 17, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">17</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 18, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">18</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 19, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">19</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row" class="ant-fullcalendar-current-week ant-fullcalendar-active-week">
+ <td role="gridcell" title="November 20, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">20</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 21, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">21</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 22, 2016" class="ant-fullcalendar-cell ant-fullcalendar-today ant-fullcalendar-selected-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">22</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 23, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">23</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 24, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">24</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 25, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">25</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 26, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">26</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="November 27, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">27</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 28, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">28</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 29, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">29</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 30, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">30</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 1, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">01</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 2, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">02</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 3, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">03</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="December 4, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">04</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 5, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">05</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 6, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">06</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 7, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">07</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 8, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">08</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events">
+ <li><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text">This is warning event.</span></span>
+ </li>
+ <li><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text">This is usual event.</span></span>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 9, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">09</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events"></ul>
+ </div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 10, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">10</div>
+ <div class="ant-fullcalendar-content">
+ <ul class="events">
+ <li><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text">This is warning event.</span></span>
+ </li>
+ <li><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text">This is usual event.</span></span>
+ </li>
+ <li><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">This is error event.</span></span>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
+<div>
+ <div class="ant-alert ant-alert-info ant-alert-no-icon"><span class="ant-alert-message">You selected date: 2017-01-25</span><span class="ant-alert-description"></span></div>
+ <div style="display:inline-block;width:500px;border:1px solid #d9d9d9;border-radius:4px;">
+ <div class=" ant-fullcalendar-fullscreen">
+ <div class="ant-fullcalendar-header">
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled ant-fullcalendar-year-select">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="2017" class="ant-select-selection-selected-value" style="display:block;opacity:1;">2017</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled ant-fullcalendar-month-select">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="Jan" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Jan</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <div class="ant-radio-group ant-radio-group-default">
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Month</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Year</span></label>
+ </div>
+ </div>
+ <div tabIndex="0" class="ant-fullcalendar ant-fullcalendar-full ant-fullcalendar-fullscreen">
+ <div class="ant-fullcalendar-calendar-body">
+ <table cellSpacing="0" role="grid" class="ant-fullcalendar-table">
+ <thead>
+ <tr role="row">
+ <th role="columnheader" title="Sun" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Su</span></th>
+ <th role="columnheader" title="Mon" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Mo</span></th>
+ <th role="columnheader" title="Tue" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Tu</span></th>
+ <th role="columnheader" title="Wed" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">We</span></th>
+ <th role="columnheader" title="Thu" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Th</span></th>
+ <th role="columnheader" title="Fri" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Fr</span></th>
+ <th role="columnheader" title="Sat" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Sa</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-fullcalendar-tbody">
+ <tr role="row">
+ <td role="gridcell" title="January 1, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">01</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 2, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">02</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 3, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">03</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 4, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">04</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 5, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">05</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 6, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">06</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 7, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">07</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="January 8, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">08</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 9, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">09</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 10, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">10</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 11, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">11</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 12, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">12</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 13, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">13</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 14, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">14</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="January 15, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">15</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 16, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">16</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 17, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">17</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 18, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">18</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 19, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">19</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 20, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">20</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 21, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">21</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row" class="ant-fullcalendar-active-week">
+ <td role="gridcell" title="January 22, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">22</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 23, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">23</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 24, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">24</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 25, 2017" class="ant-fullcalendar-cell ant-fullcalendar-selected-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">25</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 26, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">26</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 27, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">27</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 28, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">28</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="January 29, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">29</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 30, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">30</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 31, 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">31</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 1, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">01</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 2, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">02</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 3, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">03</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 4, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">04</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="February 5, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">05</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 6, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">06</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 7, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">07</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 8, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">08</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 9, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">09</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 10, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">10</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 11, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">11</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div style="display:inline-block;width:500px;margin-left:20px;border:1px solid #d9d9d9;border-radius:4px;">
+ <div class=" ant-fullcalendar-fullscreen">
+ <div class="ant-fullcalendar-header">
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled ant-fullcalendar-year-select">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="2017" class="ant-select-selection-selected-value" style="display:block;opacity:1;">2017</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled ant-fullcalendar-month-select">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="Jan" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Jan</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <div class="ant-radio-group ant-radio-group-default">
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Month</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Year</span></label>
+ </div>
+ </div>
+ <div tabIndex="0" class="ant-fullcalendar ant-fullcalendar-full ant-fullcalendar-fullscreen">
+ <div class="ant-fullcalendar-calendar-body">
+ <table cellSpacing="0" role="grid" class="ant-fullcalendar-table">
+ <thead>
+ <tr role="row">
+ <th role="columnheader" title="Sun" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Su</span></th>
+ <th role="columnheader" title="Mon" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Mo</span></th>
+ <th role="columnheader" title="Tue" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Tu</span></th>
+ <th role="columnheader" title="Wed" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">We</span></th>
+ <th role="columnheader" title="Thu" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Th</span></th>
+ <th role="columnheader" title="Fri" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Fr</span></th>
+ <th role="columnheader" title="Sat" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Sa</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-fullcalendar-tbody">
+ <tr role="row">
+ <td role="gridcell" title="January 1, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">01</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 2, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">02</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 3, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">03</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 4, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">04</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 5, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">05</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 6, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">06</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 7, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">07</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="January 8, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">08</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 9, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">09</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 10, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">10</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 11, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">11</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 12, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">12</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 13, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">13</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 14, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">14</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="January 15, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">15</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 16, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">16</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 17, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">17</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 18, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">18</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 19, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">19</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 20, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">20</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 21, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">21</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row" class="ant-fullcalendar-active-week">
+ <td role="gridcell" title="January 22, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">22</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 23, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">23</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 24, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">24</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 25, 2017" class="ant-fullcalendar-cell ant-fullcalendar-selected-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">25</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 26, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">26</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 27, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">27</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 28, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">28</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="January 29, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">29</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 30, 2017" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">30</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="January 31, 2017" class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">31</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 1, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">01</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 2, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">02</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 3, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">03</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 4, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">04</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="February 5, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">05</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 6, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">06</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 7, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">07</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 8, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">08</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 9, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">09</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 10, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">10</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="February 11, 2017" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">11</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+`;
diff --git a/components/calendar/__tests__/demo.test.js b/components/calendar/__tests__/demo.test.js
new file mode 100644
index 000000000..c65973e49
--- /dev/null
+++ b/components/calendar/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('calendar')
diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..a91f98b19
--- /dev/null
+++ b/components/card/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,266 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/card/demo/basic.md correctly 1`] = `
+<div class="ant-card ant-card-bordered">
+ <div class="ant-card-head">
+ <div class="ant-card-head-wrapper">
+ <div class="ant-card-head-title">Card Title</div>
+ <div class="ant-card-extra">
+ <a href="#">more</a>
+ </div>
+ </div>
+ </div>
+ <div class="ant-card-body">
+ <p>card content</p>
+ <p>card content</p>
+ <p>card content</p>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/card/demo/colRowCard.md correctly 1`] = `
+<div style="background-color:#ececec;padding:20px;">
+ <div class="ant-row" style="margin-left:-8px;margin-right:-8px;">
+ <div class="ant-col-8" style="padding-left:8px;padding-right:8px;">
+ <div class="ant-card">
+ <div class="ant-card-head">
+ <div class="ant-card-head-wrapper">
+ <div class="ant-card-head-title">Card title</div>
+ </div>
+ </div>
+ <div class="ant-card-body">
+ <p>card content</p>
+ </div>
+ </div>
+ </div>
+ <div class="ant-col-8" style="padding-left:8px;padding-right:8px;">
+ <div class="ant-card">
+ <div class="ant-card-head">
+ <div class="ant-card-head-wrapper">
+ <div class="ant-card-head-title">Card title</div>
+ </div>
+ </div>
+ <div class="ant-card-body">
+ <p>card content</p>
+ </div>
+ </div>
+ </div>
+ <div class="ant-col-8" style="padding-left:8px;padding-right:8px;">
+ <div class="ant-card">
+ <div class="ant-card-head">
+ <div class="ant-card-head-wrapper">
+ <div class="ant-card-head-title">Card title</div>
+ </div>
+ </div>
+ <div class="ant-card-body">
+ <p>card content</p>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/card/demo/concise.md correctly 1`] = `
+<div class="ant-card ant-card-bordered" style="width:300px;">
+ <div class="ant-card-body">
+ <p>Card content</p>
+ <p>Card content</p>
+ <p>Card content</p>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/card/demo/grid.md correctly 1`] = `
+<div class="ant-card ant-card-bordered">
+ <div class="ant-card-head">
+ <div class="ant-card-head-wrapper">
+ <div class="ant-card-head-title">Card Title</div>
+ </div>
+ </div>
+ <div class="ant-card-body">
+ <div class="ant-card-grid" style="width:25%;text-align:'center';">Content</div>
+ <div class="ant-card-grid" style="width:25%;text-align:'center';">Content</div>
+ <div class="ant-card-grid" style="width:25%;text-align:'center';">Content</div>
+ <div class="ant-card-grid" style="width:25%;text-align:'center';">Content</div>
+ <div class="ant-card-grid" style="width:25%;text-align:'center';">Content</div>
+ <div class="ant-card-grid" style="width:25%;text-align:'center';">Content</div>
+ <div class="ant-card-grid" style="width:25%;text-align:'center';">Content</div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/card/demo/inline.md correctly 1`] = `
+<div class="ant-card ant-card-bordered">
+ <div class="ant-card-head">
+ <div class="ant-card-head-wrapper">
+ <div class="ant-card-head-title">Card title</div>
+ </div>
+ </div>
+ <div class="ant-card-body">
+ <p style="font-size:14px;color:rgba(0, 0, 0, 0.85);margin-bottom:16px;font-weight:500;">Group title</p>
+ <div class="ant-card ant-card-bordered">
+ <div class="ant-card-head">
+ <div class="ant-card-head-wrapper">
+ <div class="ant-card-head-title">Inner card title</div>
+ <div class="ant-card-extra">
+ <a href="#">More</a>
+ </div>
+ </div>
+ </div>
+ <div class="ant-card-body">
+ Inner Card content
+ </div>
+ </div>
+ <div class="ant-card ant-card-bordered">
+ <div class="ant-card-head">
+ <div class="ant-card-head-wrapper">
+ <div class="ant-card-head-title">Inner card title</div>
+ <div class="ant-card-extra">
+ <a href="#">More</a>
+ </div>
+ </div>
+ </div>
+ <div class="ant-card-body">
+ Inner Card content
+ </div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/card/demo/loading.md correctly 1`] = `
+<div class="ant-card ant-card-loading ant-card-bordered" style="width:34%;">
+ <div class="ant-card-head">
+ <div class="ant-card-head-wrapper">
+ <div class="ant-card-head-title">Card title</div>
+ </div>
+ </div>
+ <div class="ant-card-body">
+ <div class="ant-card-loading-content">
+ <p class="ant-card-loading-block" style="width:94%;"></p>
+ <p><span class="ant-card-loading-block" style="width:28%;"></span><span class="ant-card-loading-block" style="width:62%;"></span></p>
+ <p><span class="ant-card-loading-block" style="width:22%;"></span><span class="ant-card-loading-block" style="width:66%;"></span></p>
+ <p><span class="ant-card-loading-block" style="width:56%;"></span><span class="ant-card-loading-block" style="width:39%;"></span></p>
+ <p><span class="ant-card-loading-block" style="width:21%;"></span><span class="ant-card-loading-block" style="width:15%;"></span><span class="ant-card-loading-block" style="width:40%;"></span></p>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/card/demo/moreConfigs.md correctly 1`] = `
+<div class="ant-card ant-card-bordered ant-card-hoverable" style="width:300px;">
+ <div class="ant-card-cover">
+ <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png">
+ </div>
+ <div class="ant-card-body">
+ <div class="ant-card-meta">
+ <div class="ant-card-meta-avatar"><span class="ant-avatar ant-avatar-image ant-avatar-circle"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div>
+ <div class="ant-card-meta-detail">
+ <div class="ant-card-meta-title">Card title</div>
+ <div class="ant-card-meta-description">This is the description</div>
+ </div>
+ </div>
+ </div>
+ <ul class="ant-card-actions">
+ <li style="width:33.3333%;">
+ <i class="anticon anticon-setting"></i>
+ </li>
+ <li style="width:33.3333%;">
+ <i class="anticon anticon-edit"></i>
+ </li>
+ <li style="width:33.3333%;">
+ <i class="anticon anticon-ellipsis"></i>
+ </li>
+ </ul>
+</div>
+`;
+
+exports[`renders ./components/card/demo/noBorder.md correctly 1`] = `
+<div style="background:#ECECEC;padding:30px;">
+ <div class="ant-card" style="width:300px;">
+ <div class="ant-card-head">
+ <div class="ant-card-head-wrapper">
+ <div class="ant-card-head-title">Card title</div>
+ </div>
+ </div>
+ <div class="ant-card-body">
+ <p>Card content</p>
+ <p>Card content</p>
+ <p>Card content</p>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/card/demo/tabsCard.md correctly 1`] = `
+<div>
+ <div class="ant-card ant-card-bordered ant-card-contain-tabs" style="width:100%;">
+ <div class="ant-card-head">
+ <div class="ant-card-head-wrapper">
+ <div class="ant-card-head-title">Card title</div>
+ <div class="ant-card-extra">
+ <a href="#">More</a>
+ </div>
+ </div>
+ <div class="ant-tabs ant-tabs-top ant-tabs-large ant-tabs-line ant-card-head-tabs">
+ <div role="tablist" tabIndex="0" class="ant-tabs-bar">
+ <div class="ant-tabs-extra-content" style="float:right;"></div>
+ <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
+ <div
+ class="ant-tabs-nav-wrap">
+ <div class="ant-tabs-nav-scroll">
+ <div class="ant-tabs-nav ant-tabs-nav-animated">
+ <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
+ <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab" style="margin-right:undefinedpx;">tab1</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">tab2</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="ant-tabs-content ant-tabs-content-animated" style="margin-left:0%;">
+ <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active"></div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ </div>
+ </div>
+ </div>
+ <div class="ant-card-body">
+ content1
+ </div>
+</div>
+<br>
+<br>
+<div class="ant-card ant-card-bordered ant-card-contain-tabs" style="width:100%;">
+ <div class="ant-card-head">
+ <div class="ant-card-head-wrapper"></div>
+ <div class="ant-tabs ant-tabs-top ant-tabs-large ant-tabs-line ant-card-head-tabs">
+ <div role="tablist" tabIndex="0" class="ant-tabs-bar">
+ <div class="ant-tabs-extra-content" style="float:right;"></div>
+ <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
+ <div
+ class="ant-tabs-nav-wrap">
+ <div class="ant-tabs-nav-scroll">
+ <div class="ant-tabs-nav ant-tabs-nav-animated">
+ <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">article</div>
+ <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab" style="margin-right:undefinedpx;">app</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">project</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="ant-tabs-content ant-tabs-content-animated" style="margin-left:-100%;">
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active"></div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ </div>
+ </div>
+</div>
+<div class="ant-card-body">
+ <p>app content</p>
+</div>
+</div>
+</div>
+`;
diff --git a/components/card/__tests__/demo.test.js b/components/card/__tests__/demo.test.js
new file mode 100644
index 000000000..d15b047bc
--- /dev/null
+++ b/components/card/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('card')
diff --git a/components/card/demo/tabsCard.md b/components/card/demo/tabsCard.md
index 6192d5c3b..33b2beb29 100644
--- a/components/card/demo/tabsCard.md
+++ b/components/card/demo/tabsCard.md
@@ -10,7 +10,6 @@
```html
<template>
-<div>
<div>
<a-card
style="width:100%"
diff --git a/components/cascader/__tests__/__snapshots__/demo.test.js.snap b/components/cascader/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..ea672cb6f
--- /dev/null
+++ b/components/cascader/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/cascader/demo/basic.md correctly 1`] = `
+<span tabIndex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readOnly="true" class="ant-input ant-cascader-input ant-cascader-input "><span class="ant-cascader-picker-label"></span>
+<i class="anticon anticon-down ant-cascader-picker-arrow"></i>
+</span>
+`;
+
+exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] = `
+<span tabIndex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readOnly="true" class="ant-input ant-cascader-input ant-cascader-input "><span class="ant-cascader-picker-label"></span>
+<i class="anticon anticon-down ant-cascader-picker-arrow"></i>
+</span>
+`;
+
+exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
+<span tabIndex="0" class="ant-cascader-picker" style="width:100%;"><input value="" type="text" readOnly="true" class="ant-input ant-cascader-input ant-cascader-input "><span class="ant-cascader-picker-label"><span><span>
+ Zhejiang /
+ </span></span><span><span>
+ Hangzhou /
+ </span></span><span><span>
+ West Lake (<a>752100</a>)
+ </span></span>
+</span>
+<i class="anticon anticon-cross-circle ant-cascader-picker-clear"></i>
+<i class="anticon anticon-down ant-cascader-picker-arrow"></i>
+</span>
+`;
+
+exports[`renders ./components/cascader/demo/custom-trigger.md correctly 1`] = `
+<span>
+ Unselect
+
+ <a href="#" tabIndex="0">Change city</a></span>
+`;
+
+exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
+<span tabIndex="0" class="ant-cascader-picker"><input value="" type="text" readOnly="true" class="ant-input ant-cascader-input ant-cascader-input "><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span>
+<i class="anticon anticon-cross-circle ant-cascader-picker-clear"></i>
+<i class="anticon anticon-down ant-cascader-picker-arrow"></i>
+</span>
+`;
+
+exports[`renders ./components/cascader/demo/disabled-option.md correctly 1`] = `
+<span tabIndex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readOnly="true" class="ant-input ant-cascader-input ant-cascader-input "><span class="ant-cascader-picker-label"></span>
+<i class="anticon anticon-down ant-cascader-picker-arrow"></i>
+</span>
+`;
+
+exports[`renders ./components/cascader/demo/hover.md correctly 1`] = `
+<span tabIndex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readOnly="true" class="ant-input ant-cascader-input ant-cascader-input "><span class="ant-cascader-picker-label"></span>
+<i class="anticon anticon-down ant-cascader-picker-arrow"></i>
+</span>
+`;
+
+exports[`renders ./components/cascader/demo/lazy.md correctly 1`] = `
+<span tabIndex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readOnly="true" class="ant-input ant-cascader-input ant-cascader-input "><span class="ant-cascader-picker-label"></span>
+<i class="anticon anticon-down ant-cascader-picker-arrow"></i>
+</span>
+`;
+
+exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
+<span tabIndex="0" class="ant-cascader-picker"><span class="ant-cascader-picker-label"></span>
+<input value="" placeholder="Please select" type="text" class="ant-input ant-cascader-input ant-cascader-input ">
+<i class="anticon anticon-down ant-cascader-picker-arrow"></i>
+</span>
+`;
+
+exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
+<div><span tabIndex="0" class="ant-cascader-picker ant-cascader-picker-large ant-cascader-picker ant-cascader-picker-large"><input value="" placeholder="Please select" type="text" readOnly="true" class="ant-input ant-cascader-input ant-input-lg ant-cascader-input ant-input-lg"><span class="ant-cascader-picker-label"></span>
+ <i
+ class="anticon anticon-down ant-cascader-picker-arrow"></i>
+ </span>
+ <br>
+ <br> <span tabIndex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readOnly="true" class="ant-input ant-cascader-input ant-cascader-input "><span class="ant-cascader-picker-label"></span>
+ <i class="anticon anticon-down ant-cascader-picker-arrow"></i>
+ </span>
+ <br>
+ <br> <span tabIndex="0" class="ant-cascader-picker ant-cascader-picker-small ant-cascader-picker ant-cascader-picker-small"><input value="" placeholder="Please select" type="text" readOnly="true" class="ant-input ant-cascader-input ant-input-sm ant-cascader-input ant-input-sm"><span class="ant-cascader-picker-label"></span>
+ <i
+ class="anticon anticon-down ant-cascader-picker-arrow"></i>
+ </span>
+ <br>
+ <br>
+</div>
+`;
diff --git a/components/cascader/__tests__/demo.test.js b/components/cascader/__tests__/demo.test.js
new file mode 100644
index 000000000..493e5e292
--- /dev/null
+++ b/components/cascader/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('cascader')
diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..a7f44aa48
--- /dev/null
+++ b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/checkbox/demo/basic.md correctly 1`] = `<label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Checkbox</span></label>`;
+
+exports[`renders ./components/checkbox/demo/check-all.md correctly 1`] = `
+<div>
+ <div style="border-bottom:1px solid #E9E9E9;">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>
+ Check all
+ </span></label>
+ </div>
+ <br>
+ <div class="ant-checkbox-group">
+ <label class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" checked="checked" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label>
+ <label class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label>
+ <label class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" checked="checked" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/checkbox/demo/controller.md correctly 1`] = `
+<div>
+ <p style="margin-bottom:20px;">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" checked="checked" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>
+ Checked-Enabled
+ </span></label>
+ </p>
+ <p>
+ <button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>Uncheck</span></button>
+ <button type="button" class="ant-btn ant-btn-primary ant-btn-sm" style="margin-left:10px;"><span>Disable</span></button>
+ </p>
+</div>
+`;
+
+exports[`renders ./components/checkbox/demo/disabled.md correctly 1`] = `
+<div>
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ <br>
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" checked="checked" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+</div>
+`;
+
+exports[`renders ./components/checkbox/demo/group.md correctly 1`] = `
+<div>
+ <div class="ant-checkbox-group">
+ <label class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label>
+ <label class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label>
+ <label class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label>
+ </div>
+ <br>
+ <div class="ant-checkbox-group">
+ <label class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" checked="checked" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label>
+ <label class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label>
+ <label class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label>
+ </div>
+ <br>
+ <div class="ant-checkbox-group">
+ <label class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label>
+ <label class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" checked="checked" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label>
+ <label class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label>
+ </div>
+ <br>
+ <div class="ant-checkbox-group">
+ <label class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" checked="checked" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label>
+ <label class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label>
+ <label class="ant-checkbox-group-item ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
+<div class="ant-checkbox-group">
+ <div class="ant-row">
+ <div class="ant-col-8">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>A</span></label>
+ </div>
+ <div class="ant-col-8">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>B</span></label>
+ </div>
+ <div class="ant-col-8">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>C</span></label>
+ </div>
+ <div class="ant-col-8">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>D</span></label>
+ </div>
+ <div class="ant-col-8">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>E</span></label>
+ </div>
+ </div>
+</div>
+`;
diff --git a/components/checkbox/__tests__/demo.test.js b/components/checkbox/__tests__/demo.test.js
new file mode 100644
index 000000000..47145c473
--- /dev/null
+++ b/components/checkbox/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('checkbox')
diff --git a/components/collapse/__tests__/__snapshots__/demo.test.js.snap b/components/collapse/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..b16353f85
--- /dev/null
+++ b/components/collapse/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
+<div>
+ <div class="ant-collapse">
+ <div role="tablist" class="ant-collapse-item">
+ <div role="tab" class="ant-collapse-header">
+ <i class="arrow"></i>This is panel header 1</div>
+ <!---->
+ </div>
+ <div role="tablist" class="ant-collapse-item">
+ <div role="tab" class="ant-collapse-header">
+ <i class="arrow"></i>This is panel header 2</div>
+ <!---->
+ </div>
+ <div role="tablist" class="ant-collapse-item">
+ <div role="tab" class="ant-collapse-header">
+ <i class="arrow"></i>This is panel header 3</div>
+ <!---->
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
+<div>
+ <div class="ant-collapse">
+ <div role="tablist" class="ant-collapse-item ant-collapse-item-active">
+ <div role="tab" aria-expanded="true" class="ant-collapse-header">
+ <i class="arrow"></i>This is panel header 1</div>
+ <div role="tabpanel" class="ant-collapse-content ant-collapse-content-active">
+ <div class="ant-collapse-content-box">
+ <p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.</p>
+ </div>
+ </div>
+ </div>
+ <div role="tablist" class="ant-collapse-item">
+ <div role="tab" class="ant-collapse-header">
+ <i class="arrow"></i>This is panel header 2</div>
+ <!---->
+ </div>
+ <div role="tablist" class="ant-collapse-item ant-collapse-item-disabled">
+ <div role="tab" class="ant-collapse-header">
+ <i class="arrow"></i>This is panel header 3</div>
+ <!---->
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
+<div>
+ <div class="ant-collapse ant-collapse-borderless">
+ <div role="tablist" class="ant-collapse-item ant-collapse-item-active">
+ <div role="tab" aria-expanded="true" class="ant-collapse-header">
+ <i class="arrow"></i>This is panel header 1</div>
+ <div role="tabpanel" class="ant-collapse-content ant-collapse-content-active">
+ <div class="ant-collapse-content-box">
+ <p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.</p>
+ </div>
+ </div>
+ </div>
+ <div role="tablist" class="ant-collapse-item">
+ <div role="tab" class="ant-collapse-header">
+ <i class="arrow"></i>This is panel header 2</div>
+ <!---->
+ </div>
+ <div role="tablist" class="ant-collapse-item">
+ <div role="tab" class="ant-collapse-header">
+ <i class="arrow"></i>This is panel header 3</div>
+ <!---->
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
+<div>
+ <div class="ant-collapse ant-collapse-borderless">
+ <div role="tablist" class="ant-collapse-item ant-collapse-item-active" style="background:#f7f7f7;border-radius:4px;margin-bottom:24px;border:0;overflow:hidden;">
+ <div role="tab" aria-expanded="true" class="ant-collapse-header">
+ <i class="arrow"></i>
+ This is panel header 1
+ <i class="anticon anticon-question-circle-o"></i>
+ </div>
+ <div role="tabpanel" class="ant-collapse-content ant-collapse-content-active">
+ <div class="ant-collapse-content-box">
+ <p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.</p>
+ </div>
+ </div>
+ </div>
+ <div role="tablist" class="ant-collapse-item" style="background:#f7f7f7;border-radius:4px;margin-bottom:24px;border:0;overflow:hidden;">
+ <div role="tab" class="ant-collapse-header">
+ <i class="arrow"></i>This is panel header 2</div>
+ <!---->
+ </div>
+ <div role="tablist" class="ant-collapse-item" style="background:#f7f7f7;border-radius:4px;margin-bottom:24px;border:0;overflow:hidden;">
+ <div role="tab" class="ant-collapse-header">
+ <i class="arrow"></i>This is panel header 3</div>
+ <!---->
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
+<div>
+ <div class="ant-collapse">
+ <div role="tablist" class="ant-collapse-item">
+ <div role="tab" class="ant-collapse-header">
+ <i class="arrow"></i>This is panel header 1</div>
+ <!---->
+ </div>
+ <div role="tablist" class="ant-collapse-item">
+ <div role="tab" class="ant-collapse-header">
+ <i class="arrow"></i>This is panel header 2</div>
+ <!---->
+ </div>
+ <div role="tablist" class="ant-collapse-item">
+ <div role="tab" class="ant-collapse-header">
+ <i class="arrow"></i>This is panel header 3</div>
+ <!---->
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
+<div>
+ <div class="ant-collapse">
+ <div role="tablist" class="ant-collapse-item ant-collapse-item-active">
+ <div role="tab" aria-expanded="true" class="ant-collapse-header">
+ <i class="arrow"></i>This is panel header with arrow icon</div>
+ <div role="tabpanel" class="ant-collapse-content ant-collapse-content-active">
+ <div class="ant-collapse-content-box">
+ <p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.</p>
+ </div>
+ </div>
+ </div>
+ <div role="tablist" class="ant-collapse-item ant-collapse-no-arrow">
+ <div role="tab" class="ant-collapse-header">This is panel header with no arrow icon</div>
+ <!---->
+ </div>
+ </div>
+</div>
+`;
diff --git a/components/collapse/__tests__/demo.test.js b/components/collapse/__tests__/demo.test.js
new file mode 100644
index 000000000..1486622f3
--- /dev/null
+++ b/components/collapse/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('collapse')
diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..90822bed3
--- /dev/null
+++ b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,136 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
+<div><span class="ant-calendar-picker"><div><input readOnly="true" placeholder="Select date" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div>
+</span>
+<br> <span class="ant-calendar-picker"><div><input readOnly="true" placeholder="Select month" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div>
+</span>
+<br> <span tabIndex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input ant-calendar-picker-input ant-input"><input readOnly="true" placeholder="Start date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span>
+<input
+ readOnly="true" placeholder="End date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span>
+ </span>
+ <br> <span class="ant-calendar-picker"><span><input readOnly="true" placeholder="Select week" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></span>
+ </span>
+ </div>
+`;
+
+exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
+<div><span class="ant-calendar-picker"><div><input readOnly="true" placeholder="Select date" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div>
+</span> <span tabIndex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input ant-calendar-picker-input ant-input"><input readOnly="true" placeholder="Start date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span>
+<input
+ readOnly="true" placeholder="End date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span>
+ </span> <span class="ant-calendar-picker"><span><input readOnly="true" placeholder="Select date" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></span>
+ </span>
+ </div>
+`;
+
+exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
+<div><span class="ant-calendar-picker"><div><input disabled="disabled" readOnly="true" placeholder="Select date" value="2015-06-06" class="ant-calendar-picker-input ant-input ant-input-disabled"><span class="ant-calendar-picker-icon"></span></div>
+</span>
+<br> <span class="ant-calendar-picker"><div><input disabled="disabled" readOnly="true" placeholder="Select date" value="2015-06" class="ant-calendar-picker-input ant-input ant-input-disabled"><span class="ant-calendar-picker-icon"></span></div>
+</span>
+<br> <span tabIndex="-1" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input ant-input-disabled ant-calendar-picker-input ant-input ant-input-disabled"><input disabled="disabled" readOnly="true" placeholder="Start date" tabIndex="-1" value="2015-06-06" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span>
+<input
+ disabled="disabled" readOnly="true" placeholder="End date" tabIndex="-1" value="2015-06-06" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span>
+ </span>
+ </div>
+`;
+
+exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] = `
+<div><span class="ant-calendar-picker"><div><input readOnly="true" placeholder="Select date" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div>
+</span>
+<br> <span class="ant-calendar-picker"><div><input readOnly="true" placeholder="Select month" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div>
+</span>
+<br> <span tabIndex="0" class="ant-calendar-picker" style="width:350px;"><span class="ant-calendar-picker-input ant-input ant-calendar-picker-input ant-input"><input readOnly="true" placeholder="Start date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span>
+<input
+ readOnly="true" placeholder="End date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span>
+ </span>
+ </div>
+`;
+
+exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
+<div><span class="ant-calendar-picker"><div><input readOnly="true" placeholder="Select date" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div>
+</span> <span class="ant-calendar-picker"><div><input readOnly="true" placeholder="Select date" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div>
+</span> <span tabIndex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input ant-calendar-picker-input ant-input"><input readOnly="true" placeholder="Start date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span>
+<input
+ readOnly="true" placeholder="End date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span>
+ </span> <span tabIndex="0" class="ant-calendar-picker" style="width:350px;"><span class="ant-calendar-picker-input ant-input ant-calendar-picker-input ant-input"><input readOnly="true" placeholder="Start date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span>
+ <input
+ readOnly="true" placeholder="End date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span>
+ </span> <span class="ant-calendar-picker"><div><input readOnly="true" placeholder="Select month" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div>
+ </span>
+ </div>
+`;
+
+exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
+<div><span class="ant-calendar-picker"><div><input readOnly="true" placeholder="Select date" value="2015/01/01" class="ant-calendar-picker-input ant-input"><i class="anticon anticon-cross-circle ant-calendar-picker-clear"></i><span class="ant-calendar-picker-icon"></span></div>
+</span>
+<br> <span class="ant-calendar-picker"><div><input readOnly="true" placeholder="Select date" value="2015/01" class="ant-calendar-picker-input ant-input"><i class="anticon anticon-cross-circle ant-calendar-picker-clear"></i><span class="ant-calendar-picker-icon"></span></div>
+</span>
+<br> <span tabIndex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input ant-calendar-picker-input ant-input"><input readOnly="true" placeholder="Start date" tabIndex="-1" value="2015/01/01" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span>
+<input
+ readOnly="true" placeholder="End date" tabIndex="-1" value="2015/01/01" class="ant-calendar-range-picker-input">
+ <i class="anticon anticon-cross-circle ant-calendar-picker-clear"></i><span class="ant-calendar-picker-icon"></span></span>
+ </span>
+ </div>
+`;
+
+exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
+<div><span mode="time" class="ant-calendar-picker"><div><input readOnly="true" placeholder="Select date" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div>
+</span>
+<br> <span tabIndex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input ant-calendar-picker-input ant-input"><input readOnly="true" placeholder="Start month" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span>
+<input
+ readOnly="true" placeholder="End month" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span>
+ </span>
+ </div>
+`;
+
+exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`] = `
+<div><span tabIndex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input ant-calendar-picker-input ant-input"><input readOnly="true" placeholder="Start date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span>
+ <input
+ readOnly="true" placeholder="End date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span>
+ </span>
+ <br> <span tabIndex="0" class="ant-calendar-picker" style="width:350px;"><span class="ant-calendar-picker-input ant-input ant-calendar-picker-input ant-input"><input readOnly="true" placeholder="Start date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span>
+ <input
+ readOnly="true" placeholder="End date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span>
+ </span>
+</div>
+`;
+
+exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
+<div>
+ <div class="ant-radio-group ant-radio-group-default">
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Large</span></label>
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Default</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Small</span></label>
+ </div>
+ <br>
+ <br> <span class="ant-calendar-picker ant-calendar-picker-default"><div><input readOnly="true" placeholder="Select date" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div>
+</span>
+<br> <span class="ant-calendar-picker ant-calendar-picker-default"><div><input readOnly="true" placeholder="Select Month" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div>
+</span>
+<br> <span tabIndex="0" class="ant-calendar-picker ant-calendar-picker-default"><span class="ant-calendar-picker-input ant-input ant-calendar-picker-input ant-input"><input readOnly="true" placeholder="Start date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span>
+<input
+ readOnly="true" placeholder="End date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span>
+ </span>
+ <br> <span class="ant-calendar-picker ant-calendar-picker-default"><span><input readOnly="true" placeholder="Select Week" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></span>
+ </span>
+ </div>
+`;
+
+exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
+<div><span class="ant-calendar-picker"><div><input readOnly="true" placeholder="Start" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div>
+</span> <span class="ant-calendar-picker"><div><input readOnly="true" placeholder="End" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div>
+</span>
+</div>
+`;
+
+exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
+<div><span class="ant-calendar-picker"><div><input readOnly="true" placeholder="Select Time" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div>
+</span>
+<br> <span tabIndex="0" class="ant-calendar-picker" style="width:350px;"><span class="ant-calendar-picker-input ant-input ant-calendar-picker-input ant-input"><input readOnly="true" placeholder="Start Time" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span>
+<input
+ readOnly="true" placeholder="End Time" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span>
+ </span>
+ </div>
+`;
diff --git a/components/date-picker/__tests__/demo.test.js b/components/date-picker/__tests__/demo.test.js
new file mode 100644
index 000000000..a1308b39e
--- /dev/null
+++ b/components/date-picker/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('date-picker')
diff --git a/components/date-picker/demo/date-render.md b/components/date-picker/demo/date-render.md
index 4e3b0211e..451e2c88d 100644
--- a/components/date-picker/demo/date-render.md
+++ b/components/date-picker/demo/date-render.md
@@ -17,36 +17,36 @@ We can customize the rendering of date cells in the calendar by providing a `dat
<div class="ant-calendar-date" :style="getCurrentStyle(current, today)">
{{current.date()}}
</div>
- </tempalte>
+ </template>
</a-date-picker>
<a-range-picker>
<template slot="dateRender" slot-scope="current">
<div class="ant-calendar-date" :style="getCurrentStyle(current)">
{{current.date()}}
</div>
- </tempalte>
+ </template>
</a-range-picker>
<a-week-picker>
<template slot="dateRender" slot-scope="current">
<div class="ant-calendar-date" :style="getCurrentStyle(current)">
{{current.date()}}
</div>
- </tempalte>
+ </template>
</a-week-picker>
</div>
</template>
<script>
export default {
methods: {
- getCurrentStyle(current, today) {
- const style = {};
+ getCurrentStyle (current, today) {
+ const style = {}
if (current.date() === 1) {
- style.border = '1px solid #1890ff';
- style.borderRadius = '50%';
+ style.border = '1px solid #1890ff'
+ style.borderRadius = '50%'
}
return style
- }
- }
+ },
+ },
}
</script>
```
diff --git a/components/divider/__tests__/__snapshots__/demo.test.js.snap b/components/divider/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..8329c432d
--- /dev/null
+++ b/components/divider/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/divider/demo/horizontal.md correctly 1`] = `
+<div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
+ <div class="ant-divider ant-divider-horizontal"></div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
+ <div class="ant-divider ant-divider-horizontal ant-divider-with-text"><span class="ant-divider-inner-text">With Text</span></div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
+ <div class="ant-divider ant-divider-horizontal ant-divider-dashed"></div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
+</div>
+`;
+
+exports[`renders ./components/divider/demo/orientation.md correctly 1`] = `
+<div>
+ <div class="ant-divider ant-divider-horizontal ant-divider-with-text-left"><span class="ant-divider-inner-text">Left Text</span></div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
+ <div class="ant-divider ant-divider-horizontal ant-divider-with-text-right"><span class="ant-divider-inner-text">Right Text</span></div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
+</div>
+`;
+
+exports[`renders ./components/divider/demo/vertical.md correctly 1`] = `
+<div>
+ Text
+ <div class="ant-divider ant-divider-vertical"></div>
+ <a href="#">Link</a>
+ <div class="ant-divider ant-divider-vertical"></div>
+ <a href="#">Link</a>
+</div>
+`;
diff --git a/components/divider/__tests__/demo.test.js b/components/divider/__tests__/demo.test.js
new file mode 100644
index 000000000..528e30bfd
--- /dev/null
+++ b/components/divider/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('divider')
diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..30976bda4
--- /dev/null
+++ b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/dropdown/demo/basic.md correctly 1`] = `
+<a href="#" class="ant-dropdown-link ant-dropdown-trigger">
+ Hover me
+ <i class="anticon anticon-down"></i>
+</a>
+`;
+
+exports[`renders ./components/dropdown/demo/context-menu.md correctly 1`] = `<span class="ant-dropdown-trigger" style="user-select:none;">Right Click on Me</span>`;
+
+exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
+<div>
+ <div class="ant-btn-group ant-dropdown-button">
+ <button type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button>
+ <button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger">
+ <i class="anticon anticon-down"></i>
+ </button>
+ </div>
+ <div class="ant-btn-group ant-dropdown-button" style="margin-left:8px;">
+ <button type="button" disabled="disabled" class="ant-btn ant-btn-default"><span>Dropdown</span></button>
+ <button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger">
+ <i class="anticon anticon-down"></i>
+ </button>
+ </div>
+ <button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger" style="margin-left:8px;">
+ Button
+ <i class="anticon anticon-down"></i>
+ </button>
+</div>
+`;
+
+exports[`renders ./components/dropdown/demo/event.md correctly 1`] = `
+<a href="#" class="ant-dropdown-link ant-dropdown-trigger">
+ Hover me, Click menu item
+ <i class="anticon anticon-down"></i>
+</a>
+`;
+
+exports[`renders ./components/dropdown/demo/item.md correctly 1`] = `
+<a href="#" class="ant-dropdown-link ant-dropdown-trigger">
+ Hover me
+ <i class="anticon anticon-down"></i>
+</a>
+`;
+
+exports[`renders ./components/dropdown/demo/overlay-visible.md correctly 1`] = `
+<a href="#" class="ant-dropdown-link ant-dropdown-trigger">
+ Hover me
+ <i class="anticon anticon-down"></i>
+</a>
+`;
+
+exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
+<div id="components-dropdown-demo-placement">
+ <button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><span>bottomLeft</span></button>
+ <!---->
+ <button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><span>bottomCenter</span></button>
+ <!---->
+ <button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><span>bottomRight</span></button>
+ <br>
+ <button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><span>topLeft</span></button>
+ <!---->
+ <button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><span>topCenter</span></button>
+ <!---->
+ <button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><span>topRight</span></button>
+ <!---->
+</div>
+`;
+
+exports[`renders ./components/dropdown/demo/sub-menu.md correctly 1`] = `
+<a href="#" class="ant-dropdown-link ant-dropdown-trigger">
+ Cascading menu
+ <i class="anticon anticon-down"></i>
+</a>
+`;
+
+exports[`renders ./components/dropdown/demo/trigger.md correctly 1`] = `
+<a href="#" class="ant-dropdown-link ant-dropdown-trigger">
+ Click me
+ <i class="anticon anticon-down"></i>
+</a>
+`;
diff --git a/components/dropdown/__tests__/demo.test.js b/components/dropdown/__tests__/demo.test.js
new file mode 100644
index 000000000..b830f8fd4
--- /dev/null
+++ b/components/dropdown/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('dropdown')
diff --git a/components/form/index.jsx b/components/form/index.jsx
index 07ea84244..a9a45f740 100644
--- a/components/form/index.jsx
+++ b/components/form/index.jsx
@@ -1,4 +1,8 @@
+import Vue from 'vue'
import Form from './Form'
+import antRefDirective from '../_util/antRefDirective'
+
+Vue.use(antRefDirective)
export { FormProps, FormComponentProps, FormCreateOption, ValidateCallback, ValidationRule } from './Form'
export { FormItemProps } from './FormItem'
diff --git a/components/grid/__tests__/__snapshots__/demo.test.js.snap b/components/grid/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..f66760867
--- /dev/null
+++ b/components/grid/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,233 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
+<div>
+ <div class="ant-row">
+ <div class="ant-col-12">col-12</div>
+ <div class="ant-col-12">col-12</div>
+ </div>
+ <div class="ant-row">
+ <div class="ant-col-8">col-8</div>
+ <div class="ant-col-8">col-8</div>
+ <div class="ant-col-8">col-8</div>
+ </div>
+ <div class="ant-row">
+ <div class="ant-col-6">col-6</div>
+ <div class="ant-col-6">col-6</div>
+ <div class="ant-col-6">col-6</div>
+ <div class="ant-col-6">col-6</div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
+<div>
+ <p>sub-element align left</p>
+ <div class="ant-row-flex ant-row-flex-start">
+ <div class="ant-col-4">col-4</div>
+ <div class="ant-col-4">col-4</div>
+ <div class="ant-col-4">col-4</div>
+ <div class="ant-col-4">col-4</div>
+ </div>
+ <p>sub-element align center</p>
+ <div class="ant-row-flex ant-row-flex-center">
+ <div class="ant-col-4">col-4</div>
+ <div class="ant-col-4">col-4</div>
+ <div class="ant-col-4">col-4</div>
+ <div class="ant-col-4">col-4</div>
+ </div>
+ <p>sub-element align right</p>
+ <div class="ant-row-flex ant-row-flex-end">
+ <div class="ant-col-4">col-4</div>
+ <div class="ant-col-4">col-4</div>
+ <div class="ant-col-4">col-4</div>
+ <div class="ant-col-4">col-4</div>
+ </div>
+ <p>sub-element monospaced arrangement</p>
+ <div class="ant-row-flex ant-row-flex-space-between">
+ <div class="ant-col-4">col-4</div>
+ <div class="ant-col-4">col-4</div>
+ <div class="ant-col-4">col-4</div>
+ <div class="ant-col-4">col-4</div>
+ </div>
+ <p>sub-element align full</p>
+ <div class="ant-row-flex ant-row-flex-space-around">
+ <div class="ant-col-4">col-4</div>
+ <div class="ant-col-4">col-4</div>
+ <div class="ant-col-4">col-4</div>
+ <div class="ant-col-4">col-4</div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
+<div>
+ <p>Align Top</p>
+ <div class="ant-row-flex ant-row-flex-center ant-row-flex-top">
+ <div class="ant-col-4">
+ <p class="height-100">col-4</p>
+ </div>
+ <div class="ant-col-4">
+ <p class="height-50">col-4</p>
+ </div>
+ <div class="ant-col-4">
+ <p class="height-120">col-4</p>
+ </div>
+ <div class="ant-col-4">
+ <p class="height-80">col-4</p>
+ </div>
+ </div>
+ <p>Align Center</p>
+ <div class="ant-row-flex ant-row-flex-space-around ant-row-flex-middle">
+ <div class="ant-col-4">
+ <p class="height-100">col-4</p>
+ </div>
+ <div class="ant-col-4">
+ <p class="height-50">col-4</p>
+ </div>
+ <div class="ant-col-4">
+ <p class="height-120">col-4</p>
+ </div>
+ <div class="ant-col-4">
+ <p class="height-80">col-4</p>
+ </div>
+ </div>
+ <p>Align Bottom</p>
+ <div class="ant-row-flex ant-row-flex-space-between ant-row-flex-bottom">
+ <div class="ant-col-4">
+ <p class="height-100">col-4</p>
+ </div>
+ <div class="ant-col-4">
+ <p class="height-50">col-4</p>
+ </div>
+ <div class="ant-col-4">
+ <p class="height-120">col-4</p>
+ </div>
+ <div class="ant-col-4">
+ <p class="height-80">col-4</p>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = `
+<div>
+ <div class="ant-row-flex">
+ <div class="ant-col-6 ant-col-order-4">1 col-order-4</div>
+ <div class="ant-col-6 ant-col-order-3">2 col-order-3</div>
+ <div class="ant-col-6 ant-col-order-2">3 col-order-2</div>
+ <div class="ant-col-6 ant-col-order-1">4 col-order-1</div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
+<div class="gutter-example">
+ <div class="ant-row" style="margin-left:-8px;margin-right:-8px;">
+ <div class="gutter-row ant-col-6" style="padding-left:8px;padding-right:8px;">
+ <div class="gutter-box">col-6</div>
+ </div>
+ <div class="gutter-row ant-col-6" style="padding-left:8px;padding-right:8px;">
+ <div class="gutter-box">col-6</div>
+ </div>
+ <div class="gutter-row ant-col-6" style="padding-left:8px;padding-right:8px;">
+ <div class="gutter-box">col-6</div>
+ </div>
+ <div class="gutter-row ant-col-6" style="padding-left:8px;padding-right:8px;">
+ <div class="gutter-box">col-6</div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
+<div>
+ <div class="ant-row">
+ <div class="ant-col-8">col-8</div>
+ <div class="ant-col-8 ant-col-offset-8">col-8</div>
+ </div>
+ <div class="ant-row">
+ <div class="ant-col-6 ant-col-offset-6">col-6 col-offset-6</div>
+ <div class="ant-col-6 ant-col-offset-6">col-6 col-offset-6</div>
+ </div>
+ <div class="ant-row">
+ <div class="ant-col-12 ant-col-offset-6">col-12 col-offset-6</div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/grid/demo/playfround.md correctly 1`] = `
+<div id="components-grid-demo-playground">
+ <div style="margin-bottom:16px;"><span style="margin-right:6px;">Gutter (px): </span>
+ <div style="width:50%;">
+ <div class="ant-slider ant-slider-with-marks">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track" style="left:0%;width:20%;"></div>
+ <div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left:0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left:20%;"></span><span class="ant-slider-dot" style="left:40%;"></span><span class="ant-slider-dot" style="left:60%;"></span>
+ <span
+ class="ant-slider-dot" style="left:80%;"></span><span class="ant-slider-dot" style="left:100%;"></span></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="5" aria-valuenow="1" class="ant-slider-handle" style="left:20%;"></div>
+ <div class="ant-slider-mark"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width:18%;margin-left:-9%;left:0%;">8</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width:18%;margin-left:-9%;left:20%;">16</span><span class="ant-slider-mark-text"
+ style="width:18%;margin-left:-9%;left:40%;">24</span><span class="ant-slider-mark-text" style="width:18%;margin-left:-9%;left:60%;">32</span><span class="ant-slider-mark-text" style="width:18%;margin-left:-9%;left:80%;">40</span><span class="ant-slider-mark-text"
+ style="width:18%;margin-left:-9%;left:100%;">48</span></div>
+ </div>
+ </div> <span style="margin-right:6px;">Column Count:</span>
+ <div style="width:50%;">
+ <div class="ant-slider ant-slider-with-marks">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track" style="left:0%;width:40%;"></div>
+ <div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left:0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left:20%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left:40%;"></span><span class="ant-slider-dot"
+ style="left:60%;"></span><span class="ant-slider-dot" style="left:80%;"></span><span class="ant-slider-dot" style="left:100%;"></span></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="5" aria-valuenow="2" class="ant-slider-handle"
+ style="left:40%;"></div>
+ <div class="ant-slider-mark"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width:18%;margin-left:-9%;left:0%;">2</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width:18%;margin-left:-9%;left:20%;">3</span><span class="ant-slider-mark-text ant-slider-mark-text-active"
+ style="width:18%;margin-left:-9%;left:40%;">4</span><span class="ant-slider-mark-text" style="width:18%;margin-left:-9%;left:60%;">6</span><span class="ant-slider-mark-text" style="width:18%;margin-left:-9%;left:80%;">8</span><span class="ant-slider-mark-text"
+ style="width:18%;margin-left:-9%;left:100%;">12</span></div>
+ </div>
+ </div>
+ </div>
+ <div class="ant-row" style="margin-left:-8px;margin-right:-8px;">
+ <div class="ant-col-6" style="padding-left:8px;padding-right:8px;">
+ <div>Column</div>
+ </div>
+ <div class="ant-col-6" style="padding-left:8px;padding-right:8px;">
+ <div>Column</div>
+ </div>
+ <div class="ant-col-6" style="padding-left:8px;padding-right:8px;">
+ <div>Column</div>
+ </div>
+ <div class="ant-col-6" style="padding-left:8px;padding-right:8px;">
+ <div>Column</div>
+ </div>
+ </div> <pre><Row :gutter="16">
+ <Col :span="6"/>
+ <Col :span="6"/>
+ <Col :span="6"/>
+ <Col :span="6"/>
+</Row></pre></div>
+`;
+
+exports[`renders ./components/grid/demo/responsive.md correctly 1`] = `
+<div class="ant-row">
+ <div class="ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10">Col</div>
+ <div class="ant-col-xs-20 ant-col-sm-16 ant-col-md-12 ant-col-lg-8 ant-col-xl-4">Col</div>
+ <div class="ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10">Col</div>
+</div>
+`;
+
+exports[`renders ./components/grid/demo/responsive-more.md correctly 1`] = `
+<div class="ant-row">
+ <div class="ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2">Col</div>
+ <div class="ant-col-xs-11 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2">Col</div>
+ <div class="ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2">Col</div>
+</div>
+`;
+
+exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
+<div>
+ <div class="ant-row">
+ <div class="ant-col-18 ant-col-push-6">col-18 col-push-6</div>
+ <div class="ant-col-6 ant-col-pull-18">col-6 col-pull-18</div>
+ </div>
+</div>
+`;
diff --git a/components/grid/__tests__/demo.test.js b/components/grid/__tests__/demo.test.js
new file mode 100644
index 000000000..8e6005e4a
--- /dev/null
+++ b/components/grid/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('grid')
diff --git a/components/input-number/__tests__/__snapshots__/demo.test.js.snap b/components/input-number/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..3e829f54f
--- /dev/null
+++ b/components/input-number/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
+<div>
+ <div class="ant-input-number">
+ <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable"
+ role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span>
+ </div>
+ <div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap">
+ <input autoComplete="off" max="10" min="1" step="1" value="3" class="ant-input-number-input">
+ </div>
+ </div>
+ 当前值：3
+</div>
+`;
+
+exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
+<div class="ant-input-number">
+ <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable"
+ role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span>
+ </div>
+ <div role="spinbutton" aria-valuemin="0" aria-valuemax="10" class="ant-input-number-input-wrap">
+ <input autoComplete="off" max="10" min="0" step="0.1" value="" class="ant-input-number-input">
+ </div>
+</div>
+`;
+
+exports[`renders ./components/input-number/demo/disabled.md correctly 1`] = `
+<div>
+ <div class="ant-input-number ant-input-number-disabled">
+ <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span>
+ <span
+ unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span>
+ </div>
+ <div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap">
+ <input autoComplete="off" disabled="disabled" max="10" min="1" step="1" value="3" class="ant-input-number-input">
+ </div>
+ </div>
+ <div style="margin-top:20px;">
+ <button type="button" class="ant-btn ant-btn-primary"><span>Toggle disabled</span></button>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
+<div>
+ <div class="ant-input-number">
+ <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable"
+ role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span>
+ </div>
+ <div role="spinbutton" aria-valuemin="-9007199254740991" aria-valuenow="1000" class="ant-input-number-input-wrap">
+ <input autoComplete="off" min="-9007199254740991" step="1" value="$ 1,000" class="ant-input-number-input">
+ </div>
+ </div>
+ <div class="ant-input-number">
+ <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span>
+ <span
+ unselectable="unselectable" role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span>
+ </div>
+ <div role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" class="ant-input-number-input-wrap">
+ <input autoComplete="off" max="100" min="0" step="1" value="100%" class="ant-input-number-input">
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
+<div>
+ <div class="ant-input-number ant-input-number-lg">
+ <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable"
+ role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span>
+ </div>
+ <div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap">
+ <input autoComplete="off" max="100000" min="1" step="1" value="3" class="ant-input-number-input">
+ </div>
+ </div>
+ <div class="ant-input-number">
+ <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable"
+ role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span>
+ </div>
+ <div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap">
+ <input autoComplete="off" max="100000" min="1" step="1" value="3" class="ant-input-number-input">
+ </div>
+ </div>
+ <div class="ant-input-number ant-input-number-sm">
+ <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable"
+ role="button" aria-label="Decrease Value" class="ant-input-number-handler ant-input-number-handler-down "><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span>
+ </div>
+ <div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap">
+ <input autoComplete="off" max="100000" min="1" step="1" value="3" class="ant-input-number-input">
+ </div>
+ </div>
+</div>
+`;
diff --git a/components/input-number/__tests__/demo.test.js b/components/input-number/__tests__/demo.test.js
new file mode 100644
index 000000000..8bdef4983
--- /dev/null
+++ b/components/input-number/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('input-number')
diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..71af5aba3
--- /dev/null
+++ b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/input/demo/addon.md correctly 1`] = `
+<div>
+ <div style="margin-bottom:16px;"><span class="ant-input-group-wrapper"><span class="ant-input-wrapper ant-input-group"><span class="ant-input-group-addon">Http://</span>
+ <input defaultValue="mysite" type="text" value="mysite" class="ant-input"><span class="ant-input-group-addon">.com</span></span>
+ </span>
+ </div>
+ <div style="margin-bottom:16px;"><span class="ant-input-group-wrapper"><span class="ant-input-wrapper ant-input-group"><span class="ant-input-group-addon"><div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:90px;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Http://" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Http://</div></div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+</div>
+</span>
+<input defaultValue="mysite" type="text" value="mysite" class="ant-input"><span class="ant-input-group-addon"><div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:80px;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title=".com" class="ant-select-selection-selected-value" style="display:block;opacity:1;">.com</div></div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+</div>
+</span>
+</span>
+</span>
+</div>
+<div style="margin-bottom:16px;"><span class="ant-input-group-wrapper"><span class="ant-input-wrapper ant-input-group"><input defaultValue="mysite" type="text" value="mysite" class="ant-input"><span class="ant-input-group-addon"><i class="anticon anticon-setting"></i></span></span>
+ </span>
+</div>
+</div>
+`;
+
+exports[`renders ./components/input/demo/autosize-textarea.md correctly 1`] = `
+<div>
+ <textarea placeholder="Autosize height based on content lines" class="ant-input"></textarea>
+ <div style="margin:24px 0;"></div>
+ <textarea placeholder="Autosize height with minimum and maximum number of lines" class="ant-input"></textarea>
+</div>
+`;
+
+exports[`renders ./components/input/demo/basic.md correctly 1`] = `<input placeholder="Basic usage" type="text" value="" class="ant-input">`;
+
+exports[`renders ./components/input/demo/group.md correctly 1`] = `
+<div><span class="ant-input-group ant-input-group-lg"><div class="ant-col-5"><input defaultValue="0571" type="text" value="0571" class="ant-input"></div><div class="ant-col-8"><input defaultValue="26888888" type="text" value="26888888" class="ant-input"></div></span>
+ <br> <span class="ant-input-group ant-input-group-compact"><input defaultValue="0571" type="text" value="0571" class="ant-input" style="width:20%;"><input defaultValue="26888888" type="text" value="26888888" class="ant-input" style="width:30%;"></span>
+ <br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Zhejiang" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Zhejiang</div></div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+</div>
+<input defaultValue="Xihu District, Hangzhou" type="text" value="Xihu District, Hangzhou" class="ant-input" style="width:50%;">
+</span>
+<br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option1" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Option1</div></div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+</div>
+<input defaultValue="input content" type="text" value="input content" class="ant-input" style="width:50%;">
+</span>
+<br> <span class="ant-input-group ant-input-group-compact"><input defaultValue="input content" type="text" value="input content" class="ant-input" style="width:50%;"><span class="ant-calendar-picker"><div><input readOnly="true" placeholder="Select date" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div>
+</span>
+</span>
+<br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option1-1" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Option1-1</div></div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+</div>
+<div class="ant-select ant-select-enabled ant-select ant-select-enabled">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="Option2-2" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Option2-2</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+</div>
+</span>
+<br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Between" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Between</div></div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+</div>
+<input placeholder="Minimum" type="text" value="" class="ant-input" style="width:100px;text-align:center;">
+<input placeholder="~" type="text" disabled="disabled" value="" class="ant-input ant-input-disabled" style="width:30px;border-left:0;pointer-events:none;background-color:#fff;">
+<input placeholder="Maximum" type="text" value="" class="ant-input" style="width:100px;text-align:center;border-left:0;">
+</span>
+<br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Sign Up" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Sign Up</div></div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+</div>
+<div class="ant-select ant-select-combobox ant-select-enabled ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width:200px;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div unselectable="unselectable" class="ant-select-selection__placeholder" style="display:block;user-select:none;webkit-user-select:none;">Email</div>
+ <ul>
+ <li class="ant-select-search ant-select-search--inline">
+ <div class="ant-select-search__field__wrap">
+ <input value="" type="text" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div>
+ </li>
+ </ul>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+</div>
+</span>
+<br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:30%;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Home" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Home</div></div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+</div><span tabIndex="0" class="ant-cascader-picker" style="width:70%;"><input value="" placeholder="Select Address" type="text" readOnly="true" class="ant-input ant-cascader-input ant-cascader-input "><span class="ant-cascader-picker-label"></span>
+<i class="anticon anticon-down ant-cascader-picker-arrow"></i>
+</span>
+</span>
+</div>
+`;
+
+exports[`renders ./components/input/demo/presuffix.md correctly 1`] = `
+<div class="components-input-demo-presuffix"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><i class="anticon anticon-user"></i></span>
+ <input value="" placeholder="Basic usage" type="text" class="ant-input">
+ </span>
+</div>
+`;
+
+exports[`renders ./components/input/demo/search-input.md correctly 1`] = `
+<div><span class="ant-input-search ant-input-affix-wrapper ant-input-search" style="width:200px;"><input placeholder="input search text" type="text" value="" class="ant-input ant-input-search"><span class="ant-input-suffix"><i class="anticon anticon-search ant-input-search-icon"></i></span></span>
+ <br>
+ <br> <span class="ant-input-search ant-input-search-enter-button ant-input-affix-wrapper ant-input-search ant-input-search-enter-button"><input placeholder="input search text" type="text" value="" class="ant-input ant-input-search ant-input-search-enter-button"><span class="ant-input-suffix"><button type="button" class="ant-btn ant-btn-primary ant-input-search-button"><i class="anticon anticon-search"></i></button></span></span>
+ <br>
+ <br> <span class="ant-input-search ant-input-search-enter-button ant-input-search-large ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-search ant-input-search-enter-button ant-input-search-large"><input placeholder="input search text" type="text" size="large" value="" class="ant-input ant-input-lg ant-input-search ant-input-search-enter-button ant-input-search-large"><span class="ant-input-suffix"><button type="button" class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button"><span>Search</span></button>
+ </span>
+ </span>
+ <br>
+ <br> <span class="ant-input-search ant-input-search-enter-button ant-input-search-large ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-search ant-input-search-enter-button ant-input-search-large"><input placeholder="input search text" type="text" size="large" value="" class="ant-input ant-input-lg ant-input-search ant-input-search-enter-button ant-input-search-large"><span class="ant-input-suffix"><button type="button" class="ant-btn ant-btn-default ant-btn-lg ant-input-search-button"><span>Custom</span></button>
+ </span>
+ </span>
+</div>
+`;
+
+exports[`renders ./components/input/demo/size.md correctly 1`] = `
+<div class="components-input-demo-size">
+ <input placeholder="large size" type="text" size="large" value="" class="ant-input ant-input-lg">
+ <input placeholder="default size" type="text" value="" class="ant-input">
+ <input placeholder="small size" type="text" size="small" value="" class="ant-input ant-input-sm">
+</div>
+`;
+
+exports[`renders ./components/input/demo/textarea.md correctly 1`] = `<textarea placeholder="Basic usage" rows="4" class="ant-input"></textarea>`;
+
+exports[`renders ./components/input/demo/tooltip.md correctly 1`] = `<input value="" placeholder="Input a number" type="text" maxLength="25" class="ant-input" style="width:120px;">`;
diff --git a/components/input/__tests__/demo.test.js b/components/input/__tests__/demo.test.js
new file mode 100644
index 000000000..108a7fd62
--- /dev/null
+++ b/components/input/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('input')
diff --git a/components/input/demo/presuffix.md b/components/input/demo/presuffix.md
index ee5c1ea14..10ecf4422 100644
--- a/components/input/demo/presuffix.md
+++ b/components/input/demo/presuffix.md
@@ -11,10 +11,11 @@ Add prefix or suffix icons inside input.
```html
<template>
<div class="components-input-demo-presuffix">
- <a-input placeholder="Basic usage" v-model="userName" ref="userNameInput">
- <a-icon slot="prefix" type="user" />
- <a-icon v-if="userName" slot="suffix" type="close-circle" @click="emitEmpty" />
- </a-input>
+ <a-input placeholder="Basic usage" v-model="userName" ref="userNameInput">
+ <a-icon slot="prefix" type="user" />
+ <a-icon v-if="userName" slot="suffix" type="close-circle" @click="emitEmpty" />
+ </a-input>
+ </div>
</template>
<script>
diff --git a/components/layout/__tests__/__snapshots__/demo.test.js.snap b/components/layout/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..60fae7a86
--- /dev/null
+++ b/components/layout/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,389 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/layout/demo/basic.md correctly 1`] = `
+<div id="components-layout-demo-basic">
+ <div class="ant-layout">
+ <div class="ant-layout-header">Header</div>
+ <div class="ant-layout-content">Content</div>
+ <div class="ant-layout-footer">Footer</div>
+ </div>
+ <div class="ant-layout">
+ <div class="ant-layout-header">Header</div>
+ <div class="ant-layout">
+ <div class="ant-layout-sider" style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px;">
+ <div class="ant-layout-sider-children">Sider</div>
+ </div>
+ <div class="ant-layout-content">Content</div>
+ </div>
+ <div class="ant-layout-footer">Footer</div>
+ </div>
+ <div class="ant-layout">
+ <div class="ant-layout-header">Header</div>
+ <div class="ant-layout">
+ <div class="ant-layout-content">Content</div>
+ <div class="ant-layout-sider" style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px;">
+ <div class="ant-layout-sider-children">Sider</div>
+ </div>
+ </div>
+ <div class="ant-layout-footer">Footer</div>
+ </div>
+ <div class="ant-layout">
+ <div class="ant-layout-sider" style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px;">
+ <div class="ant-layout-sider-children">Sider</div>
+ </div>
+ <div class="ant-layout">
+ <div class="ant-layout-header">Header</div>
+ <div class="ant-layout-content">Content</div>
+ <div class="ant-layout-footer">Footer</div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
+<div id="components-layout-demo-custom-trigger" class="ant-layout">
+ <div class="ant-layout-sider" style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px;">
+ <div class="ant-layout-sider-children">
+ <div class="logo"></div>
+ <ul role="menu" aria-activedescendant="" tabIndex="0" class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark">
+ <li role="menuitem" aria-selected="true" class="ant-menu-item ant-menu-item-selected" style="padding-left:24px;">
+ <i class="anticon anticon-user"></i> <span>nav 1</span></li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-video-camera"></i> <span>nav 2</span></li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-upload"></i> <span>nav 3</span></li>
+ </ul>
+ </div>
+ </div>
+ <div class="ant-layout">
+ <div class="ant-layout-header" style="background:#fff;padding:0;">
+ <i class="trigger anticon anticon-menu-fold"></i>
+ </div>
+ <div class="ant-layout-content" style="margin:24px 16px;padding:24px;background:#fff;min-height:280px;">
+ Content
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
+<div id="components-layout-demo-fixed" class="ant-layout">
+ <div class="ant-layout-header" style="position:fixed;width:100%;">
+ <div class="logo"></div>
+ <ul role="menu" aria-activedescendant="" tabIndex="0" class="ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark" style="line-height:64px;">
+ <li role="menuitem" class="ant-menu-item">nav 1</li>
+ <li role="menuitem" aria-selected="true" class="ant-menu-item ant-menu-item-selected">nav 2</li>
+ <li role="menuitem" class="ant-menu-item">nav 3</li>
+ </ul>
+ </div>
+ <div class="ant-layout-content" style="padding:0 50px;margin-top:64px;">
+ <div class="ant-breadcrumb" style="margin:16px 0;"><span><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">App</span>
+ <span
+ class="ant-breadcrumb-separator">/</span>
+ </span>
+ </div>
+ <div style="background:#fff;padding:24px;min-height:380px;">Content</div>
+ </div>
+ <div class="ant-layout-footer" style="text-align:center;">
+ Ant Design ©2016 Created by Ant UED
+ </div>
+</div>
+`;
+
+exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
+<div id="components-layout-demo-fixed-sider" class="ant-layout">
+ <div class="ant-layout-sider" style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px;overflow:auto;height:100vh;position:fixed;left:0;">
+ <div class="ant-layout-sider-children">
+ <div class="logo"></div>
+ <ul role="menu" aria-activedescendant="" tabIndex="0" class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark">
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-user"></i> <span class="nav-text">nav 1</span></li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-video-camera"></i> <span class="nav-text">nav 2</span></li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-upload"></i> <span class="nav-text">nav 3</span></li>
+ <li role="menuitem" aria-selected="true" class="ant-menu-item ant-menu-item-selected" style="padding-left:24px;">
+ <i class="anticon anticon-bar-chart"></i> <span class="nav-text">nav 4</span></li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-cloud-o"></i> <span class="nav-text">nav 5</span></li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-appstore-o"></i> <span class="nav-text">nav 6</span></li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-team"></i> <span class="nav-text">nav 7</span></li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-shop"></i> <span class="nav-text">nav 8</span></li>
+ </ul>
+ </div>
+ </div>
+ <div class="ant-layout" style="margin-left:200px;">
+ <div class="ant-layout-header" style="background:#fff;padding:0;"></div>
+ <div class="ant-layout-content" style="margin:24px 16px 0;overflow:initial;">
+ <div style="padding:24px;background:#fff;text-align:center;">
+ ...
+ <br> Really
+ <br>...
+ <br>...
+ <br>...
+ <br> long
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br>...
+ <br> content
+ </div>
+ </div>
+ <div class="ant-layout-footer" style="text-align:center;">
+ Ant Design ©2016 Created by Ant UED
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
+<div id="components-layout-demo-responsive" class="ant-layout">
+ <div class="ant-layout-sider" style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px;">
+ <div class="ant-layout-sider-children">
+ <div class="logo"></div>
+ <ul role="menu" aria-activedescendant="" tabIndex="0" class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark">
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-user"></i> <span class="nav-text">nav 1</span></li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-video-camera"></i> <span class="nav-text">nav 2</span></li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-upload"></i> <span class="nav-text">nav 3</span></li>
+ <li role="menuitem" aria-selected="true" class="ant-menu-item ant-menu-item-selected" style="padding-left:24px;">
+ <i class="anticon anticon-user"></i> <span class="nav-text">nav 4</span></li>
+ </ul>
+ </div>
+ </div>
+ <div class="ant-layout">
+ <div class="ant-layout-header" style="background:#fff;padding:0;"></div>
+ <div class="ant-layout-content" style="margin:24px 16px 0;">
+ <div style="padding:24px;background:#fff;min-height:360px;">
+ content
+ </div>
+ </div>
+ <div class="ant-layout-footer" style="text-align:center;">
+ Ant Design ©2016 Created by Ant UED
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/layout/demo/side.md correctly 1`] = `
+<div id="components-layout-demo-side" class="ant-layout" style="min-height:100vh;">
+ <div class="ant-layout-sider ant-layout-sider-has-trigger" style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px;">
+ <div class="ant-layout-sider-children">
+ <div class="logo"></div>
+ <ul role="menu" aria-activedescendant="" tabIndex="0" class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark">
+ <li role="menuitem" aria-selected="true" class="ant-menu-item ant-menu-item-selected" style="padding-left:24px;">
+ <i class="anticon anticon-pie-chart"></i> <span>Option 1</span></li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-desktop"></i> <span>Option 2</span></li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline">
+ <div aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-user"></i><span>User</span></span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <!---->
+ </li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline">
+ <div aria-owns="sub2$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-team"></i><span>Team</span></span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <!---->
+ </li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-file"></i> <span>File</span></li>
+ </ul>
+ </div>
+ <div class="ant-layout-sider-trigger" style="width:200px;">
+ <i class="anticon anticon-left"></i>
+ </div>
+ </div>
+ <div class="ant-layout">
+ <div class="ant-layout-header" style="background:#fff;padding:0;"></div>
+ <div class="ant-layout-content" style="margin:0 16px;">
+ <div class="ant-breadcrumb" style="margin:16px 0;"><span><span class="ant-breadcrumb-link">User</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">Bill</span><span class="ant-breadcrumb-separator">/</span></span>
+ </div>
+ <div style="padding:24px;background:#fff;min-height:360px;">
+ Bill is a cat.
+ </div>
+ </div>
+ <div class="ant-layout-footer" style="text-align:center;">
+ Ant Design ©2016 Created by Ant UED
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/layout/demo/top.md correctly 1`] = `
+<div id="components-layout-demo-top" class="layout ant-layout">
+ <div class="ant-layout-header">
+ <div class="logo"></div>
+ <ul role="menu" aria-activedescendant="" tabIndex="0" class="ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark" style="line-height:64px;">
+ <li role="menuitem" class="ant-menu-item">nav 1</li>
+ <li role="menuitem" aria-selected="true" class="ant-menu-item ant-menu-item-selected">nav 2</li>
+ <li role="menuitem" class="ant-menu-item">nav 3</li>
+ </ul>
+ </div>
+ <div class="ant-layout-content" style="padding:0 50px;">
+ <div class="ant-breadcrumb" style="margin:16px 0;"><span><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">App</span>
+ <span
+ class="ant-breadcrumb-separator">/</span>
+ </span>
+ </div>
+ <div style="background:#fff;padding:24px;min-height:280px;">Content</div>
+ </div>
+ <div class="ant-layout-footer" style="text-align:center;">
+ Ant Design ©2016 Created by Ant UED
+ </div>
+</div>
+`;
+
+exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
+<div id="components-layout-demo-top-side" class="ant-layout">
+ <div class="header ant-layout-header">
+ <div class="logo"></div>
+ <ul role="menu" aria-activedescendant="" tabIndex="0" class="ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark" style="line-height:64px;">
+ <li role="menuitem" class="ant-menu-item">nav 1</li>
+ <li role="menuitem" aria-selected="true" class="ant-menu-item ant-menu-item-selected">nav 2</li>
+ <li role="menuitem" class="ant-menu-item">nav 3</li>
+ </ul>
+ </div>
+ <div class="ant-layout-content" style="padding:0 50px;">
+ <div class="ant-breadcrumb" style="margin:16px 0;"><span><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">App</span>
+ <span
+ class="ant-breadcrumb-separator">/</span>
+ </span>
+ </div>
+ <div class="ant-layout" style="padding:24px 0;background:#fff;">
+ <div class="ant-layout-sider" style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px;background:#fff;">
+ <div class="ant-layout-sider-children">
+ <ul role="menu" aria-activedescendant="" tabIndex="0" class="ant-menu ant-menu-root ant-menu-inline ant-menu-light" style="height:100%;">
+ <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
+ <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-user"></i>subnav 1</span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <ul role="menu" aria-activedescendant="" class="ant-menu ant-menu-sub ant-menu-inline">
+ <li role="menuitem" aria-selected="true" class="ant-menu-item ant-menu-item-selected" style="padding-left:48px;">option1</li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">option2</li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">option3</li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">option4</li>
+ </ul>
+ </li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline">
+ <div aria-owns="sub2$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-laptop"></i>subnav 2</span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <!---->
+ </li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline">
+ <div aria-owns="sub3$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-notification"></i>subnav 3</span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <!---->
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="ant-layout-content" style="padding:0 24px;min-height:280px;">
+ Content
+ </div>
+ </div>
+ </div>
+ <div class="ant-layout-footer" style="text-align:center;">
+ Ant Design ©2016 Created by Ant UED
+ </div>
+</div>
+`;
+
+exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
+<div id="components-layout-demo-top-side-2" class="ant-layout">
+ <div class="header ant-layout-header">
+ <div class="logo"></div>
+ <ul role="menu" aria-activedescendant="" tabIndex="0" class="ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark" style="line-height:64px;">
+ <li role="menuitem" class="ant-menu-item">nav 1</li>
+ <li role="menuitem" aria-selected="true" class="ant-menu-item ant-menu-item-selected">nav 2</li>
+ <li role="menuitem" class="ant-menu-item">nav 3</li>
+ </ul>
+ </div>
+ <div class="ant-layout">
+ <div class="ant-layout-sider" style="flex:0 0 200px;max-width:200px;min-width:200px;width:200px;background:#fff;">
+ <div class="ant-layout-sider-children">
+ <ul role="menu" aria-activedescendant="" tabIndex="0" class="ant-menu ant-menu-root ant-menu-inline ant-menu-light" style="height:100%;border-right:0;">
+ <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
+ <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-user"></i>subnav 1</span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <ul role="menu" aria-activedescendant="" class="ant-menu ant-menu-sub ant-menu-inline">
+ <li role="menuitem" aria-selected="true" class="ant-menu-item ant-menu-item-selected" style="padding-left:48px;">option1</li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">option2</li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">option3</li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">option4</li>
+ </ul>
+ </li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline">
+ <div aria-owns="sub2$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-laptop"></i>subnav 2</span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <!---->
+ </li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline">
+ <div aria-owns="sub3$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-notification"></i>subnav 3</span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <!---->
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="ant-layout" style="padding:0 24px 24px;">
+ <div class="ant-breadcrumb" style="margin:16px 0;"><span><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">App</span>
+ <span
+ class="ant-breadcrumb-separator">/</span>
+ </span>
+ </div>
+ <div class="ant-layout-content" style="background:#fff;padding:24px;margin:0;min-height:280px;">
+ Content
+ </div>
+ </div>
+ </div>
+</div>
+`;
diff --git a/components/layout/__tests__/demo.test.js b/components/layout/__tests__/demo.test.js
new file mode 100644
index 000000000..af4eb5dca
--- /dev/null
+++ b/components/layout/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('layout')
diff --git a/components/layout/demo/fixed-sider.md b/components/layout/demo/fixed-sider.md
index a835e5911..0f6786383 100644
--- a/components/layout/demo/fixed-sider.md
+++ b/components/layout/demo/fixed-sider.md
@@ -12,7 +12,7 @@ When dealing with long content, a fixed sider can provide a better user experien
<template>
<a-layout id="components-layout-demo-fixed-sider">
<a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
- <div class="logo" />
+ <div class="logo"></div>
<a-menu theme="dark" mode="inline" :defaultSelectedKeys="['4']">
<a-menu-item key="1">
<a-icon type="user" />
@@ -72,7 +72,7 @@ When dealing with long content, a fixed sider can provide a better user experien
</a-layout-footer>
</a-layout>
</a-layout>
-<template>
+</template>
<style>
#components-layout-demo-fixed-sider .logo {
height: 32px;
diff --git a/components/layout/demo/fixed.md b/components/layout/demo/fixed.md
index 22e91779f..bd44b6989 100644
--- a/components/layout/demo/fixed.md
+++ b/components/layout/demo/fixed.md
@@ -22,7 +22,7 @@ Fixed Header is generally used to fix the top navigation to facilitate page swit
<a-menu-item key="1">nav 1</a-menu-item>
<a-menu-item key="2">nav 2</a-menu-item>
<a-menu-item key="3">nav 3</a-menu-item>
- </Menu>
+ </a-menu>
</a-layout-header>
<a-layout-content :style="{ padding: '0 50px', marginTop: '64px' }">
<a-breadcrumb :style="{ margin: '16px 0' }">
@@ -36,7 +36,7 @@ Fixed Header is generally used to fix the top navigation to facilitate page swit
Ant Design ©2016 Created by Ant UED
</a-layout-footer>
</a-layout>
-<template>
+</template>
<style>
#components-layout-demo-fixed .logo {
width: 120px;
@@ -46,4 +46,5 @@ Fixed Header is generally used to fix the top navigation to facilitate page swit
float: left;
}
</style>
+
```
diff --git a/components/layout/demo/top-side-2.md b/components/layout/demo/top-side-2.md
index fa76aa7ba..7a89c4847 100644
--- a/components/layout/demo/top-side-2.md
+++ b/components/layout/demo/top-side-2.md
@@ -53,7 +53,7 @@ Both the top navigation and the sidebar, commonly used in application site.
<a-menu-item key="11">option11</a-menu-item>
<a-menu-item key="12">option12</a-menu-item>
</a-sub-menu>
- </a-layout-menu>
+ </a-menu>
</a-layout-sider>
<a-layout style="padding: 0 24px 24px">
<a-breadcrumb style="margin: 16px 0">
@@ -70,7 +70,7 @@ Both the top navigation and the sidebar, commonly used in application site.
</template>
<script>
export default {
- data() {
+ data () {
return {
collapsed: false,
}
diff --git a/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap b/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..6cf507c10
--- /dev/null
+++ b/components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,448 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
+<div>
+ <div class="change-locale"><span style="margin-right:16px;">Change locale of components: </span>
+ <div class="ant-radio-group ant-radio-group-default">
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>English</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>中文</span></label>
+ </div>
+ </div>
+ <div class="locale-components">
+ <div class="example">
+ <ul unselectable="unselectable" class="ant-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5">
+ <a>5</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li class="ant-pagination-options">
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled ant-pagination-options-size-changer">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="10 / page" class="ant-select-selection-selected-value" style="display:block;opacity:1;">10 / page</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ <div class="example">
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:200px;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div class="ant-select-search ant-select-search--inline" style="display:none;">
+ <div class="ant-select-search__field__wrap">
+ <input autoComplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div>
+ </div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div> <span class="ant-calendar-picker"><div><input readOnly="true" placeholder="Select date" value="" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div>
+ </span> <span class="ant-time-picker"><input type="text" placeholder="Select time" id="" value="" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span> <span tabIndex="0" class="ant-calendar-picker" style="width:200px;"><span class="ant-calendar-picker-input ant-input ant-calendar-picker-input ant-input"><input readOnly="true" placeholder="Start date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span>
+ <input
+ readOnly="true" placeholder="End date" tabIndex="-1" value="" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span>
+ </span>
+ </div>
+ <div class="example">
+ <button type="button" class="ant-btn ant-btn-primary"><span>Show Modal</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Show info</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Show confirm</span></button>
+ <a href="#">Click to confirm</a>
+ </div>
+ <div className="example">
+ <div class="ant-transfer">
+ <div class="ant-transfer-list">
+ <div class="ant-transfer-list-header">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span>
+ </div>
+ <div class="ant-transfer-list-body ant-transfer-list-body-with-search">
+ <div class="ant-transfer-list-body-search-wrapper">
+ <div handleClear="function () { [native code] }">
+ <input value="" placeholder="Search here" type="text" class="ant-input ant-transfer-list-search ant-transfer-list-search"><span class="ant-transfer-list-search-action"><i class="anticon anticon-search"></i></span></div>
+ </div>
+ <div class="ant-transfer-list-content-warp"></div>
+ <div class="ant-transfer-list-body-not-found">Not Found</div>
+ </div>
+ </div>
+ <div class="ant-transfer-operation">
+ <button type="button" disabled="disabled" class="ant-btn ant-btn-primary ant-btn-sm">
+ <i class="anticon anticon-left"></i>
+ </button>
+ <button type="button" disabled="disabled" class="ant-btn ant-btn-primary ant-btn-sm">
+ <i class="anticon anticon-right"></i>
+ </button>
+ </div>
+ <div class="ant-transfer-list">
+ <div class="ant-transfer-list-header">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span>
+ </div>
+ <div class="ant-transfer-list-body ant-transfer-list-body-with-search">
+ <div class="ant-transfer-list-body-search-wrapper">
+ <div handleClear="function () { [native code] }">
+ <input value="" placeholder="Search here" type="text" class="ant-input ant-transfer-list-search ant-transfer-list-search"><span class="ant-transfer-list-search-action"><i class="anticon anticon-search"></i></span></div>
+ </div>
+ <div class="ant-transfer-list-content-warp"></div>
+ <div class="ant-transfer-list-body-not-found">Not Found</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div style="width:319px;border:1px solid #d9d9d9;border-radius:4px;">
+ <div>
+ <div class="ant-fullcalendar-header">
+ <div class="ant-select-sm ant-select ant-select-enabled ant-select-sm ant-select ant-select-enabled ant-select-sm ant-fullcalendar-year-select">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="2016" class="ant-select-selection-selected-value" style="display:block;opacity:1;">2016</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <div class="ant-select-sm ant-select ant-select-enabled ant-select-sm ant-select ant-select-enabled ant-select-sm ant-fullcalendar-month-select">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="Nov" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Nov</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <div class="ant-radio-group ant-radio-group-small">
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Month</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Year</span></label>
+ </div>
+ </div>
+ <div tabIndex="0" class="ant-fullcalendar ant-fullcalendar-full">
+ <div class="ant-fullcalendar-calendar-body">
+ <table cellSpacing="0" role="grid" class="ant-fullcalendar-table">
+ <thead>
+ <tr role="row">
+ <th role="columnheader" title="Sun" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Su</span></th>
+ <th role="columnheader" title="Mon" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Mo</span></th>
+ <th role="columnheader" title="Tue" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Tu</span></th>
+ <th role="columnheader" title="Wed" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">We</span></th>
+ <th role="columnheader" title="Thu" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Th</span></th>
+ <th role="columnheader" title="Fri" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Fr</span></th>
+ <th role="columnheader" title="Sat" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Sa</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-fullcalendar-tbody">
+ <tr role="row">
+ <td role="gridcell" title="October 30, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">30</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="October 31, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell ant-fullcalendar-last-day-of-month">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">31</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 1, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">01</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 2, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">02</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 3, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">03</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 4, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">04</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 5, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">05</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="November 6, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">06</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 7, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">07</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 8, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">08</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 9, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">09</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 10, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">10</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 11, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">11</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 12, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">12</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="November 13, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">13</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 14, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">14</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 15, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">15</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 16, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">16</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 17, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">17</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 18, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">18</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 19, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">19</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row" class="ant-fullcalendar-current-week ant-fullcalendar-active-week">
+ <td role="gridcell" title="November 20, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">20</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 21, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">21</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 22, 2016" class="ant-fullcalendar-cell ant-fullcalendar-today ant-fullcalendar-selected-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">22</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 23, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">23</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 24, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">24</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 25, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">25</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 26, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">26</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="November 27, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">27</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 28, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">28</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 29, 2016" class="ant-fullcalendar-cell">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">29</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="November 30, 2016" class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">30</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 1, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">01</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 2, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">02</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 3, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">03</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ <tr role="row">
+ <td role="gridcell" title="December 4, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">04</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 5, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">05</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 6, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">06</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 7, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">07</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 8, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">08</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 9, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">09</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ <td role="gridcell" title="December 10, 2016" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+ <div class="ant-fullcalendar-date">
+ <div class="ant-fullcalendar-value">10</div>
+ <div class="ant-fullcalendar-content"></div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!---->
+</div>
+</div>
+`;
+
+exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
+<ul unselectable="unselectable" class="ant-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5">
+ <a>5</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li class="ant-pagination-options">
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled ant-pagination-options-size-changer">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="10 / page" class="ant-select-selection-selected-value" style="display:block;opacity:1;">10 / page</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ </li>
+</ul>
+`;
diff --git a/components/locale-provider/__tests__/demo.test.js b/components/locale-provider/__tests__/demo.test.js
new file mode 100644
index 000000000..de46d29bb
--- /dev/null
+++ b/components/locale-provider/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('locale-provider')
diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md
index c6248b248..17bc02996 100644
--- a/components/locale-provider/demo/all.md
+++ b/components/locale-provider/demo/all.md
@@ -55,13 +55,13 @@ Components which need localization support are listed here, you can toggle the l
<p>Locale Modal</p>
</a-modal>
</div>
- </LocaleProvider>
+ </a-locale-provider>
</div>
</template>
<script>
-// you should use import zhCN from 'antd/lib/locale-provider/zh_CN'
-import zhCN from 'antd/locale-provider/zh_CN';
-import { Modal } from 'antd';
+// you should use import zhCN from 'vue-antd-ui/lib/locale-provider/zh_CN'
+import zhCN from 'vue-antd-ui/locale-provider/zh_CN';
+import { Modal } from 'vue-antd-ui';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('en');
diff --git a/components/locale-provider/demo/basic.md b/components/locale-provider/demo/basic.md
index fb81b1abf..d6b00e449 100644
--- a/components/locale-provider/demo/basic.md
+++ b/components/locale-provider/demo/basic.md
@@ -15,8 +15,8 @@ Wrap your app with `LocaleProvider`, and apply the corresponding language packag
</a-locale-provider>
</template>
<script>
-// you should use import enUS from 'antd/lib/locale-provider/en_US';
-import enUS from 'antd/locale-provider/en_US';
+// you should use import enUS from 'vue-antd-ui/lib/locale-provider/en_US';
+import enUS from 'vue-antd-ui/locale-provider/en_US';
export default {
data(){
return {
diff --git a/components/locale-provider/index.en-US.md b/components/locale-provider/index.en-US.md
index 678ab0551..b6e214111 100644
--- a/components/locale-provider/index.en-US.md
+++ b/components/locale-provider/index.en-US.md
@@ -14,7 +14,7 @@
</a-locale-provider>
</template>
<script>
-import fr_FR from 'antd/lib/locale-provider/fr_FR';
+import fr_FR from 'vue-antd-ui/lib/locale-provider/fr_FR';
import 'moment/locale/zh-cn';
export default {
data() {
diff --git a/components/locale-provider/index.zh-CN.md b/components/locale-provider/index.zh-CN.md
index 14bed7c60..237406827 100644
--- a/components/locale-provider/index.zh-CN.md
+++ b/components/locale-provider/index.zh-CN.md
@@ -13,7 +13,7 @@ LocaleProvider 使用 Vue 的 [provide/inject](https://cn.vuejs.org/v2/api/#prov
</a-locale-provider>
</template>
<script>
-import zh_CN from 'antd/lib/locale-provider/zh_CN';
+import zh_CN from 'vue-antd-ui/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';
export default {
data() {
diff --git a/components/menu/__tests__/__snapshots__/demo.test.js.snap b/components/menu/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..3dfc0e0a6
--- /dev/null
+++ b/components/menu/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,237 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
+<div>
+ <ul role="menu" aria-activedescendant="" tabIndex="0" class="ant-menu ant-menu-root ant-menu-horizontal ant-menu-light">
+ <li role="menuitem" aria-selected="true" class="ant-menu-item ant-menu-item-selected">
+ <i class="anticon anticon-mail"></i>Navigation One
+ </li>
+ <li role="menuitem" aria-disabled="true" class="ant-menu-item ant-menu-item-disabled">
+ <i class="anticon anticon-appstore"></i>Navigation Two
+ </li>
+ <li class="ant-menu-submenu ant-menu-submenu-horizontal">
+ <div aria-owns="item_4$Menu" aria-haspopup="true" class="ant-menu-submenu-title"><span><i class="anticon anticon-setting"></i>Navigation Three - Submenu</span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ </li>
+ <li role="menuitem" class="ant-menu-item">
+ <a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
+ </li>
+ </ul>
+</div>
+`;
+
+exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
+<div>
+ <ul role="menu" aria-activedescendant="" tabIndex="0" class="ant-menu ant-menu-root ant-menu-inline ant-menu-light" style="width:256px;">
+ <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
+ <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-mail"></i><span>Navigation One</span></span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <ul role="menu" aria-activedescendant="" class="ant-menu ant-menu-sub ant-menu-inline">
+ <li class="ant-menu-item-group">
+ <div class="ant-menu-item-group-title">
+ <i class="anticon anticon-qq"></i><span>Item 1</span></div>
+ <ul class="ant-menu-item-group-list">
+ <li role="menuitem" aria-selected="true" class="ant-menu-item ant-menu-item-selected" style="padding-left:48px;">Option 1</li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">Option 2</li>
+ </ul>
+ </li>
+ <li class="ant-menu-item-group">
+ <div title="Item 2" class="ant-menu-item-group-title">Item 2</div>
+ <ul class="ant-menu-item-group-list">
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">Option 3</li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">Option 4</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline">
+ <div aria-owns="sub2$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-appstore"></i><span>Navigation Two</span></span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <!---->
+ </li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline">
+ <div aria-owns="sub4$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-setting"></i><span>Navigation Three</span></span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <!---->
+ </li>
+ </ul>
+</div>
+`;
+
+exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
+<div style="width:256px;">
+ <button type="button" class="ant-btn ant-btn-primary" style="margin-bottom:16px;">
+ <i class="anticon anticon-menu-fold"></i>
+ </button>
+ <ul role="menu" aria-activedescendant="" tabIndex="0" class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark">
+ <li role="menuitem" aria-selected="true" class="ant-menu-item ant-menu-item-selected" style="padding-left:24px;">
+ <i class="anticon anticon-pie-chart"></i> <span>Option 1</span></li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-desktop"></i> <span>Option 2</span></li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-inbox"></i> <span>Option 3</span></li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
+ <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-mail"></i><span>Navigation One</span></span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <ul role="menu" aria-activedescendant="" class="ant-menu ant-menu-sub ant-menu-inline">
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">Option 5</li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">Option 6</li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">Option 7</li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">Option 8</li>
+ </ul>
+ </li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline">
+ <div aria-owns="sub2$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-appstore"></i><span>Navigation Two</span></span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <!---->
+ </li>
+ </ul>
+</div>
+`;
+
+exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
+<div>
+ <ul role="menu" aria-activedescendant="" tabIndex="0" class="ant-menu ant-menu-root ant-menu-inline ant-menu-light" style="width:256px;">
+ <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
+ <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-mail"></i><span>Navigation One</span></span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <ul role="menu" aria-activedescendant="" class="ant-menu ant-menu-sub ant-menu-inline">
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">Option 1</li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">Option 2</li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">Option 3</li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">Option 4</li>
+ </ul>
+ </li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline">
+ <div aria-owns="sub2$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-appstore"></i><span>Navigation Two</span></span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <!---->
+ </li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline">
+ <div aria-owns="sub4$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-setting"></i><span>Navigation Three</span></span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <!---->
+ </li>
+ </ul>
+</div>
+`;
+
+exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
+<div>
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label> Change Mode
+ <span className="ant-divider" style="margin:0 1em;"></span>
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label> Change Theme
+ <br>
+ <br>
+ <ul role="menu" aria-activedescendant="" tabIndex="0" class="ant-menu ant-menu-root ant-menu-inline ant-menu-light" style="width:256px;">
+ <li role="menuitem" aria-selected="true" class="ant-menu-item ant-menu-item-selected" style="padding-left:24px;">
+ <i class="anticon anticon-mail"></i>
+ Navigation One
+ </li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-calendar"></i>
+ Navigation Two
+ </li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
+ <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-appstore"></i><span>Navigation Three</span></span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <ul role="menu" aria-activedescendant="" class="ant-menu ant-menu-sub ant-menu-inline">
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">Option 3</li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">Option 4</li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline">
+ <div aria-owns="sub1-2$Menu" aria-haspopup="true" title="Submenu" class="ant-menu-submenu-title" style="padding-left:48px;">Submenu
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <!---->
+ </li>
+ </ul>
+ </li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline">
+ <div aria-owns="sub2$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-setting"></i><span>Navigation Four</span></span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <!---->
+ </li>
+ </ul>
+</div>
+`;
+
+exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
+<div>
+ <md>
+ ## 主题 内建了两套主题 \`light|dark\`，默认 \`light\`。
+ </md>
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label> Change Theme
+ <br>
+ <br>
+ <ul role="menu" aria-activedescendant="" tabIndex="0" class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark" style="width:256px;">
+ <li role="menuitem" aria-selected="true" class="ant-menu-item ant-menu-item-selected" style="padding-left:24px;">
+ <i class="anticon anticon-mail"></i>
+ Navigation One
+ </li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:24px;">
+ <i class="anticon anticon-calendar"></i>
+ Navigation Two
+ </li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open">
+ <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-appstore"></i><span>Navigation Three</span></span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <ul role="menu" aria-activedescendant="" class="ant-menu ant-menu-sub ant-menu-inline">
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">Option 3</li>
+ <li role="menuitem" class="ant-menu-item" style="padding-left:48px;">Option 4</li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline">
+ <div aria-owns="sub1-2$Menu" aria-haspopup="true" title="Submenu" class="ant-menu-submenu-title" style="padding-left:48px;">Submenu
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <!---->
+ </li>
+ </ul>
+ </li>
+ <li class="ant-menu-submenu ant-menu-submenu-inline">
+ <div aria-owns="sub2$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left:24px;"><span><i class="anticon anticon-setting"></i><span>Navigation Four</span></span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ <!---->
+ </li>
+ </ul>
+</div>
+`;
+
+exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
+<div>
+ <ul role="menu" aria-activedescendant="" tabIndex="0" class="ant-menu ant-menu-root ant-menu-vertical ant-menu-light" style="width:256px;">
+ <li role="menuitem" class="ant-menu-item">
+ <i class="anticon anticon-mail"></i>
+ Navigation One
+ </li>
+ <li role="menuitem" class="ant-menu-item">
+ <i class="anticon anticon-calendar"></i>
+ Navigation Two
+ </li>
+ <li class="ant-menu-submenu ant-menu-submenu-vertical">
+ <div aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title"><span><i class="anticon anticon-appstore"></i><span>Navigation Three</span></span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ </li>
+ <li class="ant-menu-submenu ant-menu-submenu-vertical">
+ <div aria-owns="sub2$Menu" aria-haspopup="true" class="ant-menu-submenu-title"><span><i class="anticon anticon-setting"></i><span>Navigation Four</span></span>
+ <i class="ant-menu-submenu-arrow"></i>
+ </div>
+ </li>
+ </ul>
+</div>
+`;
diff --git a/components/menu/__tests__/demo.test.js b/components/menu/__tests__/demo.test.js
new file mode 100644
index 000000000..ba6829715
--- /dev/null
+++ b/components/menu/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('menu')
diff --git a/components/message/__tests__/__snapshots__/demo.test.js.snap b/components/message/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..55ea02b58
--- /dev/null
+++ b/components/message/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/message/demo/duration.md correctly 1`] = `<button type="button" class="ant-btn ant-btn-default"><span>Customized display duration</span></button>`;
+
+exports[`renders ./components/message/demo/info.md correctly 1`] = `<button type="button" class="ant-btn ant-btn-primary"><span>Display normal message</span></button>`;
+
+exports[`renders ./components/message/demo/loading.md correctly 1`] = `<button type="button" class="ant-btn ant-btn-default"><span>Display a loading indicator</span></button>`;
+
+exports[`renders ./components/message/demo/other.md correctly 1`] = `
+<div>
+ <button type="button" class="ant-btn ant-btn-default"><span>Success</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Error</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Warning</span></button>
+</div>
+`;
diff --git a/components/message/__tests__/demo.test.js b/components/message/__tests__/demo.test.js
new file mode 100644
index 000000000..058809c40
--- /dev/null
+++ b/components/message/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('message')
diff --git a/components/modal/__tests__/__snapshots__/demo.test.js.snap b/components/modal/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..d083d24dc
--- /dev/null
+++ b/components/modal/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/modal/demo/async.md correctly 1`] = `
+<div>
+ <button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
+ <!---->
+</div>
+`;
+
+exports[`renders ./components/modal/demo/basic.md correctly 1`] = `
+<div>
+ <button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
+ <!---->
+</div>
+`;
+
+exports[`renders ./components/modal/demo/confirm.md correctly 1`] = `
+<div>
+ <button type="button" class="ant-btn ant-btn-default"><span>Confirm</span></button>
+ <button type="button" class="ant-btn ant-btn-dashed"><span>Delete</span></button>
+</div>
+`;
+
+exports[`renders ./components/modal/demo/confirm-promise.md correctly 1`] = `<button type="button" class="ant-btn ant-btn-default"><span>Confirm</span></button>`;
+
+exports[`renders ./components/modal/demo/footer.md correctly 1`] = `
+<div>
+ <button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
+ <!---->
+</div>
+`;
+
+exports[`renders ./components/modal/demo/info.md correctly 1`] = `
+<div>
+ <button type="button" class="ant-btn ant-btn-default"><span>Info</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Success</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Error</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Warning</span></button>
+</div>
+`;
+
+exports[`renders ./components/modal/demo/locale.md correctly 1`] = `
+<div>
+ <button type="button" class="ant-btn ant-btn-primary"><span>Modal</span></button>
+ <!---->
+ <br>
+ <br>
+ <button type="button" class="ant-btn ant-btn-default"><span>Confirm</span></button>
+</div>
+`;
+
+exports[`renders ./components/modal/demo/manual.md correctly 1`] = `<button type="button" class="ant-btn ant-btn-default"><span>Success</span></button>`;
+
+exports[`renders ./components/modal/demo/position.md correctly 1`] = `
+<div id="components-modal-demo-position">
+ <button type="button" class="ant-btn ant-btn-primary"><span>Display a modal dialog at 20px to Top</span></button>
+ <!---->
+ <br>
+ <br>
+ <button type="button" class="ant-btn ant-btn-primary"><span>Vertically centered modal dialog</span></button>
+ <!---->
+</div>
+`;
diff --git a/components/modal/__tests__/demo.test.js b/components/modal/__tests__/demo.test.js
new file mode 100644
index 000000000..0a049f3fd
--- /dev/null
+++ b/components/modal/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('modal')
diff --git a/components/modal/confirm.js b/components/modal/confirm.js
index fc2f7913a..ff18a57cc 100644
--- a/components/modal/confirm.js
+++ b/components/modal/confirm.js
@@ -1,9 +1,6 @@
import Vue from 'vue'
import ConfirmDialog from './ConfirmDialog'
-import antRefDirective from '../_util/antRefDirective'
-Vue.use(antRefDirective)
-
export default function confirm (config) {
const div = document.createElement('div')
const el = document.createElement('div')
diff --git a/components/modal/demo/info.md b/components/modal/demo/info.md
index ca0355ac4..28d11264c 100644
--- a/components/modal/demo/info.md
+++ b/components/modal/demo/info.md
@@ -19,7 +19,7 @@ In the various types of information modal dialog, only one button to close dialo
</div>
</template>
<script>
-import { Modal } from 'antd'
+import { Modal } from 'vue-antd-ui'
export default {
methods: {
info() {
diff --git a/components/notification/__tests__/__snapshots__/demo.test.js.snap b/components/notification/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..01d1f186f
--- /dev/null
+++ b/components/notification/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/notification/demo/basic.md correctly 1`] = `<button type="button" class="ant-btn ant-btn-primary"><span>Open the notification box</span></button>`;
+
+exports[`renders ./components/notification/demo/custom-icon.md correctly 1`] = `<button type="button" class="ant-btn ant-btn-primary"><span>Open the notification box</span></button>`;
+
+exports[`renders ./components/notification/demo/custom-style.md correctly 1`] = `<button type="button" class="ant-btn ant-btn-primary"><span>Open the notification box</span></button>`;
+
+exports[`renders ./components/notification/demo/duration.md correctly 1`] = `<button type="button" class="ant-btn ant-btn-primary"><span>Open the notification box</span></button>`;
+
+exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
+<div>
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:120px;margin-right:10px;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="topRight" class="ant-select-selection-selected-value" style="display:block;opacity:1;">topRight</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <button type="button" class="ant-btn ant-btn-primary"><span>Open the notification box</span></button>
+</div>
+`;
+
+exports[`renders ./components/notification/demo/with-btn.md correctly 1`] = `<button type="button" class="ant-btn ant-btn-primary"><span>Open the notification box</span></button>`;
+
+exports[`renders ./components/notification/demo/with-icon.md correctly 1`] = `
+<div>
+ <button type="button" class="ant-btn ant-btn-default"><span>Success</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Info</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Warning</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Error</span></button>
+</div>
+`;
diff --git a/components/notification/__tests__/demo.test.js b/components/notification/__tests__/demo.test.js
new file mode 100644
index 000000000..4793bb039
--- /dev/null
+++ b/components/notification/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('notification')
diff --git a/components/notification/demo/placement.md b/components/notification/demo/placement.md
index 906cdc4d3..921aac108 100644
--- a/components/notification/demo/placement.md
+++ b/components/notification/demo/placement.md
@@ -13,7 +13,7 @@ A notification box can pop up from `topRight` or `bottomRight` or `bottomLeft` o
<template>
<div>
<a-select v-model="selected" :style="{ width: '120px', marginRight: '10px' }">
- <a-select-option v-for="val in options" :key="val" :value="val">{{val}}</option>
+ <a-select-option v-for="val in options" :key="val" :value="val">{{val}}</a-select-option>
</a-select>
<a-button type="primary" @click="openNotification">Open the notification box</a-button>
</div>
diff --git a/components/pagination/__tests__/__snapshots__/demo.test.js.snap b/components/pagination/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..c27f2904e
--- /dev/null
+++ b/components/pagination/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,440 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/pagination/demo/basic.md correctly 1`] = `
+<ul unselectable="unselectable" class="ant-pagination">
+ <li title="Previous Page" tabIndex="0" class=" ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2 ant-pagination-item-active">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5">
+ <a>5</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+</ul>
+`;
+
+exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
+<div>
+ <ul unselectable="unselectable" class="ant-pagination">
+ <li title="Previous Page" tabIndex="0" class=" ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3 ant-pagination-item-active">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next">
+ <a>5</a>
+ </li>
+ <li title="Next 5 Pages" tabIndex="0" class="ant-pagination-jump-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="50" tabIndex="0" class="ant-pagination-item ant-pagination-item-50">
+ <a>50</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li class="ant-pagination-options">
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled ant-pagination-options-size-changer">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="10 / page" class="ant-select-selection-selected-value" style="display:block;opacity:1;">10 / page</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ </li>
+ </ul>
+ <br>
+ <ul unselectable="unselectable" class="ant-pagination">
+ <li title="Previous Page" tabIndex="0" class=" ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4 ant-pagination-item-active">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5">
+ <a>5</a>
+ </li>
+ <li title="6" tabIndex="0" class="ant-pagination-item ant-pagination-item-6 ant-pagination-item-before-jump-next">
+ <a>6</a>
+ </li>
+ <li title="Next 5 Pages" tabIndex="0" class="ant-pagination-jump-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="25" tabIndex="0" class="ant-pagination-item ant-pagination-item-25">
+ <a>25</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li class="ant-pagination-options">
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled ant-pagination-options-size-changer">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="20 / page" class="ant-select-selection-selected-value" style="display:block;opacity:1;">20 / page</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ </li>
+ </ul>
+</div>
+`;
+
+exports[`renders ./components/pagination/demo/controlled.md correctly 1`] = `
+<ul unselectable="unselectable" class="ant-pagination">
+ <li title="Previous Page" tabIndex="0" class=" ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3 ant-pagination-item-active">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5">
+ <a>5</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+</ul>
+`;
+
+exports[`renders ./components/pagination/demo/custom-changer.md correctly 1`] = `
+<ul unselectable="unselectable" class="ant-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5">
+ <a>5</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li class="ant-pagination-options">
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled ant-pagination-options-size-changer">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="[object Object],[object Object],[object Object]" class="ant-select-selection-selected-value" style="display:block;opacity:1;"><span>10条/页</span>
+ <!---->
+ </div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ </li>
+</ul>
+`;
+
+exports[`renders ./components/pagination/demo/itemRender.md correctly 1`] = `
+<ul unselectable="unselectable" class="ant-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a>Previous</a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next">
+ <a>5</a>
+ </li>
+ <li title="Next 5 Pages" tabIndex="0" class="ant-pagination-jump-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="50" tabIndex="0" class="ant-pagination-item ant-pagination-item-50">
+ <a>50</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a>Next</a>
+ </li>
+ <!---->
+</ul>
+`;
+
+exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
+<ul unselectable="unselectable" class="ant-pagination">
+ <li title="Previous Page" tabIndex="0" class=" ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2 ant-pagination-item-active">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next">
+ <a>5</a>
+ </li>
+ <li title="Next 5 Pages" tabIndex="0" class="ant-pagination-jump-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="50" tabIndex="0" class="ant-pagination-item ant-pagination-item-50">
+ <a>50</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li class="ant-pagination-options">
+ <div class="ant-pagination-options-quick-jumper">Goto
+ <input type="text" value="">
+ </div>
+ </li>
+</ul>
+`;
+
+exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
+<div id="components-pagination-demo-mini">
+ <ul unselectable="unselectable" class="ant-pagination mini">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5">
+ <a>5</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ <ul unselectable="unselectable" class="ant-pagination mini">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5">
+ <a>5</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li class="ant-pagination-options">
+ <div class="ant-select-sm ant-select ant-select-enabled ant-select-sm ant-select ant-select-enabled ant-select-sm ant-pagination-options-size-changer">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="10 / page" class="ant-select-selection-selected-value" style="display:block;opacity:1;">10 / page</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <div class="ant-pagination-options-quick-jumper">Goto
+ <input type="text" value="">
+ </div>
+ </li>
+ </ul>
+ <ul unselectable="unselectable" class="ant-pagination mini">
+ <li class="ant-pagination-total-text">Total 50 items</li>
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5">
+ <a>5</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+</div>
+`;
+
+exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
+<ul unselectable="unselectable" class="ant-pagination">
+ <li title="Previous Page" tabIndex="0" class=" ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1">
+ <a>1</a>
+ </li>
+ <li title="Previous 5 Pages" tabIndex="0" class="ant-pagination-jump-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4 ant-pagination-item-after-jump-prev">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5">
+ <a>5</a>
+ </li>
+ <li title="6" tabIndex="0" class="ant-pagination-item ant-pagination-item-6 ant-pagination-item-active">
+ <a>6</a>
+ </li>
+ <li title="7" tabIndex="0" class="ant-pagination-item ant-pagination-item-7">
+ <a>7</a>
+ </li>
+ <li title="8" tabIndex="0" class="ant-pagination-item ant-pagination-item-8 ant-pagination-item-before-jump-next">
+ <a>8</a>
+ </li>
+ <li title="Next 5 Pages" tabIndex="0" class="ant-pagination-jump-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="50" tabIndex="0" class="ant-pagination-item ant-pagination-item-50">
+ <a>50</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+</ul>
+`;
+
+exports[`renders ./components/pagination/demo/simple.md correctly 1`] = `
+<ul class="ant-pagination ant-pagination-simple">
+ <li title="Previous Page" tabIndex="0" class=" ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="2/5" class="ant-pagination-simple-pager">
+ <input type="text" size="3" value="2"><span class="ant-pagination-slash">／</span>5</li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+</ul>
+`;
+
+exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
+<div>
+ <ul unselectable="unselectable" class="ant-pagination">
+ <li class="ant-pagination-total-text">Total 85 items</li>
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5">
+ <a>5</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ <br>
+ <ul unselectable="unselectable" class="ant-pagination">
+ <li class="ant-pagination-total-text">1-20 of 85 items</li>
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5">
+ <a>5</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+</div>
+`;
diff --git a/components/pagination/__tests__/demo.test.js b/components/pagination/__tests__/demo.test.js
new file mode 100644
index 000000000..c9424e824
--- /dev/null
+++ b/components/pagination/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('pagination')
diff --git a/components/popconfirm/__tests__/__snapshots__/demo.test.js.snap b/components/popconfirm/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..a5057b6ad
--- /dev/null
+++ b/components/popconfirm/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/popconfirm/demo/basic.md correctly 1`] = `<a href="#">Delete</a>`;
+
+exports[`renders ./components/popconfirm/demo/dynamic-trigger.md correctly 1`] = `
+<div>
+ <a href="#">Delete a task</a>
+ <br>
+ <br> Whether directly execute：
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" checked="checked" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+</div>
+`;
+
+exports[`renders ./components/popconfirm/demo/local.md correctly 1`] = `<a href="#">Delete</a>`;
+
+exports[`renders ./components/popconfirm/demo/placement.md correctly 1`] = `
+<div id="components-a-popconfirm-demo-placement">
+ <div style="margin-left:70px;white-space:nowrap;">
+ <button type="button" class="ant-btn ant-btn-default"><span>TL</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Top</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>TR</span></button>
+ </div>
+ <div style="width:70px;float:left;">
+ <button type="button" class="ant-btn ant-btn-default"><span>LT</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Left</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>LB</span></button>
+ </div>
+ <div style="width:70px;margin-left:304px;">
+ <button type="button" class="ant-btn ant-btn-default"><span>RT</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Right</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>RB</span></button>
+ </div>
+ <div style="margin-left:70px;clear:both;white-space:nowrap;">
+ <button type="button" class="ant-btn ant-btn-default"><span>BL</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Bottom</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>BR</span></button>
+ </div>
+</div>
+`;
diff --git a/components/popconfirm/__tests__/demo.test.js b/components/popconfirm/__tests__/demo.test.js
new file mode 100644
index 000000000..b383e64e3
--- /dev/null
+++ b/components/popconfirm/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('popconfirm')
diff --git a/components/popconfirm/demo/basic.md b/components/popconfirm/demo/basic.md
index c96dab9c3..1fb0104c0 100644
--- a/components/popconfirm/demo/basic.md
+++ b/components/popconfirm/demo/basic.md
@@ -15,17 +15,16 @@ The basic example.
</a-popconfirm>
</template>
<script>
-import { message } from 'antd'
export default {
methods: {
confirm (e) {
console.log(e)
- message.success('Click on Yes')
+ this.$message.success('Click on Yes')
},
cancel (e) {
console.log(e)
- message.error('Click on No')
+ this.$message.error('Click on No')
},
},
}
diff --git a/components/popconfirm/demo/dynamic-trigger.md b/components/popconfirm/demo/dynamic-trigger.md
index bf44b216e..e7c065706 100644
--- a/components/popconfirm/demo/dynamic-trigger.md
+++ b/components/popconfirm/demo/dynamic-trigger.md
@@ -28,7 +28,7 @@ Make it pop up under some conditions.
</div>
</template>
<script>
-import { message } from 'antd'
+import { message } from 'vue-antd-ui'
export default {
data () {
diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md
index ed9880250..422a036e1 100644
--- a/components/popconfirm/demo/placement.md
+++ b/components/popconfirm/demo/placement.md
@@ -106,7 +106,7 @@ There are 12 `placement` options available. Use `arrowPointAtCenter` if you want
</div>
</template>
<script>
-import { message } from 'antd'
+import { message } from 'vue-antd-ui'
export default {
data () {
diff --git a/components/popover/__tests__/__snapshots__/demo.test.js.snap b/components/popover/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..eae067a04
--- /dev/null
+++ b/components/popover/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/popover/demo/arrow-point-at-center.md correctly 1`] = `
+<div>
+ <button type="button" class="ant-btn ant-btn-default"><span>Align edge / 边缘对齐</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Arrow points to center / 箭头指向中心</span></button>
+</div>
+`;
+
+exports[`renders ./components/popover/demo/basic.md correctly 1`] = `<button type="button" class="ant-btn ant-btn-primary"><span>Hover me</span></button>`;
+
+exports[`renders ./components/popover/demo/control.md correctly 1`] = `<button type="button" class="ant-btn ant-btn-primary"><span>Click me</span></button>`;
+
+exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
+<div id="components-popover-demo-placement">
+ <div style="margin-left:70px;white-space:nowrap;">
+ <button type="button" class="ant-btn ant-btn-default"><span>TL</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Top</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>TR</span></button>
+ </div>
+ <div style="width:70px;float:left;">
+ <button type="button" class="ant-btn ant-btn-default"><span>LT</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Left</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>LB</span></button>
+ </div>
+ <div style="width:70px;margin-left:304px;">
+ <button type="button" class="ant-btn ant-btn-default"><span>RT</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Right</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>RB</span></button>
+ </div>
+ <div style="margin-left:70px;clear:both;white-space:nowrap;">
+ <button type="button" class="ant-btn ant-btn-default"><span>BL</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Bottom</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>BR</span></button>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/popover/demo/triggerType.md correctly 1`] = `
+<div>
+ <button type="button" class="ant-btn ant-btn-primary"><span>Hover me</span></button>
+ <button type="button" class="ant-btn ant-btn-primary"><span>Focus me</span></button>
+ <button type="button" class="ant-btn ant-btn-primary"><span>Click me</span></button>
+</div>
+`;
diff --git a/components/popover/__tests__/demo.test.js b/components/popover/__tests__/demo.test.js
new file mode 100644
index 000000000..31e8c14df
--- /dev/null
+++ b/components/popover/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('popover')
diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..c4c7422ce
--- /dev/null
+++ b/components/progress/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,257 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
+<div>
+ <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
+ <div class="ant-progress-inner" style="width:120px;height:120px;font-size:24px;">
+ <svg viewBox="0 0 100 100" class="ant-progress-circle">
+ <path d="M 50,50 m 0,-47
+ a 47,47 0 1 1 0,94
+ a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;"></path>
+ <path d="M 50,50 m 0,-47
+ a 47,47 0 1 1 0,94
+ a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+ </svg><span class="ant-progress-text">75%</span></div>
+ </div>
+ <div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default">
+ <div class="ant-progress-inner" style="width:120px;height:120px;font-size:24px;">
+ <svg viewBox="0 0 100 100" class="ant-progress-circle">
+ <path d="M 50,50 m 0,-47
+ a 47,47 0 1 1 0,94
+ a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;"></path>
+ <path d="M 50,50 m 0,-47
+ a 47,47 0 1 1 0,94
+ a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#ff5500" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+ </svg><span class="ant-progress-text"><i class="anticon anticon-cross"></i></span></div>
+ </div>
+ <div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
+ <div class="ant-progress-inner" style="width:120px;height:120px;font-size:24px;">
+ <svg viewBox="0 0 100 100" class="ant-progress-circle">
+ <path d="M 50,50 m 0,-47
+ a 47,47 0 1 1 0,94
+ a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;"></path>
+ <path d="M 50,50 m 0,-47
+ a 47,47 0 1 1 0,94
+ a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#87d068" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+ </svg><span class="ant-progress-text"><i class="anticon anticon-check"></i></span></div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
+<div>
+ <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
+ <div class="ant-progress-inner" style="width:120px;height:120px;font-size:24px;">
+ <svg viewBox="0 0 100 100" class="ant-progress-circle">
+ <path d="M 50,50 m 0,-47
+ a 47,47 0 1 1 0,94
+ a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;"></path>
+ </svg><span class="ant-progress-text">0%</span></div>
+ </div>
+ <div class="ant-btn-group">
+ <button type="button" class="ant-btn ant-btn-default">
+ <i class="anticon anticon-minus"></i>
+ </button>
+ <button type="button" class="ant-btn ant-btn-default">
+ <i class="anticon anticon-plus"></i>
+ </button>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
+<div>
+ <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
+ <div class="ant-progress-inner" style="width:80px;height:80px;font-size:18px;">
+ <svg viewBox="0 0 100 100" class="ant-progress-circle">
+ <path d="M 50,50 m 0,-47
+ a 47,47 0 1 1 0,94
+ a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;"></path>
+ <path d="M 50,50 m 0,-47
+ a 47,47 0 1 1 0,94
+ a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray:88.59291283123217px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+ </svg><span class="ant-progress-text">30%</span></div>
+ </div>
+ <div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default">
+ <div class="ant-progress-inner" style="width:80px;height:80px;font-size:18px;">
+ <svg viewBox="0 0 100 100" class="ant-progress-circle">
+ <path d="M 50,50 m 0,-47
+ a 47,47 0 1 1 0,94
+ a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;"></path>
+ <path d="M 50,50 m 0,-47
+ a 47,47 0 1 1 0,94
+ a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#ff5500" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+ </svg><span class="ant-progress-text"><i class="anticon anticon-cross"></i></span></div>
+ </div>
+ <div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
+ <div class="ant-progress-inner" style="width:80px;height:80px;font-size:18px;">
+ <svg viewBox="0 0 100 100" class="ant-progress-circle">
+ <path d="M 50,50 m 0,-47
+ a 47,47 0 1 1 0,94
+ a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;"></path>
+ <path d="M 50,50 m 0,-47
+ a 47,47 0 1 1 0,94
+ a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#87d068" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+ </svg><span class="ant-progress-text"><i class="anticon anticon-check"></i></span></div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
+<div>
+ <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
+ <div class="ant-progress-inner" style="width:120px;height:120px;font-size:24px;">
+ <svg viewBox="0 0 100 100" class="ant-progress-circle">
+ <path d="M 50,50 m 0,47
+ a 47,47 0 1 1 0,-94
+ a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray:220.30970943744057px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;"></path>
+ <path d="M 50,50 m 0,47
+ a 47,47 0 1 1 0,-94
+ a 47,47 0 1 1 0,94" stroke-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray:165.23228207808043px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+ </svg><span class="ant-progress-text">75%</span></div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = `
+<div>
+ <div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default">
+ <div>
+ <div class="ant-progress-outer">
+ <div class="ant-progress-inner">
+ <div class="ant-progress-bg" style="width:0%;height:8px;"></div>
+ </div>
+ </div><span class="ant-progress-text">0%</span></div>
+ </div>
+ <div class="ant-btn-group">
+ <button type="button" class="ant-btn ant-btn-default">
+ <i class="anticon anticon-minus"></i>
+ </button>
+ <button type="button" class="ant-btn ant-btn-default">
+ <i class="anticon anticon-plus"></i>
+ </button>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/progress/demo/format.md correctly 1`] = `
+<div>
+ <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
+ <div class="ant-progress-inner" style="width:120px;height:120px;font-size:24px;">
+ <svg viewBox="0 0 100 100" class="ant-progress-circle">
+ <path d="M 50,50 m 0,-47
+ a 47,47 0 1 1 0,94
+ a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;"></path>
+ <path d="M 50,50 m 0,-47
+ a 47,47 0 1 1 0,94
+ a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+ </svg><span class="ant-progress-text">75 Days</span></div>
+ </div>
+ <div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
+ <div class="ant-progress-inner" style="width:120px;height:120px;font-size:24px;">
+ <svg viewBox="0 0 100 100" class="ant-progress-circle">
+ <path d="M 50,50 m 0,-47
+ a 47,47 0 1 1 0,94
+ a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;"></path>
+ <path d="M 50,50 m 0,-47
+ a 47,47 0 1 1 0,94
+ a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke="#87d068" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+ </svg><span class="ant-progress-text">Done</span></div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/progress/demo/line.md correctly 1`] = `
+<div>
+ <div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default">
+ <div>
+ <div class="ant-progress-outer">
+ <div class="ant-progress-inner">
+ <div class="ant-progress-bg" style="width:30%;height:8px;"></div>
+ </div>
+ </div><span class="ant-progress-text">30%</span></div>
+ </div>
+ <div class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default">
+ <div>
+ <div class="ant-progress-outer">
+ <div class="ant-progress-inner">
+ <div class="ant-progress-bg" style="width:50%;height:8px;"></div>
+ </div>
+ </div><span class="ant-progress-text">50%</span></div>
+ </div>
+ <div class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-default">
+ <div>
+ <div class="ant-progress-outer">
+ <div class="ant-progress-inner">
+ <div class="ant-progress-bg" style="width:70%;height:8px;"></div>
+ </div>
+ </div><span class="ant-progress-text"><i class="anticon anticon-cross-circle"></i></span></div>
+ </div>
+ <div class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default">
+ <div>
+ <div class="ant-progress-outer">
+ <div class="ant-progress-inner">
+ <div class="ant-progress-bg" style="width:100%;height:8px;"></div>
+ </div>
+ </div><span class="ant-progress-text"><i class="anticon anticon-check-circle"></i></span></div>
+ </div>
+ <div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default">
+ <div>
+ <div class="ant-progress-outer">
+ <div class="ant-progress-inner">
+ <div class="ant-progress-bg" style="width:50%;height:8px;"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
+<div style="width:170px;">
+ <div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small">
+ <div>
+ <div class="ant-progress-outer">
+ <div class="ant-progress-inner">
+ <div class="ant-progress-bg" style="width:30%;height:6px;"></div>
+ </div>
+ </div><span class="ant-progress-text">30%</span></div>
+ </div>
+ <div class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-small">
+ <div>
+ <div class="ant-progress-outer">
+ <div class="ant-progress-inner">
+ <div class="ant-progress-bg" style="width:50%;height:6px;"></div>
+ </div>
+ </div><span class="ant-progress-text">50%</span></div>
+ </div>
+ <div class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-small">
+ <div>
+ <div class="ant-progress-outer">
+ <div class="ant-progress-inner">
+ <div class="ant-progress-bg" style="width:70%;height:6px;"></div>
+ </div>
+ </div><span class="ant-progress-text"><i class="anticon anticon-cross-circle"></i></span></div>
+ </div>
+ <div class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-small">
+ <div>
+ <div class="ant-progress-outer">
+ <div class="ant-progress-inner">
+ <div class="ant-progress-bg" style="width:100%;height:6px;"></div>
+ </div>
+ </div><span class="ant-progress-text"><i class="anticon anticon-check-circle"></i></span></div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
+<div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default">
+ <div>
+ <div class="ant-progress-outer">
+ <div class="ant-progress-inner">
+ <div class="ant-progress-bg" style="width:60%;height:8px;"></div>
+ <div class="ant-progress-success-bg" style="width:30%;height:8px;"></div>
+ </div>
+ </div><span class="ant-progress-text">60%</span></div>
+</div>
+`;
diff --git a/components/progress/__tests__/demo.test.js b/components/progress/__tests__/demo.test.js
new file mode 100644
index 000000000..a2bf99380
--- /dev/null
+++ b/components/progress/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('progress')
diff --git a/components/radio/__tests__/__snapshots__/demo.test.js.snap b/components/radio/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..b43f3643b
--- /dev/null
+++ b/components/radio/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,123 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/radio/demo/basic.md correctly 1`] = `<label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Radio</span></label>`;
+
+exports[`renders ./components/radio/demo/disabled.md correctly 1`] = `
+<div>
+ <label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="disabled" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Disabled</span></label>
+ <br>
+ <label class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-checked ant-radio-disabled"><input type="radio" disabled="disabled" checked="checked" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Disabled</span></label>
+ <div style="margin-top:20;">
+ <button type="button" class="ant-btn ant-btn-primary"><span>Toggle disabled</span></button>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/radio/demo/radioButton.md correctly 1`] = `
+<div>
+ <div>
+ <div class="ant-radio-group ant-radio-group-default">
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label>
+ </div>
+ </div>
+ <div style="margin-top:16px;">
+ <div class="ant-radio-group ant-radio-group-default">
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label>
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="disabled" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label>
+ </div>
+ </div>
+ <div style="margin-top:16px;">
+ <div class="ant-radio-group ant-radio-group-default">
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/radio/demo/radioGroup.md correctly 1`] = `
+<div class="ant-radio-group ant-radio-group-default">
+ <label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" checked="checked" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>A</span></label>
+ <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>B</span></label>
+ <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>C</span></label>
+ <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>D</span></label>
+</div>
+`;
+
+exports[`renders ./components/radio/demo/radioGroup-more.md correctly 1`] = `
+<div class="ant-radio-group ant-radio-group-default">
+ <label class="ant-radio-wrapper ant-radio-wrapper-checked" style="display:block;height:30px;line-height:30px;"><span class="ant-radio ant-radio-checked"><input type="radio" checked="checked" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Option A</span></label>
+ <label class="ant-radio-wrapper" style="display:block;height:30px;line-height:30px;"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Option B</span></label>
+ <label class="ant-radio-wrapper" style="display:block;height:30px;line-height:30px;"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Option C</span></label>
+ <label class="ant-radio-wrapper" style="display:block;height:30px;line-height:30px;"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>
+ More...
+ <!----></span></label>
+</div>
+`;
+
+exports[`renders ./components/radio/demo/radioGroup-options.md correctly 1`] = `
+<div>
+ <div class="ant-radio-group ant-radio-group-default">
+ <label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" checked="checked" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Apple</span></label>
+ <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Pear</span></label>
+ <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Orange</span></label>
+ </div>
+ <br>
+ <div class="ant-radio-group ant-radio-group-default">
+ <label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" checked="checked" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Apple</span></label>
+ <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Pear</span></label>
+ <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Orange</span></label>
+ </div>
+ <br>
+ <div class="ant-radio-group ant-radio-group-default">
+ <label class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-checked ant-radio-disabled"><input type="radio" disabled="disabled" checked="checked" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Apple</span></label>
+ <label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="disabled" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Pear</span></label>
+ <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Orange</span></label>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/radio/demo/radioGroup-with-name.md correctly 1`] = `
+<div class="ant-radio-group ant-radio-group-default">
+ <label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" checked="checked" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>A</span></label>
+ <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>B</span></label>
+ <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>C</span></label>
+ <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>D</span></label>
+</div>
+`;
+
+exports[`renders ./components/radio/demo/size.md correctly 1`] = `
+<div>
+ <div>
+ <div class="ant-radio-group ant-radio-group-large">
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label>
+ </div>
+ </div>
+ <div style="margin-top:16px;">
+ <div class="ant-radio-group ant-radio-group-default">
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label>
+ </div>
+ </div>
+ <div style="margin-top:16px;">
+ <div class="ant-radio-group ant-radio-group-small">
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label>
+ </div>
+ </div>
+</div>
+`;
diff --git a/components/radio/__tests__/demo.test.js b/components/radio/__tests__/demo.test.js
new file mode 100644
index 000000000..d3ffac9a0
--- /dev/null
+++ b/components/radio/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('radio')
diff --git a/components/rate/__tests__/__snapshots__/demo.test.js.snap b/components/rate/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..f06e61d0c
--- /dev/null
+++ b/components/rate/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,323 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/rate/demo/basic.md correctly 1`] = `
+<ul tabIndex="0" class="ant-rate">
+ <li class="ant-rate-star ant-rate-star-full">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-full">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+</ul>
+`;
+
+exports[`renders ./components/rate/demo/character.md correctly 1`] = `
+<div>
+ <ul tabIndex="0" class="ant-rate">
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-heart"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-heart"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-heart"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-heart"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-heart"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-heart"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-heart"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-heart"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-heart"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-heart"></i>
+ </div>
+ </li>
+ </ul>
+ <br>
+ <ul tabIndex="0" class="ant-rate" style="font-size:36px;">
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">A</div>
+ <div class="ant-rate-star-second">A</div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">A</div>
+ <div class="ant-rate-star-second">A</div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">A</div>
+ <div class="ant-rate-star-second">A</div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">A</div>
+ <div class="ant-rate-star-second">A</div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">A</div>
+ <div class="ant-rate-star-second">A</div>
+ </li>
+ </ul>
+ <br>
+ <ul tabIndex="0" class="ant-rate">
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">好</div>
+ <div class="ant-rate-star-second">好</div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">好</div>
+ <div class="ant-rate-star-second">好</div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">好</div>
+ <div class="ant-rate-star-second">好</div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">好</div>
+ <div class="ant-rate-star-second">好</div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">好</div>
+ <div class="ant-rate-star-second">好</div>
+ </li>
+ </ul>
+ <br>
+</div>
+`;
+
+exports[`renders ./components/rate/demo/clear.md correctly 1`] = `
+<div>
+ <ul tabIndex="0" class="ant-rate">
+ <li class="ant-rate-star ant-rate-star-full">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-full">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-full">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ </ul> allowClear: true
+ <br>
+ <ul tabIndex="0" class="ant-rate">
+ <li class="ant-rate-star ant-rate-star-full">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-full">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-full">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ </ul> allowClear: false
+ <br>
+</div>
+`;
+
+exports[`renders ./components/rate/demo/disabled.md correctly 1`] = `
+<ul tabIndex="-1" class="ant-rate ant-rate-disabled">
+ <li class="ant-rate-star ant-rate-star-full">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-full">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+</ul>
+`;
+
+exports[`renders ./components/rate/demo/half.md correctly 1`] = `
+<ul tabIndex="0" class="ant-rate">
+ <li class="ant-rate-star ant-rate-star-full">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-full">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-half ant-rate-star-active">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+ <li class="ant-rate-star ant-rate-star-zero">
+ <div class="ant-rate-star-first">
+ <i class="anticon anticon-star"></i>
+ </div>
+ <div class="ant-rate-star-second">
+ <i class="anticon anticon-star"></i>
+ </div>
+ </li>
+</ul>
+`;
+
+exports[`renders ./components/rate/demo/text.md correctly 1`] = `<span><ul tabIndex="0" class="ant-rate"><li class="ant-rate-star ant-rate-star-full"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li class="ant-rate-star ant-rate-star-full"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li class="ant-rate-star ant-rate-star-full"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li class="ant-rate-star ant-rate-star-zero"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li><li class="ant-rate-star ant-rate-star-zero"><div class="ant-rate-star-first"><i class="anticon anticon-star"></i></div><div class="ant-rate-star-second"><i class="anticon anticon-star"></i></div></li></ul> <span class="ant-rate-text">3 stars</span></span>`;
diff --git a/components/rate/__tests__/demo.test.js b/components/rate/__tests__/demo.test.js
new file mode 100644
index 000000000..6efda20cd
--- /dev/null
+++ b/components/rate/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('rate')
diff --git a/components/select/__tests__/__snapshots__/demo.test.js.snap b/components/select/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..62ffbdb61
--- /dev/null
+++ b/components/select/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,250 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/select/demo/automatic-tokenization.md correctly 1`] = `
+<div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:100%;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" class="ant-select-selection ant-select-selection--multiple">
+ <div class="ant-select-selection__rendered">
+ <ul>
+ <li class="ant-select-search ant-select-search--inline">
+ <div class="ant-select-search__field__wrap">
+ <input autoComplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div>
+ </li>
+ </ul>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/select/demo/basic.md correctly 1`] = `
+<div>
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:120px;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="Lucy" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Lucy</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <div class="ant-select ant-select-disabled ant-select-allow-clear ant-select ant-select-disabled ant-select-allow-clear" style="width:120px;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="-1" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="Lucy" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Lucy</div>
+ </div><span unselectable="unselectable" class="ant-select-selection__clear" style="user-select:none;webkit-user-select:none;"></span><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/select/demo/combobox.md correctly 1`] = `
+<div class="ant-select ant-select-combobox ant-select-enabled ant-select ant-select-combobox ant-select-enabled" style="width:200px;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div unselectable="unselectable" class="ant-select-selection__placeholder" style="display:block;user-select:none;webkit-user-select:none;">Enter the account name</div>
+ <ul>
+ <li class="ant-select-search ant-select-search--inline">
+ <div class="ant-select-search__field__wrap">
+ <input autoComplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div>
+ </li>
+ </ul>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+</div>
+`;
+
+exports[`renders ./components/select/demo/coordinate.md correctly 1`] = `
+<div>
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:120px;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="Zhejiang" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Zhejiang</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:120px;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="Hangzhou" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Hangzhou</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/select/demo/label-in-value.md correctly 1`] = `
+<div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:120px;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="Lucy (101)" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Lucy (101)</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+</div>
+`;
+
+exports[`renders ./components/select/demo/multiple.md correctly 1`] = `
+<div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:100%;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" class="ant-select-selection ant-select-selection--multiple">
+ <div class="ant-select-selection__rendered">
+ <div unselectable="unselectable" class="ant-select-selection__placeholder" style="display:none;user-select:none;webkit-user-select:none;">Please select</div>
+ <ul>
+ <li unselectable="unselectable" title="a1" class="ant-select-selection__choice" style="user-select:none;webkit-user-select:none;">
+ <div class="ant-select-selection__choice__content">a1</div><span class="ant-select-selection__choice__remove"></span></li>
+ <li unselectable="unselectable" title="b2" class="ant-select-selection__choice" style="user-select:none;webkit-user-select:none;">
+ <div class="ant-select-selection__choice__content">b2</div><span class="ant-select-selection__choice__remove"></span></li>
+ <li class="ant-select-search ant-select-search--inline">
+ <div class="ant-select-search__field__wrap">
+ <input autoComplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div>
+ </li>
+ </ul>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/select/demo/optgroup.md correctly 1`] = `
+<div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:200px;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="Lucy" class="ant-select-selection-selected-value" style="display:block;opacity:1;">Lucy</div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+</div>
+`;
+
+exports[`renders ./components/select/demo/search.md correctly 1`] = `
+<div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:200px;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div unselectable="unselectable" class="ant-select-selection__placeholder" style="display:block;user-select:none;webkit-user-select:none;">Select a person</div>
+ <div class="ant-select-search ant-select-search--inline" style="display:none;">
+ <div class="ant-select-search__field__wrap">
+ <input autoComplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div>
+ </div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+</div>
+`;
+
+exports[`renders ./components/select/demo/search-box.md correctly 1`] = `
+<div class="ant-select ant-select-combobox ant-select-enabled ant-select ant-select-combobox ant-select-enabled" style="width:200px;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div unselectable="unselectable" class="ant-select-selection__placeholder" style="display:block;user-select:none;webkit-user-select:none;">input search text</div>
+ <ul>
+ <li class="ant-select-search ant-select-search--inline">
+ <div class="ant-select-search__field__wrap">
+ <input autoComplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div>
+ </li>
+ </ul>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/select/demo/select-users.md correctly 1`] = `
+<div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:100%;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" class="ant-select-selection ant-select-selection--multiple">
+ <div class="ant-select-selection__rendered">
+ <div unselectable="unselectable" class="ant-select-selection__placeholder" style="display:block;user-select:none;webkit-user-select:none;">Select users</div>
+ <ul>
+ <li class="ant-select-search ant-select-search--inline">
+ <div class="ant-select-search__field__wrap">
+ <input autoComplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div>
+ </li>
+ </ul>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/select/demo/size.md correctly 1`] = `
+<div>
+ <div class="ant-radio-group ant-radio-group-default">
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Large</span></label>
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Default</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Small</span></label>
+ </div>
+ <br>
+ <br>
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:200px;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabIndex="0" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <div title="
+ a1
+ " class="ant-select-selection-selected-value" style="display:block;opacity:1;">
+ a1
+ </div>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <br>
+ <div class="ant-select ant-select-combobox ant-select-enabled ant-select ant-select-combobox ant-select-enabled" style="width:200px;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" class="ant-select-selection ant-select-selection--single">
+ <div class="ant-select-selection__rendered">
+ <ul>
+ <li class="ant-select-search ant-select-search--inline">
+ <div class="ant-select-search__field__wrap">
+ <input autoComplete="off" value="a1" class="ant-select-search__field"><span class="ant-select-search__field__mirror">a1 </span></div>
+ </li>
+ </ul>
+ </div><span unselectable="unselectable" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><b></b></span></div>
+ </div>
+ <br>
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:200px;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" class="ant-select-selection ant-select-selection--multiple">
+ <div class="ant-select-selection__rendered">
+ <div unselectable="unselectable" class="ant-select-selection__placeholder" style="display:none;user-select:none;webkit-user-select:none;">Please select</div>
+ <ul>
+ <li unselectable="unselectable" title="
+ a1
+ " class="ant-select-selection__choice" style="user-select:none;webkit-user-select:none;">
+ <div class="ant-select-selection__choice__content">
+ a1
+ </div><span class="ant-select-selection__choice__remove"></span></li>
+ <li unselectable="unselectable" title="
+ b2
+ " class="ant-select-selection__choice" style="user-select:none;webkit-user-select:none;">
+ <div class="ant-select-selection__choice__content">
+ b2
+ </div><span class="ant-select-selection__choice__remove"></span></li>
+ <li class="ant-select-search ant-select-search--inline">
+ <div class="ant-select-search__field__wrap">
+ <input autoComplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <br>
+ <div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:200px;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" class="ant-select-selection ant-select-selection--multiple">
+ <div class="ant-select-selection__rendered">
+ <div unselectable="unselectable" class="ant-select-selection__placeholder" style="display:none;user-select:none;webkit-user-select:none;">Please select</div>
+ <ul>
+ <li unselectable="unselectable" title="
+ a1
+ " class="ant-select-selection__choice" style="user-select:none;webkit-user-select:none;">
+ <div class="ant-select-selection__choice__content">
+ a1
+ </div><span class="ant-select-selection__choice__remove"></span></li>
+ <li unselectable="unselectable" title="
+ b2
+ " class="ant-select-selection__choice" style="user-select:none;webkit-user-select:none;">
+ <div class="ant-select-selection__choice__content">
+ b2
+ </div><span class="ant-select-selection__choice__remove"></span></li>
+ <li class="ant-select-search ant-select-search--inline">
+ <div class="ant-select-search__field__wrap">
+ <input autoComplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/select/demo/tags.md correctly 1`] = `
+<div class="ant-select ant-select-enabled ant-select ant-select-enabled" style="width:100%;">
+ <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" class="ant-select-selection ant-select-selection--multiple">
+ <div class="ant-select-selection__rendered">
+ <div unselectable="unselectable" class="ant-select-selection__placeholder" style="display:block;user-select:none;webkit-user-select:none;">Tags Mode</div>
+ <ul>
+ <li class="ant-select-search ant-select-search--inline">
+ <div class="ant-select-search__field__wrap">
+ <input autoComplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div>
+ </li>
+ </ul>
+ </div>
+ </div>
+</div>
+`;
diff --git a/components/select/__tests__/demo.test.js b/components/select/__tests__/demo.test.js
new file mode 100644
index 000000000..3c5850cdb
--- /dev/null
+++ b/components/select/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('select')
diff --git a/components/slider/__tests__/__snapshots__/demo.test.js.snap b/components/slider/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..4dfeb6b45
--- /dev/null
+++ b/components/slider/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,224 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
+<div>
+ <div class="ant-slider">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track" style="left:0%;width:30%;"></div>
+ <div class="ant-slider-step"></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" class="ant-slider-handle" style="left:30%;"></div>
+ <div class="ant-slider-mark"></div>
+ </div>
+ <div class="ant-slider">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track ant-slider-track-1" style="left:20%;width:30%;"></div>
+ <div class="ant-slider-step"></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" class="ant-slider-handle" style="left:20%;"></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" class="ant-slider-handle" style="left:50%;"></div>
+ <div class="ant-slider-mark"></div>
+ </div>
+ Disabled: <span tabIndex="0" class="ant-switch ant-switch-small"><span class="ant-switch-inner"></span></span>
+</div>
+`;
+
+exports[`renders ./components/slider/demo/event.md correctly 1`] = `
+<div class="code-box-demo">
+ <div class="ant-slider">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track" style="left:0%;width:30%;"></div>
+ <div class="ant-slider-step"></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" class="ant-slider-handle" style="left:30%;"></div>
+ <div class="ant-slider-mark"></div>
+ </div>
+ <div class="ant-slider">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track ant-slider-track-1" style="left:20%;width:30%;"></div>
+ <div class="ant-slider-step"></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" class="ant-slider-handle" style="left:20%;"></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" class="ant-slider-handle" style="left:50%;"></div>
+ <div class="ant-slider-mark"></div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
+<div class="icon-wrapper">
+ <i class="anticon anticon-frown-o" style="color:rgba(0, 0, 0, .45);"></i>
+ <div class="ant-slider">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track" style="left:0%;width:0%;"></div>
+ <div class="ant-slider-step"></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="20" aria-valuenow="0" class="ant-slider-handle" style="left:0%;"></div>
+ <div class="ant-slider-mark"></div>
+ </div>
+ <div class="ant-slider">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track" style="left:0%;width:0%;"></div>
+ <div class="ant-slider-step"></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="20" aria-valuenow="0" class="ant-slider-handle" style="left:0%;"></div>
+ <div class="ant-slider-mark"></div>
+ </div>
+ <i class="anticon anticon-smile-o" style="color:;"></i>
+</div>
+`;
+
+exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
+<div>
+ <div class="ant-row">
+ <div class="ant-col-12">
+ <div class="ant-slider">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track" style="left:0%;width:0%;"></div>
+ <div class="ant-slider-step"></div>
+ <div role="slider" tabIndex="0" aria-valuemin="1" aria-valuemax="20" aria-valuenow="1" class="ant-slider-handle" style="left:0%;"></div>
+ <div class="ant-slider-mark"></div>
+ </div>
+ </div>
+ <div class="ant-col-4">
+ <div class="ant-input-number" style="margin-left:16px;">
+ <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable"
+ role="button" aria-label="Decrease Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span>
+ </div>
+ <div role="spinbutton" aria-valuemin="1" aria-valuemax="20" aria-valuenow="1" class="ant-input-number-input-wrap">
+ <input autoComplete="off" max="20" min="1" step="1" value="1" class="ant-input-number-input">
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="ant-row">
+ <div class="ant-col-12">
+ <div class="ant-slider">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track" style="left:0%;width:0%;"></div>
+ <div class="ant-slider-step"></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0" class="ant-slider-handle" style="left:0%;"></div>
+ <div class="ant-slider-mark"></div>
+ </div>
+ </div>
+ <div class="ant-col-4">
+ <div class="ant-input-number" style="margin-left:16px;">
+ <div class="ant-input-number-handler-wrap"><span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up "><span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span></span><span unselectable="unselectable"
+ role="button" aria-label="Decrease Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"><span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span></span>
+ </div>
+ <div role="spinbutton" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0" class="ant-input-number-input-wrap">
+ <input autoComplete="off" max="1" min="0" step="0.01" value="0.00" class="ant-input-number-input">
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
+<div id="components-slider-demo-mark">
+ <h4>included=true</h4>
+ <div class="ant-slider ant-slider-with-marks">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track" style="left:0%;width:37%;"></div>
+ <div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left:0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left:26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left:37%;"></span><span class="ant-slider-dot"
+ style="left:100%;"></span></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" class="ant-slider-handle" style="left:37%;"></div>
+ <div class="ant-slider-mark"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:0%;">0°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:26%;">26°C</span>
+ <span
+ class="ant-slider-mark-text ant-slider-mark-text-active" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:37%;">37°C</span><span class="ant-slider-mark-text" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:100%;color:#f50;"><strong>100°C</strong></span></div>
+ </div>
+ <div class="ant-slider ant-slider-with-marks">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track ant-slider-track-1" style="left:26%;width:11%;"></div>
+ <div class="ant-slider-step"><span class="ant-slider-dot" style="left:0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left:26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left:37%;"></span><span class="ant-slider-dot" style="left:100%;"></span></div>
+ <div
+ role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="26" class="ant-slider-handle" style="left:26%;"></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" class="ant-slider-handle" style="left:37%;"></div>
+ <div class="ant-slider-mark"><span class="ant-slider-mark-text" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:0%;">0°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:26%;">26°C</span>
+ <span
+ class="ant-slider-mark-text ant-slider-mark-text-active" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:37%;">37°C</span><span class="ant-slider-mark-text" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:100%;color:#f50;"><strong>100°C</strong></span></div>
+</div>
+<h4>included=false</h4>
+<div class="ant-slider ant-slider-with-marks">
+ <div class="ant-slider-rail"></div>
+ <!---->
+ <div class="ant-slider-step"><span class="ant-slider-dot" style="left:0%;"></span><span class="ant-slider-dot" style="left:26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left:37%;"></span><span class="ant-slider-dot" style="left:100%;"></span></div>
+ <div
+ role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" class="ant-slider-handle" style="left:37%;"></div>
+<div class="ant-slider-mark"><span class="ant-slider-mark-text" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:0%;">0°C</span><span class="ant-slider-mark-text" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:26%;">26°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active"
+ style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:37%;">37°C</span><span class="ant-slider-mark-text" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:100%;color:#f50;"><strong>100°C</strong></span></div>
+</div>
+<h4>marks & step</h4>
+<div class="ant-slider ant-slider-with-marks">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track" style="left:0%;width:37%;"></div>
+ <div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left:0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left:26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left:37%;"></span><span class="ant-slider-dot"
+ style="left:100%;"></span></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" class="ant-slider-handle" style="left:37%;"></div>
+ <div class="ant-slider-mark"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:0%;">0°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:26%;">26°C</span>
+ <span
+ class="ant-slider-mark-text ant-slider-mark-text-active" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:37%;">37°C</span><span class="ant-slider-mark-text" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:100%;color:#f50;"><strong>100°C</strong></span></div>
+</div>
+<h4>step=null</h4>
+<div class="ant-slider ant-slider-with-marks">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track" style="left:0%;width:37%;"></div>
+ <div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left:0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left:26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left:37%;"></span><span class="ant-slider-dot"
+ style="left:100%;"></span></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" class="ant-slider-handle" style="left:37%;"></div>
+ <div class="ant-slider-mark"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:0%;">0°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:26%;">26°C</span>
+ <span
+ class="ant-slider-mark-text ant-slider-mark-text-active" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:37%;">37°C</span><span class="ant-slider-mark-text" style="width:30.000000000000004%;margin-left:-15.000000000000002%;left:100%;color:#f50;"><strong>100°C</strong></span></div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
+<div>
+ <div class="ant-slider">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track" style="left:0%;width:0%;"></div>
+ <div class="ant-slider-step"></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" class="ant-slider-handle" style="left:0%;"></div>
+ <div class="ant-slider-mark"></div>
+ </div>
+ <div class="ant-slider">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track" style="left:0%;width:0%;"></div>
+ <div class="ant-slider-step"></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" class="ant-slider-handle" style="left:0%;"></div>
+ <div class="ant-slider-mark"></div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
+<div style="height:300px;">
+ <div style="float:left;height:300px;margin-left:70px;">
+ <div class="ant-slider ant-slider-vertical">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track" style="bottom:0%;height:30%;"></div>
+ <div class="ant-slider-step"></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" class="ant-slider-handle" style="bottom:30%;"></div>
+ <div class="ant-slider-mark"></div>
+ </div>
+ </div>
+ <div style="float:left;height:300px;margin-left:70px;">
+ <div class="ant-slider ant-slider-vertical">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track ant-slider-track-1" style="bottom:20%;height:30%;"></div>
+ <div class="ant-slider-step"></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" class="ant-slider-handle" style="bottom:20%;"></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" class="ant-slider-handle" style="bottom:50%;"></div>
+ <div class="ant-slider-mark"></div>
+ </div>
+ </div>
+ <div style="float:left;height:300px;margin-left:70px;">
+ <div class="ant-slider ant-slider-with-marks ant-slider-vertical">
+ <div class="ant-slider-rail"></div>
+ <div class="ant-slider-track ant-slider-track-1" style="bottom:26%;height:11%;"></div>
+ <div class="ant-slider-step"><span class="ant-slider-dot" style="bottom:0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="bottom:26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="bottom:37%;"></span><span class="ant-slider-dot" style="bottom:100%;"></span></div>
+ <div
+ role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="26" class="ant-slider-handle" style="bottom:26%;"></div>
+ <div role="slider" tabIndex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" class="ant-slider-handle" style="bottom:37%;"></div>
+ <div class="ant-slider-mark"><span class="ant-slider-mark-text" style="margin-bottom:-50%;bottom:0%;">0°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="margin-bottom:-50%;bottom:26%;">26°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active"
+ style="margin-bottom:-50%;bottom:37%;">37°C</span><span class="ant-slider-mark-text" style="margin-bottom:-50%;bottom:100%;color:#f50;"><strong>100°C</strong></span></div>
+ </div>
+</div>
+</div>
+`;
diff --git a/components/slider/__tests__/demo.test.js b/components/slider/__tests__/demo.test.js
new file mode 100644
index 000000000..808e84aef
--- /dev/null
+++ b/components/slider/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('slider')
diff --git a/components/spin/__tests__/__snapshots__/demo.test.js.snap b/components/spin/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..b1d876a59
--- /dev/null
+++ b/components/spin/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/spin/demo/basic.md correctly 1`] = `
+<div>
+ <div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div>
+</div>
+`;
+
+exports[`renders ./components/spin/demo/custom-indicator.md correctly 1`] = `
+<div>
+ <div class="ant-spin ant-spin-spinning">
+ <i class="anticon anticon-loading anticon-spin" style="font-size:24px;"></i>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
+<div>
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="spin-content">
+ 可以点击‘切换’按钮，延迟显示 loading 效果。当 spinning 状态在 \`delay\` 时间内结束，则不显示 loading 状态。
+ </div>
+ </div>
+ </div>
+ Loading state：<span tabIndex="0" class="ant-switch"><span class="ant-switch-inner"></span></span>
+</div>
+`;
+
+exports[`renders ./components/spin/demo/inside.md correctly 1`] = `
+<div class="example">
+ <div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div>
+</div>
+`;
+
+exports[`renders ./components/spin/demo/nested.md correctly 1`] = `
+<div>
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="spin-content">
+ 可以点击‘切换’按钮，控制本区域的spin展示。
+ </div>
+ </div>
+ </div>
+ Loading state：<span tabIndex="0" class="ant-switch"><span class="ant-switch-inner"></span></span>
+</div>
+`;
+
+exports[`renders ./components/spin/demo/size.md correctly 1`] = `
+<div>
+ <div class="ant-spin ant-spin-sm ant-spin-spinning"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div>
+ <div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div>
+ <div class="ant-spin ant-spin-lg ant-spin-spinning"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span></div>
+</div>
+`;
+
+exports[`renders ./components/spin/demo/tip.md correctly 1`] = `
+<div>
+ <div class="ant-spin-nested-loading">
+ <div>
+ <div class="ant-spin ant-spin-spinning ant-spin-show-text"><span class="ant-spin-dot"><i></i><i></i><i></i><i></i></span>
+ <div class="ant-spin-text">Loading...</div>
+ </div>
+ </div>
+ <div class="ant-spin-container ant-spin-blur">
+ <div class="spin-content">
+ 我的描述文案是自定义的。。。
+ </div>
+ </div>
+ </div>
+</div>
+`;
diff --git a/components/spin/__tests__/demo.test.js b/components/spin/__tests__/demo.test.js
new file mode 100644
index 000000000..57e342cad
--- /dev/null
+++ b/components/spin/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('spin')
diff --git a/components/steps/__tests__/__snapshots__/demo.test.js.snap b/components/steps/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..8276ac322
--- /dev/null
+++ b/components/steps/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,287 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/steps/demo/customized-progress-dot.md correctly 1`] = `
+<div>
+ <div class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot">
+ <div class="ant-steps-item ant-steps-item-finish">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span>
+ </div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Finished</div>
+ <div class="ant-steps-item-description">You can hover on the dot.</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-process">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span>
+ </div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">In Progress</div>
+ <div class="ant-steps-item-description">You can hover on the dot.</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-wait">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span>
+ </div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Waiting</div>
+ <div class="ant-steps-item-description">You can hover on the dot.</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-wait">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span>
+ </div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Waiting</div>
+ <div class="ant-steps-item-description">You can hover on the dot.</div>
+ </div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/steps/demo/error.md correctly 1`] = `
+<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal">
+ <div class="ant-steps-item ant-steps-item-finish ant-steps-next-error">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon anticon anticon-check"></span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Finished</div>
+ <div class="ant-steps-item-description">This is a description.</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-error">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon anticon anticon-cross"></span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">In Progress</div>
+ <div class="ant-steps-item-description">This is a description.</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-wait">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Waiting</div>
+ <div class="ant-steps-item-description">This is a description.</div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/steps/demo/icon.md correctly 1`] = `
+<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal">
+ <div class="ant-steps-item ant-steps-item-finish">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon"><i class="anticon anticon-user"></i></span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Login</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-finish">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon"><i class="anticon anticon-solution"></i></span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Verification</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-process">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon"><i class="anticon anticon-loading anticon-spin"></i></span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Pay</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-wait">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon"><i class="anticon anticon-smile-o"></i></span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Done</div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/steps/demo/progress-dot.md correctly 1`] = `
+<div class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot">
+ <div class="ant-steps-item ant-steps-item-finish">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span>
+ </div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Finished</div>
+ <div class="ant-steps-item-description">This is a description.</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-process">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span>
+ </div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">In Progress</div>
+ <div class="ant-steps-item-description">This is a description.</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-wait">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span>
+ </div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Waiting</div>
+ <div class="ant-steps-item-description">This is a description.</div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/steps/demo/simple.md correctly 1`] = `
+<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal">
+ <div class="ant-steps-item ant-steps-item-finish">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon anticon anticon-check"></span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">
+ Finished
+ </div>
+ <div class="ant-steps-item-description"><span>This is a description.</span></div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-process">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">In Progress</div>
+ <div class="ant-steps-item-description">This is a description.</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-wait">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Waiting</div>
+ <div class="ant-steps-item-description">This is a description.</div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/steps/demo/small-size.md correctly 1`] = `
+<div class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal">
+ <div class="ant-steps-item ant-steps-item-finish">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon anticon anticon-check"></span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Finished</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-process">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">In Progress</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-wait">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Waiting</div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/steps/demo/step-next.md correctly 1`] = `
+<div>
+ <div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal">
+ <div class="ant-steps-item ant-steps-item-process">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon">1</span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">First</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-wait">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Second</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-wait">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Last</div>
+ </div>
+ </div>
+ </div>
+ <div class="steps-content">First-content</div>
+ <div class="steps-action">
+ <button type="button" class="ant-btn ant-btn-primary"><span>Next</span></button>
+ <!---->
+ <!---->
+ </div>
+</div>
+`;
+
+exports[`renders ./components/steps/demo/vertical.md correctly 1`] = `
+<div class="ant-steps ant-steps-vertical">
+ <div class="ant-steps-item ant-steps-item-finish">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon anticon anticon-check"></span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Finished</div>
+ <div class="ant-steps-item-description">This is a description.</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-process">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">In Progress</div>
+ <div class="ant-steps-item-description">This is a description.</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-wait">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Waiting</div>
+ <div class="ant-steps-item-description">This is a description.</div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/steps/demo/vertical-small.md correctly 1`] = `
+<div class="ant-steps ant-steps-vertical ant-steps-small">
+ <div class="ant-steps-item ant-steps-item-finish">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon anticon anticon-check"></span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Finished</div>
+ <div class="ant-steps-item-description">This is a description.</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-process">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">In Progress</div>
+ <div class="ant-steps-item-description">This is a description.</div>
+ </div>
+ </div>
+ <div class="ant-steps-item ant-steps-item-wait">
+ <div class="ant-steps-item-tail"></div>
+ <div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
+ <div class="ant-steps-item-content">
+ <div class="ant-steps-item-title">Waiting</div>
+ <div class="ant-steps-item-description">This is a description.</div>
+ </div>
+ </div>
+</div>
+`;
diff --git a/components/steps/__tests__/demo.test.js b/components/steps/__tests__/demo.test.js
new file mode 100644
index 000000000..bf32681ad
--- /dev/null
+++ b/components/steps/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('steps')
diff --git a/components/switch/__tests__/__snapshots__/demo.test.js.snap b/components/switch/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..950401e58
--- /dev/null
+++ b/components/switch/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/switch/demo/basic.md correctly 1`] = `
+<div><span tabIndex="0" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></span>
+</div>
+`;
+
+exports[`renders ./components/switch/demo/disabled.md correctly 1`] = `
+<div><span tabIndex="-1" class="ant-switch ant-switch-checked ant-switch-disabled" style="margin-bottom:5px;"><span class="ant-switch-inner"></span></span>
+ <br>
+ <button type="button" class="ant-btn ant-btn-primary"><span>Toggle disabled</span></button>
+</div>
+`;
+
+exports[`renders ./components/switch/demo/loading.md correctly 1`] = `
+<div><span tabIndex="0" class="ant-switch ant-switch-checked ant-switch-loading"><span class="ant-switch-inner"></span></span>
+ <br> <span tabIndex="0" class="ant-switch ant-switch-small ant-switch-loading"><span class="ant-switch-inner"></span></span>
+</div>
+`;
+
+exports[`renders ./components/switch/demo/size.md correctly 1`] = `
+<div><span tabIndex="0" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></span>
+ <br> <span tabIndex="0" class="ant-switch ant-switch-checked ant-switch-small"><span class="ant-switch-inner"></span></span>
+</div>
+`;
+
+exports[`renders ./components/switch/demo/text.md correctly 1`] = `
+<div><span tabIndex="0" class="ant-switch ant-switch-checked"><span class="ant-switch-inner">开</span></span>
+ <br> <span tabIndex="0" class="ant-switch"><span class="ant-switch-inner">0</span></span>
+ <br> <span tabIndex="0" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"><i class="anticon anticon-check"></i></span></span>
+</div>
+`;
diff --git a/components/switch/__tests__/demo.test.js b/components/switch/__tests__/demo.test.js
new file mode 100644
index 000000000..bc45a58af
--- /dev/null
+++ b/components/switch/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('switch')
diff --git a/components/switch/demo/disabled.md b/components/switch/demo/disabled.md
index 36dc4d6fa..5d28dfe64 100644
--- a/components/switch/demo/disabled.md
+++ b/components/switch/demo/disabled.md
@@ -13,7 +13,7 @@ Disabled state of `Switch`.
<div>
<a-switch defaultChecked :disabled="disabled" style="margin-bottom:5px"/>
<br/>
- <a-button type="primary" @click='onToggle'>Toggle disabled</Button>
+ <a-button type="primary" @click='onToggle'>Toggle disabled</a-button>
</div>
</template>
<script>
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..f32d0e413
--- /dev/null
+++ b/components/table/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,2938 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
+<div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-large ant-table-empty">
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col style="width:20%;min-width:20%;">
+ <col style="width:20%;min-width:20%;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name" class="ant-table-column-has-filters"><span>Name<div class="ant-table-column-sorter"><span title="↑" class="ant-table-column-sorter-up off"><i class="anticon anticon-caret-up"></i></span><span title="↓" class="ant-table-column-sorter-down off"><i class="anticon anticon-caret-down"></i></span></div>
+ </span>
+ </th>
+ <th key="gender" class="ant-table-column-has-filters"><span>Gender<i title="Filter menu" class="anticon anticon-filter ant-dropdown-trigger"></i></span></th>
+ <th key="email"><span>Email</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody"></tbody>
+ </table>
+ </div>
+ <div class="ant-table-placeholder">No data</div>
+ </div>
+ </div>
+ </div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/basic.md correctly 1`] = `
+<div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-large">
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name"><span><span><i class="anticon anticon-smile-o"></i> Name</span></span>
+ </th>
+ <th key="age"><span>Age</span></th>
+ <th key="address"><span>Address</span></th>
+ <th key="action"><span>Action</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <a href="#">John Brown</a>
+ </td>
+ <td>32</td>
+ <td>New York No. 1 Lake Park</td>
+ <td><span><a href="#">Action 一 John Brown</a> <div class="ant-divider ant-divider-vertical"></div> <a href="#">Delete</a> <div class="ant-divider ant-divider-vertical"></div> <a href="#" class="ant-dropdown-link">
+ More actions <i class="anticon anticon-down"></i></a></span></td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <a href="#">Jim Green</a>
+ </td>
+ <td>42</td>
+ <td>London No. 1 Lake Park</td>
+ <td><span><a href="#">Action 一 Jim Green</a> <div class="ant-divider ant-divider-vertical"></div> <a href="#">Delete</a> <div class="ant-divider ant-divider-vertical"></div> <a href="#" class="ant-dropdown-link">
+ More actions <i class="anticon anticon-down"></i></a></span></td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <a href="#">Joe Black</a>
+ </td>
+ <td>32</td>
+ <td>Sidney No. 1 Lake Park</td>
+ <td><span><a href="#">Action 一 Joe Black</a> <div class="ant-divider ant-divider-vertical"></div> <a href="#">Delete</a> <div class="ant-divider ant-divider-vertical"></div> <a href="#" class="ant-dropdown-link">
+ More actions <i class="anticon anticon-down"></i></a></span></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/bordered.md correctly 1`] = `
+<div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-large ant-table-bordered">
+ <div class="ant-table-title">
+ Header
+ </div>
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name"><span>Name</span></th>
+ <th key="money" class="column-money"><span>Cash Assets</span></th>
+ <th key="address"><span>Address</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <a href="#">John Brown</a>
+ </td>
+ <td class="column-money">￥300,000.00</td>
+ <td>New York No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <a href="#">Jim Green</a>
+ </td>
+ <td class="column-money">￥1,256,000.00</td>
+ <td>London No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <a href="#">Joe Black</a>
+ </td>
+ <td class="column-money">￥120,000.00</td>
+ <td>Sidney No. 1 Lake Park</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="ant-table-footer">
+ Footer
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/colspan-rowspan.md correctly 1`] = `
+<div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-large ant-table-bordered">
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name"><span>Name</span></th>
+ <th key="age"><span>Age</span></th>
+ <th key="tel" colSpan="2"><span>Home phone</span></th>
+ <th key="address"><span>Address</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <a href="#">John Brown</a>
+ </td>
+ <td>32</td>
+ <td>0571-22098909</td>
+ <td>18889898989</td>
+ <td>New York No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <a href="#">Jim Green</a>
+ </td>
+ <td>42</td>
+ <td>0571-22098333</td>
+ <td>18889898888</td>
+ <td>London No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <a href="#">Joe Black</a>
+ </td>
+ <td>32</td>
+ <td rowSpan="2">0575-22098909</td>
+ <td>18900010002</td>
+ <td>Sidney No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <a href="#">Jim Red</a>
+ </td>
+ <td>18</td>
+ <!---->
+ <td>18900010002</td>
+ <td>London No. 2 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td colSpan="5"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <a href="#">Jake White</a>
+ </td>
+ <!---->
+ <!---->
+ <!---->
+ <!---->
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] = `
+<div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-large">
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name" class="ant-table-column-has-filters"><span>Name<i title="Filter menu" class="anticon anticon-smile-o ant-table-filter-icon ant-dropdown-trigger" style="color:#aaa;"></i></span></th>
+ <th key="age"><span>Age</span></th>
+ <th key="address" class="ant-table-column-has-filters"><span>Address<i title="Filter menu" class="anticon anticon-filter ant-dropdown-trigger"></i></span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ <td>32</td>
+ <td class="ant-table-column-has-filters">New York No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Joe Black</td>
+ <td>42</td>
+ <td class="ant-table-column-has-filters">London No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Jim Green</td>
+ <td>32</td>
+ <td class="ant-table-column-has-filters">Sidney No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Jim Red</td>
+ <td>32</td>
+ <td class="ant-table-column-has-filters">London No. 2 Lake Park</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/edit-cell.md correctly 1`] = `
+<div>
+ <button type="button" class="editable-add-btn ant-btn ant-btn-default"><span>Add</span></button>
+ <div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-large ant-table-bordered">
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col style="width:30%;min-width:30%;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name"><span>name</span></th>
+ <th key="age"><span>age</span></th>
+ <th key="address"><span>address</span></th>
+ <th key="operation"><span>operation</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <div class="editable-cell">
+ <div class="editable-cell-text-wrapper">
+ Edward King 0
+ <i class="editable-cell-icon anticon anticon-edit"></i>
+ </div>
+ </div>
+ </td>
+ <td>32</td>
+ <td>London, Park Lane no. 0</td>
+ <td>
+ <a href="#">Delete</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <div class="editable-cell">
+ <div class="editable-cell-text-wrapper">
+ Edward King 1
+ <i class="editable-cell-icon anticon anticon-edit"></i>
+ </div>
+ </div>
+ </td>
+ <td>32</td>
+ <td>London, Park Lane no. 1</td>
+ <td>
+ <a href="#">Delete</a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
+<div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-large ant-table-bordered">
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col style="width:25%;min-width:25%;">
+ <col style="width:15%;min-width:15%;">
+ <col style="width:40%;min-width:40%;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name"><span>name</span></th>
+ <th key="age"><span>age</span></th>
+ <th key="address"><span>address</span></th>
+ <th key="operation"><span>operation</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <div>Edrward 0</div>
+ </td>
+ <td>
+ <div>32</div>
+ </td>
+ <td>
+ <div>London Park no. 0</div>
+ </td>
+ <td>
+ <div class="editable-row-operations"><span><a>Edit</a></span></div>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <div>Edrward 1</div>
+ </td>
+ <td>
+ <div>32</div>
+ </td>
+ <td>
+ <div>London Park no. 1</div>
+ </td>
+ <td>
+ <div class="editable-row-operations"><span><a>Edit</a></span></div>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <div>Edrward 2</div>
+ </td>
+ <td>
+ <div>32</div>
+ </td>
+ <td>
+ <div>London Park no. 2</div>
+ </td>
+ <td>
+ <div class="editable-row-operations"><span><a>Edit</a></span></div>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <div>Edrward 3</div>
+ </td>
+ <td>
+ <div>32</div>
+ </td>
+ <td>
+ <div>London Park no. 3</div>
+ </td>
+ <td>
+ <div class="editable-row-operations"><span><a>Edit</a></span></div>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <div>Edrward 4</div>
+ </td>
+ <td>
+ <div>32</div>
+ </td>
+ <td>
+ <div>London Park no. 4</div>
+ </td>
+ <td>
+ <div class="editable-row-operations"><span><a>Edit</a></span></div>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <div>Edrward 5</div>
+ </td>
+ <td>
+ <div>32</div>
+ </td>
+ <td>
+ <div>London Park no. 5</div>
+ </td>
+ <td>
+ <div class="editable-row-operations"><span><a>Edit</a></span></div>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <div>Edrward 6</div>
+ </td>
+ <td>
+ <div>32</div>
+ </td>
+ <td>
+ <div>London Park no. 6</div>
+ </td>
+ <td>
+ <div class="editable-row-operations"><span><a>Edit</a></span></div>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <div>Edrward 7</div>
+ </td>
+ <td>
+ <div>32</div>
+ </td>
+ <td>
+ <div>London Park no. 7</div>
+ </td>
+ <td>
+ <div class="editable-row-operations"><span><a>Edit</a></span></div>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <div>Edrward 8</div>
+ </td>
+ <td>
+ <div>32</div>
+ </td>
+ <td>
+ <div>London Park no. 8</div>
+ </td>
+ <td>
+ <div class="editable-row-operations"><span><a>Edit</a></span></div>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <div>Edrward 9</div>
+ </td>
+ <td>
+ <div>32</div>
+ </td>
+ <td>
+ <div>London Park no. 9</div>
+ </td>
+ <td>
+ <div class="editable-row-operations"><span><a>Edit</a></span></div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next">
+ <a>5</a>
+ </li>
+ <li title="Next 5 Pages" tabIndex="0" class="ant-pagination-jump-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="10" tabIndex="0" class="ant-pagination-item ant-pagination-item-10">
+ <a>10</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/expand.md correctly 1`] = `
+<div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-large">
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col class="ant-table-expand-icon-col">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="rc-table-expand-icon-cell" title="" rowSpan="1" class="ant-table-expand-icon-th"></th>
+ <th key="name"><span>Name</span></th>
+ <th key="age"><span>Age</span></th>
+ <th key="address"><span>Address</span></th>
+ <th key="x"><span>Action</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td>
+ <td>John Brown</td>
+ <td>32</td>
+ <td>New York No. 1 Lake Park</td>
+ <td>
+ <a href="#">Delete</a>
+ </td>
+ </tr>
+ <!---->
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td>
+ <td>Jim Green</td>
+ <td>42</td>
+ <td>London No. 1 Lake Park</td>
+ <td>
+ <a href="#">Delete</a>
+ </td>
+ </tr>
+ <!---->
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td>
+ <td>Joe Black</td>
+ <td>32</td>
+ <td>Sidney No. 1 Lake Park</td>
+ <td>
+ <a href="#">Delete</a>
+ </td>
+ </tr>
+ <!---->
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/expand-children.md correctly 1`] = `
+<div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-large">
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:12%;min-width:12%;">
+ <col style="width:30%;min-width:30%;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="selection-column" class="ant-table-selection-column"><span><div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </div>
+ </span>
+ </th>
+ <th key="name"><span>Name</span></th>
+ <th key="age"><span>Age</span></th>
+ <th key="address"><span>Address</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span>John Brown sr.</td>
+ <td>60</td>
+ <td>New York No. 1 Lake Park</td>
+ </tr>
+ <!---->
+ <!---->
+ <!---->
+ <!---->
+ <!---->
+ <!---->
+ <!---->
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span><span class="ant-table-row-expand-icon ant-table-row-spaced"></span>Joe Black</td>
+ <td>32</td>
+ <td>Sidney No. 1 Lake Park</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
+<div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-large">
+ <div class="ant-table-content">
+ <div class="ant-table-scroll">
+ <!---->
+ <div class="ant-table-body" style="overflow-x:auto;webkit-transform:translate3d (0, 0, 0);">
+ <table class="ant-table-fixed" style="width:1300px;">
+ <colgroup>
+ <col style="width:100px;min-width:100px;">
+ <col style="width:100px;min-width:100px;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:100px;min-width:100px;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name"><span>Full Name</span></th>
+ <th key="age"><span>Age</span></th>
+ <th key="1"><span>Column 1</span></th>
+ <th key="2"><span>Column 2</span></th>
+ <th key="3"><span>Column 3</span></th>
+ <th key="4"><span>Column 4</span></th>
+ <th key="5"><span>Column 5</span></th>
+ <th key="6"><span>Column 6</span></th>
+ <th key="7"><span>Column 7</span></th>
+ <th key="8"><span>Column 8</span></th>
+ <th key="operation"><span>Action</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ <td>32</td>
+ <td>New York Park</td>
+ <td>New York Park</td>
+ <td>New York Park</td>
+ <td>New York Park</td>
+ <td>New York Park</td>
+ <td>New York Park</td>
+ <td>New York Park</td>
+ <td>New York Park</td>
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Jim Green</td>
+ <td>40</td>
+ <td>London Park</td>
+ <td>London Park</td>
+ <td>London Park</td>
+ <td>London Park</td>
+ <td>London Park</td>
+ <td>London Park</td>
+ <td>London Park</td>
+ <td>London Park</td>
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div class="ant-table-fixed-left">
+ <!---->
+ <div class="ant-table-body-outer" style="webkit-transform:translate3d (0, 0, 0);">
+ <div class="ant-table-body-inner">
+ <table class="ant-table-fixed">
+ <colgroup>
+ <col style="width:100px;min-width:100px;">
+ <col style="width:100px;min-width:100px;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name"><span>Full Name</span></th>
+ <th key="age"><span>Age</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ <td>32</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Jim Green</td>
+ <td>40</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <div class="ant-table-fixed-right">
+ <!---->
+ <div class="ant-table-body-outer" style="webkit-transform:translate3d (0, 0, 0);">
+ <div class="ant-table-body-inner">
+ <table class="ant-table-fixed">
+ <colgroup>
+ <col style="width:100px;min-width:100px;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="operation"><span>Action</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] = `
+<div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-fixed-header ant-table-scroll-position-left ant-table-large">
+ <div class="ant-table-content">
+ <div class="ant-table-scroll">
+ <div class="ant-table-header">
+ <table class="ant-table-fixed" style="width:1500px;">
+ <colgroup>
+ <col style="width:100px;min-width:100px;">
+ <col style="width:100px;min-width:100px;">
+ <col style="width:150px;min-width:150px;">
+ <col style="width:150px;min-width:150px;">
+ <col style="width:150px;min-width:150px;">
+ <col style="width:150px;min-width:150px;">
+ <col style="width:150px;min-width:150px;">
+ <col style="width:150px;min-width:150px;">
+ <col style="width:150px;min-width:150px;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:100px;min-width:100px;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name"><span>Full Name</span></th>
+ <th key="age"><span>Age</span></th>
+ <th key="1"><span>Column 1</span></th>
+ <th key="2"><span>Column 2</span></th>
+ <th key="3"><span>Column 3</span></th>
+ <th key="4"><span>Column 4</span></th>
+ <th key="5"><span>Column 5</span></th>
+ <th key="6"><span>Column 6</span></th>
+ <th key="7"><span>Column 7</span></th>
+ <th key="8"><span>Column 8</span></th>
+ <th key="operation"><span>Action</span></th>
+ </tr>
+ </thead>
+ </table>
+ </div>
+ <div class="ant-table-body" style="overflow-x:auto;webkit-transform:translate3d (0, 0, 0);max-height:300px;overflow-y:scroll;">
+ <table class="ant-table-fixed" style="width:1500px;">
+ <colgroup>
+ <col style="width:100px;min-width:100px;">
+ <col style="width:100px;min-width:100px;">
+ <col style="width:150px;min-width:150px;">
+ <col style="width:150px;min-width:150px;">
+ <col style="width:150px;min-width:150px;">
+ <col style="width:150px;min-width:150px;">
+ <col style="width:150px;min-width:150px;">
+ <col style="width:150px;min-width:150px;">
+ <col style="width:150px;min-width:150px;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:100px;min-width:100px;">
+ </colgroup>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 0</td>
+ <td>32</td>
+ <td>London Park no. 0</td>
+ <td>London Park no. 0</td>
+ <td>London Park no. 0</td>
+ <td>London Park no. 0</td>
+ <td>London Park no. 0</td>
+ <td>London Park no. 0</td>
+ <td>London Park no. 0</td>
+ <td>London Park no. 0</td>
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 1</td>
+ <td>32</td>
+ <td>London Park no. 1</td>
+ <td>London Park no. 1</td>
+ <td>London Park no. 1</td>
+ <td>London Park no. 1</td>
+ <td>London Park no. 1</td>
+ <td>London Park no. 1</td>
+ <td>London Park no. 1</td>
+ <td>London Park no. 1</td>
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 2</td>
+ <td>32</td>
+ <td>London Park no. 2</td>
+ <td>London Park no. 2</td>
+ <td>London Park no. 2</td>
+ <td>London Park no. 2</td>
+ <td>London Park no. 2</td>
+ <td>London Park no. 2</td>
+ <td>London Park no. 2</td>
+ <td>London Park no. 2</td>
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 3</td>
+ <td>32</td>
+ <td>London Park no. 3</td>
+ <td>London Park no. 3</td>
+ <td>London Park no. 3</td>
+ <td>London Park no. 3</td>
+ <td>London Park no. 3</td>
+ <td>London Park no. 3</td>
+ <td>London Park no. 3</td>
+ <td>London Park no. 3</td>
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 4</td>
+ <td>32</td>
+ <td>London Park no. 4</td>
+ <td>London Park no. 4</td>
+ <td>London Park no. 4</td>
+ <td>London Park no. 4</td>
+ <td>London Park no. 4</td>
+ <td>London Park no. 4</td>
+ <td>London Park no. 4</td>
+ <td>London Park no. 4</td>
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 5</td>
+ <td>32</td>
+ <td>London Park no. 5</td>
+ <td>London Park no. 5</td>
+ <td>London Park no. 5</td>
+ <td>London Park no. 5</td>
+ <td>London Park no. 5</td>
+ <td>London Park no. 5</td>
+ <td>London Park no. 5</td>
+ <td>London Park no. 5</td>
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 6</td>
+ <td>32</td>
+ <td>London Park no. 6</td>
+ <td>London Park no. 6</td>
+ <td>London Park no. 6</td>
+ <td>London Park no. 6</td>
+ <td>London Park no. 6</td>
+ <td>London Park no. 6</td>
+ <td>London Park no. 6</td>
+ <td>London Park no. 6</td>
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 7</td>
+ <td>32</td>
+ <td>London Park no. 7</td>
+ <td>London Park no. 7</td>
+ <td>London Park no. 7</td>
+ <td>London Park no. 7</td>
+ <td>London Park no. 7</td>
+ <td>London Park no. 7</td>
+ <td>London Park no. 7</td>
+ <td>London Park no. 7</td>
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 8</td>
+ <td>32</td>
+ <td>London Park no. 8</td>
+ <td>London Park no. 8</td>
+ <td>London Park no. 8</td>
+ <td>London Park no. 8</td>
+ <td>London Park no. 8</td>
+ <td>London Park no. 8</td>
+ <td>London Park no. 8</td>
+ <td>London Park no. 8</td>
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 9</td>
+ <td>32</td>
+ <td>London Park no. 9</td>
+ <td>London Park no. 9</td>
+ <td>London Park no. 9</td>
+ <td>London Park no. 9</td>
+ <td>London Park no. 9</td>
+ <td>London Park no. 9</td>
+ <td>London Park no. 9</td>
+ <td>London Park no. 9</td>
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div class="ant-table-fixed-left">
+ <div class="ant-table-header">
+ <table class="ant-table-fixed">
+ <colgroup>
+ <col style="width:100px;min-width:100px;">
+ <col style="width:100px;min-width:100px;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name"><span>Full Name</span></th>
+ <th key="age"><span>Age</span></th>
+ </tr>
+ </thead>
+ </table>
+ </div>
+ <div class="ant-table-body-outer" style="webkit-transform:translate3d (0, 0, 0);">
+ <div class="ant-table-body-inner" style="max-height:300px;overflow-y:scroll;">
+ <table class="ant-table-fixed">
+ <colgroup>
+ <col style="width:100px;min-width:100px;">
+ <col style="width:100px;min-width:100px;">
+ </colgroup>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 0</td>
+ <td>32</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 1</td>
+ <td>32</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 2</td>
+ <td>32</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 3</td>
+ <td>32</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 4</td>
+ <td>32</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 5</td>
+ <td>32</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 6</td>
+ <td>32</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 7</td>
+ <td>32</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 8</td>
+ <td>32</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edrward 9</td>
+ <td>32</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <div class="ant-table-fixed-right">
+ <div class="ant-table-header">
+ <table class="ant-table-fixed">
+ <colgroup>
+ <col style="width:100px;min-width:100px;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="operation"><span>Action</span></th>
+ </tr>
+ </thead>
+ </table>
+ </div>
+ <div class="ant-table-body-outer" style="webkit-transform:translate3d (0, 0, 0);">
+ <div class="ant-table-body-inner" style="max-height:300px;overflow-y:scroll;">
+ <table class="ant-table-fixed">
+ <colgroup>
+ <col style="width:100px;min-width:100px;">
+ </colgroup>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>
+ <a href="#">action</a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next">
+ <a>5</a>
+ </li>
+ <li title="Next 5 Pages" tabIndex="0" class="ant-pagination-jump-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="10" tabIndex="0" class="ant-pagination-item ant-pagination-item-10">
+ <a>10</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/fixed-header.md correctly 1`] = `
+<div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-fixed-header ant-table-scroll-position-left ant-table-large">
+ <div class="ant-table-content">
+ <div class="ant-table-scroll">
+ <div class="ant-table-header">
+ <table>
+ <colgroup>
+ <col style="width:150px;min-width:150px;">
+ <col style="width:150px;min-width:150px;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name"><span>Name</span></th>
+ <th key="age"><span>Age</span></th>
+ <th key="address"><span>Address</span></th>
+ </tr>
+ </thead>
+ </table>
+ </div>
+ <div class="ant-table-body" style="max-height:240px;overflow-y:scroll;">
+ <table>
+ <colgroup>
+ <col style="width:150px;min-width:150px;">
+ <col style="width:150px;min-width:150px;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 0</td>
+ <td>32</td>
+ <td>London, Park Lane no. 0</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 1</td>
+ <td>32</td>
+ <td>London, Park Lane no. 1</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 2</td>
+ <td>32</td>
+ <td>London, Park Lane no. 2</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 3</td>
+ <td>32</td>
+ <td>London, Park Lane no. 3</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 4</td>
+ <td>32</td>
+ <td>London, Park Lane no. 4</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 5</td>
+ <td>32</td>
+ <td>London, Park Lane no. 5</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 6</td>
+ <td>32</td>
+ <td>London, Park Lane no. 6</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 7</td>
+ <td>32</td>
+ <td>London, Park Lane no. 7</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 8</td>
+ <td>32</td>
+ <td>London, Park Lane no. 8</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 9</td>
+ <td>32</td>
+ <td>London, Park Lane no. 9</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 10</td>
+ <td>32</td>
+ <td>London, Park Lane no. 10</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 11</td>
+ <td>32</td>
+ <td>London, Park Lane no. 11</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 12</td>
+ <td>32</td>
+ <td>London, Park Lane no. 12</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 13</td>
+ <td>32</td>
+ <td>London, Park Lane no. 13</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 14</td>
+ <td>32</td>
+ <td>London, Park Lane no. 14</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 15</td>
+ <td>32</td>
+ <td>London, Park Lane no. 15</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 16</td>
+ <td>32</td>
+ <td>London, Park Lane no. 16</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 17</td>
+ <td>32</td>
+ <td>London, Park Lane no. 17</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 18</td>
+ <td>32</td>
+ <td>London, Park Lane no. 18</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 19</td>
+ <td>32</td>
+ <td>London, Park Lane no. 19</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 20</td>
+ <td>32</td>
+ <td>London, Park Lane no. 20</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 21</td>
+ <td>32</td>
+ <td>London, Park Lane no. 21</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 22</td>
+ <td>32</td>
+ <td>London, Park Lane no. 22</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 23</td>
+ <td>32</td>
+ <td>London, Park Lane no. 23</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 24</td>
+ <td>32</td>
+ <td>London, Park Lane no. 24</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 25</td>
+ <td>32</td>
+ <td>London, Park Lane no. 25</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 26</td>
+ <td>32</td>
+ <td>London, Park Lane no. 26</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 27</td>
+ <td>32</td>
+ <td>London, Park Lane no. 27</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 28</td>
+ <td>32</td>
+ <td>London, Park Lane no. 28</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 29</td>
+ <td>32</td>
+ <td>London, Park Lane no. 29</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 30</td>
+ <td>32</td>
+ <td>London, Park Lane no. 30</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 31</td>
+ <td>32</td>
+ <td>London, Park Lane no. 31</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 32</td>
+ <td>32</td>
+ <td>London, Park Lane no. 32</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 33</td>
+ <td>32</td>
+ <td>London, Park Lane no. 33</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 34</td>
+ <td>32</td>
+ <td>London, Park Lane no. 34</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 35</td>
+ <td>32</td>
+ <td>London, Park Lane no. 35</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 36</td>
+ <td>32</td>
+ <td>London, Park Lane no. 36</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 37</td>
+ <td>32</td>
+ <td>London, Park Lane no. 37</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 38</td>
+ <td>32</td>
+ <td>London, Park Lane no. 38</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 39</td>
+ <td>32</td>
+ <td>London, Park Lane no. 39</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 40</td>
+ <td>32</td>
+ <td>London, Park Lane no. 40</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 41</td>
+ <td>32</td>
+ <td>London, Park Lane no. 41</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 42</td>
+ <td>32</td>
+ <td>London, Park Lane no. 42</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 43</td>
+ <td>32</td>
+ <td>London, Park Lane no. 43</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 44</td>
+ <td>32</td>
+ <td>London, Park Lane no. 44</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 45</td>
+ <td>32</td>
+ <td>London, Park Lane no. 45</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 46</td>
+ <td>32</td>
+ <td>London, Park Lane no. 46</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 47</td>
+ <td>32</td>
+ <td>London, Park Lane no. 47</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 48</td>
+ <td>32</td>
+ <td>London, Park Lane no. 48</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 49</td>
+ <td>32</td>
+ <td>London, Park Lane no. 49</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
+<div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-fixed-header ant-table-scroll-position-left ant-table-middle ant-table-bordered">
+ <div class="ant-table-content">
+ <div class="ant-table-scroll">
+ <div class="ant-table-header">
+ <table class="ant-table-fixed" style="width:130%;">
+ <colgroup>
+ <col style="width:100px;min-width:100px;">
+ <col style="width:200px;min-width:200px;">
+ <col style="width:200px;min-width:200px;">
+ <col style="width:100px;min-width:100px;">
+ <col style="width:100px;min-width:100px;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:60px;min-width:60px;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name" rowSpan="4" class="ant-table-column-has-filters"><span>Name<i title="Filter menu" class="anticon anticon-filter ant-dropdown-trigger"></i></span></th>
+ <th key="1" colSpan="4"><span>Other</span></th>
+ <th key="2" colSpan="2"><span>Company</span></th>
+ <th key="gender" rowSpan="4"><span>Gender</span></th>
+ </tr>
+ <tr style="height:null;">
+ <th key="age" rowSpan="3" class="ant-table-column-has-filters"><span>Age<div class="ant-table-column-sorter"><span title="↑" class="ant-table-column-sorter-up off"><i class="anticon anticon-caret-up"></i></span><span title="↓" class="ant-table-column-sorter-down off"><i class="anticon anticon-caret-down"></i></span></div>
+ </span>
+ </th>
+ <th colSpan="3"><span>Address</span></th>
+ <th key="companyAddress" rowSpan="3"><span>Company Address</span></th>
+ <th key="companyName" rowSpan="3"><span>Company Name</span></th>
+ </tr>
+ <tr style="height:null;">
+ <th key="street" rowSpan="2"><span>Street</span></th>
+ <th colSpan="2"><span>Block</span></th>
+ </tr>
+ <tr style="height:null;">
+ <th key="building"><span>Building</span></th>
+ <th key="number"><span>Door No.</span></th>
+ </tr>
+ </thead>
+ </table>
+ </div>
+ <div class="ant-table-body" style="overflow-x:auto;webkit-transform:translate3d (0, 0, 0);max-height:240px;overflow-y:scroll;">
+ <table class="ant-table-fixed" style="width:130%;">
+ <colgroup>
+ <col style="width:100px;min-width:100px;">
+ <col style="width:200px;min-width:200px;">
+ <col style="width:200px;min-width:200px;">
+ <col style="width:100px;min-width:100px;">
+ <col style="width:100px;min-width:100px;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:60px;min-width:60px;">
+ </colgroup>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ <td class="ant-table-column-has-filters">1</td>
+ <td>Lake Park</td>
+ <td>C</td>
+ <td>2035</td>
+ <td>Lake Street 42</td>
+ <td>SoftLake Co</td>
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ <td class="ant-table-column-has-filters">2</td>
+ <td>Lake Park</td>
+ <td>C</td>
+ <td>2035</td>
+ <td>Lake Street 42</td>
+ <td>SoftLake Co</td>
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ <td class="ant-table-column-has-filters">3</td>
+ <td>Lake Park</td>
+ <td>C</td>
+ <td>2035</td>
+ <td>Lake Street 42</td>
+ <td>SoftLake Co</td>
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ <td class="ant-table-column-has-filters">4</td>
+ <td>Lake Park</td>
+ <td>C</td>
+ <td>2035</td>
+ <td>Lake Street 42</td>
+ <td>SoftLake Co</td>
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ <td class="ant-table-column-has-filters">5</td>
+ <td>Lake Park</td>
+ <td>C</td>
+ <td>2035</td>
+ <td>Lake Street 42</td>
+ <td>SoftLake Co</td>
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ <td class="ant-table-column-has-filters">6</td>
+ <td>Lake Park</td>
+ <td>C</td>
+ <td>2035</td>
+ <td>Lake Street 42</td>
+ <td>SoftLake Co</td>
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ <td class="ant-table-column-has-filters">7</td>
+ <td>Lake Park</td>
+ <td>C</td>
+ <td>2035</td>
+ <td>Lake Street 42</td>
+ <td>SoftLake Co</td>
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ <td class="ant-table-column-has-filters">8</td>
+ <td>Lake Park</td>
+ <td>C</td>
+ <td>2035</td>
+ <td>Lake Street 42</td>
+ <td>SoftLake Co</td>
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ <td class="ant-table-column-has-filters">9</td>
+ <td>Lake Park</td>
+ <td>C</td>
+ <td>2035</td>
+ <td>Lake Street 42</td>
+ <td>SoftLake Co</td>
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ <td class="ant-table-column-has-filters">10</td>
+ <td>Lake Park</td>
+ <td>C</td>
+ <td>2035</td>
+ <td>Lake Street 42</td>
+ <td>SoftLake Co</td>
+ <td>M</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div class="ant-table-fixed-left">
+ <div class="ant-table-header">
+ <table class="ant-table-fixed">
+ <colgroup>
+ <col style="width:100px;min-width:100px;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name" rowSpan="4" class="ant-table-column-has-filters"><span>Name<i title="Filter menu" class="anticon anticon-filter ant-dropdown-trigger"></i></span></th>
+ </tr>
+ </thead>
+ </table>
+ </div>
+ <div class="ant-table-body-outer" style="webkit-transform:translate3d (0, 0, 0);">
+ <div class="ant-table-body-inner" style="max-height:240px;overflow-y:scroll;">
+ <table class="ant-table-fixed">
+ <colgroup>
+ <col style="width:100px;min-width:100px;">
+ </colgroup>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <div class="ant-table-fixed-right">
+ <div class="ant-table-header">
+ <table class="ant-table-fixed">
+ <colgroup>
+ <col style="width:60px;min-width:60px;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="gender" rowSpan="4"><span>Gender</span></th>
+ </tr>
+ </thead>
+ </table>
+ </div>
+ <div class="ant-table-body-outer" style="webkit-transform:translate3d (0, 0, 0);">
+ <div class="ant-table-body-inner" style="max-height:240px;overflow-y:scroll;">
+ <table class="ant-table-fixed">
+ <colgroup>
+ <col style="width:60px;min-width:60px;">
+ </colgroup>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>M</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td>M</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination mini ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5 ant-pagination-item-before-jump-next">
+ <a>5</a>
+ </li>
+ <li title="Next 5 Pages" tabIndex="0" class="ant-pagination-jump-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="10" tabIndex="0" class="ant-pagination-item ant-pagination-item-10">
+ <a>10</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/head.md correctly 1`] = `
+<div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-large">
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name" class="ant-table-column-has-filters"><span>Name<div class="ant-table-column-sorter"><span title="↑" class="ant-table-column-sorter-up off"><i class="anticon anticon-caret-up"></i></span><span title="↓" class="ant-table-column-sorter-down off"><i class="anticon anticon-caret-down"></i></span></div>
+ <i
+ title="Filter menu" class="anticon anticon-filter ant-dropdown-trigger"></i>
+ </span>
+ </th>
+ <th key="age" class="ant-table-column-has-filters"><span>Age<div class="ant-table-column-sorter"><span title="↑" class="ant-table-column-sorter-up off"><i class="anticon anticon-caret-up"></i></span><span title="↓" class="ant-table-column-sorter-down off"><i class="anticon anticon-caret-down"></i></span></div>
+ </span>
+ </th>
+ <th key="address" class="ant-table-column-has-filters"><span>Address<div class="ant-table-column-sorter"><span title="↑" class="ant-table-column-sorter-up off"><i class="anticon anticon-caret-up"></i></span><span title="↓" class="ant-table-column-sorter-down off"><i class="anticon anticon-caret-down"></i></span></div>
+ <i
+ title="Filter menu" class="anticon anticon-filter ant-dropdown-trigger"></i>
+ </span>
+ </th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ <td class="ant-table-column-has-filters">32</td>
+ <td class="ant-table-column-has-filters">New York No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Jim Green</td>
+ <td class="ant-table-column-has-filters">42</td>
+ <td class="ant-table-column-has-filters">London No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Joe Black</td>
+ <td class="ant-table-column-has-filters">32</td>
+ <td class="ant-table-column-has-filters">Sidney No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Jim Red</td>
+ <td class="ant-table-column-has-filters">32</td>
+ <td class="ant-table-column-has-filters">London No. 2 Lake Park</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</div>
+<ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+</ul>
+</div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/nested-table.md correctly 1`] = `
+<div class="components-table-demo-nested ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-large">
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col class="ant-table-expand-icon-col">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="rc-table-expand-icon-cell" title="" rowSpan="1" class="ant-table-expand-icon-th"></th>
+ <th key="name"><span>Name</span></th>
+ <th key="platform"><span>Platform</span></th>
+ <th key="version"><span>Version</span></th>
+ <th key="upgradeNum"><span>Upgraded</span></th>
+ <th key="creator"><span>Creator</span></th>
+ <th key="createdAt"><span>Date</span></th>
+ <th key="operation"><span>Action</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td>
+ <td>Screem</td>
+ <td>iOS</td>
+ <td>10.3.4.5654</td>
+ <td>500</td>
+ <td>Jack</td>
+ <td>2014-12-24 23:12:00</td>
+ <td>
+ <a href="#">Publish</a>
+ </td>
+ </tr>
+ <!---->
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td>
+ <td>Screem</td>
+ <td>iOS</td>
+ <td>10.3.4.5654</td>
+ <td>500</td>
+ <td>Jack</td>
+ <td>2014-12-24 23:12:00</td>
+ <td>
+ <a href="#">Publish</a>
+ </td>
+ </tr>
+ <!---->
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-row-expand-icon-cell"><span class="ant-table-row-expand-icon ant-table-row-collapsed"></span></td>
+ <td>Screem</td>
+ <td>iOS</td>
+ <td>10.3.4.5654</td>
+ <td>500</td>
+ <td>Jack</td>
+ <td>2014-12-24 23:12:00</td>
+ <td>
+ <a href="#">Publish</a>
+ </td>
+ </tr>
+ <!---->
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
+<div>
+ <div class="table-operations">
+ <button type="button" class="ant-btn ant-btn-default"><span>Sort age</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Clear filters</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Clear filters and sorters</span></button>
+ </div>
+ <div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-large">
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name" class="ant-table-column-has-filters"><span>Name<div class="ant-table-column-sorter"><span title="↑" class="ant-table-column-sorter-up off"><i class="anticon anticon-caret-up"></i></span><span title="↓" class="ant-table-column-sorter-down off"><i class="anticon anticon-caret-down"></i></span></div>
+ <i
+ title="Filter menu" class="anticon anticon-filter ant-dropdown-trigger"></i>
+ </span>
+ </th>
+ <th key="age" class="ant-table-column-has-filters"><span>Age<div class="ant-table-column-sorter"><span title="↑" class="ant-table-column-sorter-up off"><i class="anticon anticon-caret-up"></i></span><span title="↓" class="ant-table-column-sorter-down off"><i class="anticon anticon-caret-down"></i></span></div>
+ </span>
+ </th>
+ <th key="address" class="ant-table-column-has-filters"><span>Address<div class="ant-table-column-sorter"><span title="↑" class="ant-table-column-sorter-up off"><i class="anticon anticon-caret-up"></i></span><span title="↓" class="ant-table-column-sorter-down off"><i class="anticon anticon-caret-down"></i></span></div>
+ <i
+ title="Filter menu" class="anticon anticon-filter ant-dropdown-trigger"></i>
+ </span>
+ </th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ <td class="ant-table-column-has-filters">32</td>
+ <td class="ant-table-column-has-filters">New York No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Jim Green</td>
+ <td class="ant-table-column-has-filters">42</td>
+ <td class="ant-table-column-has-filters">London No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Joe Black</td>
+ <td class="ant-table-column-has-filters">32</td>
+ <td class="ant-table-column-has-filters">Sidney No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Jim Red</td>
+ <td class="ant-table-column-has-filters">32</td>
+ <td class="ant-table-column-has-filters">London No. 2 Lake Park</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+</div>
+</div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
+<div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-large">
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="selection-column" class="ant-table-selection-column"><span><div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </div>
+ </span>
+ </th>
+ <th key="name"><span>Name</span></th>
+ <th key="age"><span>Age</span></th>
+ <th key="address"><span>Address</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input name="John Brown" type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <a href="#">John Brown</a>
+ </td>
+ <td>32</td>
+ <td>New York No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input name="Jim Green" type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <a href="#">Jim Green</a>
+ </td>
+ <td>42</td>
+ <td>London No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input name="Joe Black" type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <a href="#">Joe Black</a>
+ </td>
+ <td>32</td>
+ <td>Sidney No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-disabled"><input name="Disabled User" type="checkbox" disabled="disabled" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->
+ <a href="#">Disabled User</a>
+ </td>
+ <td>99</td>
+ <td>Sidney No. 1 Lake Park</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/row-selection-and-operation.md correctly 1`] = `
+<div>
+ <div style="margin-bottom:16px;">
+ <button type="button" disabled="disabled" class="ant-btn ant-btn-primary"><span>Reload</span></button> <span style="margin-left:8px;"><!----></span></div>
+ <div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-large">
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="selection-column" class="ant-table-selection-column"><span><div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </div>
+ </span>
+ </th>
+ <th key="name"><span>Name</span></th>
+ <th key="age"><span>Age</span></th>
+ <th key="address"><span>Address</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 0</td>
+ <td>32</td>
+ <td>London, Park Lane no. 0</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 1</td>
+ <td>32</td>
+ <td>London, Park Lane no. 1</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 2</td>
+ <td>32</td>
+ <td>London, Park Lane no. 2</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 3</td>
+ <td>32</td>
+ <td>London, Park Lane no. 3</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 4</td>
+ <td>32</td>
+ <td>London, Park Lane no. 4</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 5</td>
+ <td>32</td>
+ <td>London, Park Lane no. 5</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 6</td>
+ <td>32</td>
+ <td>London, Park Lane no. 6</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 7</td>
+ <td>32</td>
+ <td>London, Park Lane no. 7</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 8</td>
+ <td>32</td>
+ <td>London, Park Lane no. 8</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 9</td>
+ <td>32</td>
+ <td>London, Park Lane no. 9</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5">
+ <a>5</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+ </div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] = `
+<div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-large">
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="selection-column" class="ant-table-selection-column ant-table-selection-column-custom"><span><div class="ant-table-selection"><label class="ant-table-selection-select-all-custom ant-checkbox-wrapper ant-table-selection-select-all-custom"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ <div class="ant-table-selection-down ant-dropdown-trigger">
+ <i class="anticon anticon-down"></i>
+ </div>
+ </div>
+ </span>
+ </th>
+ <th key="name"><span>Name</span></th>
+ <th key="age"><span>Age</span></th>
+ <th key="address"><span>Address</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 0</td>
+ <td>32</td>
+ <td>London, Park Lane no. 0</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 1</td>
+ <td>32</td>
+ <td>London, Park Lane no. 1</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 2</td>
+ <td>32</td>
+ <td>London, Park Lane no. 2</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 3</td>
+ <td>32</td>
+ <td>London, Park Lane no. 3</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 4</td>
+ <td>32</td>
+ <td>London, Park Lane no. 4</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 5</td>
+ <td>32</td>
+ <td>London, Park Lane no. 5</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 6</td>
+ <td>32</td>
+ <td>London, Park Lane no. 6</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 7</td>
+ <td>32</td>
+ <td>London, Park Lane no. 7</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 8</td>
+ <td>32</td>
+ <td>London, Park Lane no. 8</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td class="ant-table-selection-column ant-table-selection-column-custom"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label>
+ </span>
+ </td>
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Edward King 9</td>
+ <td>32</td>
+ <td>London, Park Lane no. 9</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="2" tabIndex="0" class="ant-pagination-item ant-pagination-item-2">
+ <a>2</a>
+ </li>
+ <li title="3" tabIndex="0" class="ant-pagination-item ant-pagination-item-3">
+ <a>3</a>
+ </li>
+ <li title="4" tabIndex="0" class="ant-pagination-item ant-pagination-item-4">
+ <a>4</a>
+ </li>
+ <li title="5" tabIndex="0" class="ant-pagination-item ant-pagination-item-5">
+ <a>5</a>
+ </li>
+ <li title="Next Page" tabIndex="0" class=" ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/size.md correctly 1`] = `
+<div id="components-table-demo-size">
+ <h4>Middle size table</h4>
+ <div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-middle">
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name"><span>Name</span></th>
+ <th key="age"><span>Age</span></th>
+ <th key="address"><span>Address</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ <td>32</td>
+ <td>New York No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Jim Green</td>
+ <td>42</td>
+ <td>London No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Joe Black</td>
+ <td>32</td>
+ <td>Sidney No. 1 Lake Park</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination mini ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+ </div>
+ </div>
+ <h4>Small size table</h4>
+ <div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-small">
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="name"><span>Name</span></th>
+ <th key="age"><span>Age</span></th>
+ <th key="address"><span>Address</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John Brown</td>
+ <td>32</td>
+ <td>New York No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Jim Green</td>
+ <td>42</td>
+ <td>London No. 1 Lake Park</td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Joe Black</td>
+ <td>32</td>
+ <td>Sidney No. 1 Lake Park</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination mini ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/table/demo/template.md correctly 1`] = `
+<div class="ant-table-wrapper">
+ <div class="ant-spin-nested-loading">
+ <div class="ant-spin-container">
+ <div class="ant-table ant-table-scroll-position-left ant-table-large">
+ <div class="ant-table-content">
+ <!---->
+ <div class="ant-table-body">
+ <table>
+ <colgroup>
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ <col style="width:undefined;min-width:undefined;">
+ </colgroup>
+ <thead class="ant-table-thead">
+ <tr style="height:null;">
+ <th key="0" colSpan="2"><span><span slot="title" style="color:#1890ff;">Name</span></span>
+ </th>
+ <th key="age" rowSpan="2"><span>Age</span></th>
+ <th key="address" rowSpan="2"><span>Address</span></th>
+ <th key="action" rowSpan="2"><span>Action</span></th>
+ </tr>
+ <tr style="height:null;">
+ <th key="firstName"><span><span slot="title" style="color:#1890ff;">First Name</span></span>
+ </th>
+ <th key="lastName"><span>Last Name</span></th>
+ </tr>
+ </thead>
+ <tbody class="ant-table-tbody">
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->John</td>
+ <td>Brown</td>
+ <td>32</td>
+ <td>New York No. 1 Lake Park</td>
+ <td><span><a href="#">Action 一 John</a> <div class="ant-divider ant-divider-vertical"></div> <a href="#">Delete</a> <div class="ant-divider ant-divider-vertical"></div> <a href="#" class="ant-dropdown-link">
+ More actions <i class="anticon anticon-down"></i></a></span></td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Jim</td>
+ <td>Green</td>
+ <td>42</td>
+ <td>London No. 1 Lake Park</td>
+ <td><span><a href="#">Action 一 Jim</a> <div class="ant-divider ant-divider-vertical"></div> <a href="#">Delete</a> <div class="ant-divider ant-divider-vertical"></div> <a href="#" class="ant-dropdown-link">
+ More actions <i class="anticon anticon-down"></i></a></span></td>
+ </tr>
+ <tr class="ant-table-row ant-table-row-level-0" style="height:null;">
+ <td><span class="ant-table-row-indent indent-level-0" style="padding-left:0px;"></span>
+ <!---->Joe</td>
+ <td>Black</td>
+ <td>32</td>
+ <td>Sidney No. 1 Lake Park</td>
+ <td><span><a href="#">Action 一 Joe</a> <div class="ant-divider ant-divider-vertical"></div> <a href="#">Delete</a> <div class="ant-divider ant-divider-vertical"></div> <a href="#" class="ant-dropdown-link">
+ More actions <i class="anticon anticon-down"></i></a></span></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+ <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <li title="1" tabIndex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+ <a>1</a>
+ </li>
+ <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next">
+ <a class="ant-pagination-item-link"></a>
+ </li>
+ <!---->
+ </ul>
+ </div>
+ </div>
+</div>
+`;
diff --git a/components/table/__tests__/demo.test.js b/components/table/__tests__/demo.test.js
new file mode 100644
index 000000000..1a4388281
--- /dev/null
+++ b/components/table/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('table')
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..35d17eeeb
--- /dev/null
+++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,360 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/tabs/demo/basic.md correctly 1`] = `
+<div>
+ <md>
+ ## 基本 默认选中第一项。
+ </md>
+ <div class="ant-tabs ant-tabs-top ant-tabs-line">
+ <div role="tablist" tabIndex="0" class="ant-tabs-bar">
+ <div class="ant-tabs-extra-content" style="float:right;"></div>
+ <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
+ <div
+ class="ant-tabs-nav-wrap">
+ <div class="ant-tabs-nav-scroll">
+ <div class="ant-tabs-nav ant-tabs-nav-animated">
+ <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
+ <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab" style="margin-right:undefinedpx;">Tab 1</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 2</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 3</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="ant-tabs-content ant-tabs-content-animated" style="margin-left:0%;">
+ <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">Content of Tab Pane 1</div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive">Content of Tab Pane 2</div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ </div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/tabs/demo/card.md correctly 1`] = `
+<div class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-no-animation">
+ <div role="tablist" tabIndex="0" class="ant-tabs-bar">
+ <div class="ant-tabs-extra-content" style="float:right;"></div>
+ <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
+ <div
+ class="ant-tabs-nav-wrap">
+ <div class="ant-tabs-nav-scroll">
+ <div class="ant-tabs-nav ant-tabs-nav-animated">
+ <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
+ <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab" style="margin-right:undefinedpx;">Tab 1</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 2</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 3</div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+<div class="ant-tabs-content ant-tabs-content-no-animated">
+ <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">Content of Tab Pane 1</div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/tabs/demo/card-top.md correctly 1`] = `
+<div class="card-container">
+ <div class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-no-animation">
+ <div role="tablist" tabIndex="0" class="ant-tabs-bar">
+ <div class="ant-tabs-extra-content" style="float:right;"></div>
+ <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
+ <div
+ class="ant-tabs-nav-wrap">
+ <div class="ant-tabs-nav-scroll">
+ <div class="ant-tabs-nav ant-tabs-nav-animated">
+ <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
+ <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab" style="margin-right:undefinedpx;">Tab Title 1</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab Title 2</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab Title 3</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="ant-tabs-content ant-tabs-content-no-animated">
+ <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
+ <p>Content of Tab Pane 1</p>
+ <p>Content of Tab Pane 1</p>
+ <p>Content of Tab Pane 1</p>
+ </div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ </div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/tabs/demo/custom-add-trigger.md correctly 1`] = `
+<div>
+ <div style="margin-bottom:16px;">
+ <button type="button" class="ant-btn ant-btn-default"><span>ADD</span></button>
+ </div>
+ <div class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-editable-card ant-tabs-no-animation">
+ <div role="tablist" tabIndex="0" class="ant-tabs-bar">
+ <div class="ant-tabs-extra-content" style="float:right;"></div>
+ <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
+ <div
+ class="ant-tabs-nav-wrap">
+ <div class="ant-tabs-nav-scroll">
+ <div class="ant-tabs-nav ant-tabs-nav-animated">
+ <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
+ <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab" style="margin-right:undefinedpx;">
+ <div>Tab 1
+ <i class="anticon anticon-close"></i>
+ </div>
+ </div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">
+ <div>Tab 2
+ <i class="anticon anticon-close"></i>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="ant-tabs-content ant-tabs-content-no-animated">
+ <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
+ Content of Tab 1
+ </div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ </div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/tabs/demo/disabled.md correctly 1`] = `
+<div class="ant-tabs ant-tabs-top ant-tabs-line">
+ <div role="tablist" tabIndex="0" class="ant-tabs-bar">
+ <div class="ant-tabs-extra-content" style="float:right;"></div>
+ <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
+ <div
+ class="ant-tabs-nav-wrap">
+ <div class="ant-tabs-nav-scroll">
+ <div class="ant-tabs-nav ant-tabs-nav-animated">
+ <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
+ <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab" style="margin-right:undefinedpx;">Tab 1</div>
+ <div role="tab" aria-disabled="true" aria-selected="false" class=" ant-tabs-tab ant-tabs-tab-disabled" style="margin-right:undefinedpx;">Tab 2</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 3</div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+<div class="ant-tabs-content ant-tabs-content-animated" style="margin-left:0%;">
+ <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">Tab 1</div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
+<div class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-editable-card ant-tabs-no-animation">
+ <div role="tablist" tabIndex="0" class="ant-tabs-bar">
+ <div class="ant-tabs-extra-content" style="float:right;"><span><i class="anticon anticon-plus ant-tabs-new-tab"></i></span></div>
+ <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
+ <div
+ class="ant-tabs-nav-wrap">
+ <div class="ant-tabs-nav-scroll">
+ <div class="ant-tabs-nav ant-tabs-nav-animated">
+ <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
+ <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab" style="margin-right:undefinedpx;">
+ <div class="ant-tabs-tab-unclosable">Tab 1</div>
+ </div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">
+ <div>Tab 2
+ <i class="anticon anticon-close"></i>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+<div class="ant-tabs-content ant-tabs-content-no-animated">
+ <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
+ Content of Tab 1
+ </div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/tabs/demo/extra.md correctly 1`] = `
+<div class="ant-tabs ant-tabs-top ant-tabs-line">
+ <div role="tablist" tabIndex="0" class="ant-tabs-bar">
+ <div class="ant-tabs-extra-content" style="float:right;">
+ <button type="button" class="ant-btn ant-btn-default"><span>Extra Action</span></button>
+ </div>
+ <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
+ <div
+ class="ant-tabs-nav-wrap">
+ <div class="ant-tabs-nav-scroll">
+ <div class="ant-tabs-nav ant-tabs-nav-animated">
+ <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
+ <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab" style="margin-right:undefinedpx;">Tab 1</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 2</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 3</div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+<div class="ant-tabs-content ant-tabs-content-animated" style="margin-left:0%;">
+ <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">Content of tab 1</div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/tabs/demo/icon.md correctly 1`] = `
+<div class="ant-tabs ant-tabs-top ant-tabs-line">
+ <div role="tablist" tabIndex="0" class="ant-tabs-bar">
+ <div class="ant-tabs-extra-content" style="float:right;"></div>
+ <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
+ <div
+ class="ant-tabs-nav-wrap">
+ <div class="ant-tabs-nav-scroll">
+ <div class="ant-tabs-nav ant-tabs-nav-animated">
+ <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;"><span slot="tab"><i class="anticon anticon-apple"></i>
+ Tab 1
+ </span></div>
+ <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab" style="margin-right:undefinedpx;"><span slot="tab"><i class="anticon anticon-android"></i>
+ Tab 2
+ </span></div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+<div class="ant-tabs-content ant-tabs-content-animated" style="margin-left:-100%;">
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
+ Tab 2
+ </div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/tabs/demo/position.md correctly 1`] = `
+<div style="width:500px;">
+ <div class="ant-radio-group ant-radio-group-default" style="margin:8px;">
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>top</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>bottom</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>left</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>right</span></label>
+ </div>
+ <div class="ant-tabs ant-tabs-top ant-tabs-line">
+ <div role="tablist" tabIndex="0" class="ant-tabs-bar">
+ <div class="ant-tabs-extra-content" style="float:right;"></div>
+ <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
+ <div
+ class="ant-tabs-nav-wrap">
+ <div class="ant-tabs-nav-scroll">
+ <div class="ant-tabs-nav ant-tabs-nav-animated">
+ <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
+ <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab" style="margin-right:undefinedpx;">Tab 1</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 2</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 3</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="ant-tabs-content ant-tabs-content-animated" style="margin-left:0%;">
+ <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">Content of Tab 1</div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ </div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/tabs/demo/size.md correctly 1`] = `
+<div>
+ <div class="ant-radio-group ant-radio-group-default" style="margin-bottom:16px;">
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Small</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Default</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Large</span></label>
+ </div>
+ <div class="ant-tabs ant-tabs-top ant-tabs-small ant-tabs-line">
+ <div role="tablist" tabIndex="0" class="ant-tabs-bar">
+ <div class="ant-tabs-extra-content" style="float:right;"></div>
+ <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
+ <div
+ class="ant-tabs-nav-wrap">
+ <div class="ant-tabs-nav-scroll">
+ <div class="ant-tabs-nav ant-tabs-nav-animated">
+ <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 1</div>
+ <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab" style="margin-right:undefinedpx;">Tab 2</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 3</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="ant-tabs-content ant-tabs-content-animated" style="margin-left:-100%;">
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">Content of tab 2</div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ </div>
+</div>
+</div>
+`;
+
+exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
+<div style="width:500px;">
+ <div class="ant-radio-group ant-radio-group-default" style="margin-bottom:8px;">
+ <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" checked="checked" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Horizontal</span></label>
+ <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Vertical</span></label>
+ </div>
+ <div class="ant-tabs ant-tabs-top ant-tabs-line" style="height:200px;">
+ <div role="tablist" tabIndex="0" class="ant-tabs-bar">
+ <div class="ant-tabs-extra-content" style="float:right;"></div>
+ <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
+ <div
+ class="ant-tabs-nav-wrap">
+ <div class="ant-tabs-nav-scroll">
+ <div class="ant-tabs-nav ant-tabs-nav-animated">
+ <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
+ <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab" style="margin-right:undefinedpx;">Tab 1</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 2</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 3</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 4</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 5</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 6</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 7</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 8</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 9</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 10</div>
+ <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab" style="margin-right:undefinedpx;">Tab 11</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="ant-tabs-content ant-tabs-content-animated" style="margin-left:0%;">
+ <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">Content of tab 1</div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
+ </div>
+</div>
+</div>
+`;
diff --git a/components/tabs/__tests__/demo.test.js b/components/tabs/__tests__/demo.test.js
new file mode 100644
index 000000000..4e1224140
--- /dev/null
+++ b/components/tabs/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('tabs')
diff --git a/components/tag/__tests__/__snapshots__/demo.test.js.snap b/components/tag/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..4934f0da7
--- /dev/null
+++ b/components/tag/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
+<div>
+ <div class="ant-tag" style="background-color:null;">Tag 1</div>
+ <div class="ant-tag" style="background-color:null;">
+ <a href="https://github.com/vueComponent/ant-design">Link</a>
+ </div>
+ <div class="ant-tag" style="background-color:null;">Tag 2
+ <i class="anticon anticon-cross"></i>
+ </div>
+ <div class="ant-tag" style="background-color:null;">Prevent Default
+ <i class="anticon anticon-cross"></i>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/tag/demo/checkable.md correctly 1`] = `
+<div>
+ <div class="ant-tag ant-tag-checkable">Tag1</div>
+ <div class="ant-tag ant-tag-checkable">Tag2</div>
+ <div class="ant-tag ant-tag-checkable">Tag3</div>
+</div>
+`;
+
+exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
+<div>
+ <h4 style="margin-bottom:16px;">Presets:</h4>
+ <div>
+ <div class="ant-tag ant-tag-pink" style="background-color:null;">pink</div>
+ <div class="ant-tag ant-tag-red" style="background-color:null;">red</div>
+ <div class="ant-tag ant-tag-orange" style="background-color:null;">orange</div>
+ <div class="ant-tag ant-tag-green" style="background-color:null;">green</div>
+ <div class="ant-tag ant-tag-cyan" style="background-color:null;">cyan</div>
+ <div class="ant-tag ant-tag-blue" style="background-color:null;">blue</div>
+ <div class="ant-tag ant-tag-purple" style="background-color:null;">purple</div>
+ </div>
+ <h4 style="margin:'16px 0';">Custom:</h4>
+ <div>
+ <div class="ant-tag ant-tag-has-color" style="background-color:#f50;">#f50</div>
+ <div class="ant-tag ant-tag-has-color" style="background-color:#2db7f5;">#2db7f5</div>
+ <div class="ant-tag ant-tag-has-color" style="background-color:#87d068;">#87d068</div>
+ <div class="ant-tag ant-tag-has-color" style="background-color:#108ee9;">#108ee9</div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/tag/demo/control.md correctly 1`] = `
+<div>
+ <div class="ant-tag" style="background-color:null;">
+ Unremovable
+ </div>
+ <div class="ant-tag" style="background-color:null;">
+ Tag 2
+ <i class="anticon anticon-cross"></i>
+ </div>
+ <div class="ant-tag" style="background-color:null;">
+ Tag 3Tag 3Tag 3Tag 3...
+ <i class="anticon anticon-cross"></i>
+ </div>
+ <div class="ant-tag" style="background-color:null;background:#fff;border-style:dashed;">
+ <i class="anticon anticon-plus"></i> New Tag
+ </div>
+</div>
+`;
+
+exports[`renders ./components/tag/demo/hot-tags.md correctly 1`] = `
+<div><strong style="margin-right:8;">Categories:</strong>
+ <div class="ant-tag ant-tag-checkable">
+ Movies
+ </div>
+ <div class="ant-tag ant-tag-checkable">
+ Books
+ </div>
+ <div class="ant-tag ant-tag-checkable">
+ Music
+ </div>
+ <div class="ant-tag ant-tag-checkable">
+ Sports
+ </div>
+</div>
+`;
diff --git a/components/tag/__tests__/demo.test.js b/components/tag/__tests__/demo.test.js
new file mode 100644
index 000000000..4f62642dd
--- /dev/null
+++ b/components/tag/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('tag')
diff --git a/components/time-picker/__tests__/__snapshots__/demo.test.js.snap b/components/time-picker/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..e917e1f29
--- /dev/null
+++ b/components/time-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/time-picker/demo/12hours.md correctly 1`] = `
+<div><span class="ant-time-picker"><input type="text" placeholder="Select time" id="" value="" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span> <span class="ant-time-picker"><input type="text" placeholder="Select time" id="" value="" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span>
+ <span class="ant-time-picker"><input type="text" placeholder="Select time" id="" value="" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span>
+</div>
+`;
+
+exports[`renders ./components/time-picker/demo/addon.md correctly 1`] = `
+<div><span class="ant-time-picker"><input type="text" placeholder="Select time" id="" value="" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span> <span class="ant-time-picker"><input type="text" placeholder="Select time" id="" value="" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span>
+</div>
+`;
+
+exports[`renders ./components/time-picker/demo/basic.md correctly 1`] = `<span class="ant-time-picker"><input type="text" placeholder="Select time" id="" value="" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span>`;
+
+exports[`renders ./components/time-picker/demo/disabled.md correctly 1`] = `<span class="ant-time-picker"><input type="text" placeholder="Select time" disabled="disabled" id="" value="12:08:23" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span>`;
+
+exports[`renders ./components/time-picker/demo/hide-column.md correctly 1`] = `<span class="ant-time-picker"><input type="text" placeholder="Select time" id="" value="12:08" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span>`;
+
+exports[`renders ./components/time-picker/demo/interval-options.md correctly 1`] = `<span class="ant-time-picker"><input type="text" placeholder="Select time" id="" value="" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span>`;
+
+exports[`renders ./components/time-picker/demo/size.md correctly 1`] = `
+<div><span class="ant-time-picker ant-time-picker-large"><input type="text" placeholder="Select time" id="" value="12:08:23" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span> <span class="ant-time-picker"><input type="text" placeholder="Select time" id="" value="12:08:23" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span>
+ <span class="ant-time-picker ant-time-picker-small"><input type="text" placeholder="Select time" id="" value="12:08:23" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span>
+</div>
+`;
+
+exports[`renders ./components/time-picker/demo/value.md correctly 1`] = `
+<div>
+ <p>use value and @change</p> <span class="ant-time-picker"><input type="text" placeholder="Select time" id="" value="" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span>
+ <br>
+ <br>
+ <p>v-model</p> <span class="ant-time-picker"><input type="text" placeholder="Select time" id="" value="" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span>
+ <br>
+ <br>
+ <p>Do not change</p> <span class="ant-time-picker"><input type="text" placeholder="Select time" id="" value="00:00:00" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span>
+</div>
+`;
diff --git a/components/time-picker/__tests__/demo.test.js b/components/time-picker/__tests__/demo.test.js
new file mode 100644
index 000000000..1febf5f2d
--- /dev/null
+++ b/components/time-picker/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('time-picker')
diff --git a/components/timeline/__tests__/__snapshots__/demo.test.js.snap b/components/timeline/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..7d10ea777
--- /dev/null
+++ b/components/timeline/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,116 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/timeline/demo/basic.md correctly 1`] = `
+<ul class="ant-timeline">
+ <li class="ant-timeline-item">
+ <div class="ant-timeline-item-tail"></div>
+ <div class="ant-timeline-item-head ant-timeline-item-head-blue" style="border-color:null;"></div>
+ <div class="ant-timeline-item-content">Create a services site 2015-09-01</div>
+ </li>
+ <li class="ant-timeline-item">
+ <div class="ant-timeline-item-tail"></div>
+ <div class="ant-timeline-item-head ant-timeline-item-head-blue" style="border-color:null;"></div>
+ <div class="ant-timeline-item-content">Solve initial network problems 2015-09-01</div>
+ </li>
+ <li class="ant-timeline-item">
+ <div class="ant-timeline-item-tail"></div>
+ <div class="ant-timeline-item-head ant-timeline-item-head-blue" style="border-color:null;"></div>
+ <div class="ant-timeline-item-content">Technical testing 2015-09-01</div>
+ </li>
+ <li class="ant-timeline-item ant-timeline-item-last">
+ <div class="ant-timeline-item-tail"></div>
+ <div class="ant-timeline-item-head ant-timeline-item-head-blue" style="border-color:null;"></div>
+ <div class="ant-timeline-item-content">Network problems being solved 2015-09-01</div>
+ </li>
+</ul>
+`;
+
+exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
+<ul class="ant-timeline">
+ <li class="ant-timeline-item">
+ <div class="ant-timeline-item-tail"></div>
+ <div class="ant-timeline-item-head ant-timeline-item-head-green" style="border-color:null;"></div>
+ <div class="ant-timeline-item-content">Create a services site 2015-09-01</div>
+ </li>
+ <li class="ant-timeline-item">
+ <div class="ant-timeline-item-tail"></div>
+ <div class="ant-timeline-item-head ant-timeline-item-head-green" style="border-color:null;"></div>
+ <div class="ant-timeline-item-content">Create a services site 2015-09-01</div>
+ </li>
+ <li class="ant-timeline-item">
+ <div class="ant-timeline-item-tail"></div>
+ <div class="ant-timeline-item-head ant-timeline-item-head-red" style="border-color:null;"></div>
+ <div class="ant-timeline-item-content">
+ <p>Solve initial network problems 1</p>
+ <p>Solve initial network problems 2</p>
+ <p>Solve initial network problems 3 2015-09-01</p>
+ </div>
+ </li>
+ <li class="ant-timeline-item ant-timeline-item-last">
+ <div class="ant-timeline-item-tail"></div>
+ <div class="ant-timeline-item-head ant-timeline-item-head-blue" style="border-color:null;"></div>
+ <div class="ant-timeline-item-content">
+ <p>Technical testing 1</p>
+ <p>Technical testing 2</p>
+ <p>Technical testing 3 2015-09-01</p>
+ </div>
+ </li>
+</ul>
+`;
+
+exports[`renders ./components/timeline/demo/custom.md correctly 1`] = `
+<ul class="ant-timeline">
+ <li class="ant-timeline-item">
+ <div class="ant-timeline-item-tail"></div>
+ <div class="ant-timeline-item-head ant-timeline-item-head-blue" style="border-color:null;"></div>
+ <div class="ant-timeline-item-content">Create a services site 2015-09-01</div>
+ </li>
+ <li class="ant-timeline-item">
+ <div class="ant-timeline-item-tail"></div>
+ <div class="ant-timeline-item-head ant-timeline-item-head-blue" style="border-color:null;"></div>
+ <div class="ant-timeline-item-content">Solve initial network problems 2015-09-01</div>
+ </li>
+ <li class="ant-timeline-item">
+ <div class="ant-timeline-item-tail"></div>
+ <div class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-red" style="border-color:null;">
+ <i class="anticon anticon-clock-circle-o" style="font-size:'16px';"></i>
+ </div>
+ <div class="ant-timeline-item-content">
+ Technical testing 2015-09-01
+ </div>
+ </li>
+ <li class="ant-timeline-item ant-timeline-item-last">
+ <div class="ant-timeline-item-tail"></div>
+ <div class="ant-timeline-item-head ant-timeline-item-head-blue" style="border-color:null;"></div>
+ <div class="ant-timeline-item-content">Network problems being solved 2015-09-01</div>
+ </li>
+</ul>
+`;
+
+exports[`renders ./components/timeline/demo/pending.md correctly 1`] = `
+<ul class="ant-timeline ant-timeline-pending">
+ <li class="ant-timeline-item">
+ <div class="ant-timeline-item-tail"></div>
+ <div class="ant-timeline-item-head ant-timeline-item-head-blue" style="border-color:null;"></div>
+ <div class="ant-timeline-item-content">Create a services site 2015-09-01</div>
+ </li>
+ <li class="ant-timeline-item">
+ <div class="ant-timeline-item-tail"></div>
+ <div class="ant-timeline-item-head ant-timeline-item-head-blue" style="border-color:null;"></div>
+ <div class="ant-timeline-item-content">Solve initial network problems 2015-09-01</div>
+ </li>
+ <li class="ant-timeline-item ant-timeline-item-last">
+ <div class="ant-timeline-item-tail"></div>
+ <div class="ant-timeline-item-head ant-timeline-item-head-blue" style="border-color:null;"></div>
+ <div class="ant-timeline-item-content">Technical testing 2015-09-01</div>
+ </li>
+ <li class="ant-timeline-item ant-timeline-item-pending">
+ <div class="ant-timeline-item-tail"></div>
+ <div class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue" style="border-color:null;">
+ <i class="anticon anticon-loading anticon-spin"></i>
+ <i class="anticon anticon-loading anticon-spin"></i>
+ </div>
+ <div class="ant-timeline-item-content">Recording...</div>
+ </li>
+</ul>
+`;
diff --git a/components/timeline/__tests__/demo.test.js b/components/timeline/__tests__/demo.test.js
new file mode 100644
index 000000000..e780ff46c
--- /dev/null
+++ b/components/timeline/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('timeline')
diff --git a/components/tooltip/__tests__/__snapshots__/demo.test.js.snap b/components/tooltip/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..9e643a1f3
--- /dev/null
+++ b/components/tooltip/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/tooltip/demo/arrow-point-at-center.md correctly 1`] = `
+<div>
+ <button type="button" class="ant-btn ant-btn-default"><span>Align edge / 边缘对齐</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Arrow points to center / 箭头指向中心</span></button>
+</div>
+`;
+
+exports[`renders ./components/tooltip/demo/auto-adjust-overflow.md correctly 1`] = `
+<div style="overflow:hidden;position:relative;padding:24px;border:1px solid #e9e9e9;">
+ <button type="button" class="ant-btn ant-btn-default"><span>Adjust automatically / 自动调整</span></button>
+ <br>
+ <button type="button" class="ant-btn ant-btn-default" style="margin-top:10px;"><span>Ingore / 不处理</span></button>
+</div>
+`;
+
+exports[`renders ./components/tooltip/demo/basic.md correctly 1`] = `
+<span>
+ Tooltip will show when mouse enter.
+</span>
+`;
+
+exports[`renders ./components/tooltip/demo/placement.md correctly 1`] = `
+<div id="components-a-tooltip-demo-placement">
+ <div style="margin-left:70px;white-space:nowrap;">
+ <button type="button" class="ant-btn ant-btn-default"><span>TL</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Top</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>TR</span></button>
+ </div>
+ <div style="width:70px;float:left;">
+ <button type="button" class="ant-btn ant-btn-default"><span>LT</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Left</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>LB</span></button>
+ </div>
+ <div style="width:70px;margin-left:304px;">
+ <button type="button" class="ant-btn ant-btn-default"><span>RT</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Right</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>RB</span></button>
+ </div>
+ <div style="margin-left:70px;clear:both;white-space:nowrap;">
+ <button type="button" class="ant-btn ant-btn-default"><span>BL</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>Bottom</span></button>
+ <button type="button" class="ant-btn ant-btn-default"><span>BR</span></button>
+ </div>
+</div>
+`;
diff --git a/components/tooltip/__tests__/demo.test.js b/components/tooltip/__tests__/demo.test.js
new file mode 100644
index 000000000..076b6872a
--- /dev/null
+++ b/components/tooltip/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('tooltip')
diff --git a/components/transfer/__tests__/__snapshots__/demo.test.js.snap b/components/transfer/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..2bf25a6c3
--- /dev/null
+++ b/components/transfer/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,216 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
+<div class="ant-transfer">
+ <div class="ant-transfer-list ant-transfer-list-with-footer" style="width:250px;height:300px;">
+ <div class="ant-transfer-list-header">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span>
+ </div>
+ <div class="ant-transfer-list-body ant-transfer-list-body-with-search">
+ <div class="ant-transfer-list-body-search-wrapper">
+ <div handleClear="function () { [native code] }">
+ <input value="" placeholder="Search here" type="text" class="ant-input ant-transfer-list-search ant-transfer-list-search"><span class="ant-transfer-list-search-action"><i class="anticon anticon-search"></i></span></div>
+ </div>
+ <div class="ant-transfer-list-content-warp"></div>
+ <div class="ant-transfer-list-body-not-found"><span>
+ 没数据
+ </span></div>
+ </div>
+ <div class="ant-transfer-list-footer">
+ <button type="button" class="ant-btn ant-btn-default ant-btn-sm" style="float:right;margin:5px;"><span>reload</span></button>
+ </div>
+ </div>
+ <div class="ant-transfer-operation">
+ <button type="button" disabled="disabled" class="ant-btn ant-btn-primary ant-btn-sm">
+ <i class="anticon anticon-left"></i><span>to left</span></button>
+ <button type="button" disabled="disabled" class="ant-btn ant-btn-primary ant-btn-sm">
+ <i class="anticon anticon-right"></i><span>to right</span></button>
+ </div>
+ <div class="ant-transfer-list ant-transfer-list-with-footer" style="width:250px;height:300px;">
+ <div class="ant-transfer-list-header">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span>
+ </div>
+ <div class="ant-transfer-list-body ant-transfer-list-body-with-search">
+ <div class="ant-transfer-list-body-search-wrapper">
+ <div handleClear="function () { [native code] }">
+ <input value="" placeholder="Search here" type="text" class="ant-input ant-transfer-list-search ant-transfer-list-search"><span class="ant-transfer-list-search-action"><i class="anticon anticon-search"></i></span></div>
+ </div>
+ <div class="ant-transfer-list-content-warp"></div>
+ <div class="ant-transfer-list-body-not-found"><span>
+ 没数据
+ </span></div>
+ </div>
+ <div class="ant-transfer-list-footer">
+ <button type="button" class="ant-btn ant-btn-default ant-btn-sm" style="float:right;margin:5px;"><span>reload</span></button>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/transfer/demo/basic.md correctly 1`] = `
+<div class="ant-transfer">
+ <div class="ant-transfer-list">
+ <div class="ant-transfer-list-header">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label><span class="ant-transfer-list-header-selected"><span>2/14 items</span><span class="ant-transfer-list-header-title">Source</span></span>
+ </div>
+ <div class="ant-transfer-list-body">
+ <div class="ant-transfer-list-content-warp">
+ <ul class="ant-transfer-list-content">
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ </ul>
+ </div>
+ <div class="ant-transfer-list-body-not-found">Not Found</div>
+ </div>
+ </div>
+ <div class="ant-transfer-operation">
+ <button type="button" disabled="disabled" class="ant-btn ant-btn-primary ant-btn-sm">
+ <i class="anticon anticon-left"></i>
+ </button>
+ <button type="button" class="ant-btn ant-btn-primary ant-btn-sm">
+ <i class="anticon anticon-right"></i>
+ </button>
+ </div>
+ <div class="ant-transfer-list">
+ <div class="ant-transfer-list-header">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label><span class="ant-transfer-list-header-selected"><span>6 items</span><span class="ant-transfer-list-header-title">Target</span></span>
+ </div>
+ <div class="ant-transfer-list-body">
+ <div class="ant-transfer-list-content-warp">
+ <ul class="ant-transfer-list-content">
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ <div class="LazyLoad" style="height:32px;width:undefined;"></div>
+ </ul>
+ </div>
+ <div class="ant-transfer-list-body-not-found">Not Found</div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/transfer/demo/custom-item.md correctly 1`] = `
+<div class="ant-transfer">
+ <div class="ant-transfer-list" style="width:300px;height:300px;">
+ <div class="ant-transfer-list-header">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span>
+ </div>
+ <div class="ant-transfer-list-body">
+ <div class="ant-transfer-list-content-warp"></div>
+ <div class="ant-transfer-list-body-not-found">Not Found</div>
+ </div>
+ </div>
+ <div class="ant-transfer-operation">
+ <button type="button" disabled="disabled" class="ant-btn ant-btn-primary ant-btn-sm">
+ <i class="anticon anticon-left"></i>
+ </button>
+ <button type="button" disabled="disabled" class="ant-btn ant-btn-primary ant-btn-sm">
+ <i class="anticon anticon-right"></i>
+ </button>
+ </div>
+ <div class="ant-transfer-list" style="width:300px;height:300px;">
+ <div class="ant-transfer-list-header">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span>
+ </div>
+ <div class="ant-transfer-list-body">
+ <div class="ant-transfer-list-content-warp"></div>
+ <div class="ant-transfer-list-body-not-found">Not Found</div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/transfer/demo/large-data.md correctly 1`] = `
+<div class="ant-transfer">
+ <div class="ant-transfer-list">
+ <div class="ant-transfer-list-header">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span>
+ </div>
+ <div class="ant-transfer-list-body">
+ <div class="ant-transfer-list-content-warp"></div>
+ <div class="ant-transfer-list-body-not-found">Not Found</div>
+ </div>
+ </div>
+ <div class="ant-transfer-operation">
+ <button type="button" disabled="disabled" class="ant-btn ant-btn-primary ant-btn-sm">
+ <i class="anticon anticon-left"></i>
+ </button>
+ <button type="button" disabled="disabled" class="ant-btn ant-btn-primary ant-btn-sm">
+ <i class="anticon anticon-right"></i>
+ </button>
+ </div>
+ <div class="ant-transfer-list">
+ <div class="ant-transfer-list-header">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span>
+ </div>
+ <div class="ant-transfer-list-body">
+ <div class="ant-transfer-list-content-warp"></div>
+ <div class="ant-transfer-list-body-not-found">Not Found</div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`renders ./components/transfer/demo/search.md correctly 1`] = `
+<div class="ant-transfer">
+ <div class="ant-transfer-list">
+ <div class="ant-transfer-list-header">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span>
+ </div>
+ <div class="ant-transfer-list-body ant-transfer-list-body-with-search">
+ <div class="ant-transfer-list-body-search-wrapper">
+ <div handleClear="function () { [native code] }">
+ <input value="" placeholder="Search here" type="text" class="ant-input ant-transfer-list-search ant-transfer-list-search"><span class="ant-transfer-list-search-action"><i class="anticon anticon-search"></i></span></div>
+ </div>
+ <div class="ant-transfer-list-content-warp"></div>
+ <div class="ant-transfer-list-body-not-found">Not Found</div>
+ </div>
+ </div>
+ <div class="ant-transfer-operation">
+ <button type="button" disabled="disabled" class="ant-btn ant-btn-primary ant-btn-sm">
+ <i class="anticon anticon-left"></i>
+ </button>
+ <button type="button" disabled="disabled" class="ant-btn ant-btn-primary ant-btn-sm">
+ <i class="anticon anticon-right"></i>
+ </button>
+ </div>
+ <div class="ant-transfer-list">
+ <div class="ant-transfer-list-header">
+ <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+ </label><span class="ant-transfer-list-header-selected"><span>0 item</span><span class="ant-transfer-list-header-title"></span></span>
+ </div>
+ <div class="ant-transfer-list-body ant-transfer-list-body-with-search">
+ <div class="ant-transfer-list-body-search-wrapper">
+ <div handleClear="function () { [native code] }">
+ <input value="" placeholder="Search here" type="text" class="ant-input ant-transfer-list-search ant-transfer-list-search"><span class="ant-transfer-list-search-action"><i class="anticon anticon-search"></i></span></div>
+ </div>
+ <div class="ant-transfer-list-content-warp"></div>
+ <div class="ant-transfer-list-body-not-found">Not Found</div>
+ </div>
+ </div>
+</div>
+`;
diff --git a/components/transfer/__tests__/demo.test.js b/components/transfer/__tests__/demo.test.js
new file mode 100644
index 000000000..7f1000237
--- /dev/null
+++ b/components/transfer/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('transfer')
diff --git a/components/tree/__tests__/__snapshots__/demo.test.js.snap b/components/tree/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..a562d4d9a
--- /dev/null
+++ b/components/tree/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,188 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
+<ul role="tree-node" unselectable="on" class="ant-tree">
+ <li><span class="ant-tree-switcher ant-tree-switcher_open"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="parent 1" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">parent 1</span></span>
+ <ul
+ data-expanded="true" class="ant-tree-child-tree ant-tree-child-tree-open">
+ <li class="ant-tree-treenode-disabled"><span class="ant-tree-switcher ant-tree-switcher_open"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked ant-tree-checkbox-disabled"><span class="ant-tree-checkbox-inner"></span></span><span title="parent 1-0" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">parent 1-0</span></span>
+ <ul
+ data-expanded="true" class="ant-tree-child-tree ant-tree-child-tree-open">
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox ant-tree-checkbox-disabled"><span class="ant-tree-checkbox-inner"></span></span><span title="leaf" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">leaf</span></span>
+ </li>
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="leaf" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">leaf</span></span>
+ </li>
+</ul>
+</li>
+<li><span class="ant-tree-switcher ant-tree-switcher_open"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="parent 1-1" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">parent 1-1</span></span>
+ <ul
+ data-expanded="true" class="ant-tree-child-tree ant-tree-child-tree-open">
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title"><span style="color:#1890ff;">sss</span></span>
+ </span>
+ </li>
+ </ul>
+</li>
+</ul>
+</li>
+</ul>
+`;
+
+exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
+<ul role="tree-node" unselectable="on" class="ant-tree">
+ <li><span class="ant-tree-switcher ant-tree-switcher_open"></span><span class="ant-tree-checkbox ant-tree-checkbox-indeterminate"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">0-0</span></span>
+ <ul
+ data-expanded="true" class="ant-tree-child-tree ant-tree-child-tree-open">
+ <li><span class="ant-tree-switcher ant-tree-switcher_open"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-0" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">0-0-0</span></span>
+ <ul
+ data-expanded="true" class="ant-tree-child-tree ant-tree-child-tree-open">
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-0-0" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-0-0</span></span>
+ </li>
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-0-1" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-0-1</span></span>
+ </li>
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox ant-tree-checkbox-checked"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-0-2" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-0-2</span></span>
+ </li>
+</ul>
+</li>
+<li><span class="ant-tree-switcher ant-tree-switcher_open"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-1" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">0-0-1</span></span>
+ <ul
+ data-expanded="true" class="ant-tree-child-tree ant-tree-child-tree-open">
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-1-0" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-1-0</span></span>
+ </li>
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-1-1" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-1-1</span></span>
+ </li>
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-1-2" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-1-2</span></span>
+ </li>
+ </ul>
+</li>
+<li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-0-2" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-0-2</span></span>
+</li>
+</ul>
+</li>
+<li><span class="ant-tree-switcher ant-tree-switcher_close"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-1" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><span class="ant-tree-title">0-1</span></span>
+ <!---->
+</li>
+<li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span class="ant-tree-checkbox"><span class="ant-tree-checkbox-inner"></span></span><span title="0-2" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">0-2</span></span>
+</li>
+</ul>
+`;
+
+exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
+<ul role="tree-node" unselectable="on" class="ant-tree">
+ <li><span class="ant-tree-switcher ant-tree-switcher_open"></span><span title="parent 1" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-smile-o"></i></span>
+ <span
+ class="ant-tree-title">parent 1</span>
+ </span>
+ <ul data-expanded="true" class="ant-tree-child-tree ant-tree-child-tree-open">
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="leaf" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal ant-tree-node-selected"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-smile-o"></i></span>
+ <span
+ class="ant-tree-title">leaf</span>
+ </span>
+ </li>
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="leaf" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-iconEle ant-tree-icon__customize"><i class="anticon anticon-frown-o"></i></span>
+ <span
+ class="ant-tree-title">leaf</span>
+ </span>
+ </li>
+ </ul>
+ </li>
+</ul>
+`;
+
+exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
+<ul role="tree-node" unselectable="on" class="draggable-tree ant-tree">
+ <li><span class="ant-tree-switcher ant-tree-switcher_open"></span><span title="0-0" draggable="true" aria-grabbed="true" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open draggable"><span class="ant-tree-title">0-0</span></span>
+ <ul
+ data-expanded="true" class="ant-tree-child-tree ant-tree-child-tree-open">
+ <li><span class="ant-tree-switcher ant-tree-switcher_open"></span><span title="0-0-0" draggable="true" aria-grabbed="true" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open draggable"><span class="ant-tree-title">0-0-0</span></span>
+ <ul
+ data-expanded="true" class="ant-tree-child-tree ant-tree-child-tree-open">
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="0-0-0-0" draggable="true" aria-grabbed="true" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"><span class="ant-tree-title">0-0-0-0</span></span>
+ </li>
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="0-0-0-1" draggable="true" aria-grabbed="true" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"><span class="ant-tree-title">0-0-0-1</span></span>
+ </li>
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="0-0-0-2" draggable="true" aria-grabbed="true" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"><span class="ant-tree-title">0-0-0-2</span></span>
+ </li>
+</ul>
+</li>
+<li><span class="ant-tree-switcher ant-tree-switcher_close"></span><span title="0-0-1" draggable="true" aria-grabbed="true" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close draggable"><span class="ant-tree-title">0-0-1</span></span>
+ <!---->
+</li>
+<li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="0-0-2" draggable="true" aria-grabbed="true" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"><span class="ant-tree-title">0-0-2</span></span>
+</li>
+</ul>
+</li>
+<li><span class="ant-tree-switcher ant-tree-switcher_close"></span><span title="0-1" draggable="true" aria-grabbed="true" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close draggable"><span class="ant-tree-title">0-1</span></span>
+ <!---->
+</li>
+<li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="0-2" draggable="true" aria-grabbed="true" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"><span class="ant-tree-title">0-2</span></span>
+</li>
+</ul>
+`;
+
+exports[`renders ./components/tree/demo/dynamic.md correctly 1`] = `
+<ul role="tree-node" unselectable="on" class="ant-tree">
+ <li><span class="ant-tree-switcher ant-tree-switcher_close"></span><span title="Expand to load" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><span class="ant-tree-title">Expand to load</span></span>
+ </li>
+ <li><span class="ant-tree-switcher ant-tree-switcher_close"></span><span title="Expand to load" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><span class="ant-tree-title">Expand to load</span></span>
+ </li>
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="Tree Node" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">Tree Node</span></span>
+ </li>
+</ul>
+`;
+
+exports[`renders ./components/tree/demo/line.md correctly 1`] = `
+<ul role="tree-node" unselectable="on" class="ant-tree ant-tree-show-line">
+ <li><span class="ant-tree-switcher ant-tree-switcher_open"></span><span title="" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title"><span style="color:#1890ff;">parent 1</span></span>
+ </span>
+ <ul data-expanded="true" class="ant-tree-child-tree ant-tree-child-tree-open">
+ <li><span class="ant-tree-switcher ant-tree-switcher_open"></span><span title="parent 1-0" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"><span class="ant-tree-title">parent 1-0</span></span>
+ <ul data-expanded="true"
+ class="ant-tree-child-tree ant-tree-child-tree-open">
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="leaf" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">leaf</span></span>
+ </li>
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="leaf" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">leaf</span></span>
+ </li>
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="leaf" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title">leaf</span></span>
+ </li>
+ </ul>
+ </li>
+ <li><span class="ant-tree-switcher ant-tree-switcher_close"></span><span title="parent 1-1" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><span class="ant-tree-title">parent 1-1</span></span>
+ <!---->
+ </li>
+ <li><span class="ant-tree-switcher ant-tree-switcher_close"></span><span title="parent 1-2" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><span class="ant-tree-title">parent 1-2</span></span>
+ <!---->
+ </li>
+ </ul>
+ </li>
+</ul>
+`;
+
+exports[`renders ./components/tree/demo/search.md correctly 1`] = `
+<div><span class="ant-input-search ant-input-affix-wrapper ant-input-search" style="margin-bottom:8px;"><input placeholder="Search" type="text" value="" class="ant-input ant-input-search"><span class="ant-input-suffix"><i class="anticon anticon-search ant-input-search-icon"></i></span></span>
+ <ul role="tree-node" unselectable="on" class="ant-tree">
+ <li><span class="ant-tree-switcher ant-tree-switcher_close"></span><span title="" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><span class="ant-tree-title"><span>
+
+ <span style="color:#f50;"></span> 0-0
+ </span>
+ </span>
+ </span>
+ <!---->
+ </li>
+ <li><span class="ant-tree-switcher ant-tree-switcher_close"></span><span title="" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"><span class="ant-tree-title"><span>
+
+ <span style="color:#f50;"></span> 0-1
+ </span>
+ </span>
+ </span>
+ <!---->
+ </li>
+ <li><span class="ant-tree-switcher ant-tree-switcher-noop"></span><span title="" draggable="false" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"><span class="ant-tree-title"><span>
+
+ <span style="color:#f50;"></span> 0-2
+ </span>
+ </span>
+ </span>
+ </li>
+ </ul>
+</div>
+`;
diff --git a/components/tree/__tests__/demo.test.js b/components/tree/__tests__/demo.test.js
new file mode 100644
index 000000000..69f17a203
--- /dev/null
+++ b/components/tree/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('tree')
diff --git a/components/trigger/Trigger.jsx b/components/trigger/Trigger.jsx
index 731b27425..547411e7f 100644
--- a/components/trigger/Trigger.jsx
+++ b/components/trigger/Trigger.jsx
@@ -10,8 +10,6 @@ import Popup from './Popup'
import { getAlignFromPlacement, getPopupClassNameFromAlign, noop } from './utils'
import BaseMixin from '../_util/BaseMixin'
import { cloneElement } from '../_util/vnode'
-import antRefDirective from '../_util/antRefDirective'
-Vue.use(antRefDirective)
function returnEmptyString () {
return ''
diff --git a/components/trigger/demo/simple.vue b/components/trigger/demo/simple.vue
index ab19cd728..799a4dc11 100644
--- a/components/trigger/demo/simple.vue
+++ b/components/trigger/demo/simple.vue
@@ -1,7 +1,7 @@
<script>
import Trigger from '../index'
import '../assets/index.less'
-import { Input, Button, Checkbox } from 'antd'
+import { Input, Button, Checkbox } from 'vue-antd-ui'
function getPopupAlign (state) {
return {
offset: [state.offsetX, state.offsetY],
diff --git a/components/upload/__tests__/__snapshots__/demo.test.js.snap b/components/upload/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..da30fe7f2
--- /dev/null
+++ b/components/upload/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/upload/demo/avatar.md correctly 1`] = `<span class="avatar-uploader"><div class="ant-upload ant-upload-select ant-upload-select-picture-card" style="display:;"><!----></div></span>`;
+
+exports[`renders ./components/upload/demo/basic.md correctly 1`] = `<span><div class="ant-upload ant-upload-select ant-upload-select-text" style="display:;"><!----></div><div class="ant-upload-list ant-upload-list-text"></div></span>`;
+
+exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
+<span><div class="ant-upload ant-upload-select ant-upload-select-text" style="display:;"><!----></div><div class="ant-upload-list ant-upload-list-text"><div class="ant-upload-list-item ant-upload-list-item-done"><div class="ant-upload-list-item-info"><span><i class="anticon anticon-paper-clip"></i><a href="http://www.baidu.com/xxx.png" target="_blank" rel="noopener noreferrer" title="xxx.png" class="ant-upload-list-item-name">xxx.png</a></span></div>
+<i
+ class="anticon anticon-cross"></i>
+ <!---->
+ </div>
+ <div class="ant-upload-list-item ant-upload-list-item-done">
+ <div class="ant-upload-list-item-info"><span><i class="anticon anticon-paper-clip"></i><a href="http://www.baidu.com/yyy.png" target="_blank" rel="noopener noreferrer" title="yyy.png" class="ant-upload-list-item-name">yyy.png</a></span></div>
+ <i class="anticon anticon-cross"></i>
+ <!---->
+ </div>
+ <div class="ant-upload-list-item ant-upload-list-item-error">
+ <div class="ant-upload-list-item-info"><span><i class="anticon anticon-paper-clip"></i><a href="http://www.baidu.com/zzz.png" target="_blank" rel="noopener noreferrer" title="zzz.png" class="ant-upload-list-item-name">zzz.png</a></span></div>
+ <i class="anticon anticon-cross"></i>
+ <!---->
+ </div>
+ </div>
+ </span>
+`;
+
+exports[`renders ./components/upload/demo/drag.md correctly 1`] = `<span style="height:undefined;"><div class="ant-upload ant-upload-drag"><!----></div><div class="ant-upload-list ant-upload-list-text"></div></span>`;
+
+exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
+<span><div class="ant-upload ant-upload-select ant-upload-select-text" style="display:;"><!----></div><div class="ant-upload-list ant-upload-list-text"><div class="ant-upload-list-item ant-upload-list-item-done"><div class="ant-upload-list-item-info"><span><i class="anticon anticon-paper-clip"></i><a href="http://www.baidu.com/xxx.png" target="_blank" rel="noopener noreferrer" title="xxx.png" class="ant-upload-list-item-name">xxx.png</a></span></div>
+<i
+ class="anticon anticon-cross"></i>
+ <!---->
+ </div>
+ </div>
+ </span>
+`;
+
+exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
+<div class="clearfix"><span><div class="ant-upload-list ant-upload-list-picture-card"><div class="ant-upload-list-item ant-upload-list-item-done"><div class="ant-upload-list-item-info"><span><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="xxx.png"></a><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="xxx.png" class="ant-upload-list-item-name">xxx.png</a></span></div>
+<span
+ class="ant-upload-list-item-actions">
+ <a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="Preview file">
+ <i class="anticon anticon-eye-o"></i>
+ </a>
+ <i title="Remove file" class="anticon anticon-delete"></i>
+ </span>
+ <!---->
+ </div>
+ </div>
+ <div class="ant-upload ant-upload-select ant-upload-select-picture-card" style="display:;">
+ <!---->
+ </div>
+ </span>
+ <!---->
+ </div>
+`;
+
+exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
+<div><span><div class="ant-upload-list ant-upload-list-picture-card"><div class="ant-upload-list-item ant-upload-list-item-done"><div class="ant-upload-list-item-info"><span><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="xxx.png"></a><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="xxx.png" class="ant-upload-list-item-name">xxx.png</a></span></div>
+<span
+ class="ant-upload-list-item-actions">
+ <a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="Preview file">
+ <i class="anticon anticon-eye-o"></i>
+ </a>
+ <i title="Remove file" class="anticon anticon-delete"></i>
+ </span>
+ <!---->
+ </div>
+ <div class="ant-upload-list-item ant-upload-list-item-done">
+ <div class="ant-upload-list-item-info"><span><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="yyy.png"></a><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="yyy.png" class="ant-upload-list-item-name">yyy.png</a></span></div>
+ <span
+ class="ant-upload-list-item-actions">
+ <a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="Preview file">
+ <i class="anticon anticon-eye-o"></i>
+ </a>
+ <i title="Remove file" class="anticon anticon-delete"></i>
+ </span>
+ <!---->
+ </div>
+ </div>
+ <div class="ant-upload ant-upload-select ant-upload-select-picture-card" style="display:;">
+ <!---->
+ </div>
+ </span>
+ <br>
+ <br> <span class="upload-list-inline"><div class="ant-upload ant-upload-select ant-upload-select-picture" style="display:;"><!----></div><div class="ant-upload-list ant-upload-list-picture"><div class="ant-upload-list-item ant-upload-list-item-done"><div class="ant-upload-list-item-info"><span><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="xxx.png"></a><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="xxx.png" class="ant-upload-list-item-name">xxx.png</a></span></div>
+ <i
+ class="anticon anticon-cross"></i>
+ <!---->
+ </div>
+ <div class="ant-upload-list-item ant-upload-list-item-done">
+ <div class="ant-upload-list-item-info"><span><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-thumbnail"><img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="yyy.png"></a><a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" target="_blank" rel="noopener noreferrer" title="yyy.png" class="ant-upload-list-item-name">yyy.png</a></span></div>
+ <i
+ class="anticon anticon-cross"></i>
+ <!---->
+ </div>
+ </div>
+ </span>
+ </div>
+`;
+
+exports[`renders ./components/upload/demo/upload-manually.md correctly 1`] = `
+<div class="clearfix"><span><div class="ant-upload ant-upload-select ant-upload-select-text" style="display:;"><!----></div><div class="ant-upload-list ant-upload-list-text"></div></span>
+ <button type="button" disabled="disabled" class="upload-demo-start ant-btn ant-btn-primary"><span>Start Upload</span></button>
+</div>
+`;
diff --git a/components/upload/__tests__/demo.test.js b/components/upload/__tests__/demo.test.js
new file mode 100644
index 000000000..89434d553
--- /dev/null
+++ b/components/upload/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('upload')
diff --git a/components/vc-form/demo/modal.js b/components/vc-form/demo/modal.js
index a9d127886..4de1e0955 100644
--- a/components/vc-form/demo/modal.js
+++ b/components/vc-form/demo/modal.js
@@ -2,7 +2,7 @@
import BaseMixin from '../../_util/BaseMixin'
import createDOMForm from '../src/createDOMForm'
-import { Modal } from 'antd'
+import { Modal } from 'vue-antd-ui'
import { regionStyle, errorStyle } from './styles'
const Form = {
diff --git a/components/vc-form/demo/overview.js b/components/vc-form/demo/overview.js
index b4785c2a8..3d4607126 100644
--- a/components/vc-form/demo/overview.js
+++ b/components/vc-form/demo/overview.js
@@ -1,7 +1,7 @@
/* eslint react/no-multi-comp:0, no-console:0 */
import createDOMForm from '../src/createDOMForm'
-import { DatePicker, Select } from 'antd'
+import { DatePicker, Select } from 'vue-antd-ui'
import { regionStyle, errorStyle } from './styles'
const { Option } = Select
diff --git a/components/vc-form/demo/parallel-form.js b/components/vc-form/demo/parallel-form.js
index d4403d835..865386126 100644
--- a/components/vc-form/demo/parallel-form.js
+++ b/components/vc-form/demo/parallel-form.js
@@ -2,7 +2,7 @@
import { createForm } from '../index'
import { regionStyle } from './styles'
-import { Switch } from 'antd'
+import { Switch } from 'vue-antd-ui'
const TopForm = {
props: {
diff --git a/components/vc-form/demo/start-end-date.js b/components/vc-form/demo/start-end-date.js
index 80993ad73..e7556fff7 100644
--- a/components/vc-form/demo/start-end-date.js
+++ b/components/vc-form/demo/start-end-date.js
@@ -1,6 +1,6 @@
/* eslint no-console:0 */
-import { DatePicker } from 'antd'
+import { DatePicker } from 'vue-antd-ui'
import createDOMForm from '../src/createDOMForm'
import { regionStyle, errorStyle } from './styles'
diff --git a/components/vc-form/demo/suggest.js b/components/vc-form/demo/suggest.js
index 9d50e76fc..204812858 100644
--- a/components/vc-form/demo/suggest.js
+++ b/components/vc-form/demo/suggest.js
@@ -1,7 +1,7 @@
/* eslint react/no-multi-comp:0, no-console:0 */
import { createForm } from '../index'
-import { Select } from 'antd'
+import { Select } from 'vue-antd-ui'
import { regionStyle, errorStyle } from './styles'
import { mergeProps } from '../../_util/props-util'
const emailTpl = ['@gmail.com', '@outlook.com', '@qq.com']
diff --git a/components/vc-notification/Notification.jsx b/components/vc-notification/Notification.jsx
index 37199baff..81088375f 100644
--- a/components/vc-notification/Notification.jsx
+++ b/components/vc-notification/Notification.jsx
@@ -7,9 +7,6 @@ import createChainedFunction from '../_util/createChainedFunction'
import getTransitionProps from '../_util/getTransitionProps'
import Notice from './Notice'
-import antRefDirective from '../_util/antRefDirective'
-Vue.use(antRefDirective)
-
let seed = 0
const now = Date.now()