Question

如何针对远程URL对本地JavaScript文件进行单元测试？我现在已经开始和关闭了几天，但还不能很好地解决这个问题。

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

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

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

例如使用此伪代码：

openUrl('http://example.com/', function() {
  inject('./app.js');

  element = document.querySelector('p');

  assertEquals('This is a test.', element.textContent);
});

我尝试使用Casper JS（基于Phantom JS）并且这是最有希望的，但它不会等待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();
  });
});

Answer 1

结帐phantom.js它是一个无头浏览器，它可以加载网址，在其上运行jquery，并根据需要进行断言。

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

phantom.js非常受欢迎，并且有很多可用的插件。

Answer 2

我最终使用了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>');
});

单元测试远程URL的本地JavaScript文件

2 个答案: