Question

我有一个ember-cli-addon，它添加了一个组件，该组件将具有特定类的div附加到消费应用程序。我试图测试这种集成并且很难设置测试。

我也尝试对组件进行单元测试，但这并不像预期的那样有效。以下是我尝试过的内容：

我已将我的addon目录中的组件复制到tests/dummy/components/jquery-backstretch.js，以便将其提供给虚拟测试应用程序：

的jquery-backstretch.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'jquery-backstretch',
  image: null,
  selector: 'body',
  fade: 0,
  duration: 5000,
  centeredX: true,
  centeredY: true,

  setupJquerybackstretch: function() {
    var image = this.get('image');
    if (! Ember.isEmpty(image)) {
      var options = {
        fade: this.get('fade'),
        centeredX: this.get('centeredX'),
        centeredY: this.get('centeredY')
      };

      var jqbsImage;
      if (Ember.typeOf(image) === 'string') {
        jqbsImage = 'assets/' + image;
      } else if (Ember.isArray(image)) {
        options.duration = this.get('duration');
        jqbsImage = image.map(function(img) {return 'assets/' + img;});
      } else {
        Ember.Logger.error('Ember JQuery-Backstretch: Unsupported "image" format.');
      }

      Ember.$(this.get('selector')).backstretch(jqbsImage, options);
    } else {
      Ember.Logger.error('Ember JQuery-Backstretch: image not supplied.');
    }
  }.on('didInsertElement'),

  teardownJquerybackstretch: function() {
    Ember.$(this.get('selector')).backstretch('destroy');
  }.on('willDestroyElement')
});

这会导致组件将img附加到测试页的body而不是#ember-testing-container，将selector更改为#ember-testingn-container会将img添加到右侧但测试无法找到它：

测试/接受/ jquery的-backstretch.js

import Ember from 'ember';
import {
  module,
  test
} from 'qunit';
import startApp from '../../tests/helpers/start-app';

var application;

module('Acceptance: JqueryBackstretch', {
  beforeEach: function() {
    application = startApp();
  },

  afterEach: function() {
    // Ember.run(application, 'destroy');
  }
});


test('backstretch added to body tag', function(assert) {
  visit('/');

  andThen(function() {
    assert.equal(find('.backstretch > img').length, 1, 'Backstretch found');
  });
});

application.hbs

<h2 id="title">Welcome to Ember.js</h2>
{{jquery-backstretch image="img/emberjs.png"}}
{{outlet}}

测试没有通过，它无法找到图像，我也尝试测试组件并将其附加到DOM然后进行测试以查看它是否在DOM中但是没有＆＃39 ; t产生更好的结果。

我该如何测试？

无法测试将div附加到dom的ember组件

0 个答案: