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

Question

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

我假设它需要某种 "headless browser" 测试——在这种情况下，我只需要它在 Google Chrome 中执行。（此应用程序不打算在任何其他浏览器中使用。）

我已经创建了一个执行测试的 JS 函数。该函数应该在整个应用程序（网页）加载完成后执行（HTML、CSS、JS），因为它涉及到对HTML元素的操作。举个简单的例子，假设我总是期望一个大于 5 的偶数。这个数字是应用程序 [=58= 上 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，但对于我想象（或希望）可以更简单地完成的事情来说，它似乎很复杂；另外，如果我安装它们，它会向我不太喜欢的原本很小的应用程序（大约 0.3 MB）添加 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')），并且，如果最后它没有 return true，则中断 git push”。

我很感激任何建议，但最好是清楚地描述应该采取哪些步骤来设置所有这些。例如，"create the .travis.yml with such and such content, add the package.json file with such and such content, etc."。 And/or 如果也许也可以使用例如Tape 没有安装在应用程序之上，而是在执行测试时自动调用它，那将如何做到。

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

(更新: 我现在接受了我自己的解决方案 - 因为没有更好的解决方案 - 但如果有人可以提供 simpler/better 一个，我会改变接受的答案。）

Answer 1

Git 有一些挂钩，可以在发生某些事情时允许运行执行不同的任务。这种情况需要在pre-push hook

中添加逻辑

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

在 .git/hooks/pre-push
用于git钩子的脚本可以用任何脚本语言制作，所以在这种情况下，您将使用您的js代码。
不要忘记为节点添加 shebang

#!/usr/bin/env node

如果您想停止推送，请确保 return 非零响应。

Answer 2

这是我的解决方案，虽然不是太简单。我使用了 Travis、Karma 和一个非常基本的 Jasmine 代码。

首先，您需要在应用程序的根目录中有一个 package.json 文件，内容如下：

{
  "name": "CITapp",
  "description": "Concealed Information Test app",
  "version": "1.0.2",
  "scripts": {
    "test": "karma start test/karma.conf.js --single-run"
  },
  "devDependencies": {
    "jasmine-core": "*",
    "karma": "*",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "*",
    "karma-fixture": "^0.2.6",
    "karma-html2js-preprocessor": "*",
    "karma-jasmine": "*",
    "karma-phantomjs-launcher": "*",
    "phantomjs-prebuilt": "*"
  }
}

如果您现在运行 npm install 在应用程序路径的终端中，每个必需的模块都将添加到应用程序（在 node_modules 文件夹下）。（为此，必须先在 PC 上安装 Node.js。）这仅用于本地测试（在您自己的 PC 上），但 Travis 会在每个 git push 的服务器上自动进行此安装（见下文）。（这些模块占用比较多space，所以最好不要包含在应用程序中，尤其是在存储库中。）

对于 Travis，您只需要一个包含以下内容的 .travis.yml 文件：

language: node_js
node_js:
 - "stable"

现在，在 package.json 文件中有这一行 "test": "karma start test/karma.conf.js --single-run"。这会将 "test" 命令定向到应用程序中测试目录下的 karma.conf.js 。此文件应包含如下内容：

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      '../js/jquery-2.1.3.min.js', // JQuery from the root's js folder
      '../js/my_scripts.js', // personal scripts from the root's js folder
      'add_html.js', // from same folder as the karma.conf.js
      'test.js' // from the same folder as the karma.conf.js
    ],
    exclude: [
    ],
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['ChromeHeadlessNoSandbox'],
    customLaunchers: {
      ChromeHeadlessNoSandbox: {
        base: 'ChromeHeadless',
        flags: [
                '--no-sandbox',
                '--disable-gpu',
                '--enable-logging',
                '--no-default-browser-check',
                '--no-first-run',
                '--disable-default-apps',
                '--disable-popup-blocking',
                '--disable-translate',
                '--disable-background-timer-throttling',
                '--disable-renderer-backgrounding',
                '--disable-device-discovery-notifications',
                '--remote-debugging-port=9222',
                '--disable-web-security'
        ]
      }
    },
    singleRun: true,
    concurrency: Infinity

  })
}

最重要的是，我使用了框架 jasmine，启动了 ChromeHeadless（有一些特殊的 flags，否则会出错），并将我的文件加载到 files : [...]。

add_html.js文件通过JS代码将HTML添加到页面，例如如（按照问题中的示例）：

var fixture = "<div id='my_div'><p>paragraph1</p><p>paragraph2</p></div>";
document.body.insertAdjacentHTML('afterbegin', fixture);

（出于某种原因，当我尝试通过 Karma 文件列表直接加载 HTML 时，它不起作用 - 但像这样插入它对我来说也很好。）

最后，在test.js中用Jasmine进行的测试就这么简单：

describe("suite", function() {
  it("check if my_test() returns true", function() {
    expect( my_test() ).toBe(true);
  });
});

请注意，函数 my_test() 来自（假设的）my_scripts.js 文件 - 可能与问题示例中的文件相同 - 因此它被定义为一个简单的纯（好吧，只有 JQuery 添加）JS 脚本。只要脚本 return 为真，Jasmine 测试就会通过。如果它不 return 为真（包括任何停止执行测试代码的无关错误），测试将失败。

这一切都可以在应用程序路径的终端使用 npm test 命令在本地进行测试（同样，为此，首先必须安装所有必需的 Node.js 包）。

现在最后要做的就是将 Travis CI 连接到存储库，这只是几个非常简单的步骤；查看他们的 GitHub tutorial。这将创建一个连接到给定 GitHub 存储库的专用 Travis 站点。

那就大功告成了。在每次推送时，Travis 将在无头 ("invisible") Chrome 浏览器和运行 my_test() 函数中构建页面，如果失败则发送可选通知。此函数（或测试期间执行的应用程序的任何其他函数）中通过 console.log() 的每条消息都显示在 Travis 站点上。另一个好处是，如果您希望测试在某个点停止（例如，如果不满足某些条件），您可以简单地写 throw "this and this condition was not met"，这也会在该点停止 Travis 测试，显示此错误留言。

我的实际实现见：https://github.com/gasparl/citapp_pc （当然还有一些补充，但逻辑是一样的。）

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

Simplest way to test JavaScript code (for web-frontend) on each Git push

javascript

git

testing

continuous-integration

web-frontend