Emberjs 3.0 测试：如何按内容 select link

Question

以下是在 Ember.js 2.15 中显然有效但在 3.0 版中似乎无效的测试： 无法在 'Element' 上执行 'querySelector'：'a:contains('Contact')' 不是有效的选择器。

import { module, test } from 'qunit';
import { visit, currentURL, click } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';

module('Acceptance | list rentals', function(hooks) {
  setupApplicationTest(hooks);
    test('should show link to contact', async function(assert){
            await visit('/');
            await click("a:contains('Contact')");
            assert.equal(currentURL(),'/contact','should navigate to contact');
    });
});

如何在 Ember.js 3.0 中执行此操作？

我在在线 Ember 指南中找不到它。因此，教程似乎指的是以前的版本。

PS:应用程序的模板文件包含

 {{#link-to "contact"}}
    Contact
  {{/link-to}}

PS：使用这种选择器的想法来自于Ember 版本...3.0 的教程！（见末尾https://guides.emberjs.com/v3.0.0/tutorial/routes-and-templates/）

编辑：Emberjs 3.1 指南已经可用，教程示例最终匹配新代码：

https://guides.emberjs.com/v3.1.0/tutorial/model-hook/

Answer 1

来自 @ember/test-helpers 的新 find 助手在后台使用浏览器的本机 document.querySelector 而不是 jQuery。不幸的是，由于 :contains 不是真正的 CSS 选择器，因此任何浏览器都不支持它。

旧的全局 find 助手仍然可用，如果您使用 moduleForAcceptance 而不是 setupApplicationTest。我不知道将来是否有任何弃用的计划。

我个人建议在元素上放置一个 class 或 data-test- 属性并以这种方式搜索它。

Answer 2

我会将自定义 class 名称添加到 {{#link-to}} 并将该 class 名称用作点击事件的选择器

{{#link-to "contact" class="menu-contact"}}
   Contact
{{/link-to}}

在我的验收测试中我会打电话给

 await click(".menu-contact");

Answer 3

我在升级过程中遇到了这个问题，我认为有办法恢复 jQuery pseudo-selectors。有点hacky，所以想想你是否应该像其他人建议的那样re-write。

导入 jQuery（假设它仍在您的应用中）
使用$(your-old-selector-string)[0]得到一个普通的DOM元素
将元素传递给测试助手

我不确定这是否可靠或 future-proof，但在处理弃用和其他问题之前进行升级期间进行绿色测试可能很有趣。

采用原始示例并应用我在正在更新的 3.8 应用程序中所做的工作：

// changed here
import $ from 'jquery'; // assuming @ember/jquery is in packages.json 

import { module, test } from 'qunit';
import { visit, currentURL, click } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';

module('Acceptance | list rentals', function(hooks) {
  setupApplicationTest(hooks);
    test('should show link to contact', async function(assert){
            await visit('/');
            // changed here
            await click($("a:contains('Contact')")[0]);
            assert.equal(currentURL(),'/contact','should navigate to contact');
    });
});

Emberjs 3.0 测试：如何按内容 select link

Emberjs 3.0 tests: how to select link by content

ember.js