2

我有一个包含不同 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>

假设我想验证表中的每一行都包含正确的文本。茉莉花测试文件：

    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 (for ruby​​) 有一种方法来规范化文本，这样我总能看到我的 HTML 的合理文本表示。我将如何以简单的方式规范空白，以便我可以进行这样的验证？

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

4

3 回答 3

4

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

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

所以在.text()你可以添加一个调用之后.normalizeSpace()

于 2013-12-19T16:53:11.620 回答
3

感谢 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（空格）的问题。

于 2013-12-20T10:03:36.573 回答
1

对于 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。

于 2016-05-02T02:25:18.857 回答