Skip to content

Commit

Permalink
[FEATURE modernized-built-in-components] deprecate input/textarea eve…
Browse files Browse the repository at this point in the history 
…nt handlers

Tracking issue: emberjs#19270
Enables the input and textarea  event handlers deprecation introduced in emberjs#19218
and fixes resultant failing tests
  • Loading branch information
@eramod
eramod committed Feb 10, 2021
1 parent 974ca66 commit c131691
Show file tree
Hide file tree
Showing 5 changed files with 201 additions and 126 deletions.
4 changes: 2 additions & 2 deletions packages/@ember/-internals/glimmer/lib/components/input.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -901,7 +901,7 @@ if (EMBER_MODERNIZED_BUILT_IN_COMPONENTS) {
`the <${name}> component and prevented it from functioning properly. ` +
`Instead, please use the {{on}} modifier, i.e. \`<${name} {{on "${eventName}" ...}} />\` ` +
`instead of \`<${name} @${methodName}={{...}} />\` or \`{{${curlyName} ${methodName}=...}}\`.`,
true, // !(methodName in this),
!(methodName in this),
{
id: 'ember.built-in-components.legacy-attribute-arguments',
for: 'ember-source',
Expand All @@ -914,7 +914,7 @@ if (EMBER_MODERNIZED_BUILT_IN_COMPONENTS) {
`Passing the \`@${methodName}\` argument to <${name}> is deprecated. ` +
`Instead, please use the {{on}} modifier, i.e. \`<${name} {{on "${eventName}" ...}} />\` ` +
`instead of \`<${name} @${methodName}={{...}} />\` or \`{{${curlyName} ${methodName}=...}}\`.`,
true, // methodName in this,
methodName in this,
{
id: 'ember.built-in-components.legacy-attribute-arguments',
for: 'ember-source',
Expand Down
143 changes: 87 additions & 56 deletions packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,13 @@ class InputRenderingTest extends RenderingTestCase {
<TestComponent ${argsFor('custom')} />
`;

this.render(template, { actions });
maybeExpectDeprecation(
EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
() => {
this.render(template, { actions });
},
/Passing the `@(touchStart|touchMove|touchEnd|touchCancel|keyDown|keyUp|keyPress|mouseDown|mouseUp|contextMenu|click|doubleClick|focusIn|focusOut|submit|input|change|dragStart|drag|dragEnter|dragLeave|dragOver|drop|dragEnd|mouseEnter|mouseLeave|mouseMove|focus-in|focus-out|key-press|key-up|key-down)` argument to <Input> is deprecated\./
);

this.assert.ok(this.$('input').length === 2);

Expand Down Expand Up @@ -621,30 +627,34 @@ moduleFor(
},
},
});
}, /Passing actions to components as strings \(like `({{input key-press="foo"}}|<Input @key-press="foo" \/>)`\) is deprecated\./);
}, /(Passing actions to components as strings \(like `({{input key-press="foo"}}|<Input @key-press="foo" \/>)`\) is deprecated\.|Passing the `@key-press` argument to <Input> is deprecated\.)/);

expectDeprecation(() => {
this.triggerEvent('keypress', { key: 'A' });
}, /Passing actions to components as strings \(like `({{input key-press="foo"}}|<Input @key-press="foo" \/>)`\) is deprecated\./);
}

['@test sends an action with `<Input @key-press={{action "foo"}} />` is pressed'](assert) {
assert.expect(2);

this.render(`<Input @value={{this.value}} @key-press={{action 'foo'}} />`, {
value: 'initial',

actions: {
foo(value, event) {
assert.ok(true, 'action was triggered');
if (jQueryDisabled) {
assert.notOk(event.originalEvent, 'event is not a jQuery.Event');
} else {
assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
}
},
maybeExpectDeprecation(
EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
() => {
this.render(`<Input @value={{this.value}} @key-press={{action 'foo'}} />`, {
value: 'initial',

actions: {
foo(value, event) {
assert.ok(true, 'action was triggered');
if (jQueryDisabled) {
assert.notOk(event.originalEvent, 'event is not a jQuery.Event');
} else {
assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
}
},
},
});
},
});
/Passing the `@key-press` argument to <Input> is deprecated\./
);

this.triggerEvent('keypress', { key: 'A' });
}
Expand Down Expand Up @@ -677,13 +687,19 @@ moduleFor(
['@test triggers `focus-in` when focused'](assert) {
let wasFocused = false;

this.render(`<Input @focus-in={{action 'foo'}} />`, {
actions: {
foo() {
wasFocused = true;
},
maybeExpectDeprecation(
EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
() => {
this.render(`<Input @focus-in={{action 'foo'}} />`, {
actions: {
foo() {
wasFocused = true;
},
},
});
},
});
/Passing the `@focus-in` argument to <Input> is deprecated\./
);

runTask(() => {
this.$input().focus();
Expand Down Expand Up @@ -777,7 +793,7 @@ moduleFor(
},
},
});
}, /Passing actions to components as strings \(like `({{input key-down="foo"}}|<Input @key-down="foo" \/>)`\) is deprecated\./);
}, /(Passing actions to components as strings \(like `({{input key-down="foo"}}|<Input @key-down="foo" \/>)`\) is deprecated\.|Passing the `@key-down` argument to <Input> is deprecated\.)/);

expectDeprecation(() => {
this.triggerEvent('keydown', { key: 'A' });
Expand All @@ -787,20 +803,24 @@ moduleFor(
['@test sends an action with `<Input @key-down={{action "foo"}} />` when a key is pressed'](
assert
) {
assert.expect(2);

this.render(`<Input @key-down={{action 'foo'}} />`, {
actions: {
foo(value, event) {
assert.ok(true, 'action was triggered');
if (jQueryDisabled) {
assert.notOk(event.originalEvent, 'event is not a jQuery.Event');
} else {
assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
}
},
maybeExpectDeprecation(
EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
() => {
this.render(`<Input @key-down={{action 'foo'}} />`, {
actions: {
foo(value, event) {
assert.ok(true, 'action was triggered');
if (jQueryDisabled) {
assert.notOk(event.originalEvent, 'event is not a jQuery.Event');
} else {
assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
}
},
},
});
},
});
/Passing the `@key-down` argument to <Input> is deprecated\./
);

this.triggerEvent('keydown', { key: 'A' });
}
Expand All @@ -823,7 +843,7 @@ moduleFor(
},
},
});
}, /Passing actions to components as strings \(like `({{input key-up="foo"}}|<Input @key-up="foo" \/>)`\) is deprecated\./);
}, /(Passing actions to components as strings \(like `({{input key-up="foo"}}|<Input @key-up="foo" \/>)`\) is deprecated\.|Passing the `@key-up` argument to <Input> is deprecated\.)/);

expectDeprecation(() => {
this.triggerEvent('keyup', { key: 'A' });
Expand All @@ -833,20 +853,25 @@ moduleFor(
['@test sends an action with `<Input @key-up={{action "foo"}} />` when a key is pressed'](
assert
) {
assert.expect(2);

this.render(`<Input @key-up={{action 'foo'}} />`, {
actions: {
foo(value, event) {
assert.ok(true, 'action was triggered');
if (jQueryDisabled) {
assert.notOk(event.originalEvent, 'event is not a jQuery.Event');
} else {
assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
}
},
maybeExpectDeprecation(
EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
() => {
this.render(`<Input @key-up={{action 'foo'}} />`, {
actions: {
foo(value, event) {
assert.ok(true, 'action was triggered');
if (jQueryDisabled) {
assert.notOk(event.originalEvent, 'event is not a jQuery.Event');
} else {
assert.ok(event instanceof jQuery.Event, 'jQuery event was passed');
}
},
},
});
},
});
/Passing the `@key-up` argument to <Input> is deprecated\./
);

this.triggerEvent('keyup', { key: 'A' });
}

Expand All @@ -862,11 +887,17 @@ moduleFor(
}

['@test triggers a method with `<Input @key-up={{this.didTrigger}} />`'](assert) {
this.render(`<Input @key-up={{this.didTrigger}} />`, {
didTrigger: action(function () {
assert.ok(true, 'action was triggered');
}),
});
maybeExpectDeprecation(
EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
() => {
this.render(`<Input @key-up={{this.didTrigger}} />`, {
didTrigger: action(function () {
assert.ok(true, 'action was triggered');
}),
});
},
/Passing the `@key-up` argument to <Input> is deprecated\./
);

this.triggerEvent('keyup', { key: 'A' });
}
Expand Down

0 comments on commit c131691

Please sign in to comment.