Input tests

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

router\.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
});

export default Router;

routes.application\.js

import Route from '@ember/routing/route';

export default Route.extend({
});

templates.application\.hbs

Tests for https://github.com/poteto/ember-changeset/issues/450

tests.integration.components.input-test\.js

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, fillIn, find, settled } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import Changeset from 'ember-changeset'

module('input tests', function(hooks) {
  setupRenderingTest(hooks);

	test ('it handles updates to and from <input>', async function (assert) {
    this.set('changeset', new Changeset({name: 'initial value'}));
    this.set('fieldName', 'name');
    this.set('handleChange', event => {
      this.changeset.set(this.fieldName, event.target.value);
    });
    await render (hbs`
        <input
          name={{this.fieldName}}
          value={{readonly (get this.changeset this.fieldName)}}
          {{on 'input' (fn this.handleChange)}}
        />
      `);

    assert.equal(find('input').value, 'initial value');

    await fillIn('input', 'update from input', "initial value was set");
    assert.equal(this.changeset.name, 'update from input', "updated changeset from input");

    this.changeset.set('name', 'updated input from changeset.set');
    // await settled(); // it's weird you have to do this to make it work
    assert.equal(find('input').value, 'updated input from changeset.set');

    this.changeset.name = 'updated input form changeset.property='; // also fails
    // await settled(); // it's weird you have to do this to make it work
    assert.equal(find('input').value, 'updated input form changeset.property=');
  });
  
  
  
	test ('it handles updates to and from <Input>', async function (assert) {
    this.set('changeset', new Changeset({name: 'initial value'}));
    this.set('fieldName', 'name');
    this.set('handleChange', event => {
      this.changeset.set(this.fieldName, event.target.value);
    });
    await render (hbs`
        <Input
          @name={{this.fieldName}}
          @value={{readonly (get this.changeset this.fieldName)}}
          {{on 'input' (fn this.handleChange)}}
        />
      `);

    assert.equal(find('input').value, 'initial value');

    await fillIn('input', 'update from input', "initial value was set");
    assert.equal(this.changeset.name, 'update from input', "updated changeset from input");

    this.changeset.set('name', 'updated input from changeset.set');
    // await settled(); // it's weird you have to do this
    assert.equal(find('input').value, 'updated input from changeset.set');

    this.changeset.name = 'updated input form changeset.property='; // also fails
    // await settled(); // it's weird you have to do this
    assert.equal(find('input').value, 'updated input form changeset.property=');
  });
  
  
  
  test ('inputs updates without changesets', async function (assert) {
    // Examples below require using this.set or else this error will be raised:
    // Promise rejected during "two way bindings with inputs without changesets": Assertion Failed: You attempted to update [object Object].inputValue to "update to changeset", but it is being tracked by a tracking context, such as a template, computed property, or observer. In order to make sure the context updates properly, you must invalidate the property when updating it. You can mark the property as `@tracked`, or use `@ember/object#set` to do this.
    this.inputValue = 'initial value'
    this.handleChange = (event) => {
      this.set('inputValue', event.target.value); // this.set is required
    }

    await render(hbs`
        <input
          value={{readonly this.inputValue}}
          {{on 'input' (fn this.handleChange)}}
        />
      `);

    // PASSES
    assert.equal(find('input').value, 'initial value');

    // PASSES
    await fillIn('input', 'update from input');
    assert.equal(this.inputValue, 'update from input', "updated from input should update value");
    
    // PASSES
    this.set('inputValue', 'update to changeset');
    assert.equal(find('input').value, 'update to changeset');
  });
  
});

tests.test-helper\.js

import Application from '../app';
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { assign } from '@ember/polyfills';
import { start } from 'ember-qunit';

let attributes = {
  rootElement: '#test-root',
  autoboot: false
};
attributes = assign(attributes, config.APP);

let application = Application.create(attributes);
setApplication(application);

start();

twiddle\.json

{
  "version": "0.17.0",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": false
  },
  "options": {
    "use_pods": false,
    "enable-testing": true
  },
  "dependencies": {
    "ember": "3.17.0",
    "ember-template-compiler": "3.17.0",
    "ember-testing": "3.17.0"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-changeset": "3.2.0",
    "ember-composable-helpers": "3.0.3"
  }
}