From b59afd3455fb56ef6efe548c7515728e8adfe7ee Mon Sep 17 00:00:00 2001 From: Carlos Alcaide Corvo Date: Mon, 9 Dec 2024 09:42:16 -0800 Subject: [PATCH] =?UTF-8?q?test:=20=F0=9F=92=8D=20Update=20test=20selector?= =?UTF-8?q?s=20for=20update=20host=20test=20(#2609)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/components/form/host/static/index.hbs | 4 +- .../host-catalogs/hosts/create-test.js | 2 + .../host-catalogs/hosts/selectors.js | 1 + .../host-catalogs/hosts/update-test.js | 121 +++++++++++------- ui/admin/tests/helpers/selectors.js | 6 + 5 files changed, 88 insertions(+), 46 deletions(-) diff --git a/ui/admin/app/components/form/host/static/index.hbs b/ui/admin/app/components/form/host/static/index.hbs index c5cfd9dbb..fa3e1c614 100644 --- a/ui/admin/app/components/form/host/static/index.hbs +++ b/ui/admin/app/components/form/host/static/index.hbs @@ -68,7 +68,9 @@ {{#if @model.errors.address}} {{#each @model.errors.address as |error|}} - {{error.message}} + {{error.message}} {{/each}} {{/if}} diff --git a/ui/admin/tests/acceptance/host-catalogs/hosts/create-test.js b/ui/admin/tests/acceptance/host-catalogs/hosts/create-test.js index 64cde54e4..17b003aa3 100644 --- a/ui/admin/tests/acceptance/host-catalogs/hosts/create-test.js +++ b/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( diff --git a/ui/admin/tests/acceptance/host-catalogs/hosts/selectors.js b/ui/admin/tests/acceptance/host-catalogs/hosts/selectors.js index 1a144c948..1e3dd8bf4 100644 --- a/ui/admin/tests/acceptance/host-catalogs/hosts/selectors.js +++ b/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]'; diff --git a/ui/admin/tests/acceptance/host-catalogs/hosts/update-test.js b/ui/admin/tests/acceptance/host-catalogs/hosts/update-test.js index b93d87f82..3fb0ab207 100644 --- a/ui/admin/tests/acceptance/host-catalogs/hosts/update-test.js +++ b/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); } }); }); diff --git a/ui/admin/tests/helpers/selectors.js b/ui/admin/tests/helpers/selectors.js index 4da6b4333..7f5344af5 100644 --- a/ui/admin/tests/helpers/selectors.js +++ b/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';