3

我正在尝试使用 jasmine 测试一些视图代码。当视图对象处于不同的包含状态时，我需要测试某些元素的存在，而不必在每个状态下重复大量代码。

我有一个 NodeView 类，它代表一个带有一些端点的节点，以便允许用户通过一些线将此节点连接到其他节点。每个节点都被放置在一个列（组）中，这样如果这个节点被放置在第一个组中，它就不会显示左端点。如果节点在最后一个组中，它将不会显示正确的端点。我可以使用 jasmine 中的嵌套描述块来管理这种情况：

var node, subject, model;

describe("render", function() {
  beforeEach(function() {
    model = mockModel();
  });

  describe("when the node is into first group", function() {
    beforeEach(function () {
      model.isInFirstGroup.andReturn(true);
      model.isInLastGroup.andReturn(false);

      node = new NodeView(model);
    });

    it("has the left endpoint hidden", function() {
      expect(node.el.find('.endpoint .left')).toBeHidden();
    });

    it("has the right endpoint visible", function() {
      expect(node.el.find('.endpoint .left')).toBeVisible();
    });
  });

  describe("when the node is into last group", function() {
    beforeEach(function () {
      model.isInFirstGroup.andReturn(false);
      model.isInLastGroup.andReturn(true);

      node = new NodeView(model);
    });

    it("has the left endpoint visible", function() {
      expect(node.el.find('.endpoint .left')).toBeVisible();
    });

    it("has the right endpoint hidden", function() {
      expect(node.el.find('.endpoint .left')).toBeHidden();
    });
  });

到目前为止一切正常。当我们有其他不同的状态时，麻烦就开始了，在这种情况下，这个状态是允许输入。这是一个布尔值，指示用户是否可以画线。如果这个布尔值是真的，那么节点必须包含一个“输入”类以及其他东西。这是代码（再次渲染函数）：

describe("when the node is in input state", function() {
  beforeEach(function() {
    model.input = true;
    node = new NodeView(model);
  });

  it("has the class input", function(){
    expect(node.el).toHaveClass('input');
  });
});

describe("when the node is not in input state", function() {
  beforeEach(function() {
    model.input = false;
    node = new NodeView(model);
  });

  it("has not the class input", function(){
    expect(node.el).not.toHaveClass('input');
  });
});

好的，我在构建节点时测试生成的 html 标记（没有显式调用 render 方法），但它在内部完成了这项工作。构建对象时调用渲染（构造函数调用渲染），这就是我没有在代码中显式调用 node.render() 的原因。

测试这些不同的状态需要测试包括所有可能的情况：

  • 第一组——输入
  • 最后一组 - 输入
  • 第一组 - 无输入
  • 最后一组 - 无输入

如果我添加另一个布尔状态，那么我将有 8 个场景，依此类推。我尝试使用共享示例http://pivotallabs.com/drying-up-jasmine-specs-with-shared-behavior/对其进行一些清理 

sharedExamplesForGroupState = function() {
  describe("(shared)", function() {
    describe("when the node is into first group", function() {
      beforeEach(function () {
        model.isInFirstGroup.andReturn(true);
        model.isInLastGroup.andReturn(false);

        node = new NodeView(model);
      });

      it("has the left endpoint hidden", function() {
        expect(node.el.find('.endpoint .left')).toBeHidden();
      });

      it("has the right endpoint visible", function() {
        expect(node.el.find('.endpoint .left')).toBeVisible();
      });
    });

    describe("when the node is into last group", function() {
      beforeEach(function () {
        model.isInFirstGroup.andReturn(false);
        model.isInLastGroup.andReturn(true);

        node = new NodeView(model);
      });

      it("has the left endpoint visible", function() {
        expect(node.el.find('.endpoint .left')).toBeVisible();
      });

      it("has the right endpoint hidden", function() {
        expect(node.el.find('.endpoint .left')).toBeHidden();
      });
    });
  });
});

describe("when the node is in input state", function() {
  beforeEach(function() {
    model.input = true;
    node = new NodeView(model);
  });

  it("has the class input", function(){
    expect(node.el).toHaveClass('input');
  });

  sharedExamplesForGroupState();
});

describe("when the node is not in input state", function() {
  beforeEach(function() {
    model.input = false;
    node = new NodeView(model);
  });

  it("has not the class input", function(){
    expect(node.el).not.toHaveClass('input');
  });

  sharedExamplesForGroupState();
});

上面的行没有按预期工作，因为输入状态测试是在没有设置输入状态的情况下完成的，所以，我们真正测试的是：

  • 独立于组的输入和无输入
  • 第一组和最后一组不包括输入测试用例，但包括 model.input 属性

这并不是真正测试所有 4 个案例。

关于如何改进这一点以避免指数重复代码的任何想法？

非常感谢。

4

1 回答 1

2

我认为你的最新描述块上的 beforeEach 正在注册的回调函数被 sharedExamplesForGroupState() 调用上的 beforeEach 调用覆盖。如果您为 sharedExamplesForGroupState 调用创建一个新范围（例如将其包含在描述块中），它应该可以工作：

describe("when the node is in input state", function() {
  beforeEach(function() {
    model.input = true;
    node = new NodeView(model);
  });

  it("has the class input", function(){
    expect(node.el).toHaveClass('input');
  });

  describe("shared examples for group state", function() {
    sharedExamplesForGroupState();
  });
});
于 2014-01-21T09:07:48.283 回答