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');
});