From 3ddd4312bab6adbae8a599c2b0fe39aec57e4f5b Mon Sep 17 00:00:00 2001 From: Stefan Topfstedt Date: Wed, 13 Mar 2024 12:52:20 -0700 Subject: [PATCH 1/3] put leadership user search boxes above user lists. --- .../addon/components/leadership-manager.hbs | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/packages/ilios-common/addon/components/leadership-manager.hbs b/packages/ilios-common/addon/components/leadership-manager.hbs index 0d3177fb7c..b9424d3fb9 100644 --- a/packages/ilios-common/addon/components/leadership-manager.hbs +++ b/packages/ilios-common/addon/components/leadership-manager.hbs @@ -20,6 +20,32 @@ + + {{#if @showDirectors}} + + + + {{/if}} + {{#if @showAdministrators}} + + + + {{/if}} + {{#if @showStudentAdvisors}} + + + + {{/if}} + {{#if @showDirectors}} @@ -112,32 +138,6 @@ {{/if}} - - {{#if @showDirectors}} - - - - {{/if}} - {{#if @showAdministrators}} - - - - {{/if}} - {{#if @showStudentAdvisors}} - - - - {{/if}} - From a324dc3aca05e0394094ed2522d313631cff629d Mon Sep 17 00:00:00 2001 From: Stefan Topfstedt Date: Wed, 13 Mar 2024 12:53:25 -0700 Subject: [PATCH 2/3] rm auto-margins for better horizontal alignment. --- .../app/styles/ilios-common/components/leadership-manager.scss | 1 - .../app/styles/ilios-common/components/leadership-search.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/ilios-common/app/styles/ilios-common/components/leadership-manager.scss b/packages/ilios-common/app/styles/ilios-common/components/leadership-manager.scss index 2763732a75..7701fd4fd9 100644 --- a/packages/ilios-common/app/styles/ilios-common/components/leadership-manager.scss +++ b/packages/ilios-common/app/styles/ilios-common/components/leadership-manager.scss @@ -17,7 +17,6 @@ .user-search { clear: both; - margin: auto; position: relative; width: 90%; diff --git a/packages/ilios-common/app/styles/ilios-common/components/leadership-search.scss b/packages/ilios-common/app/styles/ilios-common/components/leadership-search.scss index c09ba4cede..e18d666e56 100644 --- a/packages/ilios-common/app/styles/ilios-common/components/leadership-search.scss +++ b/packages/ilios-common/app/styles/ilios-common/components/leadership-search.scss @@ -3,7 +3,6 @@ .leadership-search { clear: both; - margin: auto; position: relative; width: 90%; From 97d70e74ca18b8c97e2e8361f02626fe334b9c5b Mon Sep 17 00:00:00 2001 From: Stefan Topfstedt Date: Thu, 14 Mar 2024 12:03:39 -0700 Subject: [PATCH 3/3] modernize component integration test. --- .../components/leadership-manager.js | 34 ++- .../components/leadership-manager-test.js | 289 ++++++++++-------- 2 files changed, 184 insertions(+), 139 deletions(-) diff --git a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/leadership-manager.js b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/leadership-manager.js index b886077e30..d071c29228 100644 --- a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/leadership-manager.js +++ b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/leadership-manager.js @@ -1,10 +1,16 @@ -import { clickable, collection, fillable, hasClass, notHasClass } from 'ember-cli-page-object'; +import { + clickable, + collection, + create, + fillable, + hasClass, + isPresent, + notHasClass, +} from 'ember-cli-page-object'; +import userNameInfo from './user-name-info'; -export default { +const definition = { scope: '[data-test-leadership-manager]', - selectedDirectors: collection('[data-test-directors] ul li', { - remove: clickable('.remove'), - }), directorSearch: { scope: '[data-test-director-search] [data-test-leadership-search]', search: fillable('input[type=search]'), @@ -23,9 +29,6 @@ export default { isSelected: notHasClass('clickable'), }), }, - selectedAdministrators: collection('[data-test-administrators] ul li', { - remove: clickable('.remove'), - }), studentAdvisorSearch: { scope: '[data-test-student-advisor-search] [data-test-leadership-search]', search: fillable('input[type=search]'), @@ -35,7 +38,22 @@ export default { isSelected: notHasClass('clickable'), }), }, + selectedDirectors: collection('[data-test-directors] ul li', { + userNameInfo, + remove: clickable('.remove'), + isDisabled: isPresent('.disabled-user'), + }), + selectedAdministrators: collection('[data-test-administrators] ul li', { + userNameInfo, + remove: clickable('.remove'), + isDisabled: isPresent('.disabled-user'), + }), selectedStudentAdvisors: collection('[data-test-student-advisors] ul li', { + userNameInfo, remove: clickable('.remove'), + isDisabled: isPresent('.disabled-user'), }), }; + +export default definition; +export const component = create(definition); diff --git a/packages/test-app/tests/integration/components/leadership-manager-test.js b/packages/test-app/tests/integration/components/leadership-manager-test.js index d4bca2305c..3e25870584 100644 --- a/packages/test-app/tests/integration/components/leadership-manager-test.js +++ b/packages/test-app/tests/integration/components/leadership-manager-test.js @@ -1,10 +1,10 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'test-app/tests/helpers'; import { setupIntl } from 'ember-intl/test-support'; -import { render, fillIn, click, findAll, find, triggerEvent } from '@ember/test-helpers'; -import { map } from 'rsvp'; +import { render } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; import { setupMirage } from 'ember-cli-mirage/test-support'; +import { component } from 'ilios-common/page-objects/components/leadership-manager'; module('Integration | Component | leadership manager', function (hooks) { setupRenderingTest(hooks); @@ -33,17 +33,22 @@ module('Integration | Component | leadership manager', function (hooks) { @addStudentAdvisor={{(noop)}} /> `); - const directors = 'table tbody tr:nth-of-type(1) td:nth-of-type(1) li'; - const administrators = 'table tbody tr:nth-of-type(1) td:nth-of-type(2) li'; - const studentAdvisors = 'table tbody tr:nth-of-type(1) td:nth-of-type(3) li'; - - assert.dom(directors).exists({ count: 1 }); - assert.dom(findAll(directors)[0]).hasText('0 guy M. Mc0son'); - assert.dom(administrators).exists({ count: 2 }); - assert.dom(findAll(administrators)[0]).hasText('0 guy M. Mc0son'); - assert.dom(findAll(administrators)[1]).hasText('1 guy M. Mc1son'); - assert.dom(studentAdvisors).exists({ count: 1 }); - assert.dom(findAll(studentAdvisors)[0]).hasText('1 guy M. Mc1son'); + assert.strictEqual(component.selectedDirectors.length, 1); + assert.strictEqual(component.selectedDirectors[0].userNameInfo.fullName, '0 guy M. Mc0son'); + assert.strictEqual(component.selectedAdministrators.length, 2); + assert.strictEqual( + component.selectedAdministrators[0].userNameInfo.fullName, + '0 guy M. Mc0son', + ); + assert.strictEqual( + component.selectedAdministrators[1].userNameInfo.fullName, + '1 guy M. Mc1son', + ); + assert.strictEqual(component.selectedStudentAdvisors.length, 1); + assert.strictEqual( + component.selectedStudentAdvisors[0].userNameInfo.fullName, + '1 guy M. Mc1son', + ); }); test('it renders without data', async function (assert) { @@ -66,13 +71,9 @@ module('Integration | Component | leadership manager', function (hooks) { @addStudentAdvisor={{(noop)}} /> `); - const directors = 'table tbody tr:nth-of-type(1) td:nth-of-type(1) li'; - const administrators = 'table tbody tr:nth-of-type(1) td:nth-of-type(2) li'; - const studentAdvisors = 'table tbody tr:nth-of-type(1) td:nth-of-type(3) li'; - - assert.dom(directors).doesNotExist(); - assert.dom(administrators).doesNotExist(); - assert.dom(studentAdvisors).doesNotExist(); + assert.strictEqual(component.selectedDirectors.length, 0); + assert.strictEqual(component.selectedAdministrators.length, 0); + assert.strictEqual(component.selectedStudentAdvisors.length, 0); }); test('remove director', async function (assert) { @@ -101,12 +102,9 @@ module('Integration | Component | leadership manager', function (hooks) { @addStudentAdvisor={{(noop)}} /> `); - const list = 'table tbody tr:nth-of-type(1) td:nth-of-type(1) li'; - const icon = `${list}:nth-of-type(1) svg`; - - assert.dom(list).exists({ count: 1 }); - assert.dom(findAll(list)[0]).hasText('0 guy M. Mc0son'); - await click(icon); + assert.strictEqual(component.selectedDirectors.length, 1); + assert.strictEqual(component.selectedDirectors[0].userNameInfo.fullName, '0 guy M. Mc0son'); + component.selectedDirectors[0].remove(); }); test('remove administrator', async function (assert) { @@ -135,12 +133,12 @@ module('Integration | Component | leadership manager', function (hooks) { @addStudentAdvisor={{(noop)}} /> `); - const list = 'table tbody tr:nth-of-type(1) td:nth-of-type(2) li'; - const icon = `${list}:nth-of-type(1) svg`; - - assert.dom(list).exists({ count: 1 }); - assert.dom(findAll(list)[0]).hasText('0 guy M. Mc0son'); - await click(icon); + assert.strictEqual(component.selectedAdministrators.length, 1); + assert.strictEqual( + component.selectedAdministrators[0].userNameInfo.fullName, + '0 guy M. Mc0son', + ); + component.selectedAdministrators[0].remove(); }); test('remove student advisor', async function (assert) { @@ -169,12 +167,12 @@ module('Integration | Component | leadership manager', function (hooks) { @addStudentAdvisor={{(noop)}} /> `); - const list = 'table tbody tr:nth-of-type(1) td:nth-of-type(3) li'; - const icon = `${list}:nth-of-type(1) svg`; - - assert.dom(list).exists({ count: 1 }); - assert.dom(findAll(list)[0]).hasText('0 guy M. Mc0son'); - await click(icon); + assert.strictEqual(component.selectedStudentAdvisors.length, 1); + assert.strictEqual( + component.selectedStudentAdvisors[0].userNameInfo.fullName, + '0 guy M. Mc0son', + ); + component.selectedStudentAdvisors[0].remove(); }); test('add director', async function (assert) { @@ -204,22 +202,17 @@ module('Integration | Component | leadership manager', function (hooks) { @addStudentAdvisor={{(noop)}} /> `); - const directorsList = 'table tbody tr:nth-of-type(1) td:nth-of-type(1) li'; - const administratorsList = 'table tbody tr:nth-of-type(1) td:nth-of-type(2) li'; - const studentAdvisorsList = 'table tbody tr:nth-of-type(1) td:nth-of-type(3) li'; - const directorSearch = '[data-test-director-search] input'; - const firstResult = '[data-test-result-index="1"]'; - - assert.dom(directorsList).doesNotExist(); - assert.dom(administratorsList).exists({ count: 1 }); - assert.dom(studentAdvisorsList).exists({ count: 1 }); - await fillIn(directorSearch, 'user'); - - assert.ok(find(firstResult).textContent.includes('0 guy')); - await click(`${firstResult} [data-test-select-user]`); - assert.dom(directorsList).exists({ count: 1 }); - assert.dom(administratorsList).exists({ count: 1 }); - assert.dom(studentAdvisorsList).exists({ count: 1 }); + assert.strictEqual(component.selectedDirectors.length, 0); + assert.strictEqual(component.selectedAdministrators.length, 1); + assert.strictEqual(component.selectedStudentAdvisors.length, 1); + + await component.directorSearch.search('0 guy'); + await component.directorSearch.results[0].add(); + + assert.strictEqual(component.selectedDirectors.length, 1); + assert.strictEqual(component.selectedAdministrators.length, 1); + assert.strictEqual(component.selectedStudentAdvisors.length, 1); + assert.strictEqual(component.selectedDirectors[0].userNameInfo.fullName, '0 guy M. Mc0son'); }); test('add administrator', async function (assert) { @@ -249,23 +242,20 @@ module('Integration | Component | leadership manager', function (hooks) { @addStudentAdvisor={{(noop)}} /> `); - const directorsList = 'table tbody tr:nth-of-type(1) td:nth-of-type(1) li'; - const administratorsList = 'table tbody tr:nth-of-type(1) td:nth-of-type(2) li'; - const studentAdvisorsList = 'table tbody tr:nth-of-type(1) td:nth-of-type(3) li'; - const administratorSearch = '[data-test-administrator-search] input'; - const firstResult = '[data-test-result-index="1"]'; - - assert.dom(directorsList).exists({ count: 1 }); - assert.dom(administratorsList).doesNotExist(); - assert.dom(studentAdvisorsList).exists({ count: 1 }); - - await fillIn(administratorSearch, 'user'); - - assert.ok(find(firstResult).textContent.includes('0 guy')); - await click(`${firstResult} [data-test-select-user]`); - assert.dom(directorsList).exists({ count: 1 }); - assert.dom(administratorsList).exists({ count: 1 }); - assert.dom(studentAdvisorsList).exists({ count: 1 }); + assert.strictEqual(component.selectedDirectors.length, 1); + assert.strictEqual(component.selectedAdministrators.length, 0); + assert.strictEqual(component.selectedStudentAdvisors.length, 1); + + await component.administratorSearch.search('0 guy'); + await component.administratorSearch.results[0].add(); + + assert.strictEqual(component.selectedDirectors.length, 1); + assert.strictEqual(component.selectedAdministrators.length, 1); + assert.strictEqual(component.selectedStudentAdvisors.length, 1); + assert.strictEqual( + component.selectedAdministrators[0].userNameInfo.fullName, + '0 guy M. Mc0son', + ); }); test('add student advisor', async function (assert) { @@ -295,23 +285,20 @@ module('Integration | Component | leadership manager', function (hooks) { @addStudentAdvisor={{this.add}} /> `); - const directorsList = 'table tbody tr:nth-of-type(1) td:nth-of-type(1) li'; - const administratorsList = 'table tbody tr:nth-of-type(1) td:nth-of-type(2) li'; - const studentAdvisorsList = 'table tbody tr:nth-of-type(1) td:nth-of-type(3) li'; - const studentAdvisorSearch = '[data-test-student-advisor-search] input'; - const firstResult = '[data-test-result-index="1"]'; - - assert.dom(directorsList).exists({ count: 1 }); - assert.dom(administratorsList).exists({ count: 1 }); - assert.dom(studentAdvisorsList).doesNotExist(); - - await fillIn(studentAdvisorSearch, 'user'); - - assert.ok(find(firstResult).textContent.includes('0 guy')); - await click(`${firstResult} [data-test-select-user]`); - assert.dom(directorsList).exists({ count: 1 }); - assert.dom(administratorsList).exists({ count: 1 }); - assert.dom(studentAdvisorsList).exists({ count: 1 }); + assert.strictEqual(component.selectedDirectors.length, 1); + assert.strictEqual(component.selectedAdministrators.length, 1); + assert.strictEqual(component.selectedStudentAdvisors.length, 0); + + await component.studentAdvisorSearch.search('0 guy'); + await component.studentAdvisorSearch.results[0].add(); + + assert.strictEqual(component.selectedDirectors.length, 1); + assert.strictEqual(component.selectedAdministrators.length, 1); + assert.strictEqual(component.selectedStudentAdvisors.length, 1); + assert.strictEqual( + component.selectedStudentAdvisors[0].userNameInfo.fullName, + '0 guy M. Mc0son', + ); }); test('disabled users are indicated with an icon', async function (assert) { @@ -337,20 +324,20 @@ module('Integration | Component | leadership manager', function (hooks) { @addAdministrator={{(noop)}} /> `); - const directors = 'table tbody tr:nth-of-type(1) td:nth-of-type(1) li'; - const administrators = 'table tbody tr:nth-of-type(1) td:nth-of-type(2) li'; - const disabledDirectors = `${directors} .fa-user-xmark`; - const disabledAdministrators = `${administrators} .fa-user-xmark`; - const firstAdministratorName = `${administrators}:nth-of-type(1) [data-test-fullname]`; - const secondAdministratorName = `${administrators}:nth-of-type(2) [data-test-fullname]`; - - assert.dom(directors).exists({ count: 1 }); - assert.dom(disabledDirectors).doesNotExist(); - assert.dom(findAll(directors)[0]).hasText('0 guy M. Mc0son'); - assert.dom(administrators).exists({ count: 2 }); - assert.dom(disabledAdministrators).exists({ count: 1 }); - assert.dom(firstAdministratorName).hasText('0 guy M. Mc0son'); - assert.dom(secondAdministratorName).hasText('1 guy M. Mc1son'); + assert.strictEqual(component.selectedDirectors.length, 1); + assert.strictEqual(component.selectedDirectors[0].userNameInfo.fullName, '0 guy M. Mc0son'); + assert.notOk(component.selectedDirectors[0].isDisabled); + assert.strictEqual(component.selectedAdministrators.length, 2); + assert.strictEqual( + component.selectedAdministrators[0].userNameInfo.fullName, + '0 guy M. Mc0son', + ); + assert.notOk(component.selectedAdministrators[0].isDisabled); + assert.strictEqual( + component.selectedAdministrators[1].userNameInfo.fullName, + '1 guy M. Mc1son', + ); + assert.ok(component.selectedAdministrators[1].isDisabled); }); test('users are sorted by full name', async function (assert) { @@ -386,17 +373,36 @@ module('Integration | Component | leadership manager', function (hooks) { @addStudentAdvisor={{(noop)}} /> `); - - const directors = 'table tbody tr:nth-of-type(1) td:nth-of-type(1) li'; - const administrators = 'table tbody tr:nth-of-type(1) td:nth-of-type(2) li'; - const studentAdvisors = 'table tbody tr:nth-of-type(1) td:nth-of-type(3) li'; - - [directors, administrators, studentAdvisors].forEach((users) => { - assert.dom(users).exists({ count: 3 }); - assert.dom(`${users}:nth-of-type(1) [data-test-fullname]`).hasText('Aaron M. Aardvark'); - assert.dom(`${users}:nth-of-type(2) [data-test-fullname]`).hasText('The Bane of Iowa'); - assert.dom(`${users}:nth-of-type(3) [data-test-fullname]`).hasText('Ursula U. Unbekannt'); - }); + assert.strictEqual(component.selectedDirectors.length, 3); + assert.strictEqual(component.selectedDirectors[0].userNameInfo.fullName, 'Aaron M. Aardvark'); + assert.strictEqual(component.selectedDirectors[1].userNameInfo.fullName, 'The Bane of Iowa'); + assert.strictEqual(component.selectedDirectors[2].userNameInfo.fullName, 'Ursula U. Unbekannt'); + assert.strictEqual(component.selectedAdministrators.length, 3); + assert.strictEqual( + component.selectedAdministrators[0].userNameInfo.fullName, + 'Aaron M. Aardvark', + ); + assert.strictEqual( + component.selectedAdministrators[1].userNameInfo.fullName, + 'The Bane of Iowa', + ); + assert.strictEqual( + component.selectedAdministrators[2].userNameInfo.fullName, + 'Ursula U. Unbekannt', + ); + assert.strictEqual(component.selectedStudentAdvisors.length, 3); + assert.strictEqual( + component.selectedStudentAdvisors[0].userNameInfo.fullName, + 'Aaron M. Aardvark', + ); + assert.strictEqual( + component.selectedStudentAdvisors[1].userNameInfo.fullName, + 'The Bane of Iowa', + ); + assert.strictEqual( + component.selectedStudentAdvisors[2].userNameInfo.fullName, + 'Ursula U. Unbekannt', + ); }); test('username info tooltip shows as applicable', async function (assert) { @@ -432,23 +438,44 @@ module('Integration | Component | leadership manager', function (hooks) { @addStudentAdvisor={{(noop)}} /> `); - - const directors = 'table tbody tr:nth-of-type(1) td:nth-of-type(1) li'; - const administrators = 'table tbody tr:nth-of-type(1) td:nth-of-type(2) li'; - const studentAdvisors = 'table tbody tr:nth-of-type(1) td:nth-of-type(3) li'; - - await map([directors, administrators, studentAdvisors], async (users) => { - assert.dom(users).exists({ count: 3 }); - assert.dom(`${users}:nth-of-type(1) [data-test-fullname]`).hasText('Aaron M. Aardvark'); - assert.dom(`${users}:nth-of-type(1) [data-test-info]`).doesNotExist(); - assert.dom(`${users}:nth-of-type(2) [data-test-fullname]`).hasText('The Bane of Iowa'); - assert.dom(find('.ilios-tooltip')).doesNotExist(); - await triggerEvent(find(`${users}:nth-of-type(2) [data-test-info]`), 'mouseover'); - assert.dom(find('.ilios-tooltip')).hasText('Campus name of record: Zeb M, Zoober'); - await triggerEvent(find(`${users}:nth-of-type(2) [data-test-info]`), 'mouseout'); - assert.dom(find('.ilios-tooltip')).doesNotExist(); - assert.dom(`${users}:nth-of-type(3) [data-test-fullname]`).hasText('Ursula U. Unbekannt'); - assert.dom(`${users}:nth-of-type(3) [data-test-info]`).doesNotExist(); - }); + assert.strictEqual(component.selectedDirectors.length, 3); + assert.strictEqual(component.selectedDirectors[0].userNameInfo.fullName, 'Aaron M. Aardvark'); + assert.strictEqual(component.selectedDirectors[1].userNameInfo.fullName, 'The Bane of Iowa'); + assert.strictEqual(component.selectedDirectors[2].userNameInfo.fullName, 'Ursula U. Unbekannt'); + assert.notOk(component.selectedDirectors[0].userNameInfo.hasAdditionalInfo); + assert.ok(component.selectedDirectors[1].userNameInfo.hasAdditionalInfo); + assert.notOk(component.selectedDirectors[2].userNameInfo.hasAdditionalInfo); + assert.strictEqual(component.selectedAdministrators.length, 3); + assert.strictEqual( + component.selectedAdministrators[0].userNameInfo.fullName, + 'Aaron M. Aardvark', + ); + assert.strictEqual( + component.selectedAdministrators[1].userNameInfo.fullName, + 'The Bane of Iowa', + ); + assert.strictEqual( + component.selectedAdministrators[2].userNameInfo.fullName, + 'Ursula U. Unbekannt', + ); + assert.notOk(component.selectedAdministrators[0].userNameInfo.hasAdditionalInfo); + assert.ok(component.selectedAdministrators[1].userNameInfo.hasAdditionalInfo); + assert.notOk(component.selectedAdministrators[2].userNameInfo.hasAdditionalInfo); + assert.strictEqual(component.selectedStudentAdvisors.length, 3); + assert.strictEqual( + component.selectedStudentAdvisors[0].userNameInfo.fullName, + 'Aaron M. Aardvark', + ); + assert.strictEqual( + component.selectedStudentAdvisors[1].userNameInfo.fullName, + 'The Bane of Iowa', + ); + assert.strictEqual( + component.selectedStudentAdvisors[2].userNameInfo.fullName, + 'Ursula U. Unbekannt', + ); + assert.notOk(component.selectedStudentAdvisors[0].userNameInfo.hasAdditionalInfo); + assert.ok(component.selectedStudentAdvisors[1].userNameInfo.hasAdditionalInfo); + assert.notOk(component.selectedStudentAdvisors[2].userNameInfo.hasAdditionalInfo); }); });