Fix issues with submittable-textarea, refactor/add page objects

tests/integration/components/editor-with-preview-test.js

@@ -5,7 +5,6 @@ import stubService from 'code-corps-ember/tests/helpers/stub-service';
 import PageObject from 'ember-cli-page-object';
 import component from 'code-corps-ember/tests/pages/components/editor-with-preview';
 import { initialize as initializeKeyboard } from 'ember-keyboard';
-import { triggerKeyDown } from 'ember-keyboard';
 
 const {
   Object,
@@ -174,15 +173,14 @@ test('it clears the editor style when previewing and done loading', function(ass
   assert.notOk(page.style);
 });
 
-test('it sends the modifiedSubmit action with ctrl+enter', function(assert) {
-  assert.expect(2);
+test('it sends the modifiedSubmit action with ctrl/cmd + enter', function(assert) {
+  assert.expect(1);
 
   this.on('modifiedSubmit', () => {
-    assert.ok(true);
+    assert.equal(page.textarea.value, '', 'Action was called, input is unchanged.');
   });
+
   page.render(hbs`{{editor-with-preview modifiedSubmit="modifiedSubmit"}}`);
 
-  page.focus();
-  triggerKeyDown('Enter+cmd');
-  assert.equal(page.textarea.value, '');
+  page.textarea.keySubmit();
 });

tests/integration/components/submittable-textarea-test.js

@@ -1,43 +1,44 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
-import { triggerKeyDown, initialize } from 'ember-keyboard';
+import pageComponent from 'code-corps-ember/tests/pages/components/submittable-textarea';
+import PageObject from 'ember-cli-page-object';
+
+let page = PageObject.create(pageComponent);
+
+function renderPage() {
+  page.render(hbs`{{submittable-textarea modifiedSubmit=modifiedSubmitHandler}}`);
+}
+
+function setHandler(context, modifiedSubmitHandler = () => {}) {
+  context.set('modifiedSubmitHandler', modifiedSubmitHandler);
+}
 
 moduleForComponent('submittable-textarea', 'Integration | Component | submittable textarea', {
   integration: true,
-
   beforeEach() {
-    initialize();
+    page.setContext(this);
+    setHandler(this);
+  },
+  afterEach() {
+    page.removeContext();
   }
 });
 
 // This test is necessary because a new line after yield in the file will
 // cause a new line in the textarea itself
 test('it has no extra content when created', function(assert) {
-  this.render(hbs`{{submittable-textarea}}`);
-
-  assert.equal(this.$('textarea').val().trim(), '');
+  renderPage();
+  assert.equal(page.value, '', 'Element is blank.');
 });
 
-test('it sends the modifiedSubmit action with ctrl+enter', function(assert) {
-  assert.expect(2);
+test('it sends the modifiedSubmit action on command/ctrl + enter', function(assert) {
+  assert.expect(1);
 
-  this.on('modifiedSubmit', () => {
-    assert.ok(true);
+  setHandler(this, () => {
+    assert.equal(page.value, '', 'Action was called. Input content was unchanged.');
   });
-  this.render(hbs`{{submittable-textarea modifiedSubmit="modifiedSubmit"}}`);
 
-  triggerKeyDown('ctrl+Enter', this.$('textarea'));
-  assert.equal(this.$('textarea').val().trim(), '');
-});
-
-test('it sends the modifiedSubmit action with cmd+enter', function(assert) {
-  assert.expect(2);
-
-  this.on('modifiedSubmit', () => {
-    assert.ok(true);
-  });
-  this.render(hbs`{{submittable-textarea modifiedSubmit="modifiedSubmit"}}`);
+  renderPage();
 
-  triggerKeyDown('cmd+Enter', this.$('textarea'));
-  assert.equal(this.$('textarea').val().trim(), '');
+  page.keySubmit();
 });

tests/pages/components/editor-with-preview.js

@@ -1,14 +1,12 @@
 import {
   attribute,
   clickable,
-  fillable,
   hasClass,
   isVisible,
-  text,
-  triggerable,
-  value
+  text
 } from 'ember-cli-page-object';
 import codeThemeSelector from 'code-corps-ember/tests/pages/components/code-theme-selector';
+import submittableTextarea from 'code-corps-ember/tests/pages/components/submittable-textarea';
 
 export default {
   scope: '.editor-with-preview',
@@ -28,20 +26,12 @@ export default {
     isActive: hasClass('active')
   },
 
-  focus: triggerable('focus', 'textarea'),
+  textarea: submittableTextarea,
 
   isEditing: hasClass('editing'),
   isPreviewing: hasClass('previewing'),
 
   spinnerIsVisible: isVisible('.spinner'),
 
-  style: attribute('style'),
-
-  textarea: {
-    scope: 'textarea',
-    fillIn: fillable(),
-    isFocused: hasClass('focused'),
-    placeholder: attribute('placeholder'),
-    value: value()
-  }
+  style: attribute('style')
 };

tests/pages/components/submittable-textarea.js

@@ -0,0 +1,20 @@
+import {
+  attribute, fillable, hasClass, triggerable, value
+} from 'ember-cli-page-object';
+import { triggerKeyDown } from 'ember-keyboard';
+
+export default {
+  scope: 'textarea',
+  fillIn: fillable(),
+  focus: triggerable('focus', ''),
+  isFocused: hasClass('focused'),
+
+  keySubmit() {
+    this.focus();
+    triggerKeyDown('Enter+cmd');
+    return this;
+  },
+
+  placeholder: attribute('placeholder'),
+  value: value()
+};