ro0gr

import Ember from 'ember';

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

ro0gr

import Ember from 'ember';

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

ro0gr

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)

ro0gr

import Ember from 'ember';

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

ro0gr

<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>

ro0gr

import Ember from 'ember';

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

ro0gr

import Ember from 'ember';

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

ro0gr

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

• The Challenge
• Modeling Components
• Integration tests

The Challenge

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

ro0gr

Async

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

ro0gr

import Ember from 'ember';

export default Ember.Controller.extend({
  router: Ember.inject.service(),
  
  queryParams: ['test'],
  
  test: `I'm changed o_O`,
  
  actions: {