Ember-Test-Selectors 使用指南

Ember-Test-Selectors 使用指南

ember-test-selectorsEnabling better element selectors in Ember.js tests项目地址:https://gitcode.com/gh_mirrors/em/ember-test-selectors

项目介绍

Ember-Test-Selectors 是一个由Mainmatter GmbH及其贡献者开发的 Ember.js 测试辅助工具，旨在提升 Ember 应用中的元素选择器质量。本项目通过自动移除生产构建中以 data-test- 开头的属性，帮助开发者在测试环境中保留这些选择器，从而简化测试编写和维护过程。它兼容 Ember 3.8 及以上版本，Ember CLI 3.8 或更高版本，并且要求 Node.js 12+ 环境。

项目快速启动

要将 ember-test-selectors 添加到你的 Ember 项目中，只需遵循以下简单步骤：

1. 安装依赖：

   npm install --save-dev ember-test-selectors
   

   或如果你使用 Yarn：

   yarn add --dev ember-test-selectors
   

2. 在你的模板文件中，现在可以安全地使用 data-test-* 属性了，这些属性将在生产构建时自动被移除。例如：

   <article>
     <h1 data-test-post-title data-test-resource-id="{{post.id}}">{{post.title}}</h1>
     <p>{{post.body}}</p>
     <button data-test-like-button>Like</button>
   </article>
   

3. 在测试中，你可以直接利用这些数据测试选择器来查找和交互元素：

   import { assert, dom } from '@ember/test-helpers';
   
   test('testing post title', async function(assert) {
     assert.dom('[data-test-post-title]').hasText('Ember is great');
     await click('[data-test-like-button]');
   });
   

当执行 ember test 时，测试选择器仍然有效，但执行 ember build -prod 后，它们会在最终产出的HTML中被剥离掉。

应用案例与最佳实践

最佳实践

• 对于可测试性和易读性，推荐为重要组件或操作元素添加独一无二的 data-test-* 属性。
• 避免硬编码或复杂的 CSS 选择器，在测试中优先使用 data-test-* 进行元素定位。
• 在组件内部，确保选择器正确应用至包裹元素或具体目标元素上，尤其当不自定义 tagName 时。

示例场景

假设你有一个博客文章列表，每个文章都有一个标题和点赞按钮。通过使用 ember-test-selectors，你可以这样编写测试：

test('liking a post', async function(assert) {
  await visit('/posts');
  const postTitleSelector = '[data-test-post-title="post-1"]';
  const likeButtonSelector = '[data-test-like-button="post-1"]';

  assert.dom(postTitleSelector).hasText('First Post Title');
  
  // Simulate liking the first post
  await click(likeButtonSelector);
  
  // Verify like count increased (assuming there's a way to show the like count)
  assert.dom('.post-likes').hasText('Like Count Increased');
});

这展示了如何结合使用路由访问和数据测试选择器进行组件功能的测试。

典型生态项目集成

虽然此项目本身是为 Ember.js 生态设计的，它直接融入 Ember 的构建流程，并没有特定的“生态项目”作为例子。然而，任何基于 Ember 构建的应用或 Ember Addon 都可以从该库获益。对于 Ember Addons，确保将 ember-test-selectors 放置在 dependencies 而非 devDependencies 中，以确保即使应用程序不直接使用此插件也能正确处理测试选择器。

通过这种方式集成，开发者不仅提升了测试的清晰度和效率，还保证了生产环境的性能不受影响。

ember-test-selectorsEnabling better element selectors in Ember.js tests项目地址:https://gitcode.com/gh_mirrors/em/ember-test-selectors