javascript - 干燥 Jasmine 嵌套描述 block

Question

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

我有 NodeView 类，它表示具有一些端点的节点，以便允许用户使用一些线将此节点连接到其他节点。每个节点都放在一个列(组)中，这样如果这个节点放在第一个组中，它就不会显示左端点。如果该节点属于最后一组，则不会显示正确的端点。我可以使用 jasmine 中的嵌套描述 block 来处理这种情况:

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();
    });
  });

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

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 在构建对象时被调用(构造函数调用 render)，这就是为什么我没有在代码中显式调用 node.render()。

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

• 第一组——输入
• 最后一组——输入
• 第一组 - 没有输入
• 最后一组 - 没有输入

如果我添加另一个 bool 状态，那么我将有 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 个案例。

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

非常感谢。

Answer 1

我认为您最新的 describe block 上的 beforeEach 正在注册的回调函数正在被 sharedExamplesForGroupState() 调用上的 beforeEach 调用覆盖。如果您为 sharedExamplesForGroupState 调用创建一个新的范围(比如将它封装到一个 describe block 中)，它应该可以工作:

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();
  });
});