Skip to content

Commit

Permalink
[FEATURE modernized-built-in-components] Implement input attrs deprec…
Browse files Browse the repository at this point in the history 
…ation

Tracking issue: emberjs#19270
More specifically, it enables the <Input> attribute deprecations introduced
in emberjs#19218, fixes broken tests, and
updates all test {{input}} invocations to use <Input> instead.

Deprecate input arguments
  • Loading branch information
@eramod
eramod committed Feb 4, 2021
1 parent 2aa6395 commit e29caca
Show file tree
Hide file tree
Showing 6 changed files with 355 additions and 306 deletions.
2 changes: 1 addition & 1 deletion packages/@ember/-internals/glimmer/lib/components/input.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -469,7 +469,7 @@ if (EMBER_MODERNIZED_BUILT_IN_COMPONENTS) {
`Passing the \`@${argument}\` argument to <Input> is deprecated. ` +
`Instead, please pass the attribute directly, i.e. \`<Input ${attribute}={{...}} />\` ` +
`instead of \`<Input @${argument}={{...}} />\` or \`{{input ${argument}=...}}\`.`,
true /* TODO !(argument in this.args) */,
!(argument in this.args),
{
id: 'ember.built-in-components.legacy-attribute-arguments',
for: 'ember-source',
Expand Down
271 changes: 148 additions & 123 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 @@ -305,29 +305,30 @@ moduleFor(
// this.assertAttr('tabindex', '30'); //NOTE: failing in IE (TEST_SUITE=sauce)
}

['@test dynamic attributes (named argument)']() {
this.render(
`
<Input @type="text" @value={{this.value}}
@disabled={{this.disabled}}
@placeholder={{this.placeholder}}
@name={{this.name}}
@maxlength={{this.maxlength}}
@minlength={{this.minlength}}
@size={{this.size}}
@tabindex={{this.tabindex}}
/>`,
{
value: 'Original value',
disabled: false,
placeholder: 'Original placeholder',
name: 'original-name',
maxlength: 10,
minlength: 5,
size: 20,
tabindex: 30,
}
);
['@test [DEPRECATED] dynamic attributes (named argument)']() {
expectDeprecation(() => {
this.render(
`<Input @type="text" @value={{this.value}}
@disabled={{this.disabled}}
@placeholder={{this.placeholder}}
@name={{this.name}}
@maxlength={{this.maxlength}}
@minlength={{this.minlength}}
@size={{this.size}}
@tabindex={{this.tabindex}}
/>`,
{
value: 'Original value',
disabled: false,
placeholder: 'Original placeholder',
name: 'original-name',
maxlength: 10,
minlength: 5,
size: 20,
tabindex: 30,
}
);
}, /Passing the `@.+` argument to <Input> is deprecated\./);

this.assertNotDisabled();
this.assertValue('Original value');
Expand All @@ -349,16 +350,18 @@ moduleFor(
// this.assertAttr('size', '20'); //NOTE: failing in IE (TEST_SUITE=sauce)
// this.assertAttr('tabindex', '30'); //NOTE: failing in IE (TEST_SUITE=sauce)

runTask(() => {
set(this.context, 'value', 'Updated value');
set(this.context, 'disabled', true);
set(this.context, 'placeholder', 'Updated placeholder');
set(this.context, 'name', 'updated-name');
set(this.context, 'maxlength', 11);
set(this.context, 'minlength', 6);
// set(this.context, 'size', 21); //NOTE: failing in IE (TEST_SUITE=sauce)
// set(this.context, 'tabindex', 31); //NOTE: failing in IE (TEST_SUITE=sauce)
});
expectDeprecation(() => {
runTask(() => {
set(this.context, 'value', 'Updated value');
set(this.context, 'disabled', true);
set(this.context, 'placeholder', 'Updated placeholder');
set(this.context, 'name', 'updated-name');
set(this.context, 'maxlength', 11);
set(this.context, 'minlength', 6);
// set(this.context, 'size', 21); //NOTE: failing in IE (TEST_SUITE=sauce)
// set(this.context, 'tabindex', 31); //NOTE: failing in IE (TEST_SUITE=sauce)
});
}, /Passing the `@.+` argument to <Input> is deprecated\./);

this.assertDisabled();
this.assertValue('Updated value');
Expand All @@ -369,16 +372,18 @@ moduleFor(
// this.assertAttr('size', '21'); //NOTE: failing in IE (TEST_SUITE=sauce)
// this.assertAttr('tabindex', '31'); //NOTE: failing in IE (TEST_SUITE=sauce)

runTask(() => {
set(this.context, 'value', 'Original value');
set(this.context, 'disabled', false);
set(this.context, 'placeholder', 'Original placeholder');
set(this.context, 'name', 'original-name');
set(this.context, 'maxlength', 10);
set(this.context, 'minlength', 5);
// set(this.context, 'size', 20); //NOTE: failing in IE (TEST_SUITE=sauce)
// set(this.context, 'tabindex', 30); //NOTE: failing in IE (TEST_SUITE=sauce)
});
expectDeprecation(() => {
runTask(() => {
set(this.context, 'value', 'Original value');
set(this.context, 'disabled', false);
set(this.context, 'placeholder', 'Original placeholder');
set(this.context, 'name', 'original-name');
set(this.context, 'maxlength', 10);
set(this.context, 'minlength', 5);
// set(this.context, 'size', 20); //NOTE: failing in IE (TEST_SUITE=sauce)
// set(this.context, 'tabindex', 30); //NOTE: failing in IE (TEST_SUITE=sauce)
});
}, /Passing the `@.+` argument to <Input> is deprecated\./);

this.assertNotDisabled();
this.assertValue('Original value');
Expand Down Expand Up @@ -423,17 +428,19 @@ moduleFor(
// this.assertAttr('tabindex', '30'); //NOTE: failing in IE (TEST_SUITE=sauce)
}

['@test static attributes (named argument)']() {
this.render(`
<Input @type="text" @value="Original value"
@disabled={{true}}
@placeholder="Original placeholder"
@name="original-name"
@maxlength={{10}}
@minlength={{5}}
@size={{20}}
@tabindex={{30}}
/>`);
['@test [DEPRECATED] static attributes (named argument)']() {
expectDeprecation(() => {
this.render(`
<Input @type="text" @value="Original value"
@disabled={{true}}
@placeholder="Original placeholder"
@name="original-name"
@maxlength={{10}}
@minlength={{5}}
@size={{20}}
@tabindex={{30}}
/>`);
}, /Passing the `@.+` argument to <Input> is deprecated\./);

this.assertDisabled();
this.assertValue('Original value');
Expand Down Expand Up @@ -920,20 +927,22 @@ moduleFor(
this.assertAttr('tabindex', '10');
}

['@test dynamic attributes (named argument)']() {
this.render(
`<Input @type='checkbox' @checked={{this.checked}}
@disabled={{this.disabled}}
@name={{this.name}}
@tabindex={{this.tabindex}}
/>`,
{
disabled: false,
name: 'original-name',
checked: false,
tabindex: 10,
}
);
['@test [DEPRECATED] dynamic attributes (named argument)']() {
expectDeprecation(() => {
this.render(
`<Input @type='checkbox' @checked={{this.checked}}
@disabled={{this.disabled}}
@name={{this.name}}
@tabindex={{this.tabindex}}
/>`,
{
disabled: false,
name: 'original-name',
checked: false,
tabindex: 10,
}
);
}, /Passing the `@.+` argument to <Input> is deprecated\./);

this.assertSingleCheckbox();
this.assertNotDisabled();
Expand All @@ -947,22 +956,26 @@ moduleFor(
this.assertAttr('name', 'original-name');
this.assertAttr('tabindex', '10');

runTask(() => {
set(this.context, 'disabled', true);
set(this.context, 'name', 'updated-name');
set(this.context, 'tabindex', 11);
});
expectDeprecation(() => {
runTask(() => {
set(this.context, 'disabled', true);
set(this.context, 'name', 'updated-name');
set(this.context, 'tabindex', 11);
});
}, /Passing the `@.+` argument to <Input> is deprecated\./);

this.assertSingleCheckbox();
this.assertDisabled();
this.assertAttr('name', 'updated-name');
this.assertAttr('tabindex', '11');

runTask(() => {
set(this.context, 'disabled', false);
set(this.context, 'name', 'original-name');
set(this.context, 'tabindex', 10);
});
expectDeprecation(() => {
runTask(() => {
set(this.context, 'disabled', false);
set(this.context, 'name', 'original-name');
set(this.context, 'tabindex', 10);
});
}, /Passing the `@.+` argument to <Input> is deprecated\./);

this.assertSingleCheckbox();
this.assertNotDisabled();
Expand Down Expand Up @@ -1052,10 +1065,12 @@ moduleFor(
this.assertAttr('name', 'original-name');
}

['@test with static values (named argument)']() {
this.render(
`<Input @type="checkbox" @checked={{false}} @disabled={{false}} @tabindex={{10}} @name="original-name" />`
);
['@test [DEPRECATED] with static values (named argument)']() {
expectDeprecation(() => {
this.render(
`<Input @type="checkbox" @checked={{false}} @disabled={{false}} @tabindex={{10}} @name="original-name" />`
);
}, /Passing the `@.+` argument to <Input> is deprecated\./);

this.assertSingleCheckbox();
this.assertCheckboxIsNotChecked();
Expand Down Expand Up @@ -1150,29 +1165,30 @@ moduleFor(
this.assertAttr('tabindex', undefined);
}

['@test null values (named argument)']() {
['@test [DEPRECATED] null values (named argument)']() {
let attributes = ['disabled', 'placeholder', 'name', 'maxlength', 'size', 'tabindex'];

this.render(
`
<Input @type="text" @value={{this.value}}
@disabled={{this.disabled}}
@placeholder={{this.placeholder}}
@name={{this.name}}
@maxlength={{this.maxlength}}
@size={{this.size}}
@tabindex={{this.tabindex}}
/>`,
{
value: null,
disabled: null,
placeholder: null,
name: null,
maxlength: null,
size: null,
tabindex: null,
}
);
expectDeprecation(() => {
this.render(
`<Input @type="text" @value={{this.value}}
@disabled={{this.disabled}}
@placeholder={{this.placeholder}}
@name={{this.name}}
@maxlength={{this.maxlength}}
@size={{this.size}}
@tabindex={{this.tabindex}}
/>`,
{
value: null,
disabled: null,
placeholder: null,
name: null,
maxlength: null,
size: null,
tabindex: null,
}
);
}, /Passing the `@.+` argument to <Input> is deprecated\./);

this.assertValue('');
this.assertAllAttrs(attributes, undefined);
Expand All @@ -1181,16 +1197,17 @@ moduleFor(

this.assertValue('');
this.assertAllAttrs(attributes, undefined);

runTask(() => {
set(this.context, 'disabled', true);
set(this.context, 'value', 'Updated value');
set(this.context, 'placeholder', 'Updated placeholder');
set(this.context, 'name', 'updated-name');
set(this.context, 'maxlength', 11);
set(this.context, 'size', 21);
set(this.context, 'tabindex', 31);
});
expectDeprecation(() => {
runTask(() => {
set(this.context, 'disabled', true);
set(this.context, 'value', 'Updated value');
set(this.context, 'placeholder', 'Updated placeholder');
set(this.context, 'name', 'updated-name');
set(this.context, 'maxlength', 11);
set(this.context, 'size', 21);
set(this.context, 'tabindex', 31);
});
}, /Passing the `@.+` argument to <Input> is deprecated\./);

this.assertDisabled();
this.assertValue('Updated value');
Expand All @@ -1200,15 +1217,17 @@ moduleFor(
this.assertAttr('size', '21');
this.assertAttr('tabindex', '31');

runTask(() => {
set(this.context, 'disabled', null);
set(this.context, 'value', null);
set(this.context, 'placeholder', null);
set(this.context, 'name', null);
set(this.context, 'maxlength', null);
// set(this.context, 'size', null); //NOTE: this fails with `Error: Failed to set the 'size' property on 'HTMLInputElement': The value provided is 0, which is an invalid size.` (TEST_SUITE=sauce)
set(this.context, 'tabindex', null);
});
expectDeprecation(() => {
runTask(() => {
set(this.context, 'disabled', null);
set(this.context, 'value', null);
set(this.context, 'placeholder', null);
set(this.context, 'name', null);
set(this.context, 'maxlength', null);
// set(this.context, 'size', null); //NOTE: this fails with `Error: Failed to set the 'size' property on 'HTMLInputElement': The value provided is 0, which is an invalid size.` (TEST_SUITE=sauce)
set(this.context, 'tabindex', null);
});
}, /Passing the `@.+` argument to <Input> is deprecated\./);

this.assertAttr('disabled', undefined);
this.assertValue('');
Expand Down Expand Up @@ -1244,7 +1263,13 @@ moduleFor(
`[GH#15675] Components test: <Input ${attrs} />`,
class extends InputRenderingTest {
renderInput(value = 25) {
this.render(`<Input ${attrs.replace('%x', value)} />`);
if (attrs.includes('@min') || attrs.includes('@max')) {
expectDeprecation(() => {
this.render(`<Input ${attrs.replace('%x', value)} />`);
}, /Passing the `@.+` argument to <Input> is deprecated\./);
} else {
this.render(`<Input ${attrs.replace('%x', value)} />`);
}
}

['@test value over default max but below set max is kept']() {
Expand Down
Loading

0 comments on commit e29caca

Please sign in to comment.