From a729ce46a2480440daaa21640870e9e3c3499644 Mon Sep 17 00:00:00 2001 From: Dianne Eramo Date: Wed, 3 Feb 2021 16:48:40 -0800 Subject: [PATCH] [FEATURE modernized-built-in-components] Implement input attrs deprecation Tracking issue: https://github.com/emberjs/ember.js/issues/192t 70 More specifically, it enables the attribute deprecations introduced in https://github.com/emberjs/ember.js/pull/19218, fixes broken tests, and updates all test {{input}} invocations to use instead. WIP - add maybeExpectDeprecation function --- .../glimmer/lib/components/input.ts | 2 +- .../components/input-angle-test.js | 316 ++++++++++------- .../components/input-curly-test.js | 324 +++++++++++------- .../tests/integration/helpers/get-test.js | 57 +-- packages/ember-testing/tests/helpers_test.js | 47 ++- .../query_params_test/shared_state_test.js | 2 +- packages/internal-test-helpers/index.js | 1 + .../lib/ember-dev/deprecation.ts | 2 +- .../lib/maybe-expect-deprecation.ts | 16 + 9 files changed, 470 insertions(+), 297 deletions(-) create mode 100644 packages/internal-test-helpers/lib/maybe-expect-deprecation.ts diff --git a/packages/@ember/-internals/glimmer/lib/components/input.ts b/packages/@ember/-internals/glimmer/lib/components/input.ts index f51eb6680fe..f12a777d083 100644 --- a/packages/@ember/-internals/glimmer/lib/components/input.ts +++ b/packages/@ember/-internals/glimmer/lib/components/input.ts @@ -469,7 +469,7 @@ if (EMBER_MODERNIZED_BUILT_IN_COMPONENTS) { `Passing the \`@${argument}\` argument to is deprecated. ` + `Instead, please pass the attribute directly, i.e. \`\` ` + `instead of \`\` or \`{{input ${argument}=...}}\`.`, - true /* TODO !(argument in this.args) */, + !(argument in this.args), { id: 'ember.built-in-components.legacy-attribute-arguments', for: 'ember-source', diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js index 69f8a44fe92..2f9674b4c49 100644 --- a/packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js +++ b/packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js @@ -1,4 +1,11 @@ -import { RenderingTestCase, moduleFor, runDestroy, runTask } from 'internal-test-helpers'; +import { + RenderingTestCase, + maybeExpectDeprecation, + moduleFor, + runDestroy, + runTask, +} from 'internal-test-helpers'; +import { EMBER_MODERNIZED_BUILT_IN_COMPONENTS } from '@ember/canary-features'; import { action } from '@ember/object'; import { assign } from '@ember/polyfills'; @@ -305,28 +312,32 @@ moduleFor( // this.assertAttr('tabindex', '30'); //NOTE: failing in IE (TEST_SUITE=sauce) } - ['@test dynamic attributes (named argument)']() { - this.render( - ` - `, - { - 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)']() { + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + this.render( + ``, + { + value: 'Original value', + disabled: false, + placeholder: 'Original placeholder', + name: 'original-name', + maxlength: 10, + minlength: 5, + size: 20, + tabindex: 30, + } + ); + }, + /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ ); this.assertNotDisabled(); @@ -349,16 +360,22 @@ 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) - }); + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + 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 `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ + ); this.assertDisabled(); this.assertValue('Updated value'); @@ -369,16 +386,22 @@ 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) - }); + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + 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 `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ + ); this.assertNotDisabled(); this.assertValue('Original value'); @@ -423,17 +446,23 @@ moduleFor( // this.assertAttr('tabindex', '30'); //NOTE: failing in IE (TEST_SUITE=sauce) } - ['@test static attributes (named argument)']() { - this.render(` - `); + ['@test [DEPRECATED] static attributes (named argument)']() { + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + this.render( + `` + ); + }, + /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ + ); this.assertDisabled(); this.assertValue('Original value'); @@ -920,19 +949,24 @@ moduleFor( this.assertAttr('tabindex', '10'); } - ['@test dynamic attributes (named argument)']() { - this.render( - ``, - { - disabled: false, - name: 'original-name', - checked: false, - tabindex: 10, - } + ['@test [DEPRECATED] dynamic attributes (named argument)']() { + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + this.render( + ``, + { + disabled: false, + name: 'original-name', + checked: false, + tabindex: 10, + } + ); + }, + /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ ); this.assertSingleCheckbox(); @@ -947,22 +981,34 @@ 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); - }); + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + runTask(() => { + set(this.context, 'disabled', true); + set(this.context, 'name', 'updated-name'); + set(this.context, 'tabindex', 11); + }); + }, + /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to 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); - }); + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + runTask(() => { + set(this.context, 'disabled', false); + set(this.context, 'name', 'original-name'); + set(this.context, 'tabindex', 10); + }); + }, + /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ + ); this.assertSingleCheckbox(); this.assertNotDisabled(); @@ -1052,9 +1098,15 @@ moduleFor( this.assertAttr('name', 'original-name'); } - ['@test with static values (named argument)']() { - this.render( - `` + ['@test [DEPRECATED] with static values (named argument)']() { + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + this.render( + `` + ); + }, + /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ ); this.assertSingleCheckbox(); @@ -1150,28 +1202,32 @@ 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( - ` - `, - { - value: null, - disabled: null, - placeholder: null, - name: null, - maxlength: null, - size: null, - tabindex: null, - } + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + this.render( + ``, + { + value: null, + disabled: null, + placeholder: null, + name: null, + maxlength: null, + size: null, + tabindex: null, + } + ); + }, + /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ ); this.assertValue(''); @@ -1182,15 +1238,21 @@ 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); - }); + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + 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 `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ + ); this.assertDisabled(); this.assertValue('Updated value'); @@ -1200,15 +1262,21 @@ 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); - }); + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + 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 `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ + ); this.assertAttr('disabled', undefined); this.assertValue(''); @@ -1244,7 +1312,17 @@ moduleFor( `[GH#15675] Components test: `, class extends InputRenderingTest { renderInput(value = 25) { - this.render(``); + if (attrs.match(/@min|@max/)) { + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + this.render(``); + }, + /Passing the `@.+` argument to is deprecated\./ + ); + } else { + this.render(``); + } } ['@test value over default max but below set max is kept']() { diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js index 6984869f43b..1adabf1bb06 100644 --- a/packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js +++ b/packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js @@ -1,5 +1,7 @@ import { RenderingTestCase, moduleFor, runDestroy, runTask } from 'internal-test-helpers'; +import { EMBER_MODERNIZED_BUILT_IN_COMPONENTS } from '@ember/canary-features'; +import { maybeExpectDeprecation } from 'internal-test-helpers'; import { action } from '@ember/object'; import { assign } from '@ember/polyfills'; import { set } from '@ember/-internals/metal'; @@ -180,29 +182,34 @@ moduleFor( this.assertAttr('type', 'text'); } - ['@test dynamic attributes']() { - this.render( - ` - {{input type="text" - disabled=this.disabled - value=this.value - placeholder=this.placeholder - name=this.name - maxlength=this.maxlength - minlength=this.minlength - size=this.size - tabindex=this.tabindex - }}`, - { - disabled: false, - value: 'Original value', - placeholder: 'Original placeholder', - name: 'original-name', - maxlength: 10, - minlength: 5, - size: 20, - tabindex: 30, - } + ['@test [DEPRECATED] dynamic attributes']() { + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + this.render(` + {{input type="text" + disabled=this.disabled + value=this.value + placeholder=this.placeholder + name=this.name + maxlength=this.maxlength + minlength=this.minlength + size=this.size + tabindex=this.tabindex + }}`, + { + disabled: false, + value: 'Original value', + placeholder: 'Original placeholder', + name: 'original-name', + maxlength: 10, + minlength: 5, + size: 20, + tabindex: 30, + } + ); + }, + /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ ); this.assertNotDisabled(); @@ -225,16 +232,22 @@ 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) - }); + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + 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 `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ + ); this.assertDisabled(); this.assertValue('Updated value'); @@ -245,16 +258,22 @@ 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) - }); + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + 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 `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ + ); this.assertNotDisabled(); this.assertValue('Original value'); @@ -266,18 +285,25 @@ moduleFor( // this.assertAttr('tabindex', '30'); //NOTE: failing in IE (TEST_SUITE=sauce) } - ['@test static attributes']() { - this.render(` - {{input type="text" - disabled=true - value="Original value" - placeholder="Original placeholder" - name="original-name" - maxlength=10 - minlength=5 - size=20 - tabindex=30 - }}`); + ['@test [DEPRECATED] static attributes']() { + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + this.render(` + {{input type="text" + disabled=true + value="Original value" + placeholder="Original placeholder" + name="original-name" + maxlength=10 + minlength=5 + size=20 + tabindex=30 + }}` + ); + }, + /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ + ); this.assertDisabled(); this.assertValue('Original value'); @@ -709,21 +735,27 @@ moduleFor( moduleFor( `Components test: {{input type='checkbox'}}`, class extends InputRenderingTest { - ['@test dynamic attributes']() { - this.render( - `{{input - type='checkbox' - disabled=this.disabled - name=this.name - checked=this.checked - tabindex=this.tabindex - }}`, - { - disabled: false, - name: 'original-name', - checked: false, - tabindex: 10, - } + ['@test [DEPRECATED] dynamic attributes']() { + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + this.render( + `{{input + type='checkbox' + disabled=this.disabled + name=this.name + checked=this.checked + tabindex=this.tabindex + }}`, + { + disabled: false, + name: 'original-name', + checked: false, + tabindex: 10, + } + ); + }, + /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ ); this.assertSingleCheckbox(); @@ -738,22 +770,34 @@ 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); - }); + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + runTask(() => { + set(this.context, 'disabled', true); + set(this.context, 'name', 'updated-name'); + set(this.context, 'tabindex', 11); + }); + }, + /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to 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); - }); + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + runTask(() => { + set(this.context, 'disabled', false); + set(this.context, 'name', 'original-name'); + set(this.context, 'tabindex', 10); + }); + }, + /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ + ); this.assertSingleCheckbox(); this.assertNotDisabled(); @@ -823,9 +867,19 @@ moduleFor( this.assertCheckboxIsNotChecked(); } - ['@test with static values']() { - this.render( - `{{input type="checkbox" disabled=false tabindex=10 name="original-name" checked=false}}` + ['@test [DEPRECATED] with static values']() { + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + this.render( + `{{input type="checkbox" + disabled=false + tabindex=10 + name="original-name" + checked=false}}` + ); + }, + /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ ); this.assertSingleCheckbox(); @@ -852,29 +906,33 @@ moduleFor( moduleFor( `Components test: {{input type='text'}}`, class extends InputRenderingTest { - ['@test null values']() { + ['@test [DEPRECATED] null values']() { let attributes = ['disabled', 'placeholder', 'name', 'maxlength', 'size', 'tabindex']; - this.render( - ` - {{input type="text" - disabled=this.disabled - value=this.value - placeholder=this.placeholder - name=this.name - maxlength=this.maxlength - size=this.size - tabindex=this.tabindex - }}`, - { - disabled: null, - value: null, - placeholder: null, - name: null, - maxlength: null, - size: null, - tabindex: null, - } + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + this.render( + `{{input type="text" + disabled=this.disabled + value=this.value + placeholder=this.placeholder + name=this.name + maxlength=this.maxlength + size=this.size + tabindex=this.tabindex}}`, + { + disabled: null, + value: null, + placeholder: null, + name: null, + maxlength: null, + size: null, + tabindex: null, + } + ); + }, + /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ ); this.assertValue(''); @@ -885,15 +943,21 @@ 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); - }); + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + 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 `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ + ); this.assertDisabled(); this.assertValue('Updated value'); @@ -903,15 +967,21 @@ 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); - }); + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + 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 `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ + ); this.assertAttr('disabled', undefined); this.assertValue(''); @@ -935,10 +1005,16 @@ moduleFor( 'value="%x" type="range" min="-5" max="50"', ].forEach((attrs) => { moduleFor( - `[GH#15675] Components test: {{input ${attrs}}}`, + `[GH#15675] Components test [DEPRECATED]: {{input ${attrs}}}`, class extends InputRenderingTest { renderInput(value = 25) { - this.render(`{{input ${attrs.replace('%x', value)}}}`); + maybeExpectDeprecation( + EMBER_MODERNIZED_BUILT_IN_COMPONENTS, + () => { + this.render(`{{input ${attrs.replace('%x', value)}}}`); + }, + /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to is deprecated\./ + ); } ['@test value over default max but below set max is kept']() { diff --git a/packages/@ember/-internals/glimmer/tests/integration/helpers/get-test.js b/packages/@ember/-internals/glimmer/tests/integration/helpers/get-test.js index abb608426fd..9854393608f 100644 --- a/packages/@ember/-internals/glimmer/tests/integration/helpers/get-test.js +++ b/packages/@ember/-internals/glimmer/tests/integration/helpers/get-test.js @@ -468,12 +468,15 @@ moduleFor( this.assertText('[] []'); } - ['@test get helper value should be updatable using {{input}} and (mut) - static key'](assert) { - this.render(`{{input type='text' value=(mut (get this.source 'banana')) id='get-input'}}`, { - source: { - banana: 'banana', - }, - }); + ['@test get helper value should be updatable using and (mut) - static key'](assert) { + this.render( + ``, + { + source: { + banana: 'banana', + }, + } + ); assert.strictEqual(this.$('#get-input').val(), 'banana'); @@ -495,14 +498,17 @@ moduleFor( assert.strictEqual(this.$('#get-input').val(), 'banana'); } - ['@test get helper value should be updatable using {{input}} and (mut) - dynamic key'](assert) { - this.render(`{{input type='text' value=(mut (get this.source this.key)) id='get-input'}}`, { - source: { - apple: 'apple', - banana: 'banana', - }, - key: 'banana', - }); + ['@test get helper value should be updatable using and (mut) - dynamic key'](assert) { + this.render( + ``, + { + source: { + apple: 'apple', + banana: 'banana', + }, + key: 'banana', + } + ); assert.strictEqual(this.$('#get-input').val(), 'banana'); @@ -536,19 +542,22 @@ moduleFor( assert.strictEqual(this.$('#get-input').val(), 'banana'); } - ['@test get helper value should be updatable using {{input}} and (mut) - dynamic nested key']( + ['@test get helper value should be updatable using and (mut) - dynamic nested key']( assert ) { - this.render(`{{input type='text' value=(mut (get this.source this.key)) id='get-input'}}`, { - source: { - apple: { - gala: 'gala', - mcintosh: 'mcintosh', + this.render( + ``, + { + source: { + apple: { + gala: 'gala', + mcintosh: 'mcintosh', + }, + banana: 'banana', }, - banana: 'banana', - }, - key: 'apple.mcintosh', - }); + key: 'apple.mcintosh', + } + ); assert.strictEqual(this.$('#get-input').val(), 'mcintosh'); diff --git a/packages/ember-testing/tests/helpers_test.js b/packages/ember-testing/tests/helpers_test.js index 33457f189d5..f2902095bb5 100644 --- a/packages/ember-testing/tests/helpers_test.js +++ b/packages/ember-testing/tests/helpers_test.js @@ -3,6 +3,7 @@ import { moduleFor, AutobootApplicationTestCase, isIE11, runTask } from 'interna import { Route } from '@ember/-internals/routing'; import Controller from '@ember/controller'; import { RSVP } from '@ember/-internals/runtime'; +import { action } from '@ember/object'; import { later } from '@ember/runloop'; import { Component } from '@ember/-internals/glimmer'; import { jQueryDisabled, jQuery } from '@ember/-internals/views'; @@ -379,7 +380,7 @@ if (!jQueryDisabled) { 'index', ` {{#index-wrapper}} - {{input type="text"}} + {{x-checkbox type="checkbox"}} {{textarea}}
@@ -626,7 +627,7 @@ if (!jQueryDisabled) { this.addTemplate( 'components/index-wrapper', ` - {{input type="text" id="scope" class="input"}} + ` ); @@ -675,9 +676,9 @@ if (!jQueryDisabled) { this.addTemplate( 'components/index-wrapper', ` - {{input type="text" id="outside-scope" class="input"}} +
- {{input type="text" id="inside-scope" class="input"}} +
` ); @@ -724,7 +725,7 @@ if (!jQueryDisabled) { this.addTemplate( 'components/index-wrapper', ` - {{input type="text" id="foo"}} + ` ); this.addTemplate('index', `{{index-wrapper}}`); @@ -757,12 +758,10 @@ if (!jQueryDisabled) { this.addTemplate( 'index', - ` -
- {{input type="text" id="first" class="current"}} -
- {{input type="text" id="second" class="current"}} - ` + `
+ +
+ ` ); runTask(() => { @@ -789,21 +788,17 @@ if (!jQueryDisabled) { this.add( 'controller:index', Controller.extend({ - actions: { - wasFocused() { - wasFocused = true; - }, - }, + wasFocused: action(function () { + wasFocused = true; + }), }) ); this.addTemplate( 'index', - ` -
- {{input type="text" id="first" focus-in=(action "wasFocused")}} -
' - ` + `
+ +
'` ); runTask(() => { @@ -846,11 +841,9 @@ if (!jQueryDisabled) { this.addTemplate( 'index', - ` - - ` + onchange={{action "onchangeHandler"}}>` ); runTask(() => { @@ -926,9 +919,9 @@ if (!jQueryDisabled) { this.addTemplate( 'components/index-wrapper', ` - {{input type="text" id="outside-scope" class="input"}} +
- {{input type="text" id="inside-scope" class="input"}} +
` ); diff --git a/packages/ember/tests/routing/query_params_test/shared_state_test.js b/packages/ember/tests/routing/query_params_test/shared_state_test.js index 0b09bc31310..c78b0e036b2 100644 --- a/packages/ember/tests/routing/query_params_test/shared_state_test.js +++ b/packages/ember/tests/routing/query_params_test/shared_state_test.js @@ -42,7 +42,7 @@ moduleFor( this.addTemplate('application', `{{link-to 'Home' 'home' }}
{{outlet}}
`); this.addTemplate( 'home', - `{{link-to 'Dashboard' 'dashboard' }}{{input type="checkbox" id='filters-checkbox' checked=(mut this.filters.shared) }}` + `{{link-to 'Dashboard' 'dashboard' }}` ); this.addTemplate('dashboard', `{{link-to 'Home' 'home' }}`); } diff --git a/packages/internal-test-helpers/index.js b/packages/internal-test-helpers/index.js index 3379d35400d..e4ac00e41e0 100644 --- a/packages/internal-test-helpers/index.js +++ b/packages/internal-test-helpers/index.js @@ -7,6 +7,7 @@ export { default as moduleFor, setupTestClass } from './lib/module-for'; export { default as strip } from './lib/strip'; export { default as applyMixins } from './lib/apply-mixins'; export { default as getTextOf } from './lib/get-text-of'; +export { default as maybeExpectDeprecation } from './lib/maybe-expect-deprecation'; export { defineComponent, defineSimpleHelper, diff --git a/packages/internal-test-helpers/lib/ember-dev/deprecation.ts b/packages/internal-test-helpers/lib/ember-dev/deprecation.ts index 2ab1784f168..57daa3e9ad3 100644 --- a/packages/internal-test-helpers/lib/ember-dev/deprecation.ts +++ b/packages/internal-test-helpers/lib/ember-dev/deprecation.ts @@ -6,7 +6,7 @@ type ExpectDeprecationAsyncFunc = ( func: () => void | undefined | Message | Promise, expectedMessage: Message ) => Promise; -type ExpectDeprecationFunc = ( +export type ExpectDeprecationFunc = ( func: () => void | undefined | Message, expectedMessage: Message ) => void; diff --git a/packages/internal-test-helpers/lib/maybe-expect-deprecation.ts b/packages/internal-test-helpers/lib/maybe-expect-deprecation.ts new file mode 100644 index 00000000000..1c73cf35de6 --- /dev/null +++ b/packages/internal-test-helpers/lib/maybe-expect-deprecation.ts @@ -0,0 +1,16 @@ +import { ExpectDeprecationFunc } from './ember-dev/deprecation'; +import { Message } from './ember-dev/utils'; + +declare let expectDeprecation: ExpectDeprecationFunc; + +export default function maybeExpectDeprecation( + featureFlag: boolean | null, + callback: () => void, + message: Message +): void { + if (featureFlag) { + expectDeprecation(callback, message); + } else { + callback(); + } +}