Last active
April 12, 2020 22:22
-
-
Save jkeen/6235907efb473eb36e60abe82b0bb4fd to your computer and use it in GitHub Desktop.
Input tests
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Controller from '@ember/controller'; | |
| export default class ApplicationController extends Controller { | |
| appName = 'Ember Twiddle'; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Route from '@ember/routing/route'; | |
| export default Route.extend({ | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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'); | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment