test: 💍 selectors refactor for accounts create (#2527)

* test: 💍 selectors refactor for accounts create

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-14037

* refactor: 💡 remove name & description duplicate selectors

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-14037

ui/admin/tests/acceptance/accounts/create-test.js

@@ -15,13 +15,13 @@ import {
   //currentSession,
   //invalidateSession,
 } from 'ember-simple-auth/test-support';
+import * as selectors from './selectors';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Acceptance | accounts | create', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
-  const MANAGE_DROPDOWN_SELECTOR =
-    '[data-test-manage-auth-methods-dropdown] div:first-child button';
   const instances = {
     scopes: {
       global: null,
@@ -64,9 +64,9 @@ module('Acceptance | accounts | create', function (hooks) {
   });
 
   hooks.afterEach(async function () {
-    const notification = find('.rose-notification');
+    const notification = find(commonSelectors.ALERT_TOAST);
     if (notification) {
-      await click('.rose-notification-dismiss');
+      await click(commonSelectors.ALERT_TOAST_DISMISS);
     }
   });
 
@@ -77,23 +77,36 @@ module('Acceptance | accounts | create', function (hooks) {
   });
 
   test('can create a new account', async function (assert) {
-    const accountsCount = this.server.db.accounts.length;
+    const accountsCount = this.server.schema.accounts.all().models.length;
     await visit(urls.newAccount);
-    await fillIn('[name="name"]', 'Account name');
-    await fillIn('[name="description"]', 'description');
-    await fillIn('[name="login_name"]', 'username');
-    await fillIn('[name="password"]', 'password');
-    await click('form [type="submit"]:not(:disabled)');
-    assert.strictEqual(this.server.db.accounts.length, accountsCount + 1);
+
+    await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
+    await fillIn(
+      commonSelectors.FIELD_DESCRIPTION,
+      commonSelectors.FIELD_DESCRIPTION_VALUE,
+    );
+    await fillIn(selectors.FIELD_LOGIN_NAME, selectors.FIELD_LOGIN_NAME_VALUE);
+    await fillIn(selectors.FIELD_PASSWORD, selectors.FIELD_PASSWORD_VALUE);
+    await click(commonSelectors.SAVE_BTN);
+
+    assert.strictEqual(
+      this.server.schema.accounts.all().models.length,
+      accountsCount + 1,
+    );
   });
 
   test('can create a new LDAP account', async function (assert) {
-    const accountsCount = this.server.db.accounts.length;
+    const accountsCount = this.server.schema.accounts.all().models.length;
     await visit(urls.newAccount);
-    await fillIn('[name="name"]', 'Account name');
-    await fillIn('[name="description"]', 'description');
-    await fillIn('[name="login_name"]', 'username');
-    await click('form [type="submit"]:not(:disabled)');
+
+    await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
+    await fillIn(
+      commonSelectors.FIELD_DESCRIPTION,
+      commonSelectors.FIELD_DESCRIPTION_VALUE,
+    );
+    await fillIn(selectors.FIELD_LOGIN_NAME, selectors.FIELD_LOGIN_NAME_VALUE);
+    await click(commonSelectors.SAVE_BTN);
+
     assert.strictEqual(
       this.server.schema.accounts.all().models.length,
       accountsCount + 1,
@@ -103,52 +116,70 @@ module('Acceptance | accounts | create', function (hooks) {
   test('Users cannot create a new account without proper authorization', async function (assert) {
     instances.authMethod.authorized_collection_actions.accounts = [];
     await visit(urls.authMethod);
+
+    await click(selectors.MANAGE_DROPDOWN);
+
     assert.notOk(
       instances.authMethod.authorized_collection_actions.accounts.includes(
         'create',
       ),
     );
-    assert.notOk(find(`.rose-layout-page-actions [href="${urls.newAccount}"]`));
+    assert.dom(commonSelectors.HREF(urls.newAccount)).doesNotExist();
   });
 
   test('Users can navigate to new account route with proper authorization', async function (assert) {
     await visit(urls.accounts);
+
+    await click(selectors.MANAGE_DROPDOWN);
+
     assert.ok(
       instances.authMethod.authorized_collection_actions.accounts.includes(
         'create',
       ),
     );
-    await click(MANAGE_DROPDOWN_SELECTOR);
-    assert.ok(find(`[href="${urls.newAccount}"]`));
+    assert.dom(commonSelectors.HREF(urls.newAccount)).isVisible();
   });
 
   test('Users cannot navigate to new account route without proper authorization', async function (assert) {
     instances.authMethod.authorized_collection_actions.accounts = [];
     await visit(urls.accounts);
+
+    await click(selectors.MANAGE_DROPDOWN);
+
     assert.notOk(
       instances.authMethod.authorized_collection_actions.accounts.includes(
         'create',
       ),
     );
-    assert.notOk(find(`[href="${urls.newAccount}"]`));
+    assert.dom(commonSelectors.HREF(urls.newAccount)).doesNotExist();
   });
 
   test('can cancel a new account creation', async function (assert) {
-    const accountsCount = this.server.db.accounts.length;
+    const accountsCount = this.server.schema.accounts.all().models.length;
     await visit(urls.newAccount);
-    await fillIn('[name="name"]', 'Account name');
-    await click('.rose-form-actions [type="button"]');
+
+    await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
+    await click(commonSelectors.CANCEL_BTN);
+
     assert.strictEqual(currentURL(), urls.accounts);
-    assert.strictEqual(this.server.db.accounts.length, accountsCount);
+    assert.strictEqual(
+      this.server.schema.accounts.all().models.length,
+      accountsCount,
+    );
   });
 
   test('can cancel a new LDAP account creation', async function (assert) {
-    const accountsCount = this.server.db.accounts.length;
+    const accountsCount = this.server.schema.accounts.all().models.length;
     await visit(urls.newAccount);
-    await fillIn('[name="name"]', 'Account name');
-    await click('.rose-form-actions [type="button"]');
+
+    await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
+    await click(commonSelectors.CANCEL_BTN);
+
     assert.strictEqual(currentURL(), urls.accounts);
-    assert.strictEqual(this.server.db.accounts.length, accountsCount);
+    assert.strictEqual(
+      this.server.schema.accounts.all().models.length,
+      accountsCount,
+    );
   });
 
   test('saving a new account with invalid fields displays error messages', async function (assert) {
@@ -172,19 +203,15 @@ module('Acceptance | accounts | create', function (hooks) {
       );
     });
     await visit(urls.newAccount);
-    await fillIn('[name="name"]', 'new account');
-    await click('form [type="submit"]');
+
+    await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
+    await click(commonSelectors.SAVE_BTN);
+
     await a11yAudit();
-    assert.strictEqual(
-      find('.rose-notification-body').textContent.trim(),
-      'The request was invalid.',
-      'Displays primary error message.',
-    );
-    assert.strictEqual(
-      find('[data-test-error-message-name]').textContent.trim(),
-      'Name is required.',
-      'Displays field-level errors.',
-    );
+    assert
+      .dom(commonSelectors.ALERT_TOAST_BODY)
+      .hasText('The request was invalid.');
+    assert.dom(commonSelectors.FIELD_NAME_ERROR).hasText('Name is required.');
   });
 
   test('users cannot directly navigate to new account route without proper authorization', async function (assert) {

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

@@ -6,8 +6,19 @@
 export const APP_HEADER_DROPDOWN =
   '.rose-header-utilities details:first-child summary';
 
+export const MANAGE_DROPDOWN =
+  '[data-test-manage-auth-methods-dropdown] button';
+export const MANAGE_DROPDOWN_NEW_ACCOUNT = (url) =>
+  `[data-test-manage-auth-methods-dropdown] a[href="${url}"]`;
+
 export const FIELD_CURRENT_PASSWORD = '[name=currentPassword]';
 export const FIELD_CURRENT_PASSWORD_VALUE = 'current password';
 
 export const FIELD_NEW_PASSWORD = '[name=newPassword]';
 export const FIELD_NEW_PASSWORD_VALUE = 'new password';
+
+export const FIELD_LOGIN_NAME = '[name=login_name]';
+export const FIELD_LOGIN_NAME_VALUE = 'username';
+
+export const FIELD_PASSWORD = '[name=password]';
+export const FIELD_PASSWORD_VALUE = 'password';

ui/admin/tests/helpers/selectors.js

@@ -9,6 +9,10 @@ export const EDIT_BTN = '.rose-form-actions [type=button]';
 
 export const FIELD_NAME = '[name=name]';
 export const FIELD_NAME_VALUE = 'Random name';
+export const FIELD_NAME_ERROR = '[data-test-error-message-name]';
+
+export const FIELD_DESCRIPTION = '[name=description]';
+export const FIELD_DESCRIPTION_VALUE = 'description';
 
 export const TABLE_FIRST_ROW_RESOURCE_LINK = 'tbody tr:first-child a';
 
@@ -23,3 +27,5 @@ export const HREF = (url) => `[href="${url}"]`;
 export const SIDEBAR_NAV_LINK = (url) => `[title="General"] a[href="${url}"]`;
 
 export const ALERT_TOAST = '[role="alert"]';
+export const ALERT_TOAST_BODY = '.rose-notification-body';
+export const ALERT_TOAST_DISMISS = '.rose-notification-dismiss';