write better ember tests - page object

basic-page-object.js

// without page object - bad
test('here is a test that does not use a page object', function(assert) {
  this.render(hbs`{{my-component}}`);
  
  const $button = this.$('#some-button-id');
  const $description = this.$('p');
  
  assert.ok($button.is(':visible'), 'I see the button');
  assert.equal($description.text().trim(), 'Some text', 'The text is shown correctly');
});

// basic page object - better
test('here is another test with a basic page object', function(assert) {
  this.render(hbs`{{my-component}}`);
  
  const page = {
    $button: this.$('#some-button-id'),
    $description: this.$('p')
  };
  
  assert.ok(page.$button.is(':visible'), 'I see the button');
  assert.equal(page.$description.text().trim(), 'Some text', 'The text is shown correctly');
});

ember-page.js

// page.js
import PageObject, {
  text,
  isVisible
} from 'frontend/tests/page-object';

export default PageObject.create({
  // some button
  button: {
    scope: '#some-button-id',
    isVisible: isVisible()
  },
  
  // some p tag
  description: {
    scope: 'p',
    text: text()
  }
});

// the test
import page from 'app/tests/pages/something';

test('here is a test using ember-cli-page-object', function(assert) {
  this.render(hbs`{{my-component}}`);
  
  assert.ok(page.button.isVisible, 'I see the button');
  assert.equal(page.description.text, 'Some text', 'The text is shown correctly');
});