Skip to content

Commit ac8ecd0

Browse files
committed
update
1 parent a5f11b9 commit ac8ecd0

File tree

2 files changed

+95
-160
lines changed

2 files changed

+95
-160
lines changed

tests/unit/specs/__snapshots__/ve-table-cell-edit.spec.js.snap

Lines changed: 0 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -62,68 +62,3 @@ exports[`veTable cell edit cell editor render 1`] = `
6262
<div class="ve-table-edit-input-container" style="top: 0px; left: 0px; height: 1px; z-index: -1; opacity: 0;"><textarea tabindex="-1" class="ve-table-edit-input"></textarea></div>
6363
</div>
6464
`;
65-
66-
exports[`veTable cell edit table clickoutside width cell editing 1`] = `
67-
<div><button id="outsideButton">outside table</button>
68-
<div class="ve-table ve-table-border-around">
69-
<div class="ve-table-container" style="height: 2px;">
70-
<table class="ve-table-content ve-table-border-x">
71-
<colgroup>
72-
<col style="width: 15%;">
73-
<col style="width: 15%;">
74-
<col style="width: 30%;">
75-
<col style="width: 40%;">
76-
</colgroup>
77-
<thead class="ve-table-fixed-header ve-table-header">
78-
<tr class="ve-table-header-tr">
79-
<th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: left; top: 0px;">Name</th>
80-
<th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: left; top: 0px;">Date</th>
81-
<th rowspan="1" colspan="1" class="ve-table-header-th" style="text-align: center; top: 0px;">Hobby</th>
82-
<th rowspan="1" colspan="1" class="ve-table-header-th ve-table-last-column" style="text-align: left; top: 0px;">Address</th>
83-
</tr>
84-
</thead>
85-
<tbody class="ve-table-body ve-table-row-hover ve-table-row-highlight">
86-
<tr style="height: 0px;">
87-
<td style="padding: 0px; border: 0px; height: 0px;"></td>
88-
<td style="padding: 0px; border: 0px; height: 0px;"></td>
89-
<td style="padding: 0px; border: 0px; height: 0px;"></td>
90-
<td style="padding: 0px; border: 0px; height: 0px;"></td>
91-
</tr>
92-
<tr class="ve-table-body-tr">
93-
<td rowspan="1" colspan="1" col-key="name" class="ve-table-body-td" style="text-align: left;">John</td>
94-
<td rowspan="1" colspan="1" col-key="date" class="ve-table-body-td" style="text-align: left;">1900-05-20</td>
95-
<td rowspan="1" colspan="1" col-key="hobby" class="ve-table-body-td" style="text-align: center;">coding and coding repeat</td>
96-
<td rowspan="1" colspan="1" col-key="address" class="ve-table-body-td" style="text-align: left;">No.1 Century Avenue, Shanghai</td>
97-
</tr>
98-
<tr class="ve-table-body-tr">
99-
<td rowspan="1" colspan="1" col-key="name" class="ve-table-body-td" style="text-align: left;">Dickerson</td>
100-
<td rowspan="1" colspan="1" col-key="date" class="ve-table-body-td" style="text-align: left;">1910-06-20</td>
101-
<td rowspan="1" colspan="1" col-key="hobby" class="ve-table-body-td" style="text-align: center;">coding and coding repeat</td>
102-
<td rowspan="1" colspan="1" col-key="address" class="ve-table-body-td" style="text-align: left;">No.1 Century Avenue, Beijing</td>
103-
</tr>
104-
<tr class="ve-table-body-tr">
105-
<td rowspan="1" colspan="1" col-key="name" class="ve-table-body-td" style="text-align: left;">Larsen</td>
106-
<td rowspan="1" colspan="1" col-key="date" class="ve-table-body-td" style="text-align: left;">2000-07-20</td>
107-
<td rowspan="1" colspan="1" col-key="hobby" class="ve-table-body-td" style="text-align: center;">coding and coding repeat</td>
108-
<td rowspan="1" colspan="1" col-key="address" class="ve-table-body-td" style="text-align: left;">No.1 Century Avenue, Chongqing</td>
109-
</tr>
110-
<tr class="ve-table-body-tr">
111-
<td rowspan="1" colspan="1" col-key="name" class="ve-table-body-td" style="text-align: left;">Geneva</td>
112-
<td rowspan="1" colspan="1" col-key="date" class="ve-table-body-td" style="text-align: left;">2010-08-20</td>
113-
<td rowspan="1" colspan="1" col-key="hobby" class="ve-table-body-td" style="text-align: center;">coding and coding repeat</td>
114-
<td rowspan="1" colspan="1" col-key="address" class="ve-table-body-td" style="text-align: left;">No.1 Century Avenue, Xiamen</td>
115-
</tr>
116-
<tr class="ve-table-body-tr">
117-
<td rowspan="1" colspan="1" col-key="name" class="ve-table-body-td" style="text-align: left;">Jami</td>
118-
<td rowspan="1" colspan="1" col-key="date" class="ve-table-body-td" style="text-align: left;">2020-09-20</td>
119-
<td rowspan="1" colspan="1" col-key="hobby" class="ve-table-body-td" style="text-align: center;">coding and coding repeat</td>
120-
<td rowspan="1" colspan="1" col-key="address" class="ve-table-body-td" style="text-align: left;">No.1 Century Avenue, Shenzhen</td>
121-
</tr>
122-
</tbody>
123-
<tfoot class="ve-table-fixed-footer ve-table-footer"></tfoot>
124-
</table>
125-
</div>
126-
<div class="ve-table-edit-input-container" style="top: 0px; left: 0px; height: 1px; z-index: -1; opacity: 0;"><textarea tabindex="-1" class="ve-table-edit-input"></textarea></div>
127-
</div>
128-
</div>
129-
`;

tests/unit/specs/ve-table-cell-edit.spec.js

Lines changed: 95 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1736,101 +1736,101 @@ describe("veTable cell edit", () => {
17361736
});
17371737

17381738
// table clickoutside
1739-
// it("table clickoutside width cell editing", async () => {
1740-
// const mockFn = jest.fn();
1741-
1742-
// const ParentComp = {
1743-
// template: `
1744-
// <div>
1745-
// <button id="outsideButton">outside table</button>
1746-
// <veTable
1747-
// :columns="columns"
1748-
// :tableData="tableData"
1749-
// :editOption="editOption"
1750-
// rowKeyFieldName="rowKey"
1751-
// />
1752-
// </div>
1753-
1754-
// `,
1755-
// data() {
1756-
// return {
1757-
// columns: COLUMNS,
1758-
// tableData: cloneDeep(TABLE_DATA),
1759-
// editOption: {
1760-
// // cell value change
1761-
// cellValueChange: ({ row, column }) => {
1762-
// mockFn(row, column);
1763-
// },
1764-
// },
1765-
// };
1766-
// },
1767-
// components: {
1768-
// veTable,
1769-
// },
1770-
// };
1771-
1772-
// await later();
1773-
1774-
// const div = document.createElement("div");
1775-
// document.body.appendChild(div);
1776-
1777-
// // need attach to documnet
1778-
// const wrapper = mount(ParentComp, { attachTo: div });
1779-
1780-
// // td
1781-
// const firstCell = wrapper
1782-
// .findAll(".ve-table-body-tr")
1783-
// .at(1)
1784-
// .findAll(".ve-table-body-td")
1785-
// .at(1);
1786-
1787-
// // set cell selection
1788-
// firstCell.trigger("click");
1789-
// firstCell.trigger("dblclick");
1790-
1791-
// await later();
1792-
1793-
// const textInput = wrapper.find(
1794-
// ".ve-table-edit-input-container-show .ve-table-edit-input",
1795-
// );
1796-
// textInput.setValue("AAA");
1797-
1798-
// await later();
1799-
1800-
// // click outside
1801-
// wrapper.find("#outsideButton").trigger("click");
1802-
1803-
// await later();
1804-
1805-
// expect(
1806-
// wrapper.find(".ve-table-edit-input-container-show").exists(),
1807-
// ).toBe(false);
1808-
1809-
// expect(mockFn).toHaveBeenCalled();
1810-
1811-
// expect(mockFn).toHaveBeenCalledWith(
1812-
// {
1813-
// address: "No.1 Century Avenue, Beijing",
1814-
// date: "AAA",
1815-
// hobby: "coding and coding repeat",
1816-
// name: "Dickerson",
1817-
// rowKey: 1,
1818-
// },
1819-
// {
1820-
// _colspan: 1,
1821-
// _keys: "date",
1822-
// _level: 1,
1823-
// _realTimeWidth: "15%",
1824-
// _rowspan: 1,
1825-
// align: "left",
1826-
// edit: true,
1827-
// field: "date",
1828-
// key: "date",
1829-
// title: "Date",
1830-
// width: "15%",
1831-
// },
1832-
// );
1833-
// });
1739+
it("table clickoutside width cell editing", async () => {
1740+
const mockFn = jest.fn();
1741+
1742+
const ParentComp = {
1743+
template: `
1744+
<div>
1745+
<button id="outsideButton">outside table</button>
1746+
<veTable
1747+
:columns="columns"
1748+
:tableData="tableData"
1749+
:editOption="editOption"
1750+
rowKeyFieldName="rowKey"
1751+
/>
1752+
</div>
1753+
1754+
`,
1755+
data() {
1756+
return {
1757+
columns: COLUMNS,
1758+
tableData: cloneDeep(TABLE_DATA),
1759+
editOption: {
1760+
// cell value change
1761+
cellValueChange: ({ row, column }) => {
1762+
mockFn(row, column);
1763+
},
1764+
},
1765+
};
1766+
},
1767+
components: {
1768+
veTable,
1769+
},
1770+
};
1771+
1772+
await later();
1773+
1774+
const div = document.createElement("div");
1775+
document.body.appendChild(div);
1776+
1777+
// need attach to documnet
1778+
const wrapper = mount(ParentComp, { attachTo: div });
1779+
1780+
// td
1781+
const firstCell = wrapper
1782+
.findAll(".ve-table-body-tr")
1783+
.at(1)
1784+
.findAll(".ve-table-body-td")
1785+
.at(1);
1786+
1787+
// set cell selection
1788+
firstCell.trigger("click");
1789+
firstCell.trigger("dblclick");
1790+
1791+
await later();
1792+
1793+
const textInput = wrapper.find(
1794+
".ve-table-edit-input-container-show .ve-table-edit-input",
1795+
);
1796+
textInput.setValue("AAA");
1797+
1798+
await later();
1799+
1800+
// click outside
1801+
wrapper.find("#outsideButton").trigger("click");
1802+
1803+
await later();
1804+
1805+
expect(
1806+
wrapper.find(".ve-table-edit-input-container-show").exists(),
1807+
).toBe(false);
1808+
1809+
expect(mockFn).toHaveBeenCalled();
1810+
1811+
expect(mockFn).toHaveBeenCalledWith(
1812+
{
1813+
address: "No.1 Century Avenue, Beijing",
1814+
date: "AAA",
1815+
hobby: "coding and coding repeat",
1816+
name: "Dickerson",
1817+
rowKey: 1,
1818+
},
1819+
{
1820+
_colspan: 1,
1821+
_keys: "date",
1822+
_level: 1,
1823+
_realTimeWidth: "15%",
1824+
_rowspan: 1,
1825+
align: "left",
1826+
edit: true,
1827+
field: "date",
1828+
key: "date",
1829+
title: "Date",
1830+
width: "15%",
1831+
},
1832+
);
1833+
});
18341834

18351835
it("disable editing columns", async () => {
18361836
const wrapper = mount(veTable, {

0 commit comments

Comments
 (0)