add row click highlight test

Author: huangshuwei

tests/unit/specs/__snapshots__/ve-table-row-style.spec.js.snap

@@ -22,27 +22,27 @@ exports[`veTable row style render 1`] = `
           <td style="padding: 0px; border: 0px; height: 0px;"></td>
           <td style="padding: 0px; border: 0px; height: 0px;"></td>
         </tr>
-        <tr row-key="1001" class="ve-table-body-tr">
+        <tr row-key="0" class="ve-table-body-tr">
           <td rowspan="1" colspan="1" class="ve-table-body-td" style="text-align: left;">John</td>
           <td rowspan="1" colspan="1" class="ve-table-body-td" style="text-align: left;">coding</td>
           <td rowspan="1" colspan="1" class="ve-table-body-td" style="text-align: left;">No.1 Century Avenue, Shanghai</td>
         </tr>
-        <tr row-key="1002" class="ve-table-body-tr">
+        <tr row-key="1" class="ve-table-body-tr">
           <td rowspan="1" colspan="1" class="ve-table-body-td" style="text-align: left;">Dickerson</td>
           <td rowspan="1" colspan="1" class="ve-table-body-td" style="text-align: left;">coding</td>
           <td rowspan="1" colspan="1" class="ve-table-body-td" style="text-align: left;">No.1 Century Avenue, Beijing</td>
         </tr>
-        <tr row-key="1003" class="ve-table-body-tr">
+        <tr row-key="2" class="ve-table-body-tr">
           <td rowspan="1" colspan="1" class="ve-table-body-td" style="text-align: left;">Larsen</td>
           <td rowspan="1" colspan="1" class="ve-table-body-td" style="text-align: left;">coding and coding repeat</td>
           <td rowspan="1" colspan="1" class="ve-table-body-td" style="text-align: left;">No.1 Century Avenue, Chongqing</td>
         </tr>
-        <tr row-key="1004" class="ve-table-body-tr">
+        <tr row-key="3" class="ve-table-body-tr">
           <td rowspan="1" colspan="1" class="ve-table-body-td" style="text-align: left;">Geneva</td>
           <td rowspan="1" colspan="1" class="ve-table-body-td" style="text-align: left;">coding and coding repeat</td>
           <td rowspan="1" colspan="1" class="ve-table-body-td" style="text-align: left;">No.1 Century Avenue, Xiamen</td>
         </tr>
-        <tr row-key="1005" class="ve-table-body-tr">
+        <tr row-key="4" class="ve-table-body-tr">
           <td rowspan="1" colspan="1" class="ve-table-body-td" style="text-align: left;">Jami</td>
           <td rowspan="1" colspan="1" class="ve-table-body-td" style="text-align: left;">coding and coding repeat</td>
           <td rowspan="1" colspan="1" class="ve-table-body-td" style="text-align: left;">No.1 Century Avenue, Shenzhen</td>

tests/unit/specs/ve-table-row-style.spec.js

@@ -5,35 +5,35 @@ import { later } from "../util";
 describe("veTable row style", () => {
     const TABLE_DATA = [
         {
-            rowKey: 1001,
+            rowKey: 0,
             name: "John",
             date: "1900-05-20",
             hobby: "coding",
             address: "No.1 Century Avenue, Shanghai",
         },
         {
-            rowKey: 1002,
+            rowKey: 1,
             name: "Dickerson",
             date: "1910-06-20",
             hobby: "coding",
             address: "No.1 Century Avenue, Beijing",
         },
         {
-            rowKey: 1003,
+            rowKey: 2,
             name: "Larsen",
             date: "2000-07-20",
             hobby: "coding and coding repeat",
             address: "No.1 Century Avenue, Chongqing",
         },
         {
-            rowKey: 1004,
+            rowKey: 3,
             name: "Geneva",
             date: "2010-08-20",
             hobby: "coding and coding repeat",
             address: "No.1 Century Avenue, Xiamen",
         },
         {
-            rowKey: 1005,
+            rowKey: 4,
             name: "Jami",
             date: "2020-09-20",
             hobby: "coding and coding repeat",
@@ -100,4 +100,27 @@ describe("veTable row style", () => {
         expect(wrapper.findAll(".ve-table-row-hover").exists()).toBe(true);
         expect(wrapper.findAll(".ve-table-row-highlight").exists()).toBe(true);
     });
+
+    it("row click highlight ", async () => {
+        const wrapper = mount(veTable, {
+            propsData: {
+                columns: COLUMNS,
+                tableData: TABLE_DATA,
+                rowStyleOption: {
+                    stripe: true,
+                    hoverHighlight: true,
+                    clickHighlight: true,
+                },
+                rowKeyFieldName: "rowKey",
+            },
+        });
+
+        const firstTr = wrapper.findAll(".ve-table-body-tr").at(0);
+
+        firstTr.trigger("click");
+
+        await later();
+
+        expect(firstTr.classes()).toContain("ve-table-tr-highlight");
+    });
 });