@pie-lib/editable-html-tip-tap 2.1.11 → 2.2.0-beta.1

package/lib/extensions/__tests__/responseArea.test.js

@@ -0,0 +1,736 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _responseArea = require("../responseArea");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+jest.mock('@tiptap/core', function () {
+  return {
+    Extension: {
+      create: jest.fn(function (config) {
+        return config;
+      })
+    },
+    Node: {
+      create: jest.fn(function (config) {
+        return config;
+      })
+    }
+  };
+});
+jest.mock('@tiptap/react', function () {
+  return {
+    Node: {
+      create: jest.fn(function (config) {
+        return config;
+      })
+    },
+    ReactNodeViewRenderer: jest.fn(function (component) {
+      return component;
+    })
+  };
+});
+jest.mock('prosemirror-state', function () {
+  return {
+    Plugin: jest.fn(function (config) {
+      return config;
+    }),
+    PluginKey: jest.fn(function (key) {
+      this.key = key;
+    }),
+    TextSelection: {
+      near: jest.fn(function (pos, dir) {
+        return {
+          type: 'text',
+          pos: pos,
+          dir: dir
+        };
+      }),
+      create: jest.fn(function (doc, pos) {
+        return {
+          type: 'text',
+          pos: pos
+        };
+      })
+    },
+    NodeSelection: {
+      create: jest.fn(function (doc, pos) {
+        return {
+          type: 'node',
+          pos: pos
+        };
+      })
+    }
+  };
+});
+jest.mock('../../components/respArea/ExplicitConstructedResponse', function () {
+  return {
+    __esModule: true,
+    "default": jest.fn(function () {
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "explicit-constructed-response"
+      });
+    })
+  };
+});
+jest.mock('../../components/respArea/DragInTheBlank/DragInTheBlank', function () {
+  return {
+    __esModule: true,
+    "default": jest.fn(function () {
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "drag-in-the-blank"
+      });
+    })
+  };
+});
+jest.mock('../../components/respArea/InlineDropdown', function () {
+  return {
+    __esModule: true,
+    "default": jest.fn(function () {
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "inline-dropdown"
+      });
+    })
+  };
+});
+describe('ResponseAreaExtension', function () {
+  describe('configuration', function () {
+    it('has correct name', function () {
+      expect(_responseArea.ResponseAreaExtension.name).toBe('responseArea');
+    });
+  });
+  describe('addOptions', function () {
+    it('returns default options', function () {
+      var options = _responseArea.ResponseAreaExtension.addOptions();
+      expect(options).toHaveProperty('maxResponseAreas', null);
+      expect(options).toHaveProperty('error', null);
+      expect(options).toHaveProperty('options', null);
+      expect(options).toHaveProperty('respAreaToolbar', null);
+      expect(options).toHaveProperty('onHandleAreaChange', null);
+    });
+  });
+  describe('addProseMirrorPlugins', function () {
+    it('returns empty array when no type specified', function () {
+      var context = {
+        options: {}
+      };
+      var plugins = _responseArea.ResponseAreaExtension.addProseMirrorPlugins.call(context);
+      expect(Array.isArray(plugins)).toBe(true);
+      expect(plugins).toHaveLength(0);
+    });
+    it('returns plugin array when type is specified', function () {
+      var context = {
+        options: {
+          type: 'explicit-constructed-response',
+          maxResponseAreas: 5
+        }
+      };
+      var plugins = _responseArea.ResponseAreaExtension.addProseMirrorPlugins.call(context);
+      expect(Array.isArray(plugins)).toBe(true);
+      expect(plugins).toHaveLength(1);
+      expect(plugins[0]).toHaveProperty('key');
+      expect(plugins[0]).toHaveProperty('view');
+    });
+  });
+  describe('addCommands', function () {
+    it('returns insertResponseArea command', function () {
+      var commands = _responseArea.ResponseAreaExtension.addCommands();
+      expect(commands).toHaveProperty('insertResponseArea');
+      expect((0, _typeof2["default"])(commands.insertResponseArea)).toBe('function');
+    });
+    it('returns refreshResponseArea command', function () {
+      var commands = _responseArea.ResponseAreaExtension.addCommands();
+      expect(commands).toHaveProperty('refreshResponseArea');
+      expect((0, _typeof2["default"])(commands.refreshResponseArea)).toBe('function');
+    });
+    it('refreshResponseArea handles node with attrs safely', function () {
+      var context = {
+        options: {
+          type: 'explicit-constructed-response',
+          maxResponseAreas: 5
+        }
+      };
+      var commands = _responseArea.ResponseAreaExtension.addCommands.call(context);
+      var refreshCommand = commands.refreshResponseArea();
+
+      // Mock transaction and state
+      var mockNode = {
+        attrs: {
+          index: '0',
+          value: 'test'
+        }
+      };
+      var mockTr = {
+        setNodeMarkup: jest.fn(),
+        setSelection: jest.fn()
+      };
+      var mockState = {
+        selection: {
+          from: 0,
+          $from: {
+            nodeAfter: mockNode
+          }
+        },
+        tr: mockTr
+      };
+      var mockCommands = {
+        focus: jest.fn()
+      };
+      var mockDispatch = jest.fn();
+      refreshCommand({
+        tr: mockTr,
+        state: mockState,
+        commands: mockCommands,
+        dispatch: mockDispatch
+      });
+      expect(mockTr.setNodeMarkup).toHaveBeenCalled();
+    });
+    it('refreshResponseArea handles node without attrs safely (optional chaining)', function () {
+      var context = {
+        options: {
+          type: 'explicit-constructed-response',
+          maxResponseAreas: 5
+        }
+      };
+      var commands = _responseArea.ResponseAreaExtension.addCommands.call(context);
+      var refreshCommand = commands.refreshResponseArea();
+
+      // Mock transaction and state with node that has no attrs
+      var mockNode = null;
+      var mockTr = {
+        setNodeMarkup: jest.fn(),
+        setSelection: jest.fn()
+      };
+      var mockState = {
+        selection: {
+          from: 0,
+          $from: {
+            nodeAfter: mockNode
+          }
+        },
+        tr: mockTr
+      };
+      var mockCommands = {
+        focus: jest.fn()
+      };
+      var mockDispatch = jest.fn();
+
+      // This should not throw an error due to optional chaining on node?.attrs
+      expect(function () {
+        refreshCommand({
+          tr: mockTr,
+          state: mockState,
+          commands: mockCommands,
+          dispatch: mockDispatch
+        });
+      }).not.toThrow();
+    });
+    it('refreshResponseArea updates timestamp in node attributes', function () {
+      var context = {
+        options: {
+          type: 'explicit-constructed-response',
+          maxResponseAreas: 5
+        }
+      };
+      var commands = _responseArea.ResponseAreaExtension.addCommands.call(context);
+      var refreshCommand = commands.refreshResponseArea();
+      var mockNode = {
+        attrs: {
+          index: '0',
+          value: 'test',
+          updated: '1234567890'
+        }
+      };
+      var mockTr = {
+        setNodeMarkup: jest.fn(function (pos, type, attrs) {
+          // Verify that updated timestamp is being set
+          expect(attrs.updated).toBeDefined();
+          expect(attrs.updated).not.toBe('1234567890');
+        }),
+        setSelection: jest.fn()
+      };
+      var mockState = {
+        selection: {
+          from: 0,
+          $from: {
+            nodeAfter: mockNode
+          }
+        },
+        tr: mockTr
+      };
+      var mockCommands = {
+        focus: jest.fn()
+      };
+      var mockDispatch = jest.fn();
+      refreshCommand({
+        tr: mockTr,
+        state: mockState,
+        commands: mockCommands,
+        dispatch: mockDispatch
+      });
+      expect(mockTr.setNodeMarkup).toHaveBeenCalled();
+    });
+    describe('insertResponseArea', function () {
+      beforeEach(function () {
+        jest.resetModules();
+      });
+      var buildInsertCommand = function buildInsertCommand() {
+        var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'inline-dropdown';
+        var _require = require('../responseArea'),
+          ResponseAreaExtension = _require.ResponseAreaExtension;
+        var context = {
+          options: {
+            type: type,
+            maxResponseAreas: 5
+          }
+        };
+        var commands = ResponseAreaExtension.addCommands.call(context);
+        return commands.insertResponseArea(type);
+      };
+      var createDoc = function createDoc(existingCount) {
+        var typeName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inline_dropdown';
+        return {
+          descendants: jest.fn(function (callback) {
+            for (var i = 0; i < existingCount; i += 1) {
+              callback({
+                type: {
+                  name: typeName
+                }
+              }, i);
+            }
+          }),
+          content: {
+            size: 50
+          }
+        };
+      };
+      it('assigns index 1 and id 1 on the first insert', function () {
+        var insert = buildInsertCommand();
+        var mockInlineNode = {
+          nodeSize: 1
+        };
+        var create = jest.fn(function () {
+          return mockInlineNode;
+        });
+        var mockDoc = createDoc(0);
+        var mockTr = {
+          insert: jest.fn(),
+          doc: mockDoc,
+          setSelection: jest.fn()
+        };
+        var state = {
+          schema: {
+            nodes: {
+              inline_dropdown: {
+                create: create
+              }
+            }
+          },
+          doc: mockDoc,
+          selection: {
+            from: 5
+          }
+        };
+        var mockDispatch = jest.fn();
+        var mockCommands = {
+          focus: jest.fn()
+        };
+        var result = insert({
+          tr: mockTr,
+          state: state,
+          dispatch: mockDispatch,
+          commands: mockCommands
+        });
+        expect(result).toBe(true);
+        expect(create).toHaveBeenCalledWith({
+          index: '1',
+          id: '1',
+          value: ''
+        });
+        expect(mockTr.insert).toHaveBeenCalledWith(5, mockInlineNode);
+        expect(mockDispatch).toHaveBeenCalled();
+      });
+      it('assigns consecutive indices on repeated inserts', function () {
+        var insert = buildInsertCommand();
+        var mockInlineNode = {
+          nodeSize: 1
+        };
+        var create = jest.fn(function () {
+          return mockInlineNode;
+        });
+        var mockDoc = createDoc(0);
+        var runOnce = function runOnce() {
+          var mockTr = {
+            insert: jest.fn(),
+            doc: mockDoc,
+            setSelection: jest.fn()
+          };
+          var state = {
+            schema: {
+              nodes: {
+                inline_dropdown: {
+                  create: create
+                }
+              }
+            },
+            doc: mockDoc,
+            selection: {
+              from: 1
+            }
+          };
+          insert({
+            tr: mockTr,
+            state: state,
+            dispatch: jest.fn(),
+            commands: {
+              focus: jest.fn()
+            }
+          });
+        };
+        runOnce();
+        runOnce();
+        expect(create.mock.calls[0][0]).toEqual({
+          index: '1',
+          id: '1',
+          value: ''
+        });
+        expect(create.mock.calls[1][0]).toEqual({
+          index: '2',
+          id: '2',
+          value: ''
+        });
+      });
+      it('returns false when maxResponseAreas is reached', function () {
+        var insert = buildInsertCommand();
+        var mockInlineNode = {
+          nodeSize: 1
+        };
+        var create = jest.fn(function () {
+          return mockInlineNode;
+        });
+        var mockDoc = createDoc(5);
+        var mockTr = {
+          insert: jest.fn(),
+          doc: mockDoc,
+          setSelection: jest.fn()
+        };
+        var state = {
+          schema: {
+            nodes: {
+              inline_dropdown: {
+                create: create
+              }
+            }
+          },
+          doc: mockDoc,
+          selection: {
+            from: 5
+          }
+        };
+        var result = insert({
+          tr: mockTr,
+          state: state,
+          dispatch: jest.fn(),
+          commands: {
+            focus: jest.fn()
+          }
+        });
+        expect(result).toBe(false);
+        expect(create).not.toHaveBeenCalled();
+        expect(mockTr.insert).not.toHaveBeenCalled();
+      });
+      describe('selection after insert', function () {
+        var buildStateAndTr = function buildStateAndTr(typeName) {
+          var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+            _ref$withResolve = _ref.withResolve,
+            withResolve = _ref$withResolve === void 0 ? false : _ref$withResolve;
+          var mockInlineNode = {
+            nodeSize: 1
+          };
+          var create = jest.fn(function () {
+            return mockInlineNode;
+          });
+          var mockDoc = _objectSpread({
+            descendants: jest.fn(),
+            content: {
+              size: 50
+            }
+          }, withResolve ? {
+            resolve: jest.fn(function (pos) {
+              return {
+                resolved: pos
+              };
+            })
+          } : {});
+          var mockTr = {
+            insert: jest.fn(),
+            doc: mockDoc,
+            setSelection: jest.fn()
+          };
+          var state = {
+            schema: {
+              nodes: (0, _defineProperty2["default"])({}, typeName, {
+                create: create
+              })
+            },
+            doc: mockDoc,
+            selection: {
+              from: 5
+            }
+          };
+          return {
+            mockTr: mockTr,
+            state: state
+          };
+        };
+        it.each(['inline-dropdown', 'explicit-constructed-response'])('sets a NodeSelection on the inserted node for %s', function (type) {
+          var insert = buildInsertCommand(type);
+          var typeName = type.replace(/-/g, '_');
+          var _buildStateAndTr = buildStateAndTr(typeName),
+            mockTr = _buildStateAndTr.mockTr,
+            state = _buildStateAndTr.state;
+          var _require2 = require('prosemirror-state'),
+            NodeSelection = _require2.NodeSelection,
+            TextSelection = _require2.TextSelection;
+          insert({
+            tr: mockTr,
+            state: state,
+            dispatch: jest.fn(),
+            commands: {
+              focus: jest.fn()
+            }
+          });
+          expect(NodeSelection.create).toHaveBeenCalledWith(mockTr.doc, 5);
+          expect(TextSelection.near).not.toHaveBeenCalled();
+          expect(mockTr.setSelection).toHaveBeenCalledWith({
+            type: 'node',
+            pos: 5
+          });
+        });
+        it('sets a TextSelection just after the inserted node for math-templated (no NodeSelection)', function () {
+          var insert = buildInsertCommand('math-templated');
+          var _buildStateAndTr2 = buildStateAndTr('math_templated', {
+              withResolve: true
+            }),
+            mockTr = _buildStateAndTr2.mockTr,
+            state = _buildStateAndTr2.state;
+          var _require3 = require('prosemirror-state'),
+            NodeSelection = _require3.NodeSelection,
+            TextSelection = _require3.TextSelection;
+          insert({
+            tr: mockTr,
+            state: state,
+            dispatch: jest.fn(),
+            commands: {
+              focus: jest.fn()
+            }
+          });
+          expect(NodeSelection.create).not.toHaveBeenCalled();
+          // usedPos (5) + nodeSize (1) === 6
+          expect(mockTr.doc.resolve).toHaveBeenCalledWith(6);
+          expect(TextSelection.near).toHaveBeenCalledWith({
+            resolved: 6
+          }, 1);
+          expect(mockTr.setSelection).toHaveBeenCalledWith({
+            type: 'text',
+            pos: {
+              resolved: 6
+            },
+            dir: 1
+          });
+        });
+      });
+    });
+  });
+});
+describe('ExplicitConstructedResponseNode', function () {
+  describe('configuration', function () {
+    it('has correct name', function () {
+      expect(_responseArea.ExplicitConstructedResponseNode.name).toBe('explicit_constructed_response');
+    });
+    it('is inline', function () {
+      expect(_responseArea.ExplicitConstructedResponseNode.inline).toBe(true);
+    });
+    it('is in inline group', function () {
+      expect(_responseArea.ExplicitConstructedResponseNode.group).toBe('inline');
+    });
+    it('is atomic', function () {
+      expect(_responseArea.ExplicitConstructedResponseNode.atom).toBe(true);
+    });
+  });
+  describe('addAttributes', function () {
+    it('returns required attributes', function () {
+      var attributes = _responseArea.ExplicitConstructedResponseNode.addAttributes();
+      expect(attributes).toHaveProperty('index');
+      expect(attributes).toHaveProperty('value');
+      expect(attributes).toHaveProperty('updated');
+      expect(attributes.index).toEqual({
+        "default": null
+      });
+      expect(attributes.value).toEqual({
+        "default": ''
+      });
+      expect(attributes.updated).toEqual({
+        "default": ''
+      });
+    });
+  });
+  describe('parseHTML', function () {
+    it('returns parsing rules', function () {
+      var rules = _responseArea.ExplicitConstructedResponseNode.parseHTML();
+      expect(Array.isArray(rules)).toBe(true);
+      expect(rules).toHaveLength(1);
+      expect(rules[0]).toHaveProperty('tag');
+    });
+  });
+  describe('renderHTML', function () {
+    it('renders span with attributes', function () {
+      var result = _responseArea.ExplicitConstructedResponseNode.renderHTML({
+        HTMLAttributes: {
+          index: '1',
+          id: '1',
+          value: 'test'
+        }
+      });
+      expect(result[0]).toBe('span');
+      expect(result[1]).toHaveProperty('data-type', 'explicit_constructed_response');
+    });
+  });
+  describe('addNodeView', function () {
+    it('returns ReactNodeViewRenderer result', function () {
+      var result = _responseArea.ExplicitConstructedResponseNode.addNodeView();
+      expect(result).toBeDefined();
+    });
+  });
+});
+describe('DragInTheBlankNode', function () {
+  describe('configuration', function () {
+    it('has correct name', function () {
+      expect(_responseArea.DragInTheBlankNode.name).toBe('drag_in_the_blank');
+    });
+    it('is inline', function () {
+      expect(_responseArea.DragInTheBlankNode.inline).toBe(true);
+    });
+    it('is in inline group', function () {
+      expect(_responseArea.DragInTheBlankNode.group).toBe('inline');
+    });
+    it('is atomic', function () {
+      expect(_responseArea.DragInTheBlankNode.atom).toBe(true);
+    });
+  });
+  describe('addAttributes', function () {
+    it('returns required attributes', function () {
+      var attributes = _responseArea.DragInTheBlankNode.addAttributes();
+      expect(attributes).toHaveProperty('index');
+      expect(attributes).toHaveProperty('id');
+      expect(attributes).toHaveProperty('value');
+      expect(attributes).toHaveProperty('inTable');
+      expect(attributes).toHaveProperty('updated');
+      expect(attributes.index).toEqual({
+        "default": null
+      });
+      expect(attributes.id).toEqual({
+        "default": null
+      });
+      expect(attributes.value).toEqual({
+        "default": ''
+      });
+      expect(attributes.inTable).toEqual({
+        "default": null
+      });
+      expect(attributes.updated).toEqual({
+        "default": ''
+      });
+    });
+  });
+  describe('parseHTML', function () {
+    it('returns parsing rules', function () {
+      var rules = _responseArea.DragInTheBlankNode.parseHTML();
+      expect(Array.isArray(rules)).toBe(true);
+      expect(rules).toHaveLength(1);
+      expect(rules[0]).toHaveProperty('tag');
+    });
+  });
+  describe('renderHTML', function () {
+    it('renders span with attributes', function () {
+      var result = _responseArea.DragInTheBlankNode.renderHTML({
+        HTMLAttributes: {
+          index: '1',
+          id: '1',
+          value: 'test'
+        }
+      });
+      expect(result[0]).toBe('span');
+      expect(result[1]).toHaveProperty('data-type', 'drag_in_the_blank');
+    });
+  });
+  describe('addNodeView', function () {
+    it('returns ReactNodeViewRenderer result', function () {
+      var result = _responseArea.DragInTheBlankNode.addNodeView();
+      expect(result).toBeDefined();
+    });
+  });
+});
+describe('InlineDropdownNode', function () {
+  describe('configuration', function () {
+    it('has correct name', function () {
+      expect(_responseArea.InlineDropdownNode.name).toBe('inline_dropdown');
+    });
+    it('is inline', function () {
+      expect(_responseArea.InlineDropdownNode.inline).toBe(true);
+    });
+    it('is in inline group', function () {
+      expect(_responseArea.InlineDropdownNode.group).toBe('inline');
+    });
+    it('is atomic', function () {
+      expect(_responseArea.InlineDropdownNode.atom).toBe(true);
+    });
+  });
+  describe('addAttributes', function () {
+    it('returns required attributes', function () {
+      var attributes = _responseArea.InlineDropdownNode.addAttributes();
+      expect(attributes).toHaveProperty('index');
+      expect(attributes).toHaveProperty('value');
+      expect(attributes).toHaveProperty('updated');
+      expect(attributes.index).toEqual({
+        "default": null
+      });
+      expect(attributes.value).toEqual({
+        "default": ''
+      });
+      expect(attributes.updated).toEqual({
+        "default": ''
+      });
+    });
+  });
+  describe('parseHTML', function () {
+    it('returns parsing rules', function () {
+      var rules = _responseArea.InlineDropdownNode.parseHTML();
+      expect(Array.isArray(rules)).toBe(true);
+      expect(rules).toHaveLength(1);
+      expect(rules[0]).toHaveProperty('tag');
+    });
+  });
+  describe('renderHTML', function () {
+    it('renders span with attributes', function () {
+      var result = _responseArea.InlineDropdownNode.renderHTML({
+        HTMLAttributes: {
+          index: '1',
+          id: '1',
+          value: 'test'
+        }
+      });
+      expect(result[0]).toBe('span');
+      expect(result[1]).toHaveProperty('data-type', 'inline_dropdown');
+    });
+  });
+  describe('addNodeView', function () {
+    it('returns ReactNodeViewRenderer result', function () {
+      var result = _responseArea.InlineDropdownNode.addNodeView();
+      expect(result).toBeDefined();
+    });
+  });
+});
+//# sourceMappingURL=responseArea.test.js.map