Ruslan Hrabovyi ro0gr

This is a short guide to get you started writing page objects and using them in your tests.

The Challenge

Suppose we have a simple login form component with the following result markup:

We could supply page objects with async is(.*) properties. We need to choose a good prefix for waiting:

// today
await waitUntil(() => loginPage.isVisible);

// vs proposed
await loginPage.untilIsVisible

	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName: 'Ember Twiddle'
	});

	import Ember from 'ember';

	export default Ember.Component.extend({
	submit(e) {
	e.preventDefault();
	}
	});

	import Ember from 'ember';

	export default Ember.Component.extend({
	a: Ember.inject.service(),

	willDestroyElement() {
	setTimeout(() => {
	alert(`Component isDestroyed: ${this.isDestroyed}`);
	alert(`service.title: ${this.get('a').title}`);
	}, 1000)

	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName: 'Ember Twiddle'
	});

	<div class="AddonSearch">
	<form data-test-search>
	<label for="addon-search-input">Search For Addons:</label>

	<input id="addon-search-input" />

	<button>GO</button>
	</form>

	<ul data-test-addon-list>

	import Ember from 'ember';

	export default Ember.Component.extend({
	actions: {
	mouseWheel(e) {
	if (document.hasFocus(e.target)) {
	e.preventDefault()
	}
	}
	}

	import Ember from 'ember';

	export default Ember.Controller.extend({
	router: Ember.inject.service(),

	queryParams: ['test'],

	test: `I'm changed o_O`,

	actions: {