rafaltrojanowski · September 26, 2018 06:11
diff --git a/components.update-counter.js b/components.update-counter.js
 import Component from '@ember/component'

 export default Component.extend({
  
  // Note: I do believe that counter should start couting from 0
  // that has been fixed with following implementation.
  // Previous implemention updated counter on component initialization, so in fact it resulted with counting from 1

  count: 0,
  interval: 1000, // I would extract that property to be able to modify it quickly without jumping into details of implementation.
  
  init() {
    this._super(...arguments); // this line was missing
    // By extending init(), it's important that preserve that key functionality that init() does before you write whatever you need to write. Otherwise you will see an error in console.
    // NOTE: Altrernatively we could use didInsertElement() hook.
    this.start();     
  },
  
  // Destroy hook which prevents:
  // "Error: Assertion Failed: calling set on destroyed object
  willDestroy() {
    this._super(...arguments);
    this.stop();
  },
  
  start() {
    this.set('intervalId', window.setInterval(() => this.update(), this.get('interval')))
    // I used window.setInterval function to to be able to clear interval
  },
  
  update() {
    // that's simply our tick logic
    // we could simply modify this logic to use time if we need
    Ember.run(() => this.incrementProperty('count'))
  },
 	
  stop() {
    window.clearInterval(this.get('intervalId'));
    // After destroying element from the DOM, we won't call update anymore.
    // That's very important to prevent errors in console.
    // Initialy Ember.run.later attempted to set a value on non existing DOM object.
  },
  
 });
diff --git a/controllers.application.js b/controllers.application.js
 import Ember from 'ember';

 export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
 });
diff --git a/router.js b/router.js
 import EmberRouter from '@ember/routing/router';
 import config from './config/environment';

 const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
 });

 Router.map(function() {
  this.route('blog', { path: '/blog' });
 });

 export default Router;
diff --git a/routes.blog.js b/routes.blog.js
 import Ember from 'ember';

 export default Ember.Route.extend({
 });
diff --git a/templates.application.hbs b/templates.application.hbs
 <h1>Welcome to {{appName}}</h1>
 <br>
 <br>

 {{outlet}}

 {{#link-to "blog" }} "Blog" {{/link-to}}

 <br>
 <br>
diff --git a/templates.blog.hbs b/templates.blog.hbs
 Blog here

 {{update-counter}}

 {{#link-to "index" }} "Home" {{/link-to}}
diff --git a/templates.components.update-counter.hbs b/templates.components.update-counter.hbs
 {{count}}
diff --git a/tests.helpers.destroy-app.js b/tests.helpers.destroy-app.js
 import { run } from '@ember/runloop';

 export default function destroyApp(application) {
  run(application, 'destroy');
 }
diff --git a/tests.helpers.resolver.js b/tests.helpers.resolver.js
 import Resolver from '../../resolver';
 import config from '../../config/environment';

 const resolver = Resolver.create();

 resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
 };

 export default resolver;
diff --git a/tests.helpers.start-app.js b/tests.helpers.start-app.js
 import Ember from 'ember';
 import Application from '../../app';
 import config from '../../config/environment';

 const { run } = Ember;
 const assign = Ember.assign || Ember.merge;

 export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
 }
diff --git a/tests.test-helper.js b/tests.test-helper.js
 import resolver from './helpers/resolver';
 import {
  setResolver
 } from 'ember-qunit';
 import { start } from 'ember-cli-qunit';

 setResolver(resolver);
 start();
diff --git a/twiddle.json b/twiddle.json
 {
  "version": "0.15.0",
  "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"
  },
  "addons": {
    "ember-data": "3.2.0"
  }
 }
	import Component from '@ember/component'

	export default Component.extend({

	// Note: I do believe that counter should start couting from 0
	// that has been fixed with following implementation.
	// Previous implemention updated counter on component initialization, so in fact it resulted with counting from 1

	count: 0,
	interval: 1000, // I would extract that property to be able to modify it quickly without jumping into details of implementation.

	init() {
	this._super(...arguments); // this line was missing
	// By extending init(), it's important that preserve that key functionality that init() does before you write whatever you need to write. Otherwise you will see an error in console.
	// NOTE: Altrernatively we could use didInsertElement() hook.
	this.start();
	},

	// Destroy hook which prevents:
	// "Error: Assertion Failed: calling set on destroyed object
	willDestroy() {
	this._super(...arguments);
	this.stop();
	},

	start() {
	this.set('intervalId', window.setInterval(() => this.update(), this.get('interval')))
	// I used window.setInterval function to to be able to clear interval
	},

	update() {
	// that's simply our tick logic
	// we could simply modify this logic to use time if we need
	Ember.run(() => this.incrementProperty('count'))
	},

	stop() {
	window.clearInterval(this.get('intervalId'));
	// After destroying element from the DOM, we won't call update anymore.
	// That's very important to prevent errors in console.
	// Initialy Ember.run.later attempted to set a value on non existing DOM object.
	},

	});
	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName: 'Ember Twiddle'
	});
	import EmberRouter from '@ember/routing/router';
	import config from './config/environment';

	const Router = EmberRouter.extend({
	location: 'none',
	rootURL: config.rootURL
	});

	Router.map(function() {
	this.route('blog', { path: '/blog' });
	});

	export default Router;
	import Ember from 'ember';

	export default Ember.Route.extend({
	});
	<h1>Welcome to {{appName}}</h1>
	<br>
	<br>

	{{outlet}}

	{{#link-to "blog" }} "Blog" {{/link-to}}

	<br>
	<br>
	Blog here

	{{update-counter}}

	{{#link-to "index" }} "Home" {{/link-to}}
	import { run } from '@ember/runloop';

	export default function destroyApp(application) {
	run(application, 'destroy');
	}
	import Resolver from '../../resolver';
	import config from '../../config/environment';

	const resolver = Resolver.create();

	resolver.namespace = {
	modulePrefix: config.modulePrefix,
	podModulePrefix: config.podModulePrefix
	};

	export default resolver;
	import Ember from 'ember';
	import Application from '../../app';
	import config from '../../config/environment';

	const { run } = Ember;
	const assign = Ember.assign \|\| Ember.merge;

	export default function startApp(attrs) {
	let application;

	let attributes = assign({rootElement: "#test-root"}, config.APP);
	attributes = assign(attributes, attrs); // use defaults, but you can override;

	run(() => {
	application = Application.create(attributes);
	application.setupForTesting();
	application.injectTestHelpers();
	});

	return application;
	}
	import resolver from './helpers/resolver';
	import {
	setResolver
	} from 'ember-qunit';
	import { start } from 'ember-cli-qunit';

	setResolver(resolver);
	start();