refactor: 💡 use test selector in groups/members route (#2719)

Author: DhariniJeeva

ui/admin/app/templates/scopes/scope/groups/group/members.hbs

@@ -67,7 +67,7 @@
             </B.Td>
             <B.Td>
               {{#if (can 'removeMembers group' @model.group)}}
-                <Hds::Dropdown as |dd|>
+                <Hds::Dropdown data-test-group-member-action as |dd|>
                   <dd.ToggleIcon
                     @icon='more-horizontal'
                     @text={{t 'actions.manage'}}

ui/admin/tests/acceptance/groups/delete-test.js

@@ -54,7 +54,7 @@ module('Acceptance | groups | delete', function (hooks) {
     await visit(urls.group);
 
     await click(selectors.MANAGE_DROPDOWN);
-    await click(selectors.DELETE_ACTION);
+    await click(selectors.MANAGE_DROPDOWN_DELETE_GROUP);
 
     assert.strictEqual(getGroupsCount(), count - 1);
   });
@@ -66,7 +66,7 @@ module('Acceptance | groups | delete', function (hooks) {
     await visit(urls.group);
 
     await click(selectors.MANAGE_DROPDOWN);
-    assert.dom(selectors.DELETE_ACTION).doesNotExist();
+    assert.dom(selectors.MANAGE_DROPDOWN_DELETE_GROUP).doesNotExist();
   });
 
   test('deleting a group which displays error messages', async function (assert) {
@@ -84,7 +84,7 @@ module('Acceptance | groups | delete', function (hooks) {
     await visit(urls.group);
 
     await click(selectors.MANAGE_DROPDOWN);
-    await click(selectors.DELETE_ACTION);
+    await click(selectors.MANAGE_DROPDOWN_DELETE_GROUP);
 
     assert.dom(commonSelectors.ALERT_TOAST_BODY).hasText('Oops.');
   });

ui/admin/tests/acceptance/groups/members-test.js

@@ -4,14 +4,15 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, currentURL, click, find, findAll } from '@ember/test-helpers';
+import { visit, currentURL, click } from '@ember/test-helpers';
 import { setupApplicationTest } from 'admin/tests/helpers';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { setupIndexedDb } from 'api/test-support/helpers/indexed-db';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import { Response } from 'miragejs';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 import * as commonSelectors from 'admin/tests/helpers/selectors';
+import * as selectors from './selectors';
 
 module('Acceptance | groups | members', function (hooks) {
   setupApplicationTest(hooks);
@@ -33,10 +34,6 @@ module('Acceptance | groups | members', function (hooks) {
     addMembers: null,
   };
   let membersCount;
-  const MANAGE_DROPDOWN_SELECTOR =
-    '[data-test-manage-group-dropdown] button:first-child';
-  const ADD_MEMBERS_ACTION_SELECTOR =
-    '[data-test-manage-group-dropdown] ul li a';
 
   hooks.beforeEach(async function () {
     await authenticateSession({ username: 'admin' });
@@ -62,16 +59,20 @@ module('Acceptance | groups | members', function (hooks) {
   test('visiting group members', async function (assert) {
     await visit(urls.members);
     await a11yAudit();
+
     assert.strictEqual(currentURL(), urls.members);
-    assert.strictEqual(findAll('tbody tr').length, membersCount);
+    assert.dom(commonSelectors.TABLE_ROW).exists({ count: membersCount });
   });
 
   test('can remove a member', async function (assert) {
     await visit(urls.members);
-    assert.strictEqual(findAll('tbody tr').length, membersCount);
-    await click('.hds-dropdown-toggle-icon');
-    await click('tbody tr .hds-dropdown-list-item button');
-    assert.strictEqual(findAll('tbody tr').length, membersCount - 1);
+
+    assert.dom(commonSelectors.TABLE_ROW).exists({ count: membersCount });
+
+    await click(selectors.TABLE_MEMBER_ACTION_DROPDOWN);
+    await click(selectors.TABLE_MEMBER_ACTION_DROPDOWN_DELETE_MEMBER);
+
+    assert.dom(commonSelectors.TABLE_ROW).exists({ count: membersCount - 1 });
   });
 
   test('cannot remove a member without proper authorization', async function (assert) {
@@ -80,29 +81,33 @@ module('Acceptance | groups | members', function (hooks) {
     );
     instances.group.update({ authorized_actions });
     await visit(urls.members);
-    assert.notOk(find('tbody tr .rose-dropdown-button-danger'));
+
+    assert
+      .dom(selectors.TABLE_MEMBER_ACTION_DROPDOWN_DELETE_MEMBER)
+      .doesNotExist();
   });
 
   test('shows error message on member remove', async function (assert) {
+    const errorMsg = 'The request was invalid.';
     this.server.post('/groups/:idMethod', () => {
       return new Response(
         400,
         {},
         {
           status: 400,
           code: 'invalid_argument',
-          message: 'The request was invalid.',
+          message: errorMsg,
           details: {},
         },
       );
     });
     await visit(urls.members);
-    assert.strictEqual(findAll('tbody tr').length, membersCount);
-    await click('.hds-dropdown-toggle-icon');
-    await click('tbody tr .hds-dropdown-list-item button');
-    assert
-      .dom(commonSelectors.ALERT_TOAST_BODY)
-      .hasText('The request was invalid.');
+    assert.dom(commonSelectors.TABLE_ROW).exists({ count: membersCount });
+
+    await click(selectors.TABLE_MEMBER_ACTION_DROPDOWN);
+    await click(selectors.TABLE_MEMBER_ACTION_DROPDOWN_DELETE_MEMBER);
+
+    assert.dom(commonSelectors.ALERT_TOAST_BODY).hasText(errorMsg);
   });
 
   test('visiting member selection', async function (assert) {
@@ -113,69 +118,82 @@ module('Acceptance | groups | members', function (hooks) {
 
   test('can navigate to add members with proper authorization', async function (assert) {
     await visit(urls.group);
-    await click(MANAGE_DROPDOWN_SELECTOR);
-    assert.dom(ADD_MEMBERS_ACTION_SELECTOR).isVisible();
+    await click(selectors.MANAGE_DROPDOWN);
+    assert.dom(selectors.MANAGE_DROPDOWN_ADD_MEMBER).isVisible();
   });
 
   test('cannot navigate to add members without proper authorization', async function (assert) {
     const authorized_actions = instances.group.authorized_actions.filter(
       (item) => item !== 'add-members',
     );
     instances.group.update({ authorized_actions });
+
     await visit(urls.group);
-    assert.notOk(find(`[href="${urls.addMembers}"]`));
+
+    assert.dom(commonSelectors.HREF(urls.addMembers)).doesNotExist();
   });
 
   test('select and save members to add', async function (assert) {
     instances.group.update({ memberIds: [] });
     await visit(urls.members);
-    assert.strictEqual(findAll('tbody tr').length, 0);
-    await click(MANAGE_DROPDOWN_SELECTOR);
-    await click(ADD_MEMBERS_ACTION_SELECTOR);
+
+    assert.dom(commonSelectors.TABLE_ROW).exists({ count: 0 });
+
+    await click(selectors.MANAGE_DROPDOWN);
+    await click(selectors.MANAGE_DROPDOWN_ADD_MEMBER);
+
     assert.strictEqual(currentURL(), urls.addMembers);
     // Click three times to select, unselect, then reselect (for coverage)
-    await click('tbody label');
-    await click('tbody label');
-    await click('tbody label');
-    await click('form [type="submit"]');
+    await click(commonSelectors.TABLE_ROW_CHECKBOX);
+    await click(commonSelectors.SAVE_BTN);
+
     await visit(urls.members);
-    assert.strictEqual(findAll('tbody tr').length, 1);
+
+    assert.dom(commonSelectors.TABLE_ROW).exists({ count: 1 });
   });
 
   test('select and cancel members to add', async function (assert) {
     await visit(urls.members);
-    assert.strictEqual(findAll('tbody tr').length, membersCount);
-    await click('.hds-dropdown-toggle-icon');
-    await click('tbody tr .hds-dropdown-list-item button');
-    assert.strictEqual(findAll('tbody tr').length, membersCount - 1);
-    await click(MANAGE_DROPDOWN_SELECTOR);
-    await click(ADD_MEMBERS_ACTION_SELECTOR);
+
+    assert.dom(commonSelectors.TABLE_ROW).exists({ count: membersCount });
+
+    await click(selectors.TABLE_MEMBER_ACTION_DROPDOWN);
+    await click(selectors.TABLE_MEMBER_ACTION_DROPDOWN_DELETE_MEMBER);
+
+    assert.dom(commonSelectors.TABLE_ROW).exists({ count: membersCount - 1 });
+
+    await click(selectors.MANAGE_DROPDOWN);
+    await click(selectors.MANAGE_DROPDOWN_ADD_MEMBER);
+
     assert.strictEqual(currentURL(), urls.addMembers);
-    await click('tbody label');
-    await click('form [type="button"]');
-    await visit(urls.members);
-    assert.strictEqual(findAll('tbody tr').length, membersCount - 1);
+
+    await click(commonSelectors.TABLE_ROW_CHECKBOX);
+
+    await click(commonSelectors.CANCEL_BTN);
+
+    assert.strictEqual(currentURL(), urls.members);
+    assert.dom(commonSelectors.TABLE_ROW).exists({ count: membersCount - 1 });
   });
 
   test('shows error message on member add', async function (assert) {
+    const errorMsg = 'The request was invalid.';
     this.server.post('/groups/:idMethod', () => {
       return new Response(
         400,
         {},
         {
           status: 400,
           code: 'invalid_argument',
-          message: 'The request was invalid.',
+          message: errorMsg,
           details: {},
         },
       );
     });
     instances.group.update({ memberIds: [] });
     await visit(urls.addMembers);
-    await click('tbody label');
-    await click('form [type="submit"]');
-    assert
-      .dom(commonSelectors.ALERT_TOAST_BODY)
-      .hasText('The request was invalid.');
+
+    await click(commonSelectors.SAVE_BTN);
+
+    assert.dom(commonSelectors.ALERT_TOAST_BODY).hasText(errorMsg);
   });
 });

ui/admin/tests/acceptance/groups/selectors.js

@@ -5,4 +5,13 @@
 
 export const MANAGE_DROPDOWN =
   '[data-test-manage-group-dropdown] button:first-child';
-export const DELETE_ACTION = '[data-test-manage-group-dropdown] ul li button';
+export const MANAGE_DROPDOWN_DELETE_GROUP =
+  '[data-test-manage-group-dropdown] ul li button';
+
+// Members
+export const TABLE_MEMBER_ACTION_DROPDOWN =
+  '[data-test-group-member-action] button:first-child';
+export const MANAGE_DROPDOWN_ADD_MEMBER =
+  '[data-test-manage-group-dropdown] ul li a';
+export const TABLE_MEMBER_ACTION_DROPDOWN_DELETE_MEMBER =
+  '[data-test-group-member-action] ul li button';

ui/admin/tests/helpers/selectors.js

@@ -15,6 +15,8 @@ export const FIELD_DESCRIPTION = '[name=description]';
 export const FIELD_DESCRIPTION_VALUE = 'description';
 
 export const TABLE_RESOURCE_LINK = (url) => `tbody [href="${url}"]`;
+export const TABLE_ROW = 'tbody tr';
+export const TABLE_ROW_CHECKBOX = 'tbody tr input[type="checkbox"]';
 
 export const RESOURCE_NOT_FOUND_SUBTITLE =
   '[data-test-error-application-state] .hds-application-state__error-code';