Remove deprecated "mulitple" from page object (#25629)

* remove multiple and any unused page selectors

* fix issues

ui/lib/core/addon/components/form-field-label.hbs

@@ -4,7 +4,7 @@
 ~}}
 
 {{#if @label}}
-  <label class="is-label" ...attributes>
+  <label data-test-form-field-label class="is-label" ...attributes>
     {{@label}}
     {{#if @helpText}}
       <InfoTooltip>

ui/lib/core/addon/components/form-field.hbs

@@ -342,7 +342,7 @@
         onchange={{this.onChangeWithEvent}}
         data-test-input={{@attr.name}}
       />
-      <label for={{@attr.name}} class="is-label">
+      <label for={{@attr.name}} class="is-label" data-test-form-field-label>
         {{this.labelString}}
         {{#if (and this.showHelpText @attr.options.helpText)}}
           <InfoTooltip>{{@attr.options.helpText}}</InfoTooltip>

ui/tests/acceptance/settings/auth/configure/section-test.js

@@ -37,7 +37,7 @@ module('Acceptance | settings/auth/configure/section', function (hooks) {
     const section = 'options';
     await enablePage.enable(type, path);
     await page.visit({ path, section });
-    await page.fillInTextarea('description', 'This is AppRole!');
+    await fillIn('[data-test-input="description"]', 'This is Approle!');
     assert
       .dom('[data-test-input="config.tokenType"]')
       .hasValue('default-service', 'as default the token type selected is default-service.');

ui/tests/integration/components/form-field-test.js

@@ -43,13 +43,13 @@ module('Integration | Component | form field', function (hooks) {
     this.attr = { name: 'foo' };
     this.model = model;
     await render(hbs`<FormField @attr={{this.attr}} @model={{this.model}} />`);
-    assert.strictEqual(component.fields.objectAt(0).labelText[0], 'Foo', 'renders a label');
+    assert.strictEqual(component.fields.objectAt(0).labelValue, 'Foo', 'renders a label');
     assert.notOk(component.hasInput, 'renders only the label');
   });
 
   test('it renders: string', async function (assert) {
     const [model, spy] = await setup.call(this, createAttr('foo', 'string', { defaultValue: 'default' }));
-    assert.strictEqual(component.fields.objectAt(0).labelText[0], 'Foo', 'renders a label');
+    assert.strictEqual(component.fields.objectAt(0).labelValue, 'Foo', 'renders a label');
     assert.strictEqual(component.fields.objectAt(0).inputValue, 'default', 'renders default value');
     assert.ok(component.hasInput, 'renders input for string');
     await component.fields.objectAt(0).input('bar').change();
@@ -60,7 +60,7 @@ module('Integration | Component | form field', function (hooks) {
 
   test('it renders: boolean', async function (assert) {
     const [model, spy] = await setup.call(this, createAttr('foo', 'boolean', { defaultValue: false }));
-    assert.strictEqual(component.fields.objectAt(0).labelText[0], 'Foo', 'renders a label');
+    assert.strictEqual(component.fields.objectAt(0).labelValue, 'Foo', 'renders a label');
     assert.notOk(component.fields.objectAt(0).inputChecked, 'renders default value');
     assert.ok(component.hasCheckbox, 'renders a checkbox for boolean');
     await component.fields.objectAt(0).clickLabel();
@@ -71,7 +71,7 @@ module('Integration | Component | form field', function (hooks) {
 
   test('it renders: number', async function (assert) {
     const [model, spy] = await setup.call(this, createAttr('foo', 'number', { defaultValue: 5 }));
-    assert.strictEqual(component.fields.objectAt(0).labelText[0], 'Foo', 'renders a label');
+    assert.strictEqual(component.fields.objectAt(0).labelValue, 'Foo', 'renders a label');
     assert.strictEqual(component.fields.objectAt(0).inputValue, '5', 'renders default value');
     assert.ok(component.hasInput, 'renders input for number');
     await component.fields.objectAt(0).input(8).change();
@@ -88,7 +88,7 @@ module('Integration | Component | form field', function (hooks) {
       },
     });
     await setup.call(this, createAttr('foo', 'object'));
-    assert.strictEqual(component.fields.objectAt(0).labelText[0], 'Foo', 'renders a label');
+    assert.dom('[data-test-component="json-editor-title"]').hasText('Foo', 'renders a label');
     assert.ok(component.hasJSONEditor, 'renders the json editor');
   });
 
@@ -100,7 +100,7 @@ module('Integration | Component | form field', function (hooks) {
       },
     });
     await setup.call(this, createAttr('foo', 'string', { editType: 'json', allowReset: true }));
-    assert.strictEqual(component.fields.objectAt(0).labelText[0], 'Foo', 'renders a label');
+    assert.dom('[data-test-component="json-editor-title"]').hasText('Foo', 'renders a label');
     assert.ok(component.hasJSONEditor, 'renders the json editor');
     assert.ok(component.hasJSONClearButton, 'renders button that will clear the JSON value');
   });
@@ -110,7 +110,7 @@ module('Integration | Component | form field', function (hooks) {
       this,
       createAttr('foo', 'string', { defaultValue: 'goodbye', editType: 'textarea' })
     );
-    assert.strictEqual(component.fields.objectAt(0).labelText[0], 'Foo', 'renders a label');
+    assert.strictEqual(component.fields.objectAt(0).labelValue, 'Foo', 'renders a label');
     assert.ok(component.hasTextarea, 'renders a textarea');
     assert.strictEqual(component.fields.objectAt(0).textareaValue, 'goodbye', 'renders default value');
     await component.fields.objectAt(0).textarea('hello');
@@ -233,11 +233,7 @@ module('Integration | Component | form field', function (hooks) {
 
   test('it uses a passed label', async function (assert) {
     await setup.call(this, createAttr('foo', 'string', { label: 'Not Foo' }));
-    assert.strictEqual(
-      component.fields.objectAt(0).labelText[0],
-      'Not Foo',
-      'renders the label from options'
-    );
+    assert.strictEqual(component.fields.objectAt(0).labelValue, 'Not Foo', 'renders the label from options');
   });
 
   test('it renders a help tooltip', async function (assert) {

ui/tests/pages/components/form-field.js

@@ -11,25 +11,22 @@ import {
   isPresent,
   collection,
   fillable,
-  text,
   triggerable,
+  text,
 } from 'ember-cli-page-object';
 
 export default {
   hasStringList: isPresent('[data-test-component=string-list]'),
-  hasSearchSelect: isPresent('[data-test-component=search-select]'),
   hasTextFile: isPresent('[data-test-component=text-file]'),
   hasTTLPicker: isPresent('[data-test-toggle-input="Foo"]'),
   hasJSONEditor: isPresent('[data-test-component="code-mirror-modifier"]'),
   hasJSONClearButton: isPresent('[data-test-json-clear-button]'),
-  hasSelect: isPresent('select'),
   hasInput: isPresent('input'),
   hasCheckbox: isPresent('input[type=checkbox]'),
   hasTextarea: isPresent('textarea'),
   hasMaskedInput: isPresent('[data-test-masked-input]'),
   hasTooltip: isPresent('[data-test-component=info-tooltip]'),
   tooltipTrigger: focusable('[data-test-tool-tip-trigger]'),
-  tooltipContent: text('[data-test-help-text]'),
   hasRadio: isPresent('[data-test-radio-input]'),
   radioButtons: collection('input[type=radio]', {
     select: clickable(),
@@ -39,8 +36,7 @@ export default {
   fields: collection('[data-test-field]', {
     clickLabel: clickable('label'),
     toggleTtl: clickable('[data-test-toggle-input="Foo"]'),
-    for: attribute('for', 'label', { multiple: true }),
-    labelText: text('label', { multiple: true }),
+    labelValue: text('[data-test-form-field-label]'),
     input: fillable('input'),
     ttlTime: fillable('[data-test-ttl-value]'),
     select: fillable('select'),
@@ -49,23 +45,8 @@ export default {
     inputValue: value('input'),
     textareaValue: value('textarea'),
     inputChecked: attribute('checked', 'input[type=checkbox]'),
-    selectValue: value('select'),
   }),
   selectRadioInput: async function (value) {
     return this.radioButtons.filterBy('id', value)[0].select();
   },
-  fillInTextarea: async function (name, value) {
-    return this.fields
-      .filter((field) => {
-        return field.for.includes(name);
-      })[0]
-      .textarea(value);
-  },
-  fillIn: async function (name, value) {
-    return this.fields
-      .filter((field) => {
-        return field.for.includes(name);
-      })[0]
-      .input(value);
-  },
 };

ui/tests/pages/components/search-select.js

@@ -6,7 +6,6 @@
 import { isPresent, collection, text, clickable } from 'ember-cli-page-object';
 
 export default {
-  hasSearchSelect: isPresent('[data-test-component=search-select]'),
   hasTrigger: isPresent('.ember-power-select-trigger'),
   hasLabel: isPresent('[data-test-field-label]'),
   labelText: text('[data-test-field-label]'),