Does moduleForComponent (integration true) support one way bound inputs yet?

[toranb]

I started playing around with some one-way data binding tonight and found that integration tests don't seem to work as they did when I used a simple 2WDB setup. I'm mostly curious if one way bound inputs should work or if that feature is just yet to be implemented :)

ember 2.2.0-beta 2
qunit 1.19.0
ember-qunit 0.4.15
ember-cli-qunit 1.0.3

Here is the integration test that broke once I upgraded from 2WDB to 1WDB

test('name validation is configured to show and hide error messages', function(assert) {
    this.set('model', user);
    this.render(hbs`{{user-detail model=model}}`);
    let $component = this.$('.name-validation-error');
    assert.ok($component.is(':hidden'));
    this.$('.detail-name').val('a').trigger('change');
    assert.ok($component.is(':hidden'));
    this.$('.detail-name').val('').trigger('change');
    assert.ok($component.is(':visible')); //the line that fails the test
});

Here was the original 2WDB template setup

{{input id="name" class="form-control detail-name" value=model.name placeholder="name"}}

Here is the new template (that breaks the integration test)

<input id="name" class="form-control detail-name" placeholder="name" value={{model.name}} oninput={{action "nameDidChange" value="target.value"}} />

And here is the JS for the oninput action

export default Ember.Component.extend({
    actions: {
        nameDidChange: function(value) {
            this.get('model').set('name', value);
        }
    }
});

Here is the full blown example app

https://github.com/toranb/ember-2-skeleton-app

And here is the test (failing part is commented out at the moment)

https://github.com/toranb/ember-2-skeleton-app/blob/master/tests/integration/components/user-detail-test.js

[rwjblue]

Using the technique you describe as one way inputs completely hoses the cursor position. Unless that doesn't matter I would not suggest that you use that mechanism. If you would like a nice reusable one way input you should use ember-one-way-input package (which is an extraction of some work I did in a twiddle).

[rwjblue]

I've already "shut down" for the evening but will try to review in more detail and give a more fully detailed response tomorrow.

[toranb]

No worries my friend :) it's Sunday night and I'm in no hurry

[rwjblue]

Demo of completely broken cursor position with <input oninput={{action 'foo'}}>:

http://ember-twiddle.com/afd593c0bb0130b280c5

[rwjblue]

I'm mostly curious if one way bound inputs should work

Yes, testing of <input oninput={{action 'foo'}}> should be possible.

My initial guess is that you are simulating the wrong event. In your test you are triggering change event after updating the inputs value, but your actual <input> is listening for the input event.

[toranb]

@rwjblue ah that was the issue :) and now the test below works just fine!

test('name validation is configured to show and hide error messages', function(assert) {
    this.set('model', user);
    this.render(hbs`{{user-detail model=model}}`);
    let $component = this.$('.name-validation-error');
    assert.ok($component.is(':hidden'));
    this.$('.detail-name').val('a').trigger('input');
    assert.ok($component.is(':hidden'));
    this.$('.detail-name').val('').trigger('input');
    assert.ok($component.is(':visible'));
});