Here is the source code for the controller. The controller connects the view to the model. Thus when coding the controller we need to have:


A few key touch points are highlighted.

Lines like this in "attachEvents" are the key:

this.connectEvent('increment', 'click', 'clickedIncrement');


Where

/*
	controller.js
	Controller is interface and event manager between View and model
*/

/*
	If using this file as a template for another unit test:
	
		1) There are a few "//framework" tags in this file. A
		minor edit or no edit is needed (comment by tag will inform)
		2) The expression "extends TestCase" below is also
		part of the framework support (no edit required)
*/

class Controller extends AbstractController {
	
	//----------------------------
	//Virtual - required
	
	newModel() {
		//framework -- name of model class
		return new Counter();
	}
	
	//----------------------------
	//Virtual - optional
	
	getRefreshableFields() {
		//framework -- add any field names here you want to auto refresh
		//when controller does "refresh()" action. Model should have
		//getter for each, e.g. getWidth, getHeight, etc.
		return ['count', 'log'];
	}
	
	//----------------------------
	//Attach (connect) element events to handler methods
	
	attachEvents() {
		//Attach field event to event handler
		//ui element name, event name, event handler method name
		super.attachEvents();
	
		//actions
		this.connectEvent('increment', 'click', 'clickedIncrement');
		this.connectEvent('decrement', 'click', 'clickedDecrement');
	
		//"change" events (e.g. when a value is typed into a ui input)
		this.connectEvent('count', 'change', 'changedCount');
	}
	
	//-------------------------------
	//Change event handlers -- e.g. when we type something into a field
	
	changedCount(field) {
		//set the view value from ui element "field" into model (convert to number)
		this.model.setCount(parseInt(field.value));
	}
	
	//-------------------------------
	//Action event handlers -- actions (e.g. button clicks 'clicked')
	
	clickedIncrement() {
		this.model.increment();
	}
	
	clickedDecrement() {
		this.model.decrement();
	}
	
	//-------------------------------
	//User friendly type mvc logic here (optional)
	
	
	refreshState() {
		//framework
		//This gives us an opportunity to enable/disable a button per state, etc.
		//OPTIONAL
		//For fun, set count background per if less or greater than zero
		this.elem('count').style.backgroundColor = this.getCountBackColor();
	}
	
	//-------------------------------
	//Helper
	
	getCountBackColor() {
		const count = this.model.getCount();
		if (count === 0) {
			return null;
		}
		return (count > 0) ? 'LightGreen' : 'Yellow';
	}
	
}

//======================================================
//No changes required

function buildController() {
	//one and only controller (global)
	controller = new Controller();
}