针对远程URL对本地JavaScript文件进行单元测试

Unit test a local JavaScript file against a remote URL

本文关键字：文件 单元测试 JavaScript URL      更新时间：2023-09-26

如何针对远程URL对本地JavaScript文件进行单元测试？我已经断断续续地研究了几天了，但还不能完全弄清楚。

我有一个本地文件，带有DOM操作，比如一个名为app.js的文件，其中包含：

document.querySelector('p').textContent = 'This is a test.';

然后，我如何针对远程URL进行测试，例如http://example.com/，以确保代码成功运行？URL不是我控制的。也许包含Selenium的解决方案最有意义，但我不确定如何在远程URL上运行本地JS文件。

比如用这个伪代码：

openUrl('http://example.com/', function() {
  inject('./app.js');
  element = document.querySelector('p');
  assertEquals('This is a test.', element.textContent);
});

我尝试过使用CasperJS（基于PhantomJS），这是最有希望的，但它不会等到DOM完成加载后再运行断言，所以jQuery$（document）.ready（）块中的任何内容都不会执行。

以下是到目前为止我在Casper JS中得到的内容；第二个断言失败，因为它在ready（）块中运行。

// app.js
$ = require('jquery');
$('p').first().text('test');
$(document).ready(function() {
  $('h1').text('one');
});

和：

// test.js
var url = 'http://example.com/';
var script = 'Example/app.js';
casper.test.begin('Test', function suite(test) {
  casper.start(url, function() {
    casper.page.injectJs(script);
    // 'test' was added immediately, in app.js. This succeeds.
    test.assertTextExists('test');
    // 'one' runs in a $(document).ready() block. This assertion fails.
    test.assertTextExists('one');
  });
  casper.run(function() {
    test.done();
  });
});

Checkout phantom.js是一个无头浏览器，它可以加载url，在上面运行jquery，如果你愿意，还可以断言。

然后，您可以测试本地环境，并为远程环境运行相同的脚本。

phantom.js非常受欢迎，有很多插件可供使用。

我最终使用了Casper，并且通过简单地使用casper.wait(100)解决了等待DOM的问题。

一些示例代码（我还没有测试过，但它应该可以工作；我的实际代码要复杂得多）。使用casperjs test casper.js 运行

casper.js

// Begin test suite.
casper.test.begin('Example', function(test) {
  // Start Casper.
  casper.start();
  // Open URL.
  casper.thenOpen('http://example.com/', function() {
    casper.page.injectJs('inject.js');
  });
  // Call the test. Wait for code to finish first.
  casper.wait(100, function() {
    test.assertExists('.element-added-by-injection');
  });
  // A second URL can even be opened.
  casper.thenOpen('http://google.com/', function() {
    casper.page.injectJs('google.js');
  });
  casper.wait(100, function() {
    test.assertExists('.another-element-we-added');
  });
  casper.run(function() {
    test.done();
  });
});

inject.js

var $ = require('jquery');
$(function() {
  $('p').after('<div class="element-added-by-injection">Test</div>');
});
相关文章：