Skip to content

Commit

Permalink
Replace Input component in tests with input element (#685)
Browse files Browse the repository at this point in the history
  • Loading branch information
@SergeAstapov
SergeAstapov authored Oct 21, 2024
1 parent 25c89a5 commit 5afcd61
Showing 1 changed file with 43 additions and 38 deletions.
81 changes: 43 additions & 38 deletions tests/integration/helpers/changeset-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ import {
module('Integration | Helper | changeset', function (hooks) {
setupRenderingTest(hooks);

hooks.beforeEach(function () {
this.updateAttr = (changeset, attr, event) => {
changeset.set(attr, event.target.value);
};
});

test('it validates changes', async function (assert) {
let validations = {
firstName(value) {
Expand All @@ -41,8 +47,8 @@ module('Integration | Helper | changeset', function (hooks) {
{{#if changesetObj.isInvalid}}
<p id="errors-paragraph">There were one or more errors in your form.</p>
{{/if}}
<Input id="first-name" @value={{changesetObj.firstName}} />
<Input id="last-name" @value={{changesetObj.lastName}} />
<input id="first-name" value={{changesetObj.firstName}} {{on "change" (fn this.updateAttr changesetObj "firstName")}} />
<input id="last-name" value={{changesetObj.lastName}} {{on "change" (fn this.updateAttr changesetObj "lastName")}} />
<button id="submit-btn" type="button" {{on "click" (fn this.submit changesetObj)}}>Submit</button>
<button id="reset-btn" type="button" {{on "click" (fn this.reset changesetObj)}}>Reset</button>
{{/let}}
Expand Down Expand Up @@ -75,8 +81,8 @@ module('Integration | Helper | changeset', function (hooks) {
{{#if changesetObj.isInvalid}}
<p id="errors-paragraph">There were one or more errors in your form.</p>
{{/if}}
<Input id="first-name" @value={{changesetObj.firstName}} />
<Input id="last-name" @value={{changesetObj.lastName}} />
<input id="first-name" value={{changesetObj.firstName}} {{on "change" (fn this.updateAttr changesetObj "firstName")}} />
<input id="last-name" value={{changesetObj.lastName}} {{on "change" (fn this.updateAttr changesetObj "lastName")}} />
<button id="submit-btn" type="button" {{on "click" (fn this.submit changesetObj)}}>Submit</button>
<button id="reset-btn" type="button" {{on "click" (fn this.reset changesetObj)}}>Reset</button>
{{/let}}
Expand Down Expand Up @@ -115,8 +121,8 @@ module('Integration | Helper | changeset', function (hooks) {
{{#if changesetObj.isInvalid}}
<p id="errors-paragraph">There were one or more errors in your form.</p>
{{/if}}
<Input id="first-name" @value={{changesetObj.firstName}} />
<Input id="last-name" @value={{changesetObj.lastName}} />
<input id="first-name" value={{changesetObj.firstName}} {{on "change" (fn this.updateAttr changesetObj "firstName")}} />
<input id="last-name" value={{changesetObj.lastName}} {{on "change" (fn this.updateAttr changesetObj "lastName")}} />
<button id="submit-btn" type="button" {{on "click" (fn this.submit changesetObj)}}>Submit</button>
<button id="reset-btn" type="button" {{on "click" (fn this.reset changesetObj)}}>Reset</button>
{{/let}}
Expand Down Expand Up @@ -156,8 +162,8 @@ module('Integration | Helper | changeset', function (hooks) {
{{#if changesetObj.isInvalid}}
<p id="errors-paragraph">There were one or more errors in your form.</p>
{{/if}}
<Input id="first-name" @value={{changesetObj.firstName}} />
<Input id="last-name" @value={{changesetObj.lastName}} />
<input id="first-name" value={{changesetObj.firstName}} {{on "change" (fn this.updateAttr changesetObj "firstName")}} />
<input id="last-name" value={{changesetObj.lastName}} {{on "change" (fn this.updateAttr changesetObj "lastName")}} />
<button id="submit-btn" type="button" {{on "click" (fn this.submit changesetObj)}}>Submit</button>
<button id="reset-btn" type="button" {{on "click" (fn this.reset changesetObj)}}>Reset</button>
{{/let}}
Expand All @@ -177,7 +183,7 @@ module('Integration | Helper | changeset', function (hooks) {
this.reset = (changeset) => changeset.rollback();
await render(hbs`
{{#let (changeset this.dummyModel) as |changesetObj|}}
<Input id="first-name" @value={{changesetObj.firstName}} />
<input id="first-name" value={{changesetObj.firstName}} {{on "change" (fn this.updateAttr changesetObj "firstName")}} />
<button id="reset-btn" type="button" {{on "click" (fn this.reset changesetObj)}}>Reset</button>
{{/let}}
`);
Expand All @@ -198,8 +204,8 @@ module('Integration | Helper | changeset', function (hooks) {
{{#if changesetObj.isInvalid}}
<p id="errors-paragraph">There were one or more errors in your form.</p>
{{/if}}
<Input id="first-name" @value={{changesetObj.firstName}} />
<Input id="last-name" @value={{changesetObj.lastName}} />
<input id="first-name" value={{changesetObj.firstName}} {{on "change" (fn this.updateAttr changesetObj "firstName")}} />
<input id="last-name" value={{changesetObj.lastName}} {{on "change" (fn this.updateAttr changesetObj "lastName")}} />
<button id="submit-btn" type="button" {{on "click" (fn this.submit changesetObj)}}>Submit</button>
<button id="reset-btn" type="button" {{on "click" (fn this.reset changesetObj)}}>Reset</button>
{{/let}}
Expand All @@ -211,18 +217,16 @@ module('Integration | Helper | changeset', function (hooks) {

test('it updates when set without a validator', async function (assert) {
this.dummyModel = { firstName: 'Jim', lastName: 'Bob' };
this.updateFirstName = (changeset, evt) => {
changeset.firstName = evt.target.value;
};
await render(hbs`
{{#let (changeset this.dummyModel) as |changesetObj|}}
<h1>{{changesetObj.firstName}} {{changesetObj.lastName}}</h1>
<input
id="first-name"
type="text"
value={{changesetObj.firstName}}
{{on "change" (fn this.updateFirstName changesetObj)}}>
<Input id="last-name" @value={{changesetObj.lastName}} />
{{on "change" (fn this.updateAttr changesetObj "firstName")}}
/>
<input id="last-name" value={{changesetObj.lastName}} {{on "change" (fn this.updateAttr changesetObj "lastName")}} />
{{/let}}
`);

Expand All @@ -245,8 +249,9 @@ module('Integration | Helper | changeset', function (hooks) {
id="first-name"
type="text"
value={{changesetObj.firstName}}
{{on "change" (fn this.updateFirstName changesetObj)}}>
<Input id="last-name" @value={{changesetObj.lastName}} />
{{on "change" (fn this.updateAttr changesetObj "firstName")}}
/>
<input id="last-name" value={{changesetObj.lastName}} {{on "change" (fn this.updateAttr changesetObj "lastName")}} />
{{/let}}
`);

Expand All @@ -260,17 +265,16 @@ module('Integration | Helper | changeset', function (hooks) {
let data = { person: { firstName: 'Jim', lastName: 'Bob' } };
let changeset = Changeset(data);
this.changeset = changeset;
this.mutValue = (path, evt) => (this.changeset[path] = evt.target.value);

await render(hbs`
<h1>{{this.changeset.person.firstName}} {{this.changeset.person.lastName}}</h1>
<input
id="first-name"
value={{this.changeset.person.firstName}}
{{on "change" (fn this.mutValue "person.firstName")}}>
{{on "change" (fn this.updateAttr this.changeset "person.firstName")}}>
<input id="last-name"
value={{this.changeset.person.lastName}}
{{on "change" (fn this.mutValue "person.lastName")}}>
{{on "change" (fn this.updateAttr this.changeset "person.lastName")}}>
`);

assert.dom('h1').hasText('Jim Bob', 'precondition');
Expand Down Expand Up @@ -323,18 +327,17 @@ module('Integration | Helper | changeset', function (hooks) {
let data = { person: { firstName: 'Jim', lastName: 'Bob' } };
let changeset = Changeset(data);
this.changeset = changeset;
this.mutValue = (path, evt) => (this.changeset[path] = evt.target.value);

await render(hbs`
<h1>{{this.changeset.person.firstName}} {{this.changeset.person.lastName}}</h1>
<input
id="first-name"
value={{this.changeset.person.firstName}}
{{on "change" (fn this.mutValue "person.firstName")}}>
{{on "change" (fn this.updateAttr this.changeset "person.firstName")}}>
<input
id="last-name"
value={{this.changeset.person.lastName}}
{{on "change" (fn this.mutValue "person.lastName")}}>
{{on "change" (fn this.updateAttr this.changeset "person.lastName")}}>
`);

assert.dom('h1').hasText('Jim Bob', 'precondition');
Expand All @@ -349,15 +352,14 @@ module('Integration | Helper | changeset', function (hooks) {
isPresent(newValue) || 'need a first name';
let c = Changeset(data, validator);
this.c = c;
this.mutValue = (path, evt) => (this.c[path] = evt.target.value);

await render(hbs`
<h1>{{this.c.person.firstName}}</h1>
<input
id="first-name"
type="text"
value={{this.c.person.firstName}}
{{on "change" (fn this.mutValue "person.firstName")}}>
{{on "change" (fn this.updateAttr this.c "person.firstName")}}>
<small id="first-name-error">{{this.c.error.person.firstName.validation}}</small>
`);

Expand All @@ -381,15 +383,14 @@ module('Integration | Helper | changeset', function (hooks) {
let validator = () => Promise.resolve(true);
let c = Changeset(data, validator);
this.c = c;
this.mutValue = (path, evt) => (this.c[path] = evt.target.value);

await render(hbs`
<h1>{{this.c.person.firstName}}</h1>
<input
id="first-name"
type="text"
value={{this.c.person.firstName}}
{{on "change" (fn this.mutValue "person.firstName")}}>
{{on "change" (fn this.updateAttr this.c "person.firstName")}}>
<small id="first-name-error">{{this.c.error.person.firstName.validation}}</small>
`);
assert.dom('h1').hasText('Jim', 'precondition');
Expand All @@ -413,7 +414,7 @@ module('Integration | Helper | changeset', function (hooks) {
id="first-name"
type="text"
value={{this.c.person.name.parts.first}}
{{on "change" (fn this.mutValue "person.name.parts.first")}}>
{{on "change" (fn this.updateAttr this.c "person.name.parts.first")}}>
<small id="first-name-error">{{this.c.error.person.name.parts.first.validation}}</small>
`);

Expand Down Expand Up @@ -446,11 +447,11 @@ module('Integration | Helper | changeset', function (hooks) {
<input
id="first-name"
value={{this.changeset.person.firstName}}
{{on "change" (fn this.mutValue "person.firstName")}}>
{{on "change" (fn this.updateAttr this.changeset "person.firstName")}}>
<input
id="last-name"
value={{this.changeset.person.lastName}}
{{on "change" (fn this.mutValue "person.lastName")}}>
{{on "change" (fn this.updateAttr this.changeset "person.lastName")}}>
<button id="reset-btn" type="button" {{on "click" this.reset}}>Reset</button>
`);

Expand Down Expand Up @@ -574,8 +575,8 @@ module('Integration | Helper | changeset', function (hooks) {
test('it handles models that are promises', async function (assert) {
this.dummyModel = Promise.resolve({ firstName: 'Jim', lastName: 'Bob' });

this.updateFirstName = (changesetObj, event) => {
set(changesetObj, 'firstName', event.target.value);
this.updateAttr = (changeset, attr, event) => {
set(changeset, attr, event.target.value);
};

// @todo this test does not await until promise resolved
Expand All @@ -587,9 +588,13 @@ module('Integration | Helper | changeset', function (hooks) {
id="first-name"
type="text"
value={{changesetObj.firstName}}
{{on "change" (fn this.updateFirstName changesetObj)}}>
{{on "change" (fn this.updateAttr changesetObj "firstName")}}>
<Input id="last-name" @value={{changesetObj.lastName}} />
<input
id="last-name"
value={{changesetObj.lastName}}
{{on "change" (fn this.updateAttr changesetObj "lastName")}}
/>
{{/let}}
`);

Expand All @@ -606,8 +611,8 @@ module('Integration | Helper | changeset', function (hooks) {
await render(hbs`
{{#let (changeset this.dummyModel this.validate skipValidate=true) as |changesetObj|}}
<h1>{{changesetObj.firstName}} {{changesetObj.lastName}}</h1>
<Input id="first-name" @value={{changesetObj.firstName}} />
<Input id="last-name" @value={{changesetObj.lastName}} />
<input id="first-name" value={{changesetObj.firstName}} {{on "change" (fn this.updateAttr changesetObj "firstName")}} />
<input id="last-name" value={{changesetObj.lastName}} {{on "change" (fn this.updateAttr changesetObj "lastName")}} />
{{#if changesetObj.isInvalid}}
<p id="error-paragraph">There were one or more errors in your form.</p>
{{/if}}
Expand Down Expand Up @@ -645,7 +650,7 @@ module('Integration | Helper | changeset', function (hooks) {
{{#if changesetObj.isDirty}}
<p id="errors-paragraph">There were one or more errors in your form.</p>
{{/if}}
<Input id="first-name" @value={{changesetObj.firstName}} />
<input id="first-name" value={{changesetObj.firstName}} {{on "change" (fn this.updateAttr changesetObj "firstName")}} />
<button id="submit-btn" type="button" {{on "click" (fn this.submit changesetObj)}}>Submit</button>
{{/let}}
`);
Expand Down

0 comments on commit 5afcd61

Please sign in to comment.