From 83cc96ea0922b76adddefebc3163395109a5308a Mon Sep 17 00:00:00 2001 From: Elvis Ye Date: Mon, 15 Mar 2021 17:47:34 -0700 Subject: [PATCH 1/2] tests for column resizing --- src/columnresizing.js | 2 +- test/test-columnresizing.js | 179 ++++++++++++++++++++++++++++++++++++ 2 files changed, 180 insertions(+), 1 deletion(-) create mode 100644 test/test-columnresizing.js diff --git a/src/columnresizing.js b/src/columnresizing.js index af6cb5dd..22b4c7d3 100644 --- a/src/columnresizing.js +++ b/src/columnresizing.js @@ -213,7 +213,7 @@ function handleDecorations(state, cell) { // of the table to their right, and either the top of the table or // a different cell above them, add a decoration if ((col == map.width || map.map[index] != map.map[index + 1]) && - (row == 0 || map.map[index - 1] != map.map[index - 1 - map.width])) { + (row == 0 || map.map[index] != map.map[index - map.width])) { let cellPos = map.map[index] let pos = start + cellPos + table.nodeAt(cellPos).nodeSize - 1 let dom = document.createElement("div") diff --git a/test/test-columnresizing.js b/test/test-columnresizing.js new file mode 100644 index 00000000..95e92573 --- /dev/null +++ b/test/test-columnresizing.js @@ -0,0 +1,179 @@ +const ist = require("ist"); +const { columnResizing, columnResizingPluginKey } = require("../dist/"); +const { EditorState } = require("prosemirror-state"); +const { doc, table, tr, td, cEmpty, p } = require("./build"); + +describe("columnresizing", () => { + // setup document object for testing + beforeEach(() => { + document = { + createElement: () => { + return { className: "" }; + }, + }; + }); + + // clean up document object after test + afterEach(() => { + delete document; + }); + // simple table is a table with colspan = 1 and rowspan = 1 + describe("3 x 2 simple table", () => { + let state = null; + let plugin = null; + beforeEach(() => { + let simpleTable = table( + tr(cEmpty, cEmpty), + tr(cEmpty, cEmpty), + tr(cEmpty, cEmpty) + ); + plugin = columnResizing(); + state = EditorState.create({ doc: doc(simpleTable), plugins: [plugin] }); + }); + afterEach(() => { + state = null; + plugin = null; + }); + + it("hovering on the first row border", () => { + let transaction = state.tr.setMeta(columnResizingPluginKey, { + setHandle: 2, + setDragging: null, + }); + let newState = state.apply(transaction); + ist(plugin.props.decorations(newState).find().length, 3); + }); + + it("hovering on the second row border", () => { + let transaction = state.tr.setMeta(columnResizingPluginKey, { + setHandle: 12, + setDragging: null, + }); + let newState = state.apply(transaction); + ist(plugin.props.decorations(newState).find().length, 3); + }); + + it("hovering on the third row border", () => { + let transaction = state.tr.setMeta(columnResizingPluginKey, { + setHandle: 22, + setDragging: null, + }); + let newState = state.apply(transaction); + ist(plugin.props.decorations(newState).find().length, 3); + }); + }); + + // This is a labelled diagram of the table being tested. + // Notice the left border is not labelled. This is because + // all borders are referenced to the right of the cells. + // The (x, pos) indicate where the user is hovering and the resolved + // position. The initial editor state is a document with just an empty + // table. All cells are empty exce + // + // border 1 border 2 border 3 + // | |(1, 2) + // -------------------------------------- + // | |(2, 9) |(3, 14) |(4, 18) + // --------------------------- + // | |(5, 9) |(6, 24) |(7, 28) + // -------------------------------------- + describe("3 x 3 table with rowspan and colspan", () => { + let state = null; + let plugin = null; + beforeEach(() => { + let complicatedTable = table( + tr(td({ colspan: 3, rowspan: 1 }, p())), + tr(td({ colspan: 1, rowspan: 2 }, p()), cEmpty, cEmpty), + tr(cEmpty, cEmpty) + ); + plugin = columnResizing(); + state = EditorState.create({ + doc: doc(complicatedTable), + plugins: [plugin], + }); + }); + afterEach(() => { + state = null; + plugin = null; + }); + + describe("border 1", () => { + it("resolves for (2)", () => { + let transaction = state.tr.setMeta(columnResizingPluginKey, { + setHandle: 8, + setDragging: null, + }); + let newState = state.apply(transaction); + + // it is one cell so there should be only one decoration + ist(plugin.props.decorations(newState).find().length, 1); + }); + + it("resolves for (5)", () => { + let transaction = state.tr.setMeta(columnResizingPluginKey, { + setHandle: 8, // this is the same as previous test this cell span over to 2 rows + setDragging: null, + }); + let newState = state.apply(transaction); + + // it is one cell so there should be only one decoration + ist(plugin.props.decorations(newState).find().length, 1); + }); + }); + + describe("border 2", () => { + it("resolves for (3)", () => { + let transaction = state.tr.setMeta(columnResizingPluginKey, { + setHandle: 12, + setDragging: null, + }); + let newState = state.apply(transaction); + + ist(plugin.props.decorations(newState).find().length, 2); + }); + + it("resolves for (6)", () => { + let transaction = state.tr.setMeta(columnResizingPluginKey, { + setHandle: 22, // this is the same as previous test because it resolves to the same cell + setDragging: null, + }); + let newState = state.apply(transaction); + + ist(plugin.props.decorations(newState).find().length, 2); + }); + }); + + describe("border 3", () => { + it("resolves for (1)", () => { + let transaction = state.tr.setMeta(columnResizingPluginKey, { + setHandle: 2, + setDragging: null, + }); + let newState = state.apply(transaction); + + ist(plugin.props.decorations(newState).find().length, 3); + }); + + it("resolves for (4)", () => { + let transaction = state.tr.setMeta(columnResizingPluginKey, { + setHandle: 16, + setDragging: null, + }); + let newState = state.apply(transaction); + + ist(plugin.props.decorations(newState).find().length, 3); + }); + + it("resolves for (7)", () => { + let transaction = state.tr.setMeta(columnResizingPluginKey, { + setHandle: 26, + setDragging: null, + }); + + let newState = state.apply(transaction); + + ist(plugin.props.decorations(newState).find().length, 3); + }); + }); + }); +}); From 8a949ccaa38b48a35d0ac94f3f7a962b1b1eaf22 Mon Sep 17 00:00:00 2001 From: Elvis Ye Date: Mon, 15 Mar 2021 18:04:20 -0700 Subject: [PATCH 2/2] update comments --- test/test-columnresizing.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/test-columnresizing.js b/test/test-columnresizing.js index 95e92573..1a20e29f 100644 --- a/test/test-columnresizing.js +++ b/test/test-columnresizing.js @@ -75,7 +75,7 @@ describe("columnresizing", () => { // -------------------------------------- // | |(2, 9) |(3, 14) |(4, 18) // --------------------------- - // | |(5, 9) |(6, 24) |(7, 28) + // | |(5, 9) |(6, 24) |(7, 28) // -------------------------------------- describe("3 x 3 table with rowspan and colspan", () => { let state = null;