0

我有一个 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，将 img 更改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');
  });
});

应用程序.hbs

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

测试没有通过，它找不到图像，我还尝试测试组件并将其附加到 DOM，然后测试它是否在 DOM 中，但这并没有产生更好的结果。

请问我该如何测试？

4

0 回答 0