简介
@popperjs/test 是一个基于 popper.js 实现的测试工具包。该工具包可以很好的测试以下方面：
- Popper 的事件监听器；
- Popper 的位置计算；
- Popper 的实例化。
通过 @popperjs/test，我们可以更加便捷的测试 Popper.js 实例是否正常工作。
安装
你需要在你的项目中安装 @popperjs/test，安装方法如下：
--- ------- ---------- --------------
快速开始
事件监听器测试
在测试 Popper 的事件监听器时，使用 @popperjs/test 对应的 API 即可。
------ ------ ---- -----------------
------ - -------- - ---- -----------------------
----- ------ - --- -------------------------------------------------- ------------------------------------------- -
---------- -
-
----- -------
-------- -
------------------- ---------- -------
--
--
-
----- ---------
-------- -
------- --- ----
--
--
--
---
----- ----- - ---------------
------------ ------ ------- ------- -- -- -
----- --------- - - -------------- - ---------------- ----- - --
----- ----- - -------------------------------
--------------- - --------
----- ------- - ------------------------------
---------------------------
----------------- - ----------
----------------- - ----------
----- ------- - --- --------------------- -------- -
---------- -- ----- -------- -------- - -------- ----- - -- --------------
---------- -------
---
----- ---------- - ----------
------------------------------------------------------------------ ------------
----- --------- - ----------
-------------------------------------------------------------- -----------
-- ----- ------- -- -------
--------------------------------------------
------------------------------------
-----------------------------------
-- ----- -- -------
-------------------------------------------------------------------
-----------------------------------------------------------------
--------------------------------------
-----------------------------------
-- ----- -- -------
-------------------------------------------------------------------
-----------------------------------------------------------------
--------------------------------------
-------------------------------------
------------------
---以上代码展示了如何使用 @popperjs/test 测试 Popper 的事件监听器。我们可以模拟鼠标点击、鼠标移动等事件，通过监听事件并判断期望的执行情况来进行测试。
位置计算测试
在测试 Popper 的位置计算时，也可采用 @popperjs/test 提供的 API 进行测试。
------ - ---------------- ------------ - ---- -----------------
------ - -------------- - ---- -----------------------
----- -------- - -
---------- ------------------------------
------- ------------------------------
--
------------------------------ - ------------
--------------------------- - ---------
----- --------------------------- - -----------------
----------------- -----------------
---
----- ------------- - -------------------------------- ---------------- -
---------- -
-
----- -------
-------- -
------------------- ---------- -------
--
--
-
----- ---------
-------- -
------- --- ----
--
--
--
---
----- ----- - --------------------
----- ------- - ---------------------------
------------ ---- --- ------ ---- ----- --- --------- --------- -- -- -
----------------------------------------------
---
------------ ---- --- ------ ------- -------------- -- -- -
-----------------------------------------------------------------
---以上代码展示了如何使用 @popperjs/test 测试 Popper 的位置计算。通过设置 Popper 的位置，观察位置是否正确来进行测试。
实例化测试
在测试实例化时，@popperjs/test 为我们提供了很多帮助我们测试 Popper 实例的 API。
------ - ------------ - ---- ----------------- ------ - ---------------- -------------- - ---- ----------------------- ----- -------- - - ---------- --------------------------------- ------- ------------------------------ ------- ------------------------------ -- ------------------------------ - ------------ --------------------------- - --------- ------------------------------------------------ --------------------------------------------- ----- --------------------------- - ----------------- ----------------- ----------------- --- ------------ ---------- - ------ ---------- -- -- - ----- -------- - -------------------------------- ----------------- ------------------------------------- ---
以上代码展示了如何使用 @popperjs/test 进行实例化测试。
总结
@popperjs/test 的出现为我们提供了便利，可以更加方便的测试自己使用或者写的 Popper.js 实例，在日常工作中使用这个模块，能够为我们在前端开发方面提供更大的便利。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/169342