茉莉花文本验证：如何规范化文本？

Question

我有一个包含不同 HTML 元素中的文本的页面，我想要一种快速验证文本的方法。

使用 jasmine 和 jasmine-query 加载 HTML 和测试 DOM。

例如，我想验证这个 HTML 中的文本

<table id="users">
    <thead>
        <tr>
            <td>user</td>
            <td>permissions</td>
            <td>last seen</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Darren</td>
            <td>testuser,customer</td>
            <td>today</td>
        </tr>
        <tr>
            <td>Hillary</td>
            <td>administrator</td>
            <td>yesterday</td>
        </tr>
    </tbody>
</table>

假设我想验证表格中的每一行是否包含正确的文本。 Jasmine 测试文件：

    it('should find correct text in table', function () {
        expect( $('#users').find('tbody tr').first() ).toContainText('Darren testuser,customer today');
        expect( $('#users').find('tbody tr').last() ).toContainText('Hillary administrator yesterday');

    });

我会失败的：

Testexample:: should find correct text in table: failed
  Expected '<tr>
                <td>Darren</td>
                <td>testuser,customer</td>
                <td>today</td>
            </tr>' to contain text 'Darren testuser,customer today'. (1)
  Expected '<tr>
                <td>Hillary</td>
                <td>administrator</td>
                <td>yesterday</td>
            </tr>' to contain text 'Hillary administrator yesterday'. (2)
1 spec in 0.283s.
>> 2 failures

另一个实验是使用jQuery.text()提取，然后我仍然有错误，因为所有的空格：

    it('should find correct text in table with jQuery.text()', function () {
        expect( $('#users').find('tbody tr').first().text() ).toContain('Darren testuser,customer today');
        expect( $('#users').find('tbody tr').last().text()  ).toContain('Hillary administrator yesterday');

    });

给出这个失败：

Testexample::  should find correct text in table with jQuery.text(): failed
  Expected '
                Darren
                testuser,customer
                today
            ' to contain 'Darren testuser,customer today'. (1)
  Expected '
                Hillary
                administrator
                yesterday
            ' to contain 'Hillary administrator yesterday'. (2)
1 spec in 0.291s.
>> 2 failures

Capybara（用于 ruby​​）有一种方法来规范化文本，这样我总能看到我的 HTML 的合理文本表示。如何以简单的方式规范空白，以便进行这样的验证？

（我不希望得到像“你不应该跨 html 元素进行测试”这样的答案......因为这是问题的前提。实际上我喜欢跨多个元素做出断言：它可读、简短，并且可以快速查看东西是否正常工作。当我从外向内测试时也非常必要）

Answer 1

我经常在我的项目中添加这样的东西：

String.prototype.normalizeSpace = function() {
  return this.replace(/\s\s+/g, ' ');
}

所以在.text() 之后，您可以添加对.normalizeSpace() 的调用

Answer 2

感谢 Tobias 的回答，我最终对此进行了改进并编写了自己的自定义匹配器。现在我可以写了：

        expect( $('#users').find('tbody tr').first() ).toHaveNormalizedText('Darren testuser,customer today');

匹配器代码——添加到我的 describe() 场景的 beforeEach() 块中：

        this.addMatchers({
            toHaveNormalizedText: function(expected) {
                var actualText = $.trim(this.actual.text()).replace(/\s+/g, ' ');
                var result = actualText === expected;
                if( result) return result;
                //rest is only if it fails
                var notText = this.isNot ? " not" : "";
                var charcodes = [];
                for(var i=0; i<actualText.length; i++){
                    charcodes.push(actualText.charCodeAt(i));
                    if(i>23) break;
                }
                this.message = function () {return 'Expected "' + actualText + notText + '" to match "'+expected+'"\n\nFirst 25 charcodes:\n'+charcodes;};
                return result;
            }
        });

关于此的几点说明。这是实际的替换：

$.trim(this.actual.text()).replace(/\s+/g, ' ');

$.trim() 对我的 html 结构很重要，它确实在 text() 字符串的开头包含空格。

this.message = function () {return 'Expected "' + actualText + notText + '" to match "'+expected+'"\n\nFirst 25 charcodes:\n'+charcodes;};

this.message 是 jasmine 的自定义错误信息。这个字符串在出错时输出这样的字符串：

failed
  Expected "Darren testuser,customer todaiiy" to match "Darren testuser,customer today"

First 25 charcodes:
68,97,114,114,101,110,32,116,101,115,116,117,115,101,114,44,99,117,115,116,111,109,101,114,32 (1)

我决定添加字符代码，因为有一次我遇到了字符代码 10（换行符）和 32（空格）的问题。

Answer 3

对于 Jasmine v2，我是这样写的：

jasmine.addMatchers({
  toHaveTrimText: function() {
    return {
      compare: function(actual, expected) {
        var actualText = $(actual).text().trim();
        var result = {
          pass: actualText === expected,
          message: 'Expected "' + actualText + '" to match "' + expected + '"'
        }
        return result;
      }
    }
  }
});

我也在使用https://github.com/velesin/jasmine-jquery。