Post by account_disabled on Jan 29, 2024 5:27:43 GMT
本文由Matt Trask、Paul M. Jones和Yazid Hanifi进行了同行评审。感谢所有 SitePoint 的同行评审者使 SitePoint 内容达到最佳状态！ Pause Next Unmute Current Time 0:11 / Duration 2:00 Fullscreen 粘在透明背景上的宝丽来矢量图像 啊哈时刻在编程中是美丽而罕见的。每隔一段时间，我们就会很幸运地发现一个系统的某些技巧或方面，从而永远改变我们对它的看法。 对我来说，这就是快照测试。 你可能写了很多 PHP 代码，但今天我想谈谈我在 JavaScript 中学到的一些东西。我们将了解什么是快照测试，然后看看它如何帮助我们编写更好的 PHP 应用程序。 构建接口 我们来谈谈反应。不是出色的异步 PHP 项目，而是出色的 JavaScript 项目。它是一个界面生成工具，我们可以在其中定义界面标记作为离散部分的样子为了编写此代码，我将Tweet函数（上面）粘贴到Babel REPL中。这就是所有 React 代码在被浏览器执行之前都会被简化到的程度（减去偶尔的优化）。 在谈论为什么这很酷之前，我想先解决几个问题…… “为什么要混合 HTML 和 Javascript？！” 我们花了很多时间来教导和学习标记不应与逻辑混合。
它通常用“关注点分离”一词来表达。事实是，将 HTML 和生成并操作该 HTML 的 Javascript 分开基本上没有价值。 拆分标记和 JavaScript 与其说是关注点的分离，不如说是技术的分离。皮特·亨特（Pete Hunt）在此视频中更深入地讨论了这一点。 “这个语法很奇怪” 也许是这样，但完全有可能在 PHP 中重现并在 Hack 中解决问题我不想详细介绍这种疯狂的语法，只是想说这种语法已经是可能的。不幸的是，官方的 XHP 模块 WhatsApp 号码数据 似乎只支持 HHVM 和旧版本的 PHP... 测试接口 测试方法有很多，其中一些比其他方法更有效。测试接口代码的有效方法是伪造（或发出）Web 请求并检查输出中是否存在特定元素及其内容。 也许您听说过 Selenium 和Behat之类的东西？我不想过多地谈论它们。这么说吧，Selenium 是我们可以用来假装浏览器的工具，而 Behat 是一种商业友好的语言，用于编写此类假装的脚本。 不幸的是，许多基于浏览器的测试可能很脆弱。它与标记的确切结构相关，不一定与生成标记的逻辑相关。 快照测试是做同一件事的不同方法。React 鼓励从可以分解成的最小部分的角度来思考整个界面。
它不是构建整个购物车，而是鼓励将物品分解成离散的部分；喜欢： 每个产品 产品清单 运输细节 进度指示器 在构建每个部分时，我们根据任何初始信息定义标记和样式应该是什么。我们通过创建一个render方法来定义它或者通过定义一个简单的函数来返回一个字符串或前面的示例演示了函数式方法。 这是一种思考界面的有趣方式。我们写得render好像它只会被调用一次，但 React 会不断协调对初始信息和组件自身内部数据的更改。 正是这种思维方式导致了测试 React 组件的最简单方法：快照测试。想一想…… 给定任何初始信息，我们构建 React 组件来呈现自身。我们可以在头脑中处理所有可能的输入。我们甚至可以为我们允许进入组件的初始信息（或属性）定义严格的验证。 因此，如果我们可以在设计组件时解决这些场景：那么我们就可以在测试中解决它们。让我们创建一个新组件那么，这个组件有哪些使用方法呢？有一些变化： 如果不指定borderColor或type，则会呈现文本徽章，并且它具有黑色边框。 更改type为还image需要src设置，并呈现图像徽章。 更改borderColor任何内容都会改变文本和图像徽章的边框颜色。
它通常用“关注点分离”一词来表达。事实是，将 HTML 和生成并操作该 HTML 的 Javascript 分开基本上没有价值。 拆分标记和 JavaScript 与其说是关注点的分离，不如说是技术的分离。皮特·亨特（Pete Hunt）在此视频中更深入地讨论了这一点。 “这个语法很奇怪” 也许是这样，但完全有可能在 PHP 中重现并在 Hack 中解决问题我不想详细介绍这种疯狂的语法，只是想说这种语法已经是可能的。不幸的是，官方的 XHP 模块 WhatsApp 号码数据 似乎只支持 HHVM 和旧版本的 PHP... 测试接口 测试方法有很多，其中一些比其他方法更有效。测试接口代码的有效方法是伪造（或发出）Web 请求并检查输出中是否存在特定元素及其内容。 也许您听说过 Selenium 和Behat之类的东西？我不想过多地谈论它们。这么说吧，Selenium 是我们可以用来假装浏览器的工具，而 Behat 是一种商业友好的语言，用于编写此类假装的脚本。 不幸的是，许多基于浏览器的测试可能很脆弱。它与标记的确切结构相关，不一定与生成标记的逻辑相关。 快照测试是做同一件事的不同方法。React 鼓励从可以分解成的最小部分的角度来思考整个界面。
它不是构建整个购物车，而是鼓励将物品分解成离散的部分；喜欢： 每个产品 产品清单 运输细节 进度指示器 在构建每个部分时，我们根据任何初始信息定义标记和样式应该是什么。我们通过创建一个render方法来定义它或者通过定义一个简单的函数来返回一个字符串或前面的示例演示了函数式方法。 这是一种思考界面的有趣方式。我们写得render好像它只会被调用一次，但 React 会不断协调对初始信息和组件自身内部数据的更改。 正是这种思维方式导致了测试 React 组件的最简单方法：快照测试。想一想…… 给定任何初始信息，我们构建 React 组件来呈现自身。我们可以在头脑中处理所有可能的输入。我们甚至可以为我们允许进入组件的初始信息（或属性）定义严格的验证。 因此，如果我们可以在设计组件时解决这些场景：那么我们就可以在测试中解决它们。让我们创建一个新组件那么，这个组件有哪些使用方法呢？有一些变化： 如果不指定borderColor或type，则会呈现文本徽章，并且它具有黑色边框。 更改type为还image需要src设置，并呈现图像徽章。 更改borderColor任何内容都会改变文本和图像徽章的边框颜色。