Prosemirror 是一个用于构建文本编辑器的 JavaScript 库。而 prosemirror-test-builder 是一个为了便于测试而开发的 npm 包，在 Prosemirror 中用于构建测试文档的包，它能够基于 JSON 结构自动生成对应的文档，大大简化了测试用例的编写和维护。
在本文中，我们将详细介绍如何使用这个 npm 包，并提供一些实用的示例。
安装
在终端中输入以下命令来安装 prosemirror-test-builder：
--- ------- ------------------------
基本用法
使用 prosemirror-test-builder 创建文档非常简单，只需要使用 builder 函数即可。以下是一个示例：
------ - ------- - ---- --------------------------
------ - ------ - ---- --------------------------
----- --- - --------------- -
-- -
------- --
- --- ------- --
---
-
--在这个示例中，我们使用 builder 函数创建了一个示例文档。首先，我们导入了 builder 和 schema，并使用 builder 函数创建了一个基于 schema 的文档对象。
然后，我们使用了 builder 函数中内置的语法来定义文档内容。在这个案例中，我们创建了一个 p 段落元素，它包含了一个字符串 "Hello, "，一个加粗的 "world" 文本，和一个叹号。
这个文档对象将会是一个符合 schema 规则的完整文档对象，可以直接用于测试。
在测试中使用
在测试中使用 prosemirror-test-builder 通常是非常方便的。以下是一个使用 Jest 测试框架的示例测试用例：
------ - ------- - ---- --------------------------
------ - ------ - ---- --------------------------
------ - ---------- - ---- -----------
---------------------- -- -- -
---------- ---- --- - ------ ---- ------ -- -- -
----- --- - --------------- -
-- ------ ------
--
----------------------------------- -------
--
---------- ---- --- -- ---------- ---- ------ -- -- -
----- --- - --------------- -
-- -
------- --
- --- ------- --
---
-
--
------------------------------------ --------
--
--在这个示例中，我们导入了 builder，schema，和需要测试的代码 myFunction。然后我们定义了两个测试用例，分别测试了 myFunction 对于一个简单文本节点和一个加粗的文本节点是否工作正常。
我们使用 builder 函数创建了两个文档对象，这些文档对象将会是 myFunction 函数所期待的协议。
最后，我们使用 Jest 框架中的 expect 函数来进行测试，以确保所写的函数在处理这些文档对象时的行为与预期一致。
进阶用法
在 prosemirror-test-builder 中，有大量其他的内联元素，甚至是表格、盒子、嵌套列表和图片等复杂元素可以使用。以下是一些更具体的示例：
内置元素
以下是一些使用 prosemirror-test-builder 的内置元素的示例：
--------------- - -- ------- ------- --- ----- ---- ---- - - -- --
在这个示例中，我们演示了如何使用不同类型的内联元素。第一行创建了一个 p 段落元素，第二行创建了一个 hr 水平线元素，第三行创建了一个 pre 元素。
注意，为了创建一个空元素，我们使用了 null。这是为了区分使用了该元素，但未添加任何文本的情况。
嵌套元素
以下是一个使用 prosemirror-test-builder 创建嵌套元素的示例：
--------------- -
--- -
- --- ------ ----- --
- --- ------- ------
--- -
- --- ------- ---- -- --
- --- ------- ---- -- -
-
-
-
--在这个示例中，我们创建了一个嵌套的列表。注意，每个列表项都以一个 li 元素开头，而父元素是一个 ol 元素，子元素则是一个 ul 元素。
带属性的元素
以下是一个使用 prosemirror-test-builder 创建带有属性的元素的示例：
--------------- -
----------- - ------ -------
----------- ----- --
-- -
- -- - ----- -------------------- --
-------- --
- -- - ---- ------ --------
-
--在这个示例中，我们向 blockquote 元素添加了两个属性：一个 class 属性，一个 data-foo 属性。在段落元素中，我们创建了一个带有 href 属性的锚点，并定义了锚点中的文本。
结论
在本文中，我们介绍了 prosemirror-test-builder 的基本用法和进阶用法。使用这个 npm 包可以轻松创建符合 Prosemirror 规范的文档对象，进一步简化了文本编辑器的测试流程。如果你正在使用 Prosemirror，那么这个 npm 包是一个非常实用的工具，强烈推荐使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/prosemirror-test-builder