自定义茉莉花匹配器和承诺

Question

故事：

我们一直在使用自定义的 jasmine 匹配器来期望 元素具有手形/指针光标：

beforeEach(function() {
    jasmine.addMatchers({
        toHaveHandCursor: function() {
            return {
                compare: function(actual) {
                    return {
                        pass: actual.getCssValue("cursor").then(function(cursor) {
                            return cursor === "pointer";
                        })
                    };
                }
            };
        },
    });
});

它工作得很好并且使测试可读：

expect(queuePage.sortByButton).toHaveHandCursor();

问题：

当期望失败时，目前我们在控制台上得到了一个完全不可读的大块红色文本：

• 预期 ElementFinder({ ptor_: Protractor({ getProcessedConfig: Function, forkNewDriverInstance: Function, restart: Function, controlFlow：函数，调度：函数，setFileDetector：函数， getSession：函数，getCapabilities：函数，退出：函数， 动作：函数，touchActions：函数，executeScript：函数， executeAsyncScript：函数，调用：函数，等待：函数，睡眠： 函数，getWindowHandle：函数，getAllWindowHandles：函数， getPageSource：函数，关闭：函数，getCurrentUrl：函数， getTitle：函数，findElementInternal_：函数， findElementsInternal_ ... 10 分钟滚动 ... ，点击： 函数，sendKeys：函数，getTagName：函数，getCssValue： 函数，getAttribute：函数，getText：函数，getSize： 函数，getLocation：函数，isEnabled：函数，isSelected： 函数，提交：函数，清除：函数，isDisplayed：函数， getOuterHtml：函数，getInnerHtml：函数，getId：函数， getRawId：函数，序列化：函数，takeScreenshot：函数}） 有手形光标。

问题：

为什么会这样？ 我们如何改进匹配器并输出一个用户友好的错误呢？ 比如：

Expected 'auto' to be equal to 'pointer' cursor value.

---

据我了解，我们需要为自定义匹配器提供 message 值，但我不完全确定如何将实际元素的 cursor CSS 值传递到消息中。这是我目前所拥有的：

toHaveHandCursor: function() {
    return {
        compare: function(actual) {
            return actual.getCssValue("cursor").then(function(cursor) {
                return {
                    pass: cursor === "pointer",
                    message: "Expected '" + cursor + "' to be equal to 'pointer' cursor value."
                };
            });
        }
    };
},

我希望这可以正常工作，但由于某种原因，我在测试运行后在控制台上看到了相同的错误消息。

Answer 1

我们在控制台上看到的是自动生成的 jasmine 匹配器失败消息，它由 ElementFinder 实例字符串表示形式组成 - 出于某种原因，它看起来相当庞大。

现在，为了改进失败的消息，我们需要将message 键与pass 一起使用。我们应该考虑到 getCssValue() 返回一个承诺，并且需要解析它才能在自定义错误消息中使用实际的 cursor 值：

toHaveHandCursor: function() {
    return {
        compare: function(actual) {
            var result = {};

            result.pass = actual.getCssValue("cursor").then(function(cursor) {
                result.message = "Expected '" + cursor + "' to be equal to 'pointer' cursor value.";
                return cursor === "pointer";
            });

            return result;
        }
    };
},

现在，如果期望失败，我们会收到一条很好的错误消息：

- Expected 'auto' to be equal to 'pointer' cursor value.

Answer 2

你是对的，要设置自定义消息，你应该设置返回对象的message属性。

消息只是一个常规字符串。如果您在履行承诺后将结果对象放在一起，则可以使用 cursor 变量的值。

请参阅以下示例如何完成：

beforeEach(function(){
  jasmine.addMatchers({
    toBeDeactivated: function() {
      return {
        compare: function(account){
          var accountStatusCode = account.get('status').statusCode;
          var result = { pass: accountStatusCode === 5 };
          if(result.pass) {
            result.message =  "Expected account with status code '" + accountStatusCode + " NOT to be deactivated.";
          } else {
            result.message =  "Expected account with status code '" + accountStatusCode + "' to be deactivated.";
          }
          return result;
        }
      }
    }
  }
});

Source

用 Promise 替换 account.get() 应该很简单。