This repository was archived by the owner on Jan 23, 2024. It is now read-only.
forked from ProseMirror/prosemirror-tables
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtest-columnresizing.js
More file actions
179 lines (158 loc) · 5.5 KB
/
test-columnresizing.js
File metadata and controls
179 lines (158 loc) · 5.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
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);
});
});
});
});