[VAULT-37108] UI: update toggle-input test selectors (#31087)

* [VAULT-37108] UI: update toggle-input test selectors
- update namespace-picker to data-test-button

* - replace instances of data-test-toggle-input with general selector

* - replace enableDefaultTtl() and enableMaxTtl()  with general selector

* - replace toggleJson with general selector

* - replace toggleButton with general selector

* - replace toggleTtl() with general selector

* - replace hasToggleButton() with general selector

* - replace hasTTLPicker() with general selector

* - replace toggleDiff with general selector

* fix lint error :]

* fix failing test

ui/app/components/namespace-picker.hbs

@@ -10,7 +10,7 @@
       @icon="org"
       @text={{or this.selectedNamespace.id "-"}}
       @isFullWidth={{true}}
-      data-test-toggle-input="namespace-picker"
+      data-test-button="namespace-picker"
       {{on "click" this.toggleNamespacePicker}}
     />
 

ui/tests/acceptance/access/namespaces/index-test.js

@@ -142,7 +142,7 @@ module('Acceptance | Enterprise | /access/namespaces', function (hooks) {
     await click(GENERAL.menuItem('switch'));
 
     // Verify that we switched namespaces
-    await click(GENERAL.toggleInput('namespace-picker'));
+    await click(GENERAL.button('namespace-picker'));
     assert.dom('[data-test-badge-namespace]').hasText(testNS, 'Namespace badge shows the correct namespace');
     assert.strictEqual(currentRouteName(), 'vault.cluster.dashboard', 'navigates to the correct route');
 

ui/tests/acceptance/enterprise-namespaces-test.js

@@ -29,7 +29,7 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
   });
 
   test('it focuses the search input field when user toggles namespace picker', async function (assert) {
-    await click(GENERAL.toggleInput('namespace-picker'));
+    await click(GENERAL.button('namespace-picker'));
 
     // Verify that the search input field is focused
     const searchInput = find(GENERAL.inputByAttr('Search namespaces'));
@@ -45,7 +45,7 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
     const namespaces = ['beep/boop'];
     await createNSFromPaths(namespaces);
 
-    await click(GENERAL.toggleInput('namespace-picker'));
+    await click(GENERAL.button('namespace-picker'));
     await click(GENERAL.button('Refresh list'));
 
     // Simulate typing into the search input
@@ -79,7 +79,7 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
     await login(token);
 
     // Open the namespace picker
-    await click(GENERAL.toggleInput('namespace-picker'));
+    await click(GENERAL.button('namespace-picker'));
 
     // Verify that the root namespace is selected by default
     assert.dom(GENERAL.button('root')).hasAttribute('aria-selected', 'true', 'root is selected by default');
@@ -95,7 +95,7 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
     await login();
 
     // Open the namespace picker & verify that the foo namespace does exist
-    await click(GENERAL.toggleInput('namespace-picker'));
+    await click(GENERAL.button('namespace-picker'));
     assert.dom(GENERAL.button(namespace)).exists('foo should exist in the namespace picker');
 
     // Cleanup: Delete namespace(s) via the CLI
@@ -108,7 +108,7 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
     const namespaces = ['beep/boop/bop'];
     await createNSFromPaths(namespaces);
 
-    await click(GENERAL.toggleInput('namespace-picker'));
+    await click(GENERAL.button('namespace-picker'));
     await click(GENERAL.button('Refresh list'));
 
     // Login with a namespace prefixed with /
@@ -116,11 +116,11 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
     await settled();
 
     assert
-      .dom(GENERAL.toggleInput('namespace-picker'))
+      .dom(GENERAL.button('namespace-picker'))
       .hasText('boop', `shows the namespace 'boop' in the toggle component`);
 
     // Open the namespace picker
-    await click(GENERAL.toggleInput('namespace-picker'));
+    await click(GENERAL.button('namespace-picker'));
 
     // Find the selected element with the check icon & ensure it exists
     assert
@@ -155,14 +155,14 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
     await visit('/vault/access/namespaces');
 
     // Verify that the namespace exists in the namespace picker
-    await click(GENERAL.toggleInput('namespace-picker'));
+    await click(GENERAL.button('namespace-picker'));
     await click(GENERAL.button('Refresh list'));
     await fillIn(GENERAL.inputByAttr('Search namespaces'), namespace);
 
     assert.dom(GENERAL.button(namespace)).exists('Namespace exists in the namespace picker');
 
     // Close the namespace picker
-    await click(GENERAL.toggleInput('namespace-picker'));
+    await click(GENERAL.button('namespace-picker'));
 
     // Verify that the namespace exists in the manage namespaces page
     await fillIn(GENERAL.filterInputExplicit, namespace);
@@ -182,7 +182,7 @@ module('Acceptance | Enterprise | namespaces', function (hooks) {
     assert.dom(GENERAL.emptyStateTitle).hasText('No namespaces yet', 'Namespace deletion successful');
 
     // Verify that the namespace does not exist in the namespace picker
-    await click(GENERAL.toggleInput('namespace-picker'));
+    await click(GENERAL.button('namespace-picker'));
     await waitFor(GENERAL.button('Refresh list'));
     await click(GENERAL.button('Refresh list'));
     await fillIn(GENERAL.inputByAttr('Search namespaces'), namespace);

ui/tests/acceptance/pki/pki-tidy-test.js

@@ -157,7 +157,7 @@ module('Acceptance | pki tidy', function (hooks) {
     assert
       .dom(GENERAL.ttl.input('Tidy ACME enabled'))
       .hasValue('30', 'acmeAccountSafetyBuffer defaults to 30 days');
-    await click('[data-test-toggle-input="Tidy ACME enabled"]');
+    await click(GENERAL.toggleInput('Tidy ACME enabled'));
 
     await click(PKI_TIDY_FORM.tidySave);
     assert.strictEqual(

ui/tests/acceptance/secrets/backend/database/secret-test.js

@@ -65,7 +65,7 @@ const connectionTests = [
       assert.dom(GENERAL.inputByAttr('tls_server_name')).exists(`TLS server name field exists for ${name}`);
       assert.dom(GENERAL.inputByAttr('insecure')).exists(`Insecure checkbox exists for ${name}`);
       assert
-        .dom('[data-test-toggle-input="show-username_template"]')
+        .dom(GENERAL.toggleInput('show-username_template'))
         .exists(`Username template toggle exists for ${name}`);
     },
   },
@@ -221,7 +221,7 @@ const connectionTests = [
         .dom(GENERAL.inputByAttr('root_rotation_statements'))
         .exists(`Root rotation statements exists for ${name}`);
       assert
-        .dom('[data-test-toggle-input="show-username_template"]')
+        .dom(GENERAL.toggleInput('show-username_template'))
         .exists(`Username template toggle exists for ${name}`);
     },
   },
@@ -317,7 +317,7 @@ module('Acceptance | secrets/database/*', function (hooks) {
       assert.dom(`[data-test-input="name"]`).hasAttribute('readonly');
       assert.dom(`[data-test-input="plugin_name"]`).hasAttribute('readonly');
       assert.dom(GENERAL.inputByAttr('password')).doesNotExist('Password is not displayed on edit form');
-      assert.dom('[data-test-toggle-input="show-password"]').exists('Update password toggle exists');
+      assert.dom(GENERAL.toggleInput('show-password')).exists('Update password toggle exists');
 
       assert.dom(GENERAL.inputByAttr('verify_connection')).isNotChecked('verify is still unchecked');
       await click(GENERAL.submitButton);
@@ -584,14 +584,14 @@ module('Acceptance | secrets/database/*', function (hooks) {
     assert.dom('[data-test-component="empty-state"]').doesNotExist('Empty states go away');
     assert.dom(GENERAL.inputByAttr('username')).exists('Username field appears for static role');
     assert
-      .dom('[data-test-toggle-input="Rotation period"]')
+      .dom(GENERAL.toggleInput('Rotation period'))
       .exists('Rotation period field appears for static role');
     await rolePage.roleType('dynamic');
     assert
-      .dom('[data-test-toggle-input="Generated credentials’s Time-to-Live (TTL)"]')
+      .dom(GENERAL.toggleInput('Generated credentials’s Time-to-Live (TTL)'))
       .exists('TTL field exists for dynamic');
     assert
-      .dom('[data-test-toggle-input="Generated credentials’s maximum Time-to-Live (Max TTL)"]')
+      .dom(GENERAL.toggleInput('Generated credentials’s maximum Time-to-Live (Max TTL)'))
       .exists('Max TTL field exists for dynamic');
     // Real connection (actual running db) required to save role, so we aren't testing that flow yet
   });

ui/tests/acceptance/secrets/backend/database/workflow-test.js

@@ -349,7 +349,7 @@ module('Acceptance | database workflow', function (hooks) {
         await visit(`/vault/secrets/${this.backend}/create`);
         await fillOutConnection(this.connection);
         if (toggleRotateOff) {
-          await click('[data-test-toggle-input="toggle-skip_static_role_rotation_import"]');
+          await click(GENERAL.toggleInput('toggle-skip_static_role_rotation_import'));
         }
         await click(GENERAL.submitButton);
         await visit(`/vault/secrets/${this.backend}/show/${this.connection}`);

ui/tests/acceptance/secrets/backend/kv/kv-v2-workflow-edge-cases-test.js

@@ -294,7 +294,7 @@ module('Acceptance | kv-v2 workflow | edge cases', function (hooks) {
     await visit(`/vault/secrets/${this.backend}/kv/create`);
     await fillIn(FORM.inputByAttr('path'), 'complex');
 
-    await click(FORM.toggleJson);
+    await click(GENERAL.toggleInput('json'));
 
     assert.strictEqual(
       codemirror().getValue(),
@@ -308,8 +308,8 @@ module('Acceptance | kv-v2 workflow | edge cases', function (hooks) {
 
     // Details view
     await click(PAGE.secretTab('Secret'));
-    assert.dom(FORM.toggleJson).isNotDisabled('JSON toggle is not disabled');
-    assert.dom(FORM.toggleJson).isChecked("JSON toggle is checked 'on'");
+    assert.dom(GENERAL.toggleInput('json')).isNotDisabled('JSON toggle is not disabled');
+    assert.dom(GENERAL.toggleInput('json')).isChecked("JSON toggle is checked 'on'");
 
     assert
       .dom(GENERAL.codeBlock('secret-data'))
@@ -317,8 +317,8 @@ module('Acceptance | kv-v2 workflow | edge cases', function (hooks) {
 
     // New version view
     await click(PAGE.detail.createNewVersion);
-    assert.dom(FORM.toggleJson).isNotDisabled();
-    assert.dom(FORM.toggleJson).isChecked();
+    assert.dom(GENERAL.toggleInput('json')).isNotDisabled();
+    assert.dom(GENERAL.toggleInput('json')).isChecked();
     assert.deepEqual(
       codemirror().getValue(),
       `{
@@ -336,7 +336,7 @@ module('Acceptance | kv-v2 workflow | edge cases', function (hooks) {
     await visit(`/vault/secrets/${this.backend}/kv/create`);
     await fillIn(FORM.inputByAttr('path'), 'json jump');
 
-    await click(FORM.toggleJson);
+    await click(GENERAL.toggleInput('json'));
     codemirror().setCursor({ line: 2, ch: 1 });
     await triggerKeyEvent(GENERAL.codemirrorTextarea, 'keydown', 'Enter');
     const actualCursorPosition = JSON.stringify(codemirror().getCursor());
@@ -359,7 +359,7 @@ module('Acceptance | kv-v2 workflow | edge cases', function (hooks) {
     await visit(`/vault/secrets/${this.backend}/kv/create`);
     await fillIn(FORM.inputByAttr('path'), 'complex_version_test');
 
-    await click(FORM.toggleJson);
+    await click(GENERAL.toggleInput('json'));
     codemirror().setValue('{ "foo1": { "name": "bar1" } }');
     await click(FORM.saveBtn);
 
@@ -392,8 +392,8 @@ module('Acceptance | kv-v2 workflow | edge cases', function (hooks) {
     await fillIn(FORM.maskedValueInput(), '{bar}');
     await click(FORM.saveBtn);
     await click(GENERAL.overviewCard.actionText('Create new'));
-    assert.dom(FORM.toggleJson).isNotDisabled();
-    assert.dom(FORM.toggleJson).isNotChecked();
+    assert.dom(GENERAL.toggleInput('json')).isNotDisabled();
+    assert.dom(GENERAL.toggleInput('json')).isNotChecked();
   });
 
   // patch is technically enterprise only but stubbing the version so these tests run on both CE and enterprise

ui/tests/acceptance/settings-test.js

@@ -38,7 +38,8 @@ module('Acceptance | secret engine mount settings', function (hooks) {
     await click(MOUNT_BACKEND_FORM.mountType(type));
     await fillIn(GENERAL.inputByAttr('path'), path);
     await click(GENERAL.button('Method Options'));
-    await mountSecrets.enableDefaultTtl().defaultTTLUnit('s').defaultTTLVal(100);
+    await click(GENERAL.toggleInput('Default Lease TTL'));
+    await mountSecrets.defaultTTLUnit('s').defaultTTLVal(100);
     await click(GENERAL.submitButton);
 
     assert

ui/tests/acceptance/settings/mount-secret-backend-test.js

@@ -63,13 +63,10 @@ module('Acceptance | settings/mount-secret-backend', function (hooks) {
     await click(MOUNT_BACKEND_FORM.mountType('kv'));
     await fillIn(GENERAL.inputByAttr('path'), path);
     await click(GENERAL.button('Method Options'));
-    await page
-      .enableDefaultTtl()
-      .defaultTTLUnit('h')
-      .defaultTTLVal(defaultTTLHours)
-      .enableMaxTtl()
-      .maxTTLUnit('h')
-      .maxTTLVal(maxTTLHours);
+    await click(GENERAL.toggleInput('Default Lease TTL'));
+    await page.defaultTTLUnit('h').defaultTTLVal(defaultTTLHours);
+    await click(GENERAL.toggleInput('Max Lease TTL'));
+    await page.maxTTLUnit('h').maxTTLVal(maxTTLHours);
     await click(GENERAL.submitButton);
     await configPage.visit({ backend: path });
     assert.strictEqual(configPage.defaultTTL, `${this.calcDays(defaultTTLHours)}`, 'shows the proper TTL');
@@ -91,7 +88,9 @@ module('Acceptance | settings/mount-secret-backend', function (hooks) {
     await click(MOUNT_BACKEND_FORM.mountType('kv'));
     await fillIn(GENERAL.inputByAttr('path'), path);
     await click(GENERAL.button('Method Options'));
-    await page.enableDefaultTtl().enableMaxTtl().maxTTLUnit('h').maxTTLVal(maxTTLHours);
+    await click(GENERAL.toggleInput('Default Lease TTL'));
+    await click(GENERAL.toggleInput('Max Lease TTL'));
+    await page.maxTTLUnit('h').maxTTLVal(maxTTLHours);
     await click(GENERAL.submitButton);
     await configPage.visit({ backend: path });
     assert.strictEqual(configPage.defaultTTL, '1 month 1 day', 'shows system default TTL');
@@ -116,7 +115,7 @@ module('Acceptance | settings/mount-secret-backend', function (hooks) {
     assert
       .dom('[data-test-input="config.maxLeaseTtl"] [data-test-ttl-toggle]')
       .isNotChecked('Toggle is unchecked by default');
-    await page.enableMaxTtl();
+    await click(GENERAL.toggleInput('Max Lease TTL'));
     assert.dom('[data-test-input="config.maxLeaseTtl"] [data-test-ttl-value]').hasValue('');
     assert.dom('[data-test-input="config.maxLeaseTtl"] [data-test-select="ttl-unit"]').hasValue('s');
   });

ui/tests/helpers/kv/kv-selectors.js

@@ -53,7 +53,6 @@ export const PAGE = {
     syncAlert: (name) => (name ? `[data-test-sync-alert="${name}"]` : '[data-test-sync-alert]'),
   },
   edit: {
-    toggleDiff: '[data-test-toggle-input="Show diff"',
     toggleDiffDescription: '[data-test-diff-description]',
   },
   list: {
@@ -93,7 +92,6 @@ export const PAGE = {
 export const FORM = {
   inputByAttr: (attr) => `[data-test-input="${attr}"]`,
   fieldByAttr: (attr) => `[data=test=field="${attr}"]`, // formfield
-  toggleJson: '[data-test-toggle-input="json"]',
   toggleMetadata: '[data-test-metadata-toggle]',
   jsonEditor: '[data-test-component="code-mirror-modifier"]',
   ttlValue: (name) => `[data-test-ttl-value="${name}"]`,

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

@@ -177,11 +177,11 @@ module('Integration | Component | form field', function (hooks) {
         helperTextDisabled: 'Toggled off',
       })
     );
-    assert.ok(component.hasToggleButton, 'renders a toggle button');
+    assert.dom(GENERAL.toggleInput('toggle-foobar')).exists('Toggle button exists');
     assert.dom(GENERAL.toggleInput('toggle-foobar')).isNotChecked();
     assert.dom('[data-test-toggle-subtext]').hasText('Toggled off');
 
-    await component.fields.objectAt(0).toggleButton();
+    await click(GENERAL.toggleInput('toggle-foobar'));
 
     assert.true(model.get('foobar'));
     assert.ok(spy.calledWith('foobar', true), 'onChange called with correct args');
@@ -243,16 +243,16 @@ module('Integration | Component | form field', function (hooks) {
         helperTextEnabled: 'TTL is enabled',
       })
     );
-    assert.ok(component.hasTTLPicker, 'renders the ttl-picker component');
+    assert.dom(GENERAL.toggleInput('Foo')).exists('renders the ttl-picker component');
     assert.dom('[data-test-ttl-form-subtext]').hasText('TTL is disabled');
     assert.dom('[data-test-ttl-toggle]').isNotChecked();
-    await component.fields.objectAt(0).toggleTtl();
+    await click(GENERAL.toggleInput('Foo'));
     await component.fields.objectAt(0).select('h').change();
     await component.fields.objectAt(0).ttlTime('3');
     const expectedSeconds = `${3 * 3600}s`;
     assert.strictEqual(model.get('foo'), expectedSeconds);
     assert.ok(spy.calledWith('foo', expectedSeconds), 'onChange called with correct args');
-    await component.fields.objectAt(0).toggleTtl();
+    await click(GENERAL.toggleInput('Foo'));
     assert.ok(spy.calledWith('foo', '0'), 'onChange called with 0 when toggle off');
   });
 
@@ -265,9 +265,9 @@ module('Integration | Component | form field', function (hooks) {
         ttlOffValue: '',
       })
     );
-    assert.ok(component.hasTTLPicker, 'renders the ttl-picker component');
+    assert.dom(GENERAL.toggleInput('Foo')).exists('renders the ttl-picker component');
     assert.dom('[data-test-ttl-toggle]').isChecked();
-    await component.fields.objectAt(0).toggleTtl();
+    await click(GENERAL.toggleInput('Foo'));
     assert.strictEqual(model.get('foo'), '');
     assert.ok(spy.calledWith('foo', ''), 'onChange called with correct args');
   });
@@ -346,7 +346,7 @@ module('Integration | Component | form field', function (hooks) {
 
     await render(hbs`<FormField @attr={{this.attr}} @model={{this.model}} @onChange={{this.onChange}} />`);
     assert
-      .dom('[data-test-toggle-input="Foo"]')
+      .dom(GENERAL.toggleInput('Foo'))
       .isNotChecked('Toggle is initially unchecked when given default value');
     assert.dom('[data-test-ttl-picker-group="Foo"]').doesNotExist('Ttl input is hidden');
   });
@@ -361,7 +361,7 @@ module('Integration | Component | form field', function (hooks) {
     });
 
     await render(hbs`<FormField @attr={{this.attr}} @model={{this.model}} @onChange={{this.onChange}} />`);
-    assert.dom('[data-test-toggle-input="Foo"]').isChecked('Toggle is initially checked when given value');
+    assert.dom(GENERAL.toggleInput('Foo')).isChecked('Toggle is initially checked when given value');
     assert.dom('[data-test-ttl-value="Foo"]').hasValue('1', 'Ttl input displays with correct value');
   });
 

ui/tests/integration/components/kubernetes/page/role/create-and-edit-test.js

@@ -11,6 +11,7 @@ import { render, click, fillIn } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import sinon from 'sinon';
 import { setRunOptions } from 'ember-a11y-testing/test-support';
+import { GENERAL } from 'vault/tests/helpers/general-selectors';
 
 module('Integration | Component | kubernetes | Page::Role::CreateAndEdit', function (hooks) {
   setupRenderingTest(hooks);
@@ -123,7 +124,7 @@ module('Integration | Component | kubernetes | Page::Role::CreateAndEdit', funct
     );
 
     await click('[data-test-input-group="kubernetesRoleType"] input');
-    await click('[data-test-toggle-input="show-nameTemplate"]');
+    await click(GENERAL.toggleInput('show-nameTemplate'));
     await fillIn('[data-test-input="nameTemplate"]', 'bar');
     await fillIn('[data-test-select-template]', '6');
     await click('[data-test-radio-card="expanded"]');

ui/tests/integration/components/kv/page/kv-page-secret-details-test.js

@@ -10,7 +10,7 @@ import { setupMirage } from 'ember-cli-mirage/test-support';
 import { click, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { kvDataPath } from 'vault/utils/kv-path';
-import { FORM, PAGE } from 'vault/tests/helpers/kv/kv-selectors';
+import { PAGE } from 'vault/tests/helpers/kv/kv-selectors';
 import { syncStatusResponse } from 'vault/mirage/handlers/sync';
 import { encodePath } from 'vault/utils/path-encoding-helpers';
 import { baseSetup } from 'vault/tests/helpers/kv/kv-run-commands';
@@ -126,7 +126,7 @@ module('Integration | Component | kv-v2 | Page::Secret::Details', function (hook
     assert.dom(PAGE.infoRowValue('foo')).hasText('***********');
     await click(GENERAL.button('toggle-masked'));
     assert.dom(PAGE.infoRowValue('foo')).hasText('bar', 'renders secret value');
-    await click(FORM.toggleJson);
+    await click(GENERAL.toggleInput('json'));
     assert.dom(GENERAL.codeBlock('secret-data')).hasText(
       `Version data {
   "foo": "bar"
@@ -142,8 +142,8 @@ module('Integration | Component | kv-v2 | Page::Secret::Details', function (hook
     assert.expect(4);
     await this.renderComponent(this.modelComplex);
     assert.dom(PAGE.infoRowValue('foo')).doesNotExist('does not render rows of secret data');
-    assert.dom(FORM.toggleJson).isChecked();
-    assert.dom(FORM.toggleJson).isNotDisabled();
+    assert.dom(GENERAL.toggleInput('json')).isChecked();
+    assert.dom(GENERAL.toggleInput('json')).isNotDisabled();
     assert.dom(GENERAL.codeBlock('secret-data')).exists('hds codeBlock exists');
   });
 

ui/tests/integration/components/kv/page/kv-page-secret-edit-test.js

@@ -14,6 +14,7 @@ import codemirror from 'vault/tests/helpers/codemirror';
 import { FORM, PAGE } from 'vault/tests/helpers/kv/kv-selectors';
 import sinon from 'sinon';
 import { setRunOptions } from 'ember-a11y-testing/test-support';
+import { GENERAL } from 'vault/tests/helpers/general-selectors';
 
 module('Integration | Component | kv-v2 | Page::Secret::Edit', function (hooks) {
   setupRenderingTest(hooks);
@@ -87,14 +88,14 @@ module('Integration | Component | kv-v2 | Page::Secret::Edit', function (hooks)
     assert.dom(FORM.keyInput()).hasValue('foo');
     assert.dom(FORM.maskedValueInput()).hasValue('bar');
     assert.dom(FORM.dataInputLabel({ isJson: false })).hasText('Version data');
-    await click(FORM.toggleJson);
+    await click(GENERAL.toggleInput('json'));
     assert.strictEqual(
       codemirror().getValue(' '),
       `{   \"foo": \"bar" }`, // eslint-disable-line no-useless-escape
       'json editor initializes with empty object'
     );
     assert.dom(FORM.dataInputLabel({ isJson: true })).hasText('Version data');
-    await click(FORM.toggleJson);
+    await click(GENERAL.toggleInput('json'));
     await fillIn(FORM.keyInput(1), 'foo2');
     await fillIn(FORM.maskedValueInput(1), 'bar2');
     await click(FORM.saveBtn);
@@ -117,21 +118,21 @@ module('Integration | Component | kv-v2 | Page::Secret::Edit', function (hooks)
       { owner: this.engine }
     );
 
-    assert.dom(PAGE.edit.toggleDiff).isNotDisabled('Diff toggle is not disabled');
+    assert.dom(GENERAL.toggleInput('Show diff')).isNotDisabled('Diff toggle is not disabled');
     assert.dom(PAGE.edit.toggleDiffDescription).hasText('No changes to show. Update secret to view diff');
     assert.dom(PAGE.diff.visualDiff).doesNotExist('Does not show visual diff');
 
     await fillIn(FORM.keyInput(1), 'foo2');
     await fillIn(FORM.maskedValueInput(1), 'bar2');
 
-    assert.dom(PAGE.edit.toggleDiff).isNotDisabled('Diff toggle is not disabled');
+    assert.dom(GENERAL.toggleInput('Show diff')).isNotDisabled('Diff toggle is not disabled');
     assert.dom(PAGE.edit.toggleDiffDescription).hasText('Showing the diff will reveal secret values');
     assert.dom(PAGE.diff.visualDiff).doesNotExist('Does not show visual diff');
-    await click(PAGE.edit.toggleDiff);
+    await click(GENERAL.toggleInput('Show diff'));
     assert.dom(PAGE.diff.visualDiff).exists('Shows visual diff');
     assert.dom(PAGE.diff.added).hasText(`foo2"bar2"`);
 
-    await click(FORM.toggleJson);
+    await click(GENERAL.toggleInput('json'));
     codemirror().setValue('{ "foo3": "bar3" }');
 
     assert.dom(PAGE.diff.visualDiff).exists('Visual diff updates');
@@ -217,7 +218,7 @@ module('Integration | Component | kv-v2 | Page::Secret::Edit', function (hooks)
       { owner: this.engine }
     );
 
-    await click(FORM.toggleJson);
+    await click(GENERAL.toggleInput('json'));
     codemirror().setValue('i am a string and not JSON');
     assert
       .dom(FORM.inlineAlert)
@@ -260,7 +261,7 @@ module('Integration | Component | kv-v2 | Page::Secret::Edit', function (hooks)
       { owner: this.engine }
     );
     assert.dom(FORM.dataInputLabel({ isJson: false })).hasText('Version data');
-    await click(FORM.toggleJson);
+    await click(GENERAL.toggleInput('json'));
     assert.dom(FORM.dataInputLabel({ isJson: true })).hasText('Version data');
 
     codemirror().setValue(`{ "hello": "there"}`);

ui/tests/integration/components/kv/page/kv-page-secrets-create-test.js

@@ -14,6 +14,7 @@ import codemirror from 'vault/tests/helpers/codemirror';
 import { FORM } from 'vault/tests/helpers/kv/kv-selectors';
 import sinon from 'sinon';
 import { setRunOptions } from 'ember-a11y-testing/test-support';
+import { GENERAL } from 'vault/tests/helpers/general-selectors';
 
 module('Integration | Component | kv-v2 | Page::Secrets::Create', function (hooks) {
   setupRenderingTest(hooks);
@@ -248,7 +249,7 @@ module('Integration | Component | kv-v2 | Page::Secrets::Create', function (hook
       .dom(FORM.validation('path'))
       .doesNotExist('it removes validation on key up when secret contains slash but does not end in one');
 
-    await click(FORM.toggleJson);
+    await click(GENERAL.toggleInput('json'));
     codemirror().setValue('i am a string and not JSON');
     assert
       .dom(FORM.inlineAlert)
@@ -293,7 +294,7 @@ module('Integration | Component | kv-v2 | Page::Secrets::Create', function (hook
     );
 
     assert.dom(FORM.dataInputLabel({ isJson: false })).hasText('Secret data');
-    await click(FORM.toggleJson);
+    await click(GENERAL.toggleInput('json'));
     assert.dom(FORM.dataInputLabel({ isJson: true })).hasText('Secret data');
 
     codemirror().setValue(`{ "hello": "there"}`);

ui/tests/integration/components/namespace-picker-test.js

@@ -63,7 +63,7 @@ module('Integration | Component | namespace-picker', function (hooks) {
 
   test('it focuses the search input field when the component is loaded', async function (assert) {
     await render(hbs`<NamespacePicker />`);
-    await click(GENERAL.toggleInput('namespace-picker'));
+    await click(GENERAL.button('namespace-picker'));
 
     // Verify that the search input field is focused
     const searchInput = find(GENERAL.inputByAttr('Search namespaces'));
@@ -76,7 +76,7 @@ module('Integration | Component | namespace-picker', function (hooks) {
 
   test('it filters namespace options based on search input', async function (assert) {
     await render(hbs`<NamespacePicker/>`);
-    await click(GENERAL.toggleInput('namespace-picker'));
+    await click(GENERAL.button('namespace-picker'));
 
     // Verify all namespaces are displayed initially which are pre-populated in the NamespaceService
     for (const namespace of INITIALIZED_NAMESPACES) {
@@ -96,10 +96,13 @@ module('Integration | Component | namespace-picker', function (hooks) {
     await fillIn(GENERAL.inputByAttr('Search namespaces'), '');
 
     // Verify all namespaces are displayed after clearing the search input
+    assert.dom(GENERAL.button('root')).exists('Namespace "root" is displayed');
+    assert.dom(GENERAL.button('parent1')).exists('Namespace "parent1" is displayed');
+    assert.dom(GENERAL.button('parent1/child1')).exists('Namespace "parent1/child1" is displayed');
     assert.strictEqual(
-      findAll(GENERAL.button()).length,
+      findAll(`ul ${GENERAL.button()}`).length,
       3,
-      'All namespaces are displayed after clearing the search input'
+      'Three namespaces are displayed after clearing the search input'
     );
   });
 
@@ -113,7 +116,7 @@ module('Integration | Component | namespace-picker', function (hooks) {
     });
 
     await render(hbs`<NamespacePicker />`);
-    await click(GENERAL.toggleInput('namespace-picker'));
+    await click(GENERAL.button('namespace-picker'));
 
     // Verify that the "Refresh List" button is visible
     assert.dom(GENERAL.button('Refresh list')).exists('Refresh List button is visible');
@@ -130,7 +133,7 @@ module('Integration | Component | namespace-picker', function (hooks) {
     });
 
     await render(hbs`<NamespacePicker />`);
-    await click(GENERAL.toggleInput('namespace-picker'));
+    await click(GENERAL.button('namespace-picker'));
 
     // Verify that the buttons are hidden
     assert.dom(GENERAL.button('Refresh list')).doesNotExist('Refresh List button is hidden');
@@ -144,7 +147,7 @@ module('Integration | Component | namespace-picker', function (hooks) {
     });
 
     await render(hbs`<NamespacePicker />`);
-    await click(GENERAL.toggleInput('namespace-picker'));
+    await click(GENERAL.button('namespace-picker'));
 
     // Verify that the buttons are hidden
     assert.dom(GENERAL.button('Refresh list')).doesNotExist('Refresh List button is hidden');
@@ -163,7 +166,7 @@ module('Integration | Component | namespace-picker', function (hooks) {
     });
 
     await render(hbs`<NamespacePicker />`);
-    await click(GENERAL.toggleInput('namespace-picker'));
+    await click(GENERAL.button('namespace-picker'));
 
     // Dynamically modify the `findNamespacesForUser.perform` method for this test
     const namespaceService = this.owner.lookup('service:namespace');

ui/tests/integration/components/regex-validator-test.js

@@ -9,6 +9,7 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, click, fillIn, settled } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import { GENERAL } from 'vault/tests/helpers/general-selectors';
 
 module('Integration | Component | regex-validator', function (hooks) {
   setupRenderingTest(hooks);
@@ -32,10 +33,10 @@ module('Integration | Component | regex-validator', function (hooks) {
       />`
     );
     assert.dom('.regex-label label').hasText('Regex Example', 'Label is correct');
-    assert.dom('[data-test-toggle-input="example-validation-toggle"]').exists('Validation toggle exists');
+    assert.dom(GENERAL.toggleInput('example-validation-toggle')).exists('Validation toggle exists');
     assert.dom('[data-test-regex-validator-test-string]').doesNotExist('Test string input does not show');
 
-    await click('[data-test-toggle-input="example-validation-toggle"]');
+    await click(GENERAL.toggleInput('example-validation-toggle'));
     assert.dom('[data-test-regex-validator-test-string]').exists('Test string input shows after toggle');
     assert
       .dom('[data-test-regex-validator-test-string] label')

ui/tests/integration/components/secret-edit-test.js

@@ -42,7 +42,7 @@ module('Integration | Component | secret edit', function (hooks) {
     });
 
     await render(hbs`<SecretEdit @mode={{this.mode}} @model={{this.model}} @key={{this.key}} />`);
-    assert.dom('[data-test-toggle-input="json"]').isDisabled();
+    assert.dom(GENERAL.toggleInput('json')).isDisabled();
   });
 
   test('it does JSON toggle in show mode when showing string data', async function (assert) {
@@ -56,7 +56,7 @@ module('Integration | Component | secret edit', function (hooks) {
     });
 
     await render(hbs`<SecretEdit @mode={{this.mode}} @model={{this.model}} @key={{this.key}} />`);
-    assert.dom('[data-test-toggle-input="json"]').isNotDisabled();
+    assert.dom(GENERAL.toggleInput('json')).isNotDisabled();
   });
 
   test('it shows an error when creating and data is not an object', async function (assert) {

ui/tests/integration/components/sidebar/frame-test.js

@@ -89,6 +89,6 @@ module('Integration | Component | sidebar-frame', function (hooks) {
       <Sidebar::Frame @showSidebar={{true}} />
     `);
 
-    assert.dom(GENERAL.toggleInput('namespace-picker')).exists('Namespace picker renders in sidebar footer');
+    assert.dom(GENERAL.button('namespace-picker')).exists('Namespace picker renders in sidebar footer');
   });
 });

ui/tests/integration/components/tools/wrap-test.js

@@ -114,11 +114,11 @@ module('Integration | Component | tools/wrap', function (hooks) {
     await this.renderComponent();
     await codemirror().setValue(this.wrapData);
     assert.dom('[data-test-component="json-editor-title"]').hasText('Data to wrap (json-formatted)');
-    await click('[data-test-toggle-input="json"]');
+    await click(GENERAL.toggleInput('json'));
     assert.dom('[data-test-component="json-editor-title"]').doesNotExist();
     assert.dom('[data-test-kv-key="0"]').hasValue('foo');
     assert.dom('[data-test-kv-value="0"]').hasValue('bar');
-    await click('[data-test-toggle-input="json"]');
+    await click(GENERAL.toggleInput('json'));
     assert.dom('[data-test-component="json-editor-title"]').exists();
     assert.strictEqual(
       codemirror().getValue(' '),
@@ -156,7 +156,7 @@ module('Integration | Component | tools/wrap', function (hooks) {
     });
 
     await this.renderComponent();
-    await click('[data-test-toggle-input="json"]');
+    await click(GENERAL.toggleInput('json'));
     await fillIn('[data-test-kv-key="0"]', 'foo');
     await fillIn('[data-test-kv-value="0"]', 'bar');
     await click('[data-test-kv-add-row="0"]');

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

@@ -18,8 +18,6 @@ import {
 export default {
   hasStringList: isPresent('[data-test-component=string-list]'),
   hasTextFile: isPresent('[data-test-component=text-file]'),
-  hasTTLPicker: isPresent('[data-test-toggle-input="Foo"]'),
-  hasToggleButton: isPresent('[data-test-toggle-input="toggle-foobar"]'),
   hasJSONEditor: isPresent('[data-test-component="code-mirror-modifier"]'),
   hasJSONClearButton: isPresent('[data-test-json-clear-button]'),
   hasInput: isPresent('input'),
@@ -35,8 +33,6 @@ export default {
 
   fields: collection('[data-test-field]', {
     clickLabel: clickable('label'),
-    toggleTtl: clickable('[data-test-toggle-input="Foo"]'),
-    toggleButton: clickable('[data-test-toggle-input="toggle-foobar"]'),
     labelValue: text('[data-test-form-field-label]'),
     input: fillable('input'),
     ttlTime: fillable('[data-test-ttl-value]'),

ui/tests/pages/secrets/backend/kv/edit-secret.js

@@ -4,12 +4,11 @@
  */
 
 import { Base } from '../create';
-import { clickable, create, fillable } from 'ember-cli-page-object';
+import { create, fillable } from 'ember-cli-page-object';
 
 export default create({
   ...Base,
   path: fillable('[data-test-secret-path="true"]'),
   secretKey: fillable('[data-test-secret-key]'),
   secretValue: fillable('[data-test-secret-value] textarea'),
-  toggleJSON: clickable('[data-test-toggle-input="json"]'),
 });

ui/tests/pages/settings/mount-secret-backend.js

@@ -11,10 +11,8 @@ export default create({
   visit: visitable('/vault/settings/mount-secret-backend'),
   version: fillable('[data-test-input="options.version"]'),
   setMaxVersion: fillable('[data-test-input="kvConfig.maxVersions"]'),
-  enableMaxTtl: clickable('[data-test-toggle-input="Max Lease TTL"]'),
   maxTTLVal: fillable('[data-test-ttl-value="Max Lease TTL"]'),
   maxTTLUnit: fillable('[data-test-ttl-unit="Max Lease TTL"] [data-test-select="ttl-unit"]'),
-  enableDefaultTtl: clickable('[data-test-toggle-input="Default Lease TTL"]'),
   enableEngine: clickable('[data-test-enable-engine]'),
   secretList: clickable('[data-test-sidebar-nav-link="Secrets Engines"]'),
   defaultTTLVal: fillable('input[data-test-ttl-value="Default Lease TTL"]'),