ember.js Emberjs 3.0测试:如何按内容选择链接

0vvn1miw  于 2022-11-05  发布在  其他
关注(0)|答案(3)|浏览(153)

下面是一个显然在Ember.js 2.15中有效,但在3.0版本中似乎无效的测试:* 无法在“元素”上执行“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/

flmtquvp

flmtquvp1#

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

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

在我的验收测试中,我将调用

await click(".menu-contact");
xam8gpfp

xam8gpfp2#

@ember/test-helpers的新find助手在后台使用浏览器的原生document.querySelector而不是jQuery。不幸的是,由于:contains不是一个真实的的CSS选择器,因此没有任何浏览器支持它。
如果您使用moduleForAcceptance而不是setupApplicationTest,那么旧的全局find助手仍然可用。我不知道将来是否有计划弃用它。
就我个人而言,我建议在元素上放置一个类或data-test-属性,并以这种方式搜索它。

s5a0g9ez

s5a0g9ez3#

我在升级的时候遇到了这个问题,我想有一种方法可以恢复jQuery伪选择器。这有点笨拙,所以考虑一下是否应该按照其他人的建议重写。

  1. import jQuery(假设它仍然在您的应用程序中)
    1.使用$(your-old-selector-string)[0]获取一个普通DOM元素
    1.将元素传递给测试助手
    我不相信这是健壮的或未来的证明,但它可能是有趣的升级过程中,以获得绿色测试之前,处理弃用和诸如此类的。
    以最初的例子为例,并将我在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');
    });
});

相关问题