Ember测试概述 #

        ┌─────────┐
        │ 应用测试 │  少量
        ├─────────┤
        │ 集成测试 │  中等
        ├─────────┤
        │ 单元测试 │  大量
        └─────────┘

// tests/test-helper.js
import Application from 'my-app/app';
import config from 'my-app/config/environment';
import * as QUnit from 'qunit';
import { setApplication } from '@ember/test-helpers';
import { setup } from 'qunit-dom';
import { start } from 'ember-qunit';

setApplication(Application.create(config.APP));

setup(QUnit.assert);

start();

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, click, fillIn } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';

ember install ember-test-selectors

<button data-test-submit>提交</button>

await click('[data-test-submit]');

# 运行所有测试
ember test

# 交互模式
ember test --server

# 运行特定测试
ember test --filter "user-card"

# 指定浏览器
ember test --browser chrome

tests/
├── acceptance/           # 应用测试
│   └── login-test.js
├── integration/          # 集成测试
│   └── components/
│       └── user-card-test.js
├── unit/                 # 单元测试
│   ├── models/
│   │   └── post-test.js
│   └── services/
│       └── session-test.js
├── helpers/              # 测试助手
├── index.html
└── test-helper.js

// testem.js
module.exports = {
  test_page: 'tests/index.html?hidepassed',
  disable_watching: true,
  launch_in_ci: ['Chrome'],
  launch_in_dev: ['Chrome'],
  browser_start_timeout: 120,
  browser_args: {
    Chrome: {
      ci: [
        '--headless',
        '--disable-gpu',
        '--disable-dev-shm-usage',
        '--disable-software-rasterizer',
        '--mute-audio',
        '--remote-debugging-port=0',
        '--window-size=1440,900',
      ],
    },
  },
};

// 好的命名
module('Integration | Component | user-card', function (hooks) {
  test('it renders user name', async function (assert) {});
  test('it shows email when showEmail is true', async function (assert) {});
});

// 避免
module('user-card', function (hooks) {
  test('test1', async function (assert) {});
});

test('it calculates total correctly', async function (assert) {
  // Arrange - 准备
  const cart = new ShoppingCart();
  cart.addItem({ price: 10, quantity: 2 });
  cart.addItem({ price: 5, quantity: 3 });

  // Act - 执行
  const total = cart.total;

  // Assert - 断言
  assert.strictEqual(total, 35, 'Total should be 35');
});

module('Integration | Component | counter', function (hooks) {
  setupRenderingTest(hooks);

  hooks.beforeEach(function () {
    // 每个测试前的设置
    this.counter = 0;
  });

  hooks.afterEach(function () {
    // 每个测试后的清理
  });

  test('it increments', async function (assert) {
    // 测试代码
  });
});

// 相等
assert.strictEqual(actual, expected, 'message');

// 深度相等
assert.deepEqual(actual, expected, 'message');

// 布尔
assert.true(value, 'message');
assert.false(value, 'message');

// 存在
assert.ok(value, 'message');
assert.notOk(value, 'message');

// DOM断言
assert.dom('.title').hasText('Hello');
assert.dom('.title').exists();
assert.dom('.title').doesNotExist();
assert.dom('input').hasValue('test');
assert.dom('button').isDisabled();
assert.dom('input').isFocused();