prosemirror-tables/test/test-columnresizing.js at 8a949ccaa38b48a35d0ac94f3f7a962b1b1eaf22 · Asana/prosemirror-tables · GitHub

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);
      });
    });
  });
});