添加滚动效果单元测试

Author: huangshuwei

tests/unit/specs/ve-table-column-fixed.spec.js

@@ -184,10 +184,21 @@ describe("veTable column fixed", () => {
             ]),
         );
 
-        //await wrapper.setProps({ columns: COLUMNS_FIXED_CHANGE });
+        await wrapper.setProps({ columns: COLUMNS_FIXED_CHANGE });
+
+        const thEls2 = wrapper.findAll(
+            ".ve-table-header .ve-table-header-tr .ve-table-header-th",
+        );
+
+        expect(thEls2.at(0).classes()).toEqual(
+            expect.arrayContaining([
+                "ve-table-fixed-left",
+                "ve-table-last-left-fixed-column",
+            ]),
+        );
     });
 
-    it("header fixed right", () => {
+    it("header fixed right", async () => {
         const wrapper = mount(veTable, {
             propsData: {
                 columns: COLUMNS,
@@ -206,9 +217,22 @@ describe("veTable column fixed", () => {
             ]),
         );
         expect(thEls.at(9 - 0).classes()).toContain("ve-table-fixed-right");
+
+        await wrapper.setProps({ columns: COLUMNS_FIXED_CHANGE });
+
+        const thEls2 = wrapper.findAll(
+            ".ve-table-header .ve-table-header-tr .ve-table-header-th",
+        );
+
+        expect(thEls2.at(9 - 0).classes()).toEqual(
+            expect.arrayContaining([
+                "ve-table-first-right-fixed-column",
+                "ve-table-fixed-right",
+            ]),
+        );
     });
 
-    it("column fixed left", () => {
+    it("column fixed left", async () => {
         const wrapper = mount(veTable, {
             propsData: {
                 columns: COLUMNS,
@@ -228,9 +252,23 @@ describe("veTable column fixed", () => {
                 "ve-table-fixed-left",
             ]),
         );
+
+        await wrapper.setProps({ columns: COLUMNS_FIXED_CHANGE });
+
+        const tdEls2 = wrapper
+            .findAll(".ve-table-body .ve-table-body-tr")
+            .at(0)
+            .findAll(".ve-table-body-td");
+
+        expect(tdEls2.at(0).classes()).toEqual(
+            expect.arrayContaining([
+                "ve-table-last-left-fixed-column",
+                "ve-table-fixed-left",
+            ]),
+        );
     });
 
-    it("column fixed right", () => {
+    it("column fixed right", async () => {
         const wrapper = mount(veTable, {
             propsData: {
                 columns: COLUMNS,
@@ -250,5 +288,19 @@ describe("veTable column fixed", () => {
             ]),
         );
         expect(tdEls.at(9 - 0).classes()).toContain("ve-table-fixed-right");
+
+        await wrapper.setProps({ columns: COLUMNS_FIXED_CHANGE });
+
+        const tdEls2 = wrapper
+            .findAll(".ve-table-body .ve-table-body-tr")
+            .at(0)
+            .findAll(".ve-table-body-td");
+
+        expect(tdEls.at(9 - 0).classes()).toEqual(
+            expect.arrayContaining([
+                "ve-table-first-right-fixed-column",
+                "ve-table-fixed-right",
+            ]),
+        );
     });
 });

tests/unit/specs/ve-table-common.spec.js

@@ -0,0 +1,105 @@
+/* 
+表格通用单元测试
+*/
+
+import { mount } from "@vue/test-utils";
+import veTable from "@/ve-table";
+import {
+    later,
+    mockElementMeasurement,
+    clearMockElementMeasurement,
+} from "../util";
+
+describe("veTable common", () => {
+    afterEach(() => {
+        clearMockElementMeasurement("scrollWidth");
+        clearMockElementMeasurement("clientWidth");
+    });
+
+    it("horizontal scroll state", async () => {
+        mockElementMeasurement("scrollWidth", 1200);
+        mockElementMeasurement("clientWidth", 900);
+
+        const COLUMNS = [
+            { field: "col1", key: "a", title: "Title1" },
+            { field: "col2", key: "b", title: "Title2" },
+            { field: "col3", key: "c", title: "Title3" },
+            { field: "col4", key: "d", title: "Title4" },
+            { field: "col5", key: "e", title: "Title5" },
+            { field: "col6", key: "f", title: "Title6" },
+            { field: "col7", key: "g", title: "Title7" },
+            { field: "col8", key: "h", title: "Title8" },
+            { field: "col9", key: "i", title: "Title9" },
+            { field: "col10", key: "j", title: "Title10" },
+        ];
+
+        const COLUMNS2 = [
+            { field: "col1", key: "a", title: "Title1", fixed: "left" },
+            { field: "col2", key: "b", title: "Title2", fixed: "left" },
+            { field: "col3", key: "c", title: "Title3" },
+            { field: "col4", key: "d", title: "Title4" },
+            { field: "col5", key: "e", title: "Title5" },
+            { field: "col6", key: "f", title: "Title6" },
+            { field: "col7", key: "g", title: "Title7" },
+            { field: "col8", key: "h", title: "Title8" },
+            { field: "col9", key: "i", title: "Title9" },
+            { field: "col10", key: "j", title: "Title10", fixed: "right" },
+        ];
+
+        const TABLE_DATA = [
+            {
+                col1: "1",
+                col2: "2",
+                col3: "3",
+                col4: "4",
+                col5: "5",
+                col6: "6",
+                col7: "7",
+                col8: "8",
+                col9: "9",
+                col10: "10",
+            },
+        ];
+
+        const ParentComp = {
+            template: `
+                <veTable
+                    style="width:900px"
+                    :scrollWidth="1200"
+                    :columns="columns"
+                    :tableData="tableData"
+                />
+            `,
+            props: {
+                columns: {
+                    type: Array,
+                    required: true,
+                },
+            },
+            data() {
+                return {
+                    tableData: TABLE_DATA,
+                };
+            },
+            components: {
+                veTable,
+            },
+        };
+
+        await later();
+
+        const parentWrapper = mount(ParentComp, {
+            propsData: {
+                columns: COLUMNS,
+            },
+        });
+
+        const wrapper = parentWrapper.findComponent(veTable);
+
+        expect(wrapper.vm.isRightScrolling).toBe(false);
+
+        // 只能通过父组件设置
+        await parentWrapper.setProps({ columns: COLUMNS2 });
+        expect(wrapper.vm.isRightScrolling).toBe(true);
+    });
+});

tests/unit/util.js

@@ -23,3 +23,34 @@ export function mockScrollTo() {
     Element.prototype.scrollTo = fn;
     return fn;
 }
+
+/*
+ * @mockElementMeasurement
+ * @desc mock element measurement
+ */
+export function mockElementMeasurement(key, value) {
+    Object.defineProperty(HTMLElement.prototype, key, {
+        configurable: true,
+        value: value,
+    });
+}
+
+/*
+ * @clearMockElementMeasurement
+ * @desc clear mock element measurement
+ */
+export function clearMockElementMeasurement(key) {
+    // const originalValue = Object.getOwnPropertyDescriptor(
+    //     HTMLElement.prototype,
+    //     key,
+    // );
+
+    const originalValue = {
+        value: 1200,
+        writable: false,
+        enumerable: false,
+        configurable: true,
+    };
+
+    Object.defineProperty(HTMLElement.prototype, key, originalValue);
+}