使用 Jasmine 测试 DOM 操作

发布于 2024-12-08 17:22:52 字数 441 浏览 0 评论 0原文

我正在创建一个 JS 小部件，第一部分是使用 javascript 添加脚本，如下所示（来自谷歌分析的示例）：

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

如何使用 jasmine 测试它（使用固定装置）？

原文

I'm creating a JS widget and first part is to add script with javascript, something like this (example from google analytics):

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

How to test it with jasmine (using fixtures)?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

桃酥萝莉 2024-12-15 17:22:52

为了在我的规范中设置 HTML 固定装置，我编写了 jasmine-fixture。有了它，你可以做这样的事情：

var $foo, $input;
beforeEach(function(){
  $foo = affix('.foo');
    # appends to the DOM <div class="foo"></div> 
  $input = $foo.affix('input[id="name"][value="Jim"]');
    # appends <input id="name" value="Jim"/> beneath the .foo div

afterEach，它会在你之后清理。

对于 DOM 状态的期望，我使用 jasmine-jquery。它提供了大量的匹配器，如下所示：

it('is named Jim', function(){
  expect($input).toHaveValue("Jim");
});

For setting up HTML fixtures in my specs, I wrote jasmine-fixture. With it, you can do stuff like this:

var $foo, $input;
beforeEach(function(){
  $foo = affix('.foo');
    # appends to the DOM <div class="foo"></div> 
  $input = $foo.affix('input[id="name"][value="Jim"]');
    # appends <input id="name" value="Jim"/> beneath the .foo div

And afterEach, it'll clean up after you.

For expectations about the state of the DOM, I use jasmine-jquery. It offers a ton of matchers like the one below:

it('is named Jim', function(){
  expect($input).toHaveValue("Jim");
});

回复收藏 0 原文

極樂鬼 2024-12-15 17:22:52

我想您可以执行您的操作，然后检查第一个脚本标记上的 href，如下所示：

function addGA(){
    var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; ga.async = true;
    ga.src = 
      ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')
      + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(ga, s);
};

Jasmine 规范：

 var href = 'http://www.google-analytics.com/ga.js';
 expect(document.getElementsByTagName('script')[0].href).not.toEqual(href);
 addGa();
 expect(document.getElementsByTagName('script')[0].href).toEqual(href);

不过，有兴趣听到更好的方法。使用 Jasmine 检查 DOM 总是感觉有点古怪。

I suppose you could perform your action, then check the href on the first script tag like so:

function addGA(){
    var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; ga.async = true;
    ga.src = 
      ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')
      + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(ga, s);
};

Jasmine spec:

 var href = 'http://www.google-analytics.com/ga.js';
 expect(document.getElementsByTagName('script')[0].href).not.toEqual(href);
 addGa();
 expect(document.getElementsByTagName('script')[0].href).toEqual(href);

Would be interested in hearing a better method, though. Checking the DOM with Jasmine always feels a little hacky.

回复收藏 0 原文