Upgrade ember-test-selectors (#14937)

* updates ember-test-selectors, ember-cli-page-object and ember-cli-string-helpers * adds attributeBindings to classic components with data-test property * glimmerizes toolbar-link component and removes data-test args * glimmerizes toolbar-secret-link and secret-link components and removes data-test and class args * glimmerizes linked-block component * glimmerizes toggle-button component * updates toggle-button test * fixes remaining test selector issues * comments out test assertions related to cp-validations bug * adds todo to comment
hashicorp · Apr 6, 2022 · 1090865 · 1090865
1 parent 7cd418f
commit 1090865
Show file tree

Hide file tree

Showing 100 changed files with 439 additions and 516 deletions.
diff --git a/ui/app/components/b64-toggle.js b/ui/app/components/b64-toggle.js
@@ -8,7 +8,7 @@ const B64 = 'base64';
 const UTF8 = 'utf-8';
 export default Component.extend({
   tagName: 'button',
-  attributeBindings: ['type'],
+  attributeBindings: ['type', 'data-test-transit-b64-toggle'],
   type: 'button',
   classNames: ['button', 'b64-toggle'],
   classNameBindings: ['isInput:is-input:is-textarea'],

diff --git a/ui/app/components/console/log-json.js b/ui/app/components/console/log-json.js
@@ -2,4 +2,5 @@ import Component from '@ember/component';
 
 export default Component.extend({
   'data-test-component': 'console/log-json',
+  attributeBindings: ['data-test-component'],
 });
diff --git a/ui/app/components/console/log-text.js b/ui/app/components/console/log-text.js
@@ -2,4 +2,5 @@ import Component from '@ember/component';
 
 export default Component.extend({
   'data-test-component': 'console/log-text',
+  attributeBindings: ['data-test-component'],
 });
diff --git a/ui/app/components/console/output-log.js b/ui/app/components/console/output-log.js
@@ -2,5 +2,6 @@ import Component from '@ember/component';
 
 export default Component.extend({
   'data-test-component': 'console/output-log',
+  attributeBindings: ['data-test-component'],
   log: null,
 });
diff --git a/ui/app/components/console/ui-panel.js b/ui/app/components/console/ui-panel.js
@@ -20,6 +20,7 @@ export default Component.extend({
   controlGroup: service(),
   store: service(),
   'data-test-component': 'console/ui-panel',
+  attributeBindings: ['data-test-component'],
 
   classNames: 'console-ui-panel',
   classNameBindings: ['isFullscreen:fullscreen'],

diff --git a/ui/app/components/hover-copy-button.js b/ui/app/components/hover-copy-button.js
@@ -2,6 +2,7 @@ import Component from '@ember/component';
 
 export default Component.extend({
   'data-test-hover-copy': true,
+  attributeBindings: ['data-test-hover-copy'],
   classNameBindings: 'alwaysShow:hover-copy-button-static:hover-copy-button',
   copyValue: null,
   alwaysShow: false,

diff --git a/ui/app/components/identity/edit-form.js b/ui/app/components/identity/edit-form.js
@@ -8,6 +8,7 @@ import { waitFor } from '@ember/test-waiters';
 export default Component.extend({
   flashMessages: service(),
   'data-test-component': 'identity-edit-form',
+  attributeBindings: ['data-test-component'],
   model: null,
 
   // 'create', 'edit', 'merge'

diff --git a/ui/app/components/nav-header.js b/ui/app/components/nav-header.js
@@ -5,6 +5,7 @@ import { computed } from '@ember/object';
 export default Component.extend({
   router: service(),
   'data-test-navheader': true,
+  attributeBindings: ['data-test-navheader'],
   classNameBindings: 'consoleFullscreen:panel-fullscreen',
   tagName: 'header',
   navDrawerOpen: false,

diff --git a/ui/app/components/pgp-file.js b/ui/app/components/pgp-file.js
@@ -7,6 +7,7 @@ const BASE_64_REGEX = /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]
 
 export default Component.extend({
   'data-test-pgp-file': true,
+  attributeBindings: ['data-test-pgp-file'],
   classNames: ['box', 'is-fullwidth', 'is-marginless', 'is-shadowless'],
   key: null,
   index: null,

diff --git a/ui/app/components/radial-progress.js b/ui/app/components/radial-progress.js
@@ -5,7 +5,7 @@ export default Component.extend({
   'data-test-radial-progress': true,
   tagName: 'svg',
   classNames: 'radial-progress',
-  attributeBindings: ['size:width', 'size:height', 'viewBox'],
+  attributeBindings: ['size:width', 'size:height', 'viewBox', 'data-test-radial-progress'],
   progressDecimal: null,
   size: 20,
   strokeWidth: 1,

diff --git a/ui/app/components/secret-link.js b/ui/app/components/secret-link.js
@@ -1,28 +1,26 @@
-import { computed } from '@ember/object';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 import { encodePath } from 'vault/utils/path-encoding-helpers';
 
-export default Component.extend({
-  onLinkClick() {},
-  tagName: '',
-  // so that ember-test-selectors doesn't log a warning
-  supportsDataTestProperties: true,
-  mode: 'list',
-
-  secret: null,
-  queryParams: null,
-  ariaLabel: null,
-
-  link: computed('mode', 'secret', function () {
-    const route = `vault.cluster.secrets.backend.${this.mode}`;
-    if ((this.mode !== 'versions' && !this.secret) || this.secret === ' ') {
+export default class SecretLink extends Component {
+  get link() {
+    const { mode, secret } = this.args;
+    const route = `vault.cluster.secrets.backend.${mode}`;
+    if ((mode !== 'versions' && !secret) || secret === ' ') {
       return { route: `${route}-root`, models: [] };
     } else {
-      return { route, models: [encodePath(this.secret)] };
+      return { route, models: [encodePath(secret)] };
     }
-  }),
-  query: computed('queryParams', function () {
-    const qp = this.queryParams || {};
+  }
+  get query() {
+    const qp = this.args.queryParams || {};
     return qp.isQueryParams ? qp.values : qp;
-  }),
-});
+  }
+
+  @action
+  onLinkClick() {
+    if (this.args.onLinkClick) {
+      this.args.onLinkClick(...arguments);
+    }
+  }
+}
diff --git a/ui/app/components/toolbar-secret-link.js b/ui/app/components/toolbar-secret-link.js
@@ -1,3 +1,4 @@
+import Component from '@glimmer/component';
 /**
  * @module ToolbarSecretLink
  * `ToolbarSecretLink` styles SecretLink for the Toolbar.
@@ -16,18 +17,8 @@
  *
  * @param type="" {String} - Use "add" to change icon
  */
-
-import OuterHTML from './outer-html';
-import { computed } from '@ember/object';
-
-export default OuterHTML.extend({
-  glyph: computed('type', function () {
-    if (this.type == 'add') {
-      return 'plus';
-    } else {
-      return 'chevron-right';
-    }
-  }),
-  tagName: '',
-  supportsDataTestProperties: true,
-});
+export default class ToolbarSecretLink extends Component {
+  get glyph() {
+    return this.args.type === 'add' ? 'plus' : 'chevron-right';
+  }
+}
diff --git a/ui/app/templates/components/alphabet-edit.hbs b/ui/app/templates/components/alphabet-edit.hbs
@@ -35,7 +35,7 @@
         <ToolbarSecretLink
           @secret={{concat this.model.idPrefix this.model.id}}
           @mode="edit"
-          @data-test-edit-link={{true}}
+          data-test-edit-link={{true}}
           @replace={{true}}
         >
           Edit alphabet
@@ -89,7 +89,7 @@
         </button>
         <SecretLink
           @mode={{if (eq this.mode "create") "list" "show"}}
-          @class="button"
+          class="button"
           @secret={{concat this.model.idPrefix this.model.id}}
         >
           Cancel

diff --git a/ui/app/templates/components/auth-form-options.hbs b/ui/app/templates/components/auth-form-options.hbs
@@ -1,6 +1,6 @@
 {{#unless this.selectedAuthIsPath}}
   <div class="box has-slim-padding is-shadowless">
-    <ToggleButton @toggleTarget={{this}} @toggleAttr="isOpen" />
+    <ToggleButton @isOpen={{this.isOpen}} @onClick={{fn (mut this.isOpen)}} />
     {{#if this.isOpen}}
       <div class="field">
         <label for="custom-path" class="is-label">

diff --git a/ui/app/templates/components/configure-aws-secret.hbs b/ui/app/templates/components/configure-aws-secret.hbs
@@ -89,7 +89,7 @@
       </div>
     </div>
 
-    <ToggleButton @toggleAttr="showOptions" @toggleTarget={{this}} @openLabel="Hide options" @closedLabel="More options" />
+    <ToggleButton @isOpen={{this.showOptions}} @onClick={{fn (mut this.showOptions)}} />
     {{#if this.showOptions}}
       <div class="box is-marginless">
         <div class="field">

diff --git a/ui/app/templates/components/database-connection.hbs b/ui/app/templates/components/database-connection.hbs
@@ -64,13 +64,13 @@
             @mode="create"
             @type="add"
             @queryParams={{query-params initialKey=@model.name itemType="role"}}
-            @data-test-secret-create={{true}}
+            data-test-secret-create={{true}}
           >
             Add role
           </ToolbarSecretLink>
         {{/if}}
         {{#if @model.canEdit}}
-          <ToolbarSecretLink @secret={{@model.id}} @mode="edit" @data-test-edit-link={{true}} @replace={{true}}>
+          <ToolbarSecretLink @secret={{@model.id}} @mode="edit" data-test-edit-link={{true}} @replace={{true}}>
             Edit configuration
           </ToolbarSecretLink>
         {{/if}}
@@ -120,21 +120,23 @@
                   {{/each}}
                 </div>
               {{else}}
-                <ToggleButton
-                  @class="is-block"
-                  @toggleAttr={{camelize (concat "show" group)}}
-                  @toggleTarget={{this}}
-                  @openLabel={{concat "Hide " group}}
-                  @closedLabel={{group}}
-                  @data-test-toggle-group={{group}}
-                />
-                {{#if (get this (camelize (concat "show" group)))}}
-                  <div class="box is-marginless">
-                    {{#each fields as |attr|}}
-                      <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />
-                    {{/each}}
-                  </div>
-                {{/if}}
+                {{#let (camelize (concat "show" group)) as |prop|}}
+                  <ToggleButton
+                    @isOpen={{get this prop}}
+                    @openLabel={{concat "Hide " group}}
+                    @closedLabel={{group}}
+                    @onClick={{fn (mut (get this prop))}}
+                    class="is-block"
+                    data-test-toggle-group={{group}}
+                  />
+                  {{#if (get this prop)}}
+                    <div class="box is-marginless">
+                      {{#each fields as |attr|}}
+                        <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />
+                      {{/each}}
+                    </div>
+                  {{/if}}
+                {{/let}}
               {{/if}}
             {{/each-in}}
           {{/each}}
@@ -167,7 +169,7 @@
           </button>
         </div>
         <div class="control">
-          <SecretLink @mode="list" @class="button">
+          <SecretLink @mode="list" class="button">
             Cancel
           </SecretLink>
         </div>
@@ -246,21 +248,23 @@
                 {{/each}}
               </div>
             {{else}}
-              <ToggleButton
-                @class="is-block"
-                @toggleAttr={{camelize (concat "show" group)}}
-                @toggleTarget={{this}}
-                @openLabel={{concat "Hide " group}}
-                @closedLabel={{group}}
-                @data-test-toggle-group={{group}}
-              />
-              {{#if (get this (camelize (concat "show" group)))}}
-                <div class="box is-marginless">
-                  {{#each fields as |attr|}}
-                    <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />
-                  {{/each}}
-                </div>
-              {{/if}}
+              {{#let (camelize (concat "show" group)) as |prop|}}
+                <ToggleButton
+                  @isOpen={{get this prop}}
+                  @openLabel={{concat "Hide " group}}
+                  @closedLabel={{group}}
+                  @onClick={{fn (mut (get this prop))}}
+                  class="is-block"
+                  data-test-toggle-group={{group}}
+                />
+                {{#if (get this prop)}}
+                  <div class="box is-marginless">
+                    {{#each fields as |attr|}}
+                      <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />
+                    {{/each}}
+                  </div>
+                {{/if}}
+              {{/let}}
             {{/if}}
           {{/each-in}}
         {{/each}}
@@ -287,7 +291,7 @@
           </button>
         </div>
         <div class="control">
-          <SecretLink @mode="list" @class="button">
+          <SecretLink @mode="list" class="button">
             Cancel
           </SecretLink>
         </div>

diff --git a/ui/app/templates/components/database-role-edit.hbs b/ui/app/templates/components/database-role-edit.hbs
@@ -52,7 +52,7 @@
           @mode="edit"
           @replace={{true}}
           @queryParams={{query-params itemType="role"}}
-          @data-test-edit-link={{true}}
+          data-test-edit-link={{true}}
         >
           Edit role
         </ToolbarSecretLink>
@@ -145,7 +145,7 @@
             {{/if}}
           </div>
           <div class="control">
-            <SecretLink @mode="list" @class="button">
+            <SecretLink @mode="list" class="button">
               Cancel
             </SecretLink>
           </div>

diff --git a/ui/app/templates/components/form-field-groups-loop.hbs b/ui/app/templates/components/form-field-groups-loop.hbs
@@ -8,21 +8,23 @@
         {{/unless}}
       {{/each}}
     {{else}}
-      <ToggleButton
-        @class="is-block"
-        @toggleAttr={{camelize (concat "show" group)}}
-        @toggleTarget={{@model}}
-        @openLabel={{concat "Hide " group}}
-        @closedLabel={{group}}
-        @data-test-toggle-group={{group}}
-      />
-      {{#if (get @model (camelize (concat "show" group)))}}
-        <div class="box is-marginless">
-          {{#each fields as |attr|}}
-            <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />
-          {{/each}}
-        </div>
-      {{/if}}
+      {{#let (camelize (concat "show" group)) as |prop|}}
+        <ToggleButton
+          @isOpen={{get @model prop}}
+          @openLabel={{concat "Hide " group}}
+          @closedLabel={{group}}
+          @onClick={{fn (mut (get @model prop))}}
+          class="is-block"
+          data-test-toggle-group={{group}}
+        />
+        {{#if (get @model prop)}}
+          <div class="box is-marginless">
+            {{#each fields as |attr|}}
+              <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />
+            {{/each}}
+          </div>
+        {{/if}}
+      {{/let}}
     {{/if}}
   {{/each-in}}
 {{/each}}
diff --git a/ui/app/templates/components/generated-item-list.hbs b/ui/app/templates/components/generated-item-list.hbs
@@ -37,7 +37,7 @@
 <Toolbar>
   <ToolbarActions>
     <ToolbarLink
-      @data-test-entity-create-link={{this.itemType}}
+      data-test-entity-create-link={{this.itemType}}
       @type="add"
       @params={{array "vault.cluster.access.method.item.create" this.itemType}}
     >

diff --git a/ui/app/templates/components/generated-item.hbs b/ui/app/templates/components/generated-item.hbs
@@ -45,7 +45,7 @@
       <div class="toolbar-separator"></div>
       <ToolbarLink
         @params={{array "vault.cluster.access.method.item.edit" this.itemType this.model.id}}
-        @data-test-configure-link="true"
+        data-test-configure-link="true"
       >
         Edit
         {{singularize this.itemType}}

diff --git a/ui/app/templates/components/identity/entity-nav.hbs b/ui/app/templates/components/identity/entity-nav.hbs
@@ -27,7 +27,7 @@
     {{#if (eq this.identityType "entity")}}
       <ToolbarLink
         @params={{array "vault.cluster.access.identity.merge" (pluralize this.identityType)}}
-        @data-test-entity-merge-link={{true}}
+        data-test-entity-merge-link={{true}}
       >
         Merge
         {{pluralize this.identityType}}
@@ -36,7 +36,7 @@
     <ToolbarLink
       @type="add"
       @params={{array "vault.cluster.access.identity.create" (pluralize this.identityType)}}
-      @data-test-entity-create-link={{true}}
+      data-test-entity-create-link={{true}}
     >
       Create
       {{this.identityType}}