Тест визуализированного компонента завершается сбоем после обновления до Ember 1.10

Я провожу модульное тестирование компонента, в частности визуализируемой формы. Я подхожу к этому в значительной степени как описано в Руководствах по Ember.

В частности, компонент имеет три вычисляемых свойства, которые отображают разные классы отображаемых элементов в зависимости от базовой модели. Я настраиваю свойства в блоках Ember.run(), а затем снова смотрю на визуализированный компонент.

Что интересно здесь, так это то, что вычисляемые свойства, кажется, не пересчитываются, даже если я касаюсь атрибута, который они наблюдают. Более поздние тесты, которые не проверяют отрисовку — только возврат от компонента — проходят.

Вот мой тестовый код:

moduleForComponent('wizard-tab', "Component - WizardTab", {
  setup: function () {
    this.tab = this.subject({ step: 2, stepCompleted: 1, tab: tabs.all()[1] });
  }
});

test('#render', function () {
  let tab = this.tab;
  ok(this.$().find('span.wizard-tab-detail').length, "Active tab has a detail span"); // Passes
  // Note that both of the additional states observe stepCompleted
  // so I need to touch that to get them to recalculate
  Ember.run( function () {
    tab.set('stepCompleted', 2);
    tab.set('tab', WizardTab.all()[4]);
  });

  ok(this.$().find('span.wizard-tab-icon-disabled').length, "Future tabs have a disabled class"); // Fails

  Ember.run( function () {
    tab.set('stepCompleted', 3);
    tab.set('tab', WizardTab.all()[1]);
  });

  ok(this.$().find('span.wizard-tab-icon-done').length, "Inactive tabs have a done class"); // Fails
});

Первое утверждение проходит, следующие два терпят неудачу. Используя операторы console.log, я проверил, что set() работают, но свойство, вычисленное на их основе, возвращает неправильный результат.

Вот одно из вычисляемых определений свойств:

  disabled: function() {
    return this.get('tab.stepNumber') > (this.get('stepCompleted') + 1);
  }.property('stepCompleted')

(Я буквально получаю false за 5 > 2, когда добавляю console.log проверок для этого сравнения.) Есть ли что-то, что я упустил, что помешало бы этому обновлению при проверке последующих визуализаций компонента?

Это ember CLI 0.2.0, Ember 1.10.0 и ember-cli-qunit 0.3.8.

ETA: Вероятно, актуально: этот тест проходит на Ember 1.8 и ember-cli-qunit 0.3.1. Это обновление Ember CLI 0.2.0 и сопутствующие обновления Ember и ember-cli-qunit вызывают сбой.

(ETA: примечание из комментария kiwiupover ниже о том, что этот раздел ниже не имеет отношения к проблеме; руководства могут не показывать наилучший текущий способ сделать это.)

Обратите внимание, что в направляющих используется аналогичный шаблон:

test('changing colors', function() {

  // this.subject() is available because we used moduleForComponent
  var component = this.subject();

  // we wrap this with Ember.run because it is an async function
  Ember.run(function() {
    component.set('name','red');
  });

  // first call to $() renders the component.
  equal(this.$().attr('style'), 'color: red;');

  // another async function, so we need to wrap it with Ember.run
  Ember.run(function() {
    component.set('name', 'green');
  });

  equal(this.$().attr('style'), 'color: green;');
});

Я попытался обернуть второе и третье утверждения в andThen(), но это вызвало ошибки — andThen() не определено.


person pjmorse    schedule 13.03.2015    source источник
comment
Я только что отправил вопрос в репозиторий ember-mocha github.com/switchfly/ember- mocha/issues/25 и, как вы можете видеть в ответе @rwjblue, документы неверны. Я просто не успел их обновить.   -  person kiwiupover    schedule 13.03.2015
comment
Это объясняет, почему andThen не работает, спасибо. До сих пор не уверен, почему тесты терпят неудачу без них, хотя сейчас это звучит так, как будто точное следование примеру руководств — не самый надежный способ создания теста.   -  person pjmorse    schedule 13.03.2015


Ответы (1)


Я заработал, запустив новую ветку разработки (наша ветка по умолчанию) и повторно запустив обновление. Вот различия между моим первоначальным проходом и тем, что сработало:

  • Больше обновлений компонентов, я думаю, только потому, что с моей первой попытки прошло некоторое время. ember-resolver, loader.js, ember-cli-app-version и ember-cli-dependency-checker все поднялись. Я не знаю, имело ли что-то из этого значение, но они изменились.
  • Я думаю, что ключевой частью было выделение трех тестов в отдельные блоки тестов, а также обновление предмета в блоке Ember.run() для каждого теста, в котором использовались разные значения атрибутов из компонента настройки.

Вот как выглядели три теста, когда они прошли:

moduleForComponent('wizard-tab', "Component - WizardTab", {
  setup: function () {
    this.tab = this.subject({ step: 2, stepCompleted: 1, tab: WizardTab.all()[1] });
  }
});

test('Rendered active tabs have a detail span', function () {
  let tab = this.tab;
  ok(this.$().find('span.wizard-tab-detail').length, "Active tab has a detail span");
});

test('Rendered future tabs have a disabled class', function () {
  let tab = this.tab;
  Ember.run( function () {
    tab.set('step', 2);
    tab.set('stepCompleted', 2);
    tab.set('tab', WizardTab.all()[4]);
  });
  ok(this.$().find('span.wizard-tab-icon-disabled').length, "Future tabs have a disabled class");
});

test('Rendered inactive tabs have a done class', function () {
  let tab = this.tab;
  Ember.run( function () {
    tab.set('step', 2);
    tab.set('stepCompleted', 3);
    tab.set('tab', WizardTab.all()[1]);
  });
  ok(this.$().find('span.wizard-tab-icon-done').length, "Inactive tabs have a done class");
});

Я считаю, что последнее изменение — переход от одного теста с несколькими Ember.run() блоками к трем — это то, что действительно помогло. Я использовал несколько строк {{log value}} в шаблоне, чтобы посмотреть, какие значения отправляются в шаблон, и он использовал тему из блока setup все три раза, пока я не добавил блоки Ember.run().

person pjmorse    schedule 19.03.2015