时间戳

首页 > 解决方案 > 在每次 Git 推送时测试 JavaScript 代码（用于 Web 前端）的最简单方法

javascript - 在每次 Git 推送时测试 JavaScript 代码（用于 Web 前端）的最简单方法

问题描述

我正在寻找最简单最简约的方法来在每次 Git 推送时创建自动化测试，以便为 HTML/CSS/JS Web 应用程序提供相对简单的 JavaScript 代码（在 GitHub 上），同时它还可以测试 HTML 元素（通过 JS 操作）。

我认为它需要某种“无头浏览器”测试——在这种情况下，我只需要在 Google Chrome 中执行它。（此应用程序不打算在任何其他浏览器中使用。）

我已经创建了一个 JS 函数来进行测试。此函数应在整个应用程序（网页）加载（HTML、CSS、JS）后执行，因为它涉及对 HTML 元素的操作。举个简单的例子，假设我总是期望一个大于 5 的偶数。比如说，这个数字是应用程序 HTML 页面上的一个 div 元素中的段落元素的计数。在这种情况下，函数将是：

function my_test() {
    var is_valid = true;
    var num = $("#my_div").find("p").length; // (JQuery is included in the app)
    if (num % 2 != 0) {
        console.log("it's not an even number");
        is_valid = false;
    } else if (num <= 5) {
        console.log("it's smaller than 5");
        is_valid = false;
    }
    return is_valid ;
}

所以问题是，让这个测试在终端执行时自动运行的最简单方法是什么git push（由任何想要为存储库做出贡献的人）？

我知道有 Node.js 测试框架，例如 Tape，但我想象（或希望）可以更简单地完成它似乎很复杂；另外，如果我安装这些，它会将 MB 添加到我不太喜欢的原本很小的应用程序（大约 0.3 MB）中。

然后可以使用例如 Travis 自动运行此类测试，因此例如我可以添加一个“.travis.yml”文件，其中

language: node_js
node_js:
- "node"

然后在 package.json 文件中，我可以添加例如"test": "jshint my_code.js"用 jshint 包测试 my_code.js 的行。

但是有没有办法执行我自己的简单 JS 函数作为测试？例如，要说“首先用我所有相关的 JS 代码加载我的页面（HTML、CSS），然后执行我的自定义my_test()函数（上图），显示（在终端中）将在控制台中输出的任何内容（通过console.log('output')），并且，如果最后它不返回true，破坏 git push "。

我很欣赏任何建议，但最好是清楚地描述应该采取哪些步骤来设置所有这些。例如，“创建具有这样那样内容的 .travis.yml，添加具有这样那样内容的 package.json 文件等”。和/或如果也可以使用例如磁带而不将其安装在应用程序之上，而只是在执行测试时自动调用它，那么将如何完成。

（我根本不坚持使用 Travis 或 Tape，这些只是示例。）

（更新：我现在接受了我自己的解决方案 - 因为没有更好的解决方案 - 但如果有人可以提供更简单/更好的解决方案，我将更改接受的答案。）

标签： javascriptgittestingcontinuous-integrationweb-frontend

解决方案

Git 具有允许在发生某些事情时运行不同任务的钩子。在这种情况下，您需要在pre-push钩子中添加逻辑

预推脚本示例：https ://github.com/git/git/blob/master/templates/hooks--pre-push.sample

  1. 编辑你的钩子.git/hooks/pre-push
  2. 用于 git 挂钩的脚本可以用任何脚本语言编写，因此在这种情况下，您将使用您的 js 代码。
  3. 不要忘记为节点添加shebang
#!/usr/bin/env node
  1. 如果要停止推送，请确保返回非零响应。

推荐阅读