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

我会将自定义类名添加到{{＃link-to}}并使用该类名作为click事件的选择器

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

在我的验收测试中，我会致电

 await click(".menu-contact");

Answer 2

来自find的新@ember/test-helpers帮助器在幕后使用浏览器的本机document.querySelector而不是jQuery。不幸的是，因为：contains不是真正的CSS选择器，所以任何浏览器都不支持它。

如果您使用find而不是moduleForAcceptance，那么较旧的全球setupApplicationTest帮助仍然可用。我不知道是否有任何计划在将来弃用它。

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

Answer 3

我在升级过程中碰到了这一点，并认为有一种方法可以使jQuery伪选择器返回。这有点hacky，所以请考虑是否应该按照其他人的建议重写。

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

我不确定它是否健壮或可以过时，但是在升级之前要先进行绿色测试，然后再处理弃用之类的事情可能会很有趣。

以原始示例为例，并应用我正在更新的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测试：如何按内容选择链接

3 个答案: