如何在Jasmine jQuery中编写单元测试检测DOM元素是否存在？

嘿，很高兴帮你搞定这个问题！既然你已经搭好了独立版Jasmine，还在SpecRunner.html里引入了jQuery和Jasmine jQuery的CDN，那接下来写检测DOM元素存在的单元测试就很顺畅了，我给你一步步拆解：

测试DOM元素之前，得先让测试环境里有对应的DOM节点才行，这里有两种常用方式：

• 直接在SpecRunner.html里添加静态DOM：如果是简单的测试，你可以直接在SpecRunner的body里加一段测试用的HTML，比如：

  <div id="test-container">
    <button id="submit-btn">提交</button>
    <p class="info-text" style="display:none;">提示信息</p>
  </div>
  

• 用Jasmine jQuery的Fixture功能（推荐）：这种方式更灵活，能在测试前动态加载DOM，还能避免测试间的污染。你可以先在项目里建一个spec/fixtures文件夹，放一个比如test-dom.html的文件，内容就是你要测试的DOM结构；然后在测试代码里用loadFixtures()加载：

  beforeEach(function() {
    // 加载指定的fixture文件
    loadFixtures('test-dom.html');
    // 如果是简单DOM，也可以直接用setFixtures()写HTML字符串
    // setFixtures('<button id="submit-btn">提交</button>');
  });
  

Jasmine jQuery提供了专门的DOM匹配器，让检测变得超简单，这里列举几个最常用的场景：

检测元素是否存在于DOM中 #

用toBeInDOM()匹配器，直接判断元素是否存在：

describe('DOM元素检测测试', function() {
  beforeEach(function() {
    setFixtures('<button id="submit-btn">提交</button>');
  });

  it('应该能检测到存在的按钮元素', function() {
    expect($('#submit-btn')).toBeInDOM();
  });

  it('应该能检测到不存在的元素', function() {
    expect($('#non-existent-element')).not.toBeInDOM();
  });
});

检测元素是否可见 #

如果要判断元素是否显示（比如有没有display:none或者hidden属性），用toBeVisible()：

it('应该能检测到可见的元素', function() {
  setFixtures('<div id="visible-box">我是可见的</div>');
  expect($('#visible-box')).toBeVisible();
});

it('应该能检测到隐藏的元素', function() {
  setFixtures('<div id="hidden-box" style="display:none;">我是隐藏的</div>');
  expect($('#hidden-box')).not.toBeVisible();
});

检测元素的文本、属性等 #

除了存在性，你还可以结合jQuery和Jasmine的匹配器，检测元素的细节：

it('按钮应该有正确的文本和属性', function() {
  setFixtures('<button id="submit-btn" type="submit" data-action="save">提交</button>');
  expect($('#submit-btn')).toHaveText('提交');
  expect($('#submit-btn')).toHaveAttr('type', 'submit');
  expect($('#submit-btn')).toHaveData('action', 'save');
});

• 清理测试环境：记得在afterEach里清理fixture，避免不同测试用例互相干扰：

  afterEach(function() {
    cleanupFixtures();
  });
  

• 确保业务代码加载时机：如果你的DOM是通过业务代码动态生成的，要在beforeEach里调用生成DOM的函数，再执行测试断言。
• 匹配器的使用前提：所有Jasmine jQuery的匹配器都需要基于jQuery对象，所以一定要用$()包裹选择器。

内容的提问来源于stack exchange，提问作者David Heidelberg