Rewrite busy-model-wrapper tests to use dynamically defined page object. (#1625)

Author: Dave Connis

app/components/common/busy-model-wrapper.js

@@ -1,9 +1,8 @@
 import Component from '@ember/component';
 
 export default Component.extend({
-  tagName:'',
   model: null,
 
-  onSaving: 'Saving...',
-  onDeleting: 'Deleting...'
+  onDeleting: 'Deleting...',
+  onSaving: 'Saving...'
 });

tests/integration/components/common/busy-model-wrapper-test.js

@@ -1,25 +1,56 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import { set } from '@ember/object';
+import PageObject from 'ember-cli-page-object';
+
+// Since this is a tagless component, we cannot effectively use a typical page
+// object.
+//
+// Instead, we render the tagless form inside a test container and dynamically
+// define a page object using the scope of the test container.
+
+let page = PageObject.create({ scope: '.test-container' });
+
+function renderPage() {
+  page.render(hbs`
+    <div class="test-container">
+      {{#common/busy-model-wrapper model=model}}
+        Yielded
+      {{/common/busy-model-wrapper}}
+    </div>
+  `);
+}
 
 moduleForComponent('common/busy-model-wrapper', 'Integration | Component | common/busy model wrapper', {
-  integration: true
+  integration: true,
+  beforeEach() {
+    page.setContext(this);
+  },
+  afterEach() {
+    page.removeContext();
+  }
 });
 
-test('it renders', function(assert) {
+test('it shows "Deleting" if model is saving and is deleted', function(assert) {
+  let model = { isSaving: true, isDeleted: true };
+  set(this, 'model', model);
 
-  // Set any properties with this.set('myProperty', 'value');
-  // Handle any actions with this.on('myAction', function(val) { ... });
+  renderPage();
+  assert.equal(page.text, 'Deleting...', 'A deletion indicator is rendered in place of the yielded block.');
+});
 
-  this.render(hbs`{{common/busy-model-wrapper}}`);
+test('it shows "Saving" if model is saving and not deleted', function(assert) {
+  let model = { isSaving: true, isDeleted: false };
+  set(this, 'model', model);
 
-  assert.equal(this.$().text().trim(), '');
+  renderPage();
+  assert.equal(page.text, 'Saving...', 'A deletion indicator is rendered in place of the yielded block.');
+});
 
-  // Template block usage:
-  this.render(hbs`
-    {{#common/busy-model-wrapper}}
-      template block text
-    {{/common/busy-model-wrapper}}
-  `);
+test('it shows yield if model is neither saving or deleted', function(assert) {
+  let model = { isSaving: false, isDeleted: false };
+  set(this, 'model', model);
 
-  assert.equal(this.$().text().trim(), 'template block text');
+  renderPage();
+  assert.equal(page.text, 'Yielded', 'The yielded block is rendered.');
 });