test: 💍 use test selectors for groups (#2713)

* test: 💍 use test selectors for groups

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

@@ -4,21 +4,19 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, click, find } from '@ember/test-helpers';
+import { visit, click } from '@ember/test-helpers';
 import { setupApplicationTest } from 'admin/tests/helpers';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 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 | delete', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
-  const MANAGE_DROPDOWN_SELECTOR =
-    '[data-test-manage-group-dropdown] button:first-child';
-  const DELETE_ACTION_SELECTOR =
-    '[data-test-manage-group-dropdown] ul li button';
+  let getGroupsCount;
 
   const instances = {
     scopes: {
@@ -47,26 +45,31 @@ module('Acceptance | groups | delete', function (hooks) {
     urls.groups = `/scopes/${instances.scopes.org.id}/groups`;
     urls.group = `${urls.groups}/${instances.group.id}`;
     urls.newGroup = `${urls.groups}/new`;
+
+    getGroupsCount = () => this.server.schema.groups.all().models.length;
   });
 
   test('can delete a group', async function (assert) {
-    const groupsCount = this.server.db.groups.length;
+    const count = getGroupsCount();
     await visit(urls.group);
-    await click(MANAGE_DROPDOWN_SELECTOR);
-    await click(DELETE_ACTION_SELECTOR);
-    assert.strictEqual(this.server.db.groups.length, groupsCount - 1);
+
+    await click(selectors.MANAGE_DROPDOWN);
+    await click(selectors.DELETE_ACTION);
+
+    assert.strictEqual(getGroupsCount(), count - 1);
   });
 
   test('cannot delete a group without proper authorization', async function (assert) {
     instances.group.authorized_actions =
       instances.group.authorized_actions.filter((item) => item !== 'delete');
+
     await visit(urls.group);
-    assert.notOk(
-      find('.rose-layout-page-actions .rose-dropdown-button-danger'),
-    );
+
+    await click(selectors.MANAGE_DROPDOWN);
+    assert.dom(selectors.DELETE_ACTION).doesNotExist();
   });
 
-  test('errors are displayed when delete project fails', async function (assert) {
+  test('deleting a group which displays error messages', async function (assert) {
     this.server.del('/groups/:id', () => {
       return new Response(
         490,
@@ -79,8 +82,10 @@ module('Acceptance | groups | delete', function (hooks) {
       );
     });
     await visit(urls.group);
-    await click(MANAGE_DROPDOWN_SELECTOR);
-    await click(DELETE_ACTION_SELECTOR);
+
+    await click(selectors.MANAGE_DROPDOWN);
+    await click(selectors.DELETE_ACTION);
+
     assert.dom(commonSelectors.ALERT_TOAST_BODY).hasText('Oops.');
   });
 });

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

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+export const MANAGE_DROPDOWN =
+  '[data-test-manage-group-dropdown] button:first-child';
+export const DELETE_ACTION = '[data-test-manage-group-dropdown] ul li button';

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

@@ -4,7 +4,7 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, currentURL, click, find, fillIn } from '@ember/test-helpers';
+import { visit, currentURL, click, fillIn } from '@ember/test-helpers';
 import { setupApplicationTest } from 'admin/tests/helpers';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { Response } from 'miragejs';
@@ -46,29 +46,41 @@ module('Acceptance | groups | update', function (hooks) {
 
   test('can save changes to an existing group', async function (assert) {
     await visit(urls.group);
-    await click('form [type="button"]', 'Activate edit mode');
-    await fillIn('[name="name"]', 'Updated admin group');
-    await click('.rose-form-actions [type="submit"]');
+
+    await click(commonSelectors.EDIT_BTN);
+    await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
+    await click(commonSelectors.SAVE_BTN);
+
     assert.strictEqual(currentURL(), urls.group);
-    assert.strictEqual(this.server.db.groups[0].name, 'Updated admin group');
+    assert.strictEqual(
+      this.server.schema.groups.all().models[0].name,
+      commonSelectors.FIELD_NAME_VALUE,
+    );
   });
 
   test('cannot make changes to an existing group without proper authorization', async function (assert) {
     instances.group.authorized_actions =
       instances.group.authorized_actions.filter((item) => item !== 'update');
+
     await visit(urls.group);
-    assert.notOk(find('.rose-layout-page-actions .rose-button-secondary'));
+
+    assert.dom(commonSelectors.EDIT_BTN).doesNotExist();
   });
 
   test('can cancel changes to an existing group', async function (assert) {
     await visit(urls.group);
-    await click('form [type="button"]', 'Activate edit mode');
-    await fillIn('[name="name"]', 'Updated admin group');
-    await click('.rose-form-actions [type="button"]');
-    assert.notEqual(find('[name="name"]').value, 'Updated admin group');
+
+    await click(commonSelectors.EDIT_BTN);
+    await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
+    await click(commonSelectors.CANCEL_BTN);
+
+    assert.notEqual(instances.group.name, commonSelectors.FIELD_NAME_VALUE);
+    assert.dom(commonSelectors.FIELD_NAME).hasValue(instances.group.name);
   });
 
   test('saving an existing group with invalid fields displays error messages', async function (assert) {
+    const errorMsg =
+      'Invalid request. Request attempted to make second resource with the same field value that must be unique.';
     this.server.patch('/groups/:id', () => {
       return new Response(
         400,
@@ -76,29 +88,16 @@ module('Acceptance | groups | update', function (hooks) {
         {
           status: 400,
           code: 'invalid_argument',
-          message: 'The request was invalid.',
-          details: {
-            request_fields: [
-              {
-                name: 'name',
-                description: 'Name is required.',
-              },
-            ],
-          },
+          message: errorMsg,
         },
       );
     });
     await visit(urls.group);
-    await click('form [type="button"]', 'Activate edit mode');
-    await fillIn('[name="name"]', 'random string');
-    await click('[type="submit"]');
-    assert
-      .dom(commonSelectors.ALERT_TOAST_BODY)
-      .hasText('The request was invalid.');
-    assert.strictEqual(
-      find('[data-test-error-message-name]').textContent.trim(),
-      'Name is required.',
-      'Displays field-level errors.',
-    );
+
+    await click(commonSelectors.EDIT_BTN);
+    await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
+    await click(commonSelectors.SAVE_BTN);
+
+    assert.dom(commonSelectors.ALERT_TOAST_BODY).hasText(errorMsg);
   });
 });