Skip to content

test: add more test & up doc #602

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 30, 2021
Merged

test: add more test & up doc #602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ React.render(<Table columns={columns} data={data} />, mountNode);
| expandable.rowExpandable | (record) => boolean | | Config row support expandable |
| expandable.onExpand | Function(expanded, record) | | function to call when click expand icon |
| expandable.onExpandedRowsChange | Function(expandedRows) | | function to call when the expanded rows change |
| expandable.fixed | String \| Boolean | - | this expand icon will be fixed when table scroll horizontally: true or `left` or `right` and `expandIconColumnIndex` need to stay first or last |
| rowKey | string or Function(record):string | 'key' | If rowKey is string, `record[rowKey]` will be used as key. If rowKey is function, the return value of `rowKey(record)` will be use as key. |
| rowClassName | string or Function(record, index, indent):string | | get row's className |
| rowRef | Function(record, index, indent):string | | get row's ref key |
Expand Down
60 changes: 60 additions & 0 deletions tests/ExpandRow.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,66 @@ describe('Table.Expand', () => {
});
});

it('work in expandable fix', () => {
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Gender', dataIndex: 'gender', key: 'gender' },
];
const data = [
{ key: 0, name: 'Lucy', age: 27, gender: 'F' },
{ key: 1, name: 'Jack', age: 28, gender: 'M' },
];
const wrapper = mount(
createTable({
columns,
data,
scroll: { x: 903 },
expandable: { expandedRowRender, fixed: true },
}),
);
const wrapper2 = mount(
createTable({
columns,
data,
scroll: { x: 903 },
expandable: { expandedRowRender, fixed: true, expandIconColumnIndex: 3 },
}),
);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper2.render()).toMatchSnapshot();
});

it('expandable fix not when expandIconColumnIndex', () => {
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Gender', dataIndex: 'gender', key: 'gender' },
];
const data = [
{ key: 0, name: 'Lucy', age: 27, gender: 'F' },
{ key: 1, name: 'Jack', age: 28, gender: 'M' },
];
const wrapper = mount(
createTable({
columns,
data,
scroll: { x: 903 },
expandable: { expandedRowRender, fixed: 'left', expandIconColumnIndex: 1 },
}),
);
const wrapper2 = mount(
createTable({
columns,
data,
scroll: { x: 903 },
expandable: { expandedRowRender, fixed: 'right', expandIconColumnIndex: 2 },
}),
);
expect(wrapper.find('.rc-table-has-fix-left').length).toBe(0);
expect(wrapper2.find('.rc-table-has-fix-right').length).toBe(0);
});

it('renders expand icon to the specify column', () => {
const wrapper = mount(
createTable({
Expand Down
307 changes: 307 additions & 0 deletions tests/__snapshots__/ExpandRow.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -648,3 +648,310 @@ exports[`Table.Expand renders tree row correctly with different children 1`] = `
</div>
</div>
`;

exports[`Table.Expand work in expandable fix 1`] = `
<div
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-left"
>
<div
class="rc-table-container"
>
<div
class="rc-table-content"
style="overflow-x: auto; overflow-y: hidden;"
>
<table
style="width: 903px; min-width: 100%; table-layout: fixed;"
>
<colgroup>
<col
class="rc-table-expand-icon-col"
/>
</colgroup>
<thead
class="rc-table-thead"
>
<tr>
<th
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
style="position: sticky; left: 0px;"
/>
<th
class="rc-table-cell"
>
Name
</th>
<th
class="rc-table-cell"
>
Age
</th>
<th
class="rc-table-cell"
>
Gender
</th>
</tr>
</thead>
<tbody
class="rc-table-tbody"
>
<tr
aria-hidden="true"
class="rc-table-measure-row"
style="height: 0px; font-size: 0;"
>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>

</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>

</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>

</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>

</div>
</td>
</tr>
<tr
class="rc-table-row rc-table-row-level-0"
data-row-key="0"
>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
style="position: sticky; left: 0px;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
/>
</td>
<td
class="rc-table-cell"
>
Lucy
</td>
<td
class="rc-table-cell"
>
27
</td>
<td
class="rc-table-cell"
>
F
</td>
</tr>
<tr
class="rc-table-row rc-table-row-level-0"
data-row-key="1"
>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-left rc-table-cell-fix-left-last"
style="position: sticky; left: 0px;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
/>
</td>
<td
class="rc-table-cell"
>
Jack
</td>
<td
class="rc-table-cell"
>
28
</td>
<td
class="rc-table-cell"
>
M
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
`;

exports[`Table.Expand work in expandable fix 2`] = `
<div
class="rc-table rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-right"
>
<div
class="rc-table-container"
>
<div
class="rc-table-content"
style="overflow-x: auto; overflow-y: hidden;"
>
<table
style="width: 903px; min-width: 100%; table-layout: fixed;"
>
<colgroup>
<col />
<col />
<col />
<col
class="rc-table-expand-icon-col"
/>
</colgroup>
<thead
class="rc-table-thead"
>
<tr>
<th
class="rc-table-cell"
>
Name
</th>
<th
class="rc-table-cell"
>
Age
</th>
<th
class="rc-table-cell"
>
Gender
</th>
<th
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-right rc-table-cell-fix-right-first"
style="position: sticky; right: 0px;"
/>
</tr>
</thead>
<tbody
class="rc-table-tbody"
>
<tr
aria-hidden="true"
class="rc-table-measure-row"
style="height: 0px; font-size: 0;"
>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>

</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>

</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>

</div>
</td>
<td
style="padding: 0px; border: 0px; height: 0px;"
>
<div
style="height: 0px; overflow: hidden;"
>

</div>
</td>
</tr>
<tr
class="rc-table-row rc-table-row-level-0"
data-row-key="0"
>
<td
class="rc-table-cell"
>
Lucy
</td>
<td
class="rc-table-cell"
>
27
</td>
<td
class="rc-table-cell"
>
F
</td>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-right rc-table-cell-fix-right-first"
style="position: sticky; right: 0px;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
/>
</td>
</tr>
<tr
class="rc-table-row rc-table-row-level-0"
data-row-key="1"
>
<td
class="rc-table-cell"
>
Jack
</td>
<td
class="rc-table-cell"
>
28
</td>
<td
class="rc-table-cell"
>
M
</td>
<td
class="rc-table-cell rc-table-row-expand-icon-cell rc-table-cell-fix-right rc-table-cell-fix-right-first"
style="position: sticky; right: 0px;"
>
<span
class="rc-table-row-expand-icon rc-table-row-collapsed"
/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
`;