test: 💍 Update test selectors for update host test (#2609)

ui/admin/app/components/form/host/static/index.hbs

@@ -68,7 +68,9 @@
     {{#if @model.errors.address}}
       <F.Error as |E|>
         {{#each @model.errors.address as |error|}}
-          <E.Message>{{error.message}}</E.Message>
+          <E.Message
+            data-test-error-message-address
+          >{{error.message}}</E.Message>
         {{/each}}
       </F.Error>
     {{/if}}

ui/admin/tests/acceptance/host-catalogs/hosts/create-test.js

@@ -129,6 +129,8 @@ module('Acceptance | host-catalogs | hosts | create', function (hooks) {
     assert.strictEqual(getHostCount(), count);
   });
 
+  // TODO: the field should change to address and not name. Name is optional for host but address
+  // is required, so to make the test realistic we should be testing address
   test('saving a new host with invalid fields displays error messages', async function (assert) {
     this.server.post('/hosts', () => {
       return new Response(

ui/admin/tests/acceptance/host-catalogs/hosts/selectors.js

@@ -8,3 +8,4 @@ export const MANAGE_DROPDOWN =
 
 export const FIELD_ADDRESS = '[name=address]';
 export const FIELD_ADDRESS_VALUE = 'New address';
+export const FIELD_ADDRESS_ERROR = '[data-test-error-message-address]';

ui/admin/tests/acceptance/host-catalogs/hosts/update-test.js

@@ -4,11 +4,13 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, currentURL, find, click, 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';
 import { authenticateSession } from 'ember-simple-auth/test-support';
+import * as selectors from './selectors';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Acceptance | host-catalogs | hosts | update', function (hooks) {
   setupApplicationTest(hooks);
@@ -68,32 +70,47 @@ module('Acceptance | host-catalogs | hosts | update', function (hooks) {
   });
 
   test('can save changes to existing host', async function (assert) {
-    assert.notEqual(instances.host.name, 'random string');
+    assert.notEqual(instances.host.name, commonSelectors.FIELD_NAME_VALUE);
     await visit(urls.host);
-    await click('form [type="button"]', 'Activate edit mode');
-    await fillIn('[name="name"]', 'random string');
-    await click('.rose-form-actions [type="submit"]');
-    assert.strictEqual(currentURL(), urls.host);
-    assert.strictEqual(
-      this.server.schema.hosts.all().models[0].name,
-      'random string',
+
+    await click(commonSelectors.EDIT_BTN, 'Activate edit mode');
+    await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
+    await fillIn(
+      commonSelectors.FIELD_DESCRIPTION,
+      commonSelectors.FIELD_DESCRIPTION_VALUE,
     );
+    await click(commonSelectors.SAVE_BTN);
+
+    const { name, description } = this.server.schema.hosts.all().models[0];
+    assert.strictEqual(currentURL(), urls.host);
+    assert.strictEqual(name, commonSelectors.FIELD_NAME_VALUE);
+    assert.strictEqual(description, commonSelectors.FIELD_DESCRIPTION_VALUE);
   });
 
   test('cannot make changes to an existing host without proper authorization', async function (assert) {
     instances.host.authorized_actions =
       instances.host.authorized_actions.filter((item) => item !== 'update');
     await visit(urls.host);
-    assert.notOk(find('.rose-layout-page-actions .rose-button-secondary'));
+
+    assert.dom(commonSelectors.EDIT_BTN).doesNotExist();
   });
 
   test('can cancel changes to existing host', async function (assert) {
+    const { name, description } = instances.host;
     await visit(urls.host);
-    await click('form [type="button"]', 'Activate edit mode');
-    await fillIn('[name="name"]', 'random string');
-    await click('.rose-form-actions [type="button"]');
-    assert.notEqual(instances.host.name, 'random string');
-    assert.strictEqual(find('[name="name"]').value, instances.host.name);
+
+    await click(commonSelectors.EDIT_BTN, 'Activate edit mode');
+    await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
+    await fillIn(
+      commonSelectors.FIELD_DESCRIPTION,
+      commonSelectors.FIELD_DESCRIPTION_VALUE,
+    );
+    await click(commonSelectors.CANCEL_BTN);
+
+    assert.notEqual(name, commonSelectors.FIELD_NAME_VALUE);
+    assert.notEqual(description, commonSelectors.FIELD_DESCRIPTION_VALUE);
+    assert.dom(commonSelectors.FIELD_NAME).hasValue(name);
+    assert.dom(commonSelectors.FIELD_DESCRIPTION).hasValue(description);
   });
 
   test('saving an existing host with invalid fields displays error messages', async function (assert) {
@@ -108,8 +125,8 @@ module('Acceptance | host-catalogs | hosts | update', function (hooks) {
           details: {
             request_fields: [
               {
-                name: 'name',
-                description: 'Name is required.',
+                name: 'address',
+                description: 'Address is required.',
               },
             ],
           },
@@ -117,59 +134,73 @@ module('Acceptance | host-catalogs | hosts | update', function (hooks) {
       );
     });
     await visit(urls.host);
-    await click('form [type="button"]', 'Activate edit mode');
-    await fillIn('[name="name"]', 'random string');
-    await click('[type="submit"]');
+
+    await click(commonSelectors.EDIT_BTN, 'Activate edit mode');
+    await fillIn(selectors.FIELD_ADDRESS, '');
+    await click(commonSelectors.SAVE_BTN);
+
     assert
-      .dom('[data-test-toast-notification] .hds-alert__description')
+      .dom(commonSelectors.ALERT_TOAST_BODY)
       .hasText('The request was invalid.');
-    assert.ok(
-      find('[data-test-error-message-name]').textContent.trim(),
-      'Name is required.',
-    );
+    assert.dom(selectors.FIELD_ADDRESS_ERROR).hasText('Address is required.');
   });
 
   test('can discard unsaved host changes via dialog', async function (assert) {
-    assert.expect(5);
+    assert.expect(7);
+    const { name, description } = this.server.schema.hosts.all().models[0];
     const confirmService = this.owner.lookup('service:confirm');
     confirmService.enabled = true;
-    assert.notEqual(instances.host.name, 'random string');
+    assert.notEqual(name, commonSelectors.FIELD_NAME_VALUE);
+    assert.notEqual(description, commonSelectors.FIELD_DESCRIPTION_VALUE);
     await visit(urls.host);
-    await click('form [type="button"]', 'Activate edit mode');
-    await fillIn('[name="name"]', 'random string');
+
+    await click(commonSelectors.EDIT_BTN, 'Activate edit mode');
+    await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
+    await fillIn(
+      commonSelectors.FIELD_DESCRIPTION,
+      commonSelectors.FIELD_DESCRIPTION_VALUE,
+    );
     assert.strictEqual(currentURL(), urls.host);
+
+    // Wrap on a try/catch because transitioning while editing returns error
     try {
       await visit(urls.hosts);
     } catch (e) {
-      assert.ok(find('.rose-dialog'));
-      await click('.rose-dialog-footer button:first-child');
+      assert.dom(commonSelectors.DIALOG_UNSAVED_CHANGES).exists();
+      await click(commonSelectors.DIALOG_UNSAVED_CHANGES_DISCARD);
       assert.strictEqual(currentURL(), urls.hosts);
-      assert.notEqual(
-        this.server.schema.hosts.all().models[0].name,
-        'random string',
-      );
+      assert.notEqual(name, commonSelectors.FIELD_NAME_VALUE);
+      assert.notEqual(description, commonSelectors.FIELD_DESCRIPTION_VALUE);
     }
   });
 
   test('can cancel discard unsaved host changes via dialog', async function (assert) {
-    assert.expect(5);
+    assert.expect(7);
+    const { name, description } = this.server.schema.hosts.all().models[0];
     const confirmService = this.owner.lookup('service:confirm');
     confirmService.enabled = true;
-    assert.notEqual(instances.host.name, 'random string');
+    assert.notEqual(name, commonSelectors.FIELD_NAME_VALUE);
+    assert.notEqual(description, commonSelectors.FIELD_DESCRIPTION_VALUE);
     await visit(urls.host);
-    await click('form [type="button"]', 'Activate edit mode');
-    await fillIn('[name="name"]', 'random string');
+
+    await click(commonSelectors.EDIT_BTN, 'Activate edit mode');
+    await fillIn(commonSelectors.FIELD_NAME, commonSelectors.FIELD_NAME_VALUE);
+    await fillIn(
+      commonSelectors.FIELD_DESCRIPTION,
+      commonSelectors.FIELD_DESCRIPTION_VALUE,
+    );
     assert.strictEqual(currentURL(), urls.host);
+
+    // Wrap on a try/catch because transitioning while editing returns error
     try {
       await visit(urls.hosts);
     } catch (e) {
-      assert.ok(find('.rose-dialog'));
-      await click('.rose-dialog-footer button:last-child');
+      assert.dom(commonSelectors.DIALOG_UNSAVED_CHANGES).exists();
+      await click(commonSelectors.DIALOG_UNSAVED_CHANGES_CANCEL);
+
       assert.strictEqual(currentURL(), urls.host);
-      assert.notEqual(
-        this.server.schema.hosts.all().models[0].name,
-        'random string',
-      );
+      assert.notEqual(name, commonSelectors.FIELD_NAME_VALUE);
+      assert.notEqual(description, commonSelectors.FIELD_DESCRIPTION_VALUE);
     }
   });
 });

ui/admin/tests/helpers/selectors.js

@@ -33,3 +33,9 @@ export const ALERT_TOAST_BODY =
   '[data-test-toast-notification] .hds-alert__description';
 export const ALERT_TOAST_DISMISS =
   '[data-test-toast-notification] .hds-dismiss-button';
+
+export const DIALOG_UNSAVED_CHANGES = '.rose-dialog';
+export const DIALOG_UNSAVED_CHANGES_DISCARD =
+  '.rose-dialog-footer button:first-child';
+export const DIALOG_UNSAVED_CHANGES_CANCEL =
+  '.rose-dialog-footer button:last-child';