Lifeline Test Issue

components.progress-bar.js

import Component from '@ember/component';
import { computed } from '@ember/object';
import {
  pollTask,
  runTask,
  runDisposables,
  cancelPoll
} from 'ember-lifeline';
import Ember from 'ember';

export default Component.extend({
  // Passed into component
  didChangeAction() {},

  // Can be overridden for testing
  timing: computed(function() {
    // Start with 0 to keep 1-indexed list
    if (Ember.testing) {
      return [0, 100, 1000, 100, 1000, 100];
    }
    return [0, 2000, 8800, 22100, 33200, 56900]; // in ms
  }),

  progressionClass: '',

  // For automated testing
  progressBarPollToken: null,

  didInsertElement() {
    this._super();

    let count = 0;

    const token = pollTask(this, next => {
      debugger;
      if (count >= 5) {
        this.set('progressionClass', `progress-bar__progression--${count}`);
        this.didChangeAction(count);
        cancelPoll(this);
      } else {
        count++;
        this.set('progressionClass', `progress-bar__progression--${count}`);
        this.didChangeAction(count);
        runTask(this, next, this.timing[count]);
      }
    });

    this.set('progressBarPollToken', token);
  },

  didRender() {
    debugger;
  },

  willDestroy() {
    this._super();
    runDisposables(this); // ensure that lifeline will clean up any remaining async work
  },
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    didChange(transitionNumber) {
      debugger;
      console.log(transitionNumber)
    }
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.progress-bar__grey-background {
  height: 16px;
  border-radius: 16px;
  background: grey;
}

.progress-bar__progression {
  width: 2.5%;
  height: 100%;
  background-color: blue;
  border-radius: 16px;
}

.progress-bar__progression--1 {
  width: 13%;
  transition: width 8.8s ease-in;
}

.progress-bar__progression--2 {
  width: 26%;
  transition: width 13.3s linear;
}

.progress-bar__progression--3 {
  width: 63%;
  transition: width 11.1s linear;
}

.progress-bar__progression--4 {
  width: 77%;
  transition: width 23.7s ease-out;
}

.progress-bar__progression--5 {
  width: 100%;
  transition: width 60s ease-out;
}

templates.application.hbs

<h1>Please wait...</h1>
<br>
<br>
{{outlet}}

{{progress-bar didChangeAction=(action "didChange")}}
<br>
<br>

templates.components.progress-bar.hbs

<div class="progress-bar__grey-background">
  <div class="progress-bar__progression {{progressionClass}}"></div>
</div>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2",
    "ember-lifeline": "^3.1.0",
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}