diff --git a/packages/frontend/app/components/program-year/objective-list-item.hbs b/packages/frontend/app/components/program-year/objective-list-item.hbs index 08fac0c941..eb33b86bb1 100644 --- a/packages/frontend/app/components/program-year/objective-list-item.hbs +++ b/packages/frontend/app/components/program-year/objective-list-item.hbs @@ -27,6 +27,8 @@ @isSaveDisabled={{this.hasErrorForTitle}} @save={{perform this.saveTitleChanges}} @close={{this.revertTitleChanges}} + @fadeTextExpanded={{this.fadeTextExpanded}} + @onExpandAllFadeText={{this.expandAllFadeText}} > diff --git a/packages/frontend/app/components/program-year/objective-list-item.js b/packages/frontend/app/components/program-year/objective-list-item.js index 0f1a606fa7..dcce57073d 100644 --- a/packages/frontend/app/components/program-year/objective-list-item.js +++ b/packages/frontend/app/components/program-year/objective-list-item.js @@ -20,6 +20,7 @@ export default class ProgramYearObjectiveListItemComponent extends Component { @tracked isManagingTerms; @tracked termsBuffer = []; @tracked selectedVocabulary; + @tracked fadeTextExpanded = false; constructor() { super(...arguments); @@ -155,6 +156,10 @@ export default class ProgramYearObjectiveListItemComponent extends Component { this.highlightSave.perform(); }); + @action + expandAllFadeText(isExpanded) { + this.fadeTextExpanded = isExpanded; + } @action revertTitleChanges() { this.title = this.args.programYearObjective.title; diff --git a/packages/frontend/tests/acceptance/course/competencies-test.js b/packages/frontend/tests/acceptance/course/competencies-test.js index 90a6a09e3d..1f590e8692 100644 --- a/packages/frontend/tests/acceptance/course/competencies-test.js +++ b/packages/frontend/tests/acceptance/course/competencies-test.js @@ -69,7 +69,7 @@ module('Acceptance | Course - Competencies', function (hooks) { details: true, courseObjectiveDetails: true, }); - await page.details.objectives.objectiveList.objectives[1].parents.list[0].manage(); + await page.details.objectives.objectiveList.objectives[1].parents.manage(); const m = page.details.objectives.objectiveList.objectives[1].parentManager; await m.competencies[1].objectives[0].add(); assert.ok(m.competencies[0].objectives[0].notSelected); diff --git a/packages/frontend/tests/acceptance/course/objectiveparents-allow-multiple-test.js b/packages/frontend/tests/acceptance/course/objectiveparents-allow-multiple-test.js index cfe80efd17..33cf5e837a 100644 --- a/packages/frontend/tests/acceptance/course/objectiveparents-allow-multiple-test.js +++ b/packages/frontend/tests/acceptance/course/objectiveparents-allow-multiple-test.js @@ -5,7 +5,7 @@ import { setupApplicationTest } from 'frontend/tests/helpers'; import page from 'ilios-common/page-objects/course'; import percySnapshot from '@percy/ember'; -module('Acceptance | Course - Multiple Objective Parents', function (hooks) { +module('Acceptance | Course - Multiple Objective Parents', function (hooks) { setupApplicationTest(hooks); hooks.beforeEach(async function () { this.user = await setupAuthentication({}, true); @@ -65,7 +65,7 @@ module('Acceptance | Course - Multiple Objective Parents', function (hooks) { 'program-year objective 1', ); - await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage(); + await page.details.objectives.objectiveList.objectives[0].parents.manage(); const m = page.details.objectives.objectiveList.objectives[0].parentManager; assert.strictEqual(m.selectedCohortTitle, 'program 0 cohort 0'); @@ -92,7 +92,7 @@ module('Acceptance | Course - Multiple Objective Parents', function (hooks) { page.details.objectives.objectiveList.objectives[0].description.text, 'course objective 0', ); - await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage(); + await page.details.objectives.objectiveList.objectives[0].parents.manage(); const m = page.details.objectives.objectiveList.objectives[0].parentManager; await m.competencies[0].objectives[2].add(); diff --git a/packages/frontend/tests/acceptance/course/objectiveparents-description-sync-test.js b/packages/frontend/tests/acceptance/course/objectiveparents-description-sync-test.js new file mode 100644 index 0000000000..8bb2262b4c --- /dev/null +++ b/packages/frontend/tests/acceptance/course/objectiveparents-description-sync-test.js @@ -0,0 +1,352 @@ +import { module, test } from 'qunit'; +import { setupAuthentication } from 'ilios-common'; +import { setupApplicationTest } from 'frontend/tests/helpers'; +import { getUniqueName } from '../../helpers/percy-snapshot-name'; +import { waitFor } from '@ember/test-helpers'; +import page from 'ilios-common/page-objects/course'; +import percySnapshot from '@percy/ember'; + +module('Acceptance | Course - Objective Parents - Faded Status Sync', function (hooks) { + setupApplicationTest(hooks); + hooks.beforeEach(async function () { + this.longObjDescription = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat tempor neque ut egestas. In cursus dignissim erat, sed porttitor mauris tincidunt at. Nunc et tortor in purus facilisis molestie. Phasellus in ligula nisi. Nam nec mi in urna mollis pharetra. Suspendisse in nibh ex. Curabitur maximus diam in condimentum pulvinar. Phasellus sit amet metus interdum, molestie turpis vel, bibendum eros. In fermentum elit in odio cursus cursus. Nullam ipsum ipsum, fringilla a efficitur non, vehicula vitae enim. Duis ultrices vitae neque in pulvinar. Nulla molestie vitae quam eu faucibus. Vestibulum tempor, tellus in dapibus sagittis, velit purus maximus lectus, quis ullamcorper sem neque quis sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed commodo risus sed tellus imperdiet, ac suscipit justo scelerisque. Quisque sit amet nulla efficitur, sollicitudin sem in, venenatis mi. Quisque sit amet neque varius, interdum quam id, condimentum ipsum. Quisque tincidunt efficitur diam ut feugiat. Duis vehicula mauris elit, vel vehicula eros commodo rhoncus. Phasellus ac eros vel turpis egestas aliquet. Nam id dolor rutrum, imperdiet purus ac, faucibus nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam aliquam leo eget quam varius ultricies. Suspendisse pellentesque varius mi eu luctus. Integer lacinia ornare magna, in egestas quam molestie non.'; + this.longParentObjTitle = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat tempor neque ut egestas. In cursus dignissim erat, sed porttitor mauris tincidunt at. Nunc et tortor in purus facilisis molestie. Phasellus in ligula nisi. Nam nec mi in urna mollis pharetra. Suspendisse in nibh ex. Curabitur maximus diam in condimentum pulvinar. Phasellus sit amet metus interdum, molestie turpis vel, bibendum eros. In fermentum elit in odio cursus cursus. Nullam ipsum ipsum, fringilla a efficitur non, vehicula vitae enim. Duis ultrices vitae neque in pulvinar. Nulla molestie vitae quam eu faucibus. Vestibulum tempor, tellus in dapibus sagittis, velit purus maximus lectus, quis ullamcorper sem neque quis sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed commodo risus sed tellus imperdiet, ac suscipit justo scelerisque. Quisque sit amet nulla efficitur, sollicitudin sem in, venenatis mi. Quisque sit amet neque varius, interdum quam id, condimentum ipsum. Quisque tincidunt efficitur diam ut feugiat. Duis vehicula mauris elit, vel vehicula eros commodo rhoncus. Phasellus ac eros vel turpis egestas aliquet. Nam id dolor rutrum, imperdiet purus ac, faucibus nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam aliquam leo eget quam varius ultricies. Suspendisse pellentesque varius mi eu luctus. Integer lacinia ornare magna, in egestas quam molestie non.'; + this.fadedSelector = '.faded'; + + this.user = await setupAuthentication({}, true); + this.school = this.server.create('school'); + const program = this.server.create('program', { school: this.school }); + const programYear = this.server.create('program-year', { program }); + const cohort = this.server.create('cohort', { programYear }); + const competency1 = this.server.create('competency', { + school: this.school, + programYears: [programYear], + }); + const competency2 = this.server.create('competency', { + school: this.school, + programYears: [programYear], + }); + const competency3 = this.server.create('competency', { + school: this.school, + programYears: [programYear], + }); + const parent1 = this.server.create('program-year-objective', { + programYear, + competency: competency1, + }); + const parent2 = this.server.create('program-year-objective', { + programYear, + competency: competency2, + title: this.longParentObjTitle, + }); + const parent3 = this.server.create('program-year-objective', { + programYear, + competency: competency3, + title: this.longParentObjTitle, + }); + this.course = this.server.create('course', { + year: 2024, + school: this.school, + cohorts: [cohort], + }); + this.server.create('course-objective', { + course: this.course, + programYearObjectives: [parent1], + title: this.longObjDescription, + }); + this.server.create('course-objective', { + course: this.course, + programYearObjectives: [parent2], + }); + this.server.create('course-objective', { + course: this.course, + programYearObjectives: [parent3], + title: this.longObjDescription, + }); + }); + + test('objective description and parent objectives faded statuses are synced', async function (assert) { + assert.expect(52); + this.user.update({ administeredSchools: [this.school] }); + + await page.visit({ + courseId: this.course.id, + details: true, + courseObjectiveDetails: true, + }); + + // slight delay to allow for proper loading of component + await waitFor(this.fadedSelector); + + assert.strictEqual( + page.details.objectives.objectiveList.objectives.length, + 3, + 'course objective count is 3', + ); + + /* + 1st option: col1 long/col2 short + */ + + assert.strictEqual( + page.details.objectives.objectiveList.objectives[0].description.text, + this.longObjDescription, + '1st objective title is long', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[0].description.fadeText.enabled, + '1st objective is fade-enabled', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[0].description.fadeText.displayText.isFaded, + '1st objective long title is faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[0].description.fadeText.control.expand, + '1st objective long title has expand button', + ); + assert.strictEqual( + page.details.objectives.objectiveList.objectives[0].parents.list.length, + 1, + '1st objective has one parent objective', + ); + assert.strictEqual( + page.details.objectives.objectiveList.objectives[0].parents.list[0].text, + 'program-year objective 0', + '1st parent objective title is short', + ); + assert.notOk( + page.details.objectives.objectiveList.objectives[0].parents.fadeText.enabled, + '1st parent objective is not fade-enabled', + ); + + await percySnapshot(getUniqueName(assert, '1st objective list item collapsed')); + await page.details.objectives.objectiveList.objectives[0].description.fadeText.control.expand.click(); + await percySnapshot(getUniqueName(assert, '1st objective list item expanded')); + + assert.notOk( + page.details.objectives.objectiveList.objectives[0].description.fadeText.displayText.isFaded, + '1st objective long title is no longer faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[0].description.fadeText.control.collapse, + '1st objective long title now has collapse button', + ); + assert.notOk( + page.details.objectives.objectiveList.objectives[0].parents.fadeText.enabled, + '1st parent objective is still not fade-enabled', + ); + + await page.details.objectives.objectiveList.objectives[0].description.fadeText.control.collapse.click(); + await percySnapshot(getUniqueName(assert, '1st objective list item collapsed again')); + + assert.ok( + page.details.objectives.objectiveList.objectives[0].description.fadeText.displayText.isFaded, + '1st objective long title is faded again', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[0].description.fadeText.control.expand, + '1st objective long title now has expand button', + ); + assert.notOk( + page.details.objectives.objectiveList.objectives[0].parents.fadeText.enabled, + '1st parent objective is still not fade-enabled', + ); + + /* + 2nd option: col1 short/col2 long + */ + + assert.strictEqual( + page.details.objectives.objectiveList.objectives[1].description.text, + 'course objective 1', + '2nd objective title is short', + ); + assert.notOk( + page.details.objectives.objectiveList.objectives[1].description.fadeText.enabled, + '2nd objective is not fade-enabled', + ); + assert.strictEqual( + page.details.objectives.objectiveList.objectives[1].parents.list.length, + 1, + '2nd objective has one parent objective', + ); + assert.strictEqual( + page.details.objectives.objectiveList.objectives[1].parents.list[0].text, + this.longParentObjTitle, + '2nd parent objective title is long', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[1].parents.fadeText.enabled, + '2nd parent objective title is fade-enabled', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[1].parents.fadeText.displayText.isFaded, + '2nd parent objective long title is faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[1].parents.fadeText.control.expand, + '2nd parent objective long title has expand button', + ); + + await percySnapshot(getUniqueName(assert, '2nd objective list item collapsed')); + await page.details.objectives.objectiveList.objectives[1].parents.fadeText.control.expand.click(); + await percySnapshot(getUniqueName(assert, '2nd objective list item expanded')); + + assert.notOk( + page.details.objectives.objectiveList.objectives[1].parents.fadeText.displayText.isFaded, + '2nd parent objective long title is no longer faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[1].parents.fadeText.control.collapse, + '2nd parent objective long title now has collapse button', + ); + assert.notOk( + page.details.objectives.objectiveList.objectives[1].description.fadeText.enabled, + '2nd objective is still not fade-enabled', + ); + + await page.details.objectives.objectiveList.objectives[1].parents.fadeText.control.collapse.click(); + await percySnapshot(getUniqueName(assert, '2nd objective list item collapsed again')); + + assert.ok( + page.details.objectives.objectiveList.objectives[1].parents.fadeText.displayText.isFaded, + '2nd parent objective long title is faded again', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[1].parents.fadeText.control.expand, + '2nd objective long title now has expand button', + ); + assert.notOk( + page.details.objectives.objectiveList.objectives[1].description.fadeText.enabled, + '2nd parent objective is still not fade-enabled', + ); + + /* + 3rd option: col1 long/col2 long + */ + + assert.strictEqual( + page.details.objectives.objectiveList.objectives[2].description.text, + this.longObjDescription, + '3rd objective title is long', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.enabled, + '3rd objective is fade-enabled', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.displayText.isFaded, + '3rd objective long title is faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.control.expand, + '3rd objective long title has expand button', + ); + assert.strictEqual( + page.details.objectives.objectiveList.objectives[2].parents.list.length, + 1, + '3rd objective has one parent objective', + ); + assert.strictEqual( + page.details.objectives.objectiveList.objectives[2].parents.list[0].text, + this.longParentObjTitle, + '3rd parent objective title is long', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.enabled, + '3rd parent objective title is fade-enabled', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.displayText.isFaded, + '3rd parent objective long title is faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.control.expand, + '3rd parent objective long title has expand button', + ); + + await percySnapshot(getUniqueName(assert, '3rd objective list item collapsed')); + await page.details.objectives.objectiveList.objectives[2].description.fadeText.control.expand.click(); + await percySnapshot(getUniqueName(assert, '3rd objective list item expanded')); + + assert.notOk( + page.details.objectives.objectiveList.objectives[2].description.fadeText.displayText.isFaded, + '3rd objective long title is no longer faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.control.collapse, + '3rd objective long title now has collapse button', + ); + assert.notOk( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.displayText.isFaded, + '3rd parent objective long title is no longer faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.control.collapse, + '3rd parent objective long title now has collapse button', + ); + + await page.details.objectives.objectiveList.objectives[2].description.fadeText.control.collapse.click(); + await percySnapshot(getUniqueName(assert, '3rd objective list item collapsed again')); + + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.displayText.isFaded, + '3rd objective long title is faded again', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.control.expand, + '3rd objective long title now has expand button', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.displayText.isFaded, + '3rd parent objective long title is faded again', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.control.expand, + '3rd parent objective long title now has expand button', + ); + + await page.details.objectives.objectiveList.objectives[2].parents.fadeText.control.expand.click(); + await percySnapshot(getUniqueName(assert, '3rd objective list item expanded again')); + + assert.notOk( + page.details.objectives.objectiveList.objectives[2].description.fadeText.displayText.isFaded, + '3rd objective long title is no longer faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.control.collapse, + '3rd objective long title now has collapse button', + ); + assert.notOk( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.displayText.isFaded, + '3rd parent objective long title is no longer faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.control.collapse, + '3rd parent objective long title now has collapse button', + ); + + await page.details.objectives.objectiveList.objectives[2].parents.fadeText.control.collapse.click(); + await percySnapshot(getUniqueName(assert, '3rd objective list item collapsed again')); + + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.displayText.isFaded, + '3rd objective long title is faded again', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.control.expand, + '3rd objective long title now has expand button', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.displayText.isFaded, + '3rd parent objective long title is faded again', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.control.expand, + '3rd parent objective long title now has expand button', + ); + }); +}); diff --git a/packages/frontend/tests/acceptance/course/objectiveparents-inactive-test.js b/packages/frontend/tests/acceptance/course/objectiveparents-inactive-test.js index 669249ae6b..319a684267 100644 --- a/packages/frontend/tests/acceptance/course/objectiveparents-inactive-test.js +++ b/packages/frontend/tests/acceptance/course/objectiveparents-inactive-test.js @@ -64,7 +64,7 @@ module('Acceptance | Course - Objective Inactive Parents', function (hooks) { assert.strictEqual(objectives[0].parents.list.length, 1); assert.strictEqual(objectives[0].parents.list[0].text, 'inactive selected'); - await objectives[0].parents.list[0].manage(); + await objectives[0].parents.manage(); const m = objectives[0].parentManager; assert.strictEqual(m.selectedCohortTitle, 'program 0 cohort 0'); diff --git a/packages/frontend/tests/acceptance/course/objectiveparents-multiplecohorts-test.js b/packages/frontend/tests/acceptance/course/objectiveparents-multiplecohorts-test.js index b4294c9743..951d5957aa 100644 --- a/packages/frontend/tests/acceptance/course/objectiveparents-multiplecohorts-test.js +++ b/packages/frontend/tests/acceptance/course/objectiveparents-multiplecohorts-test.js @@ -75,7 +75,7 @@ module('Acceptance | Course with multiple Cohorts - Objective Parents', function page.details.objectives.objectiveList.objectives[0].parents.list[1].text, 'program-year objective 3', ); - await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage(); + await page.details.objectives.objectiveList.objectives[0].parents.manage(); const m = page.details.objectives.objectiveList.objectives[0].parentManager; await m.selectCohort(1); @@ -135,7 +135,7 @@ module('Acceptance | Course with multiple Cohorts - Objective Parents', function page.details.objectives.objectiveList.objectives[0].parents.list[1].text, 'program-year objective 3', ); - await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage(); + await page.details.objectives.objectiveList.objectives[0].parents.manage(); const m = page.details.objectives.objectiveList.objectives[0].parentManager; await m.selectCohort(1); @@ -185,7 +185,7 @@ module('Acceptance | Course with multiple Cohorts - Objective Parents', function page.details.objectives.objectiveList.objectives[0].parents.list[1].text, 'program-year objective 3', ); - await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage(); + await page.details.objectives.objectiveList.objectives[0].parents.manage(); const m = page.details.objectives.objectiveList.objectives[0].parentManager; await m.selectCohort(1); diff --git a/packages/frontend/tests/acceptance/course/objectiveparents-nocohorts-test.js b/packages/frontend/tests/acceptance/course/objectiveparents-nocohorts-test.js index e03fd63f63..f021ef44c8 100644 --- a/packages/frontend/tests/acceptance/course/objectiveparents-nocohorts-test.js +++ b/packages/frontend/tests/acceptance/course/objectiveparents-nocohorts-test.js @@ -41,7 +41,7 @@ module('Acceptance | Course with no cohorts - Objective Parents', function (hook assert.strictEqual(firstObjective.description.text, 'course objective 0'); assert.ok(firstObjective.parents.empty); - await firstObjective.parents.list[0].manage(); + await firstObjective.parents.manage(); const m = firstObjective.parentManager; assert.ok(m.hasNoCohortWarning); @@ -50,7 +50,7 @@ module('Acceptance | Course with no cohorts - Objective Parents', function (hook await page.details.cohorts.selectable[0].add(); await page.details.cohorts.save(); assert.strictEqual(page.details.cohorts.current.length, 1); - await firstObjective.parents.list[0].manage(); + await firstObjective.parents.manage(); assert.strictEqual(m.selectedCohortTitle, 'program 0 cohort 0'); assert.strictEqual(m.competencies.length, 1); @@ -64,7 +64,7 @@ module('Acceptance | Course with no cohorts - Objective Parents', function (hook await page.details.cohorts.selected[0].remove(); await page.details.cohorts.save(); assert.strictEqual(page.details.cohorts.current.length, 0); - await firstObjective.parents.list[0].manage(); + await firstObjective.parents.manage(); assert.ok(m.hasNoCohortWarning); }); }); diff --git a/packages/frontend/tests/acceptance/course/objectiveparents-test.js b/packages/frontend/tests/acceptance/course/objectiveparents-test.js index e99e88fbdc..6d9b1a8185 100644 --- a/packages/frontend/tests/acceptance/course/objectiveparents-test.js +++ b/packages/frontend/tests/acceptance/course/objectiveparents-test.js @@ -66,7 +66,7 @@ module('Acceptance | Course - Objective Parents', function (hooks) { 'program-year objective 0', ); - await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage(); + await page.details.objectives.objectiveList.objectives[0].parents.manage(); const m = page.details.objectives.objectiveList.objectives[0].parentManager; assert.strictEqual(m.selectedCohortTitle, 'program 0 cohort 0'); @@ -108,7 +108,7 @@ module('Acceptance | Course - Objective Parents', function (hooks) { ); await percySnapshot(getUniqueName(assert, 'default background color')); - await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage(); + await page.details.objectives.objectiveList.objectives[0].parents.manage(); await percySnapshot(getUniqueName(assert, 'default background color')); const m = page.details.objectives.objectiveList.objectives[0].parentManager; @@ -152,7 +152,7 @@ module('Acceptance | Course - Objective Parents', function (hooks) { ); await percySnapshot(getUniqueName(assert, 'default background color')); - await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage(); + await page.details.objectives.objectiveList.objectives[0].parents.manage(); await percySnapshot(getUniqueName(assert, 'managed background color')); const m = page.details.objectives.objectiveList.objectives[0].parentManager; diff --git a/packages/frontend/tests/acceptance/course/publishall-test.js b/packages/frontend/tests/acceptance/course/publishall-test.js index 6a66fe478c..2e101ef67e 100644 --- a/packages/frontend/tests/acceptance/course/publishall-test.js +++ b/packages/frontend/tests/acceptance/course/publishall-test.js @@ -168,7 +168,7 @@ module('Acceptance | Course - Publish All Sessions', function (hooks) { assert.ok(page.publishAll.isVisible); assert.ok(page.publishAll.hasUnlinkedWarning); - await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage(); + await page.details.objectives.objectiveList.objectives[0].parents.manage(); const m = page.details.objectives.objectiveList.objectives[0].parentManager; await m.competencies[0].objectives[0].add(); await page.details.objectives.objectiveList.objectives[0].parents.save(); diff --git a/packages/frontend/tests/acceptance/course/session/objectiveparents-description-sync-test.js b/packages/frontend/tests/acceptance/course/session/objectiveparents-description-sync-test.js new file mode 100644 index 0000000000..812f03c9ab --- /dev/null +++ b/packages/frontend/tests/acceptance/course/session/objectiveparents-description-sync-test.js @@ -0,0 +1,367 @@ +import { module, test } from 'qunit'; +import { setupAuthentication } from 'ilios-common'; +import { setupApplicationTest } from 'frontend/tests/helpers'; +import { getUniqueName } from '../../../helpers/percy-snapshot-name'; +import { waitFor } from '@ember/test-helpers'; +import page from 'ilios-common/page-objects/session'; +import percySnapshot from '@percy/ember'; + +module('Acceptance | Session - Objective Parents - Faded Status Sync', function (hooks) { + setupApplicationTest(hooks); + hooks.beforeEach(async function () { + this.longObjDescription = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat tempor neque ut egestas. In cursus dignissim erat, sed porttitor mauris tincidunt at. Nunc et tortor in purus facilisis molestie. Phasellus in ligula nisi. Nam nec mi in urna mollis pharetra. Suspendisse in nibh ex. Curabitur maximus diam in condimentum pulvinar. Phasellus sit amet metus interdum, molestie turpis vel, bibendum eros. In fermentum elit in odio cursus cursus. Nullam ipsum ipsum, fringilla a efficitur non, vehicula vitae enim. Duis ultrices vitae neque in pulvinar. Nulla molestie vitae quam eu faucibus. Vestibulum tempor, tellus in dapibus sagittis, velit purus maximus lectus, quis ullamcorper sem neque quis sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed commodo risus sed tellus imperdiet, ac suscipit justo scelerisque. Quisque sit amet nulla efficitur, sollicitudin sem in, venenatis mi. Quisque sit amet neque varius, interdum quam id, condimentum ipsum. Quisque tincidunt efficitur diam ut feugiat. Duis vehicula mauris elit, vel vehicula eros commodo rhoncus. Phasellus ac eros vel turpis egestas aliquet. Nam id dolor rutrum, imperdiet purus ac, faucibus nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam aliquam leo eget quam varius ultricies. Suspendisse pellentesque varius mi eu luctus. Integer lacinia ornare magna, in egestas quam molestie non.'; + this.longParentObjTitle = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat tempor neque ut egestas. In cursus dignissim erat, sed porttitor mauris tincidunt at. Nunc et tortor in purus facilisis molestie. Phasellus in ligula nisi. Nam nec mi in urna mollis pharetra. Suspendisse in nibh ex. Curabitur maximus diam in condimentum pulvinar. Phasellus sit amet metus interdum, molestie turpis vel, bibendum eros. In fermentum elit in odio cursus cursus. Nullam ipsum ipsum, fringilla a efficitur non, vehicula vitae enim. Duis ultrices vitae neque in pulvinar. Nulla molestie vitae quam eu faucibus. Vestibulum tempor, tellus in dapibus sagittis, velit purus maximus lectus, quis ullamcorper sem neque quis sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed commodo risus sed tellus imperdiet, ac suscipit justo scelerisque. Quisque sit amet nulla efficitur, sollicitudin sem in, venenatis mi. Quisque sit amet neque varius, interdum quam id, condimentum ipsum. Quisque tincidunt efficitur diam ut feugiat. Duis vehicula mauris elit, vel vehicula eros commodo rhoncus. Phasellus ac eros vel turpis egestas aliquet. Nam id dolor rutrum, imperdiet purus ac, faucibus nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam aliquam leo eget quam varius ultricies. Suspendisse pellentesque varius mi eu luctus. Integer lacinia ornare magna, in egestas quam molestie non.'; + this.fadedSelector = '.faded'; + + this.school = this.server.create('school'); + this.user = await setupAuthentication({ school: this.school }, true); + const program = this.server.create('program', { school: this.school }); + const programYear = this.server.create('program-year', { program }); + const cohort = this.server.create('cohort', { programYear }); + const competency1 = this.server.create('competency', { + school: this.school, + programYears: [programYear], + }); + const competency2 = this.server.create('competency', { + school: this.school, + programYears: [programYear], + }); + const competency3 = this.server.create('competency', { + school: this.school, + programYears: [programYear], + }); + const parent1 = this.server.create('program-year-objective', { + programYear, + competency: competency1, + }); + const parent2 = this.server.create('program-year-objective', { + programYear, + competency: competency2, + title: this.longParentObjTitle, + }); + const parent3 = this.server.create('program-year-objective', { + programYear, + competency: competency3, + title: this.longParentObjTitle, + }); + const course = this.server.create('course', { + year: 2024, + school: this.school, + cohorts: [cohort], + }); + const courseObjective1 = this.server.create('course-objective', { + course, + programYearObjectives: [parent1], + }); + const courseObjective2 = this.server.create('course-objective', { + course, + programYearObjectives: [parent2], + title: this.longObjDescription, + }); + const courseObjective3 = this.server.create('course-objective', { + course, + programYearObjectives: [parent3], + title: this.longObjDescription, + }); + const session = this.server.create('session', { course }); + this.server.create('session-objective', { + session, + courseObjectives: [courseObjective1], + title: this.longObjDescription, + }); + this.server.create('session-objective', { + session, + courseObjectives: [courseObjective2], + }); + this.server.create('session-objective', { + session, + courseObjectives: [courseObjective3], + title: this.longObjDescription, + }); + }); + + test('objective description and parent objectives faded statuses are synced', async function (assert) { + assert.expect(52); + this.user.update({ administeredSchools: [this.school] }); + + await page.visit({ + courseId: 1, + sessionId: 1, + sessionObjectiveDetails: true, + }); + + // slight delay to allow for proper loading of component + await waitFor(this.fadedSelector); + + assert.strictEqual( + page.details.objectives.objectiveList.objectives.length, + 3, + 'session objective count is 3', + ); + + /* + 1st option: col1 long/col2 short + */ + + assert.strictEqual( + page.details.objectives.objectiveList.objectives[0].description.text, + this.longObjDescription, + '1st objective title is long', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[0].description.fadeText.enabled, + '1st objective is fade-enabled', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[0].description.fadeText.displayText.isFaded, + '1st objective long title is faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[0].description.fadeText.control.expand, + '1st objective long title has expand button', + ); + assert.strictEqual( + page.details.objectives.objectiveList.objectives[0].parents.list.length, + 1, + '1st objective has one parent objective', + ); + assert.strictEqual( + page.details.objectives.objectiveList.objectives[0].parents.list[0].text, + 'course objective 0', + '1st parent objective title is short', + ); + assert.notOk( + page.details.objectives.objectiveList.objectives[0].parents.fadeText.enabled, + '1st parent objective is not fade-enabled', + ); + + await percySnapshot(getUniqueName(assert, '1st objective list item collapsed')); + await page.details.objectives.objectiveList.objectives[0].description.fadeText.control.expand.click(); + await percySnapshot(getUniqueName(assert, '1st objective list item expanded')); + + assert.notOk( + page.details.objectives.objectiveList.objectives[0].description.fadeText.displayText.isFaded, + '1st objective long title is no longer faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[0].description.fadeText.control.collapse, + '1st objective long title now has collapse button', + ); + assert.notOk( + page.details.objectives.objectiveList.objectives[0].parents.fadeText.enabled, + '1st parent objective is still not fade-enabled', + ); + + await page.details.objectives.objectiveList.objectives[0].description.fadeText.control.collapse.click(); + await percySnapshot(getUniqueName(assert, '1st objective list item collapsed again')); + + assert.ok( + page.details.objectives.objectiveList.objectives[0].description.fadeText.displayText.isFaded, + '1st objective long title is faded again', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[0].description.fadeText.control.expand, + '1st objective long title now has expand button', + ); + assert.notOk( + page.details.objectives.objectiveList.objectives[0].parents.fadeText.enabled, + '1st parent objective is still not fade-enabled', + ); + + /* + 2nd option: col1 short/col2 long + */ + + assert.strictEqual( + page.details.objectives.objectiveList.objectives[1].description.text, + 'session objective 1', + '2nd objective title is short', + ); + assert.notOk( + page.details.objectives.objectiveList.objectives[1].description.fadeText.enabled, + '2nd objective is not fade-enabled', + ); + assert.strictEqual( + page.details.objectives.objectiveList.objectives[1].parents.list.length, + 1, + '2nd objective has one parent objective', + ); + assert.strictEqual( + page.details.objectives.objectiveList.objectives[1].parents.list[0].text, + this.longParentObjTitle, + '2nd parent objective title is long', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[1].parents.fadeText.enabled, + '2nd parent objective title is fade-enabled', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[1].parents.fadeText.displayText.isFaded, + '2nd parent objective long title is faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[1].parents.fadeText.control.expand, + '2nd parent objective long title has expand button', + ); + + await percySnapshot(getUniqueName(assert, '2nd objective list item collapsed')); + await page.details.objectives.objectiveList.objectives[1].parents.fadeText.control.expand.click(); + await percySnapshot(getUniqueName(assert, '2nd objective list item expanded')); + + assert.notOk( + page.details.objectives.objectiveList.objectives[1].parents.fadeText.displayText.isFaded, + '2nd parent objective long title is no longer faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[1].parents.fadeText.control.collapse, + '2nd parent objective long title now has collapse button', + ); + assert.notOk( + page.details.objectives.objectiveList.objectives[1].description.fadeText.enabled, + '2nd objective is still not fade-enabled', + ); + + await page.details.objectives.objectiveList.objectives[1].parents.fadeText.control.collapse.click(); + await percySnapshot(getUniqueName(assert, '2nd objective list item collapsed again')); + + assert.ok( + page.details.objectives.objectiveList.objectives[1].parents.fadeText.displayText.isFaded, + '2nd parent objective long title is faded again', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[1].parents.fadeText.control.expand, + '2nd objective long title now has expand button', + ); + assert.notOk( + page.details.objectives.objectiveList.objectives[1].description.fadeText.enabled, + '2nd parent objective is still not fade-enabled', + ); + + /* + 3rd option: col1 long/col2 long + */ + + assert.strictEqual( + page.details.objectives.objectiveList.objectives[2].description.text, + this.longObjDescription, + '3rd objective title is long', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.enabled, + '3rd objective is fade-enabled', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.displayText.isFaded, + '3rd objective long title is faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.control.expand, + '3rd objective long title has expand button', + ); + assert.strictEqual( + page.details.objectives.objectiveList.objectives[2].parents.list.length, + 1, + '3rd objective has one parent objective', + ); + assert.strictEqual( + page.details.objectives.objectiveList.objectives[2].parents.list[0].text, + this.longParentObjTitle, + '3rd parent objective title is long', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.enabled, + '3rd parent objective title is fade-enabled', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.displayText.isFaded, + '3rd parent objective long title is faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.control.expand, + '3rd parent objective long title has expand button', + ); + + await percySnapshot(getUniqueName(assert, '3rd objective list item collapsed')); + await page.details.objectives.objectiveList.objectives[2].description.fadeText.control.expand.click(); + await percySnapshot(getUniqueName(assert, '3rd objective list item expanded')); + + assert.notOk( + page.details.objectives.objectiveList.objectives[2].description.fadeText.displayText.isFaded, + '3rd objective long title is no longer faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.control.collapse, + '3rd objective long title now has collapse button', + ); + assert.notOk( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.displayText.isFaded, + '3rd parent objective long title is no longer faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.control.collapse, + '3rd parent objective long title now has collapse button', + ); + + await page.details.objectives.objectiveList.objectives[2].description.fadeText.control.collapse.click(); + await percySnapshot(getUniqueName(assert, '3rd objective list item collapsed again')); + + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.displayText.isFaded, + '3rd objective long title is faded again', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.control.expand, + '3rd objective long title now has expand button', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.displayText.isFaded, + '3rd parent objective long title is faded again', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.control.expand, + '3rd parent objective long title now has expand button', + ); + + await page.details.objectives.objectiveList.objectives[2].parents.fadeText.control.expand.click(); + await percySnapshot(getUniqueName(assert, '3rd objective list item expanded again')); + + assert.notOk( + page.details.objectives.objectiveList.objectives[2].description.fadeText.displayText.isFaded, + '3rd objective long title is no longer faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.control.collapse, + '3rd objective long title now has collapse button', + ); + assert.notOk( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.displayText.isFaded, + '3rd parent objective long title is no longer faded', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.control.collapse, + '3rd parent objective long title now has collapse button', + ); + + await page.details.objectives.objectiveList.objectives[2].parents.fadeText.control.collapse.click(); + await percySnapshot(getUniqueName(assert, '3rd objective list item collapsed again')); + + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.displayText.isFaded, + '3rd objective long title is faded again', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].description.fadeText.control.expand, + '3rd objective long title now has expand button', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.displayText.isFaded, + '3rd parent objective long title is faded again', + ); + assert.ok( + page.details.objectives.objectiveList.objectives[2].parents.fadeText.control.expand, + '3rd parent objective long title now has expand button', + ); + }); +}); diff --git a/packages/frontend/tests/acceptance/course/session/objectiveparents-test.js b/packages/frontend/tests/acceptance/course/session/objectiveparents-test.js index 21074c2534..8106a92760 100644 --- a/packages/frontend/tests/acceptance/course/session/objectiveparents-test.js +++ b/packages/frontend/tests/acceptance/course/session/objectiveparents-test.js @@ -51,7 +51,7 @@ module('Acceptance | Session - Objective Parents', function (hooks) { ); await percySnapshot(getUniqueName(assert, 'default background color')); - await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage(); + await page.details.objectives.objectiveList.objectives[0].parents.manage(); await percySnapshot(getUniqueName(assert, 'managed background color')); const m = page.details.objectives.objectiveList.objectives[0].parentManager; @@ -90,7 +90,7 @@ module('Acceptance | Session - Objective Parents', function (hooks) { ); await percySnapshot(getUniqueName(assert, 'default background color')); - await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage(); + await page.details.objectives.objectiveList.objectives[0].parents.manage(); await percySnapshot(getUniqueName(assert, 'managed background color')); const m = page.details.objectives.objectiveList.objectives[0].parentManager; @@ -142,7 +142,7 @@ module('Acceptance | Session - Objective Parents', function (hooks) { ); await percySnapshot(getUniqueName(assert, 'default background color')); - await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage(); + await page.details.objectives.objectiveList.objectives[0].parents.manage(); await percySnapshot(getUniqueName(assert, 'managed background color')); const m = page.details.objectives.objectiveList.objectives[0].parentManager; @@ -194,7 +194,7 @@ module('Acceptance | Session - Objective Parents', function (hooks) { ); await percySnapshot(getUniqueName(assert, 'default background color')); - await page.details.objectives.objectiveList.objectives[0].parents.list[0].manage(); + await page.details.objectives.objectiveList.objectives[0].parents.manage(); await percySnapshot(getUniqueName(assert, 'managed background color')); const m = page.details.objectives.objectiveList.objectives[0].parentManager; diff --git a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/objective-list-item-parents.js b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/objective-list-item-parents.js index e59dc586c1..8e77861892 100644 --- a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/objective-list-item-parents.js +++ b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/objective-list-item-parents.js @@ -1,10 +1,11 @@ import { clickable, create, collection, isHidden, isPresent } from 'ember-cli-page-object'; +import fadeText from '../fade-text'; const definition = { scope: '[data-test-objective-list-item-parents]', - list: collection('li', { - manage: clickable('[data-test-manage]'), - }), + fadeText, + list: collection('li'), + manage: clickable('[data-test-manage]'), empty: isHidden('[data-test-parent]'), saveParents: clickable('[data-test-save]'), cancelParents: clickable('[data-test-cancel]'), diff --git a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/objective-list-item.js b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/objective-list-item.js index 78be324c41..470da752aa 100644 --- a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/objective-list-item.js +++ b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/objective-list-item.js @@ -1,5 +1,6 @@ import { clickable, create, hasClass, isVisible, property, text } from 'ember-cli-page-object'; import { pageObjectFillInFroalaEditor, pageObjectFroalaEditorValue } from 'ilios-common'; +import fadeText from '../fade-text'; import meshManager from './manage-objective-descriptors'; import parentManager from './manage-objective-parents'; import meshDescriptors from './objective-list-item-descriptors'; @@ -13,6 +14,7 @@ const definition = { description: { scope: '[data-test-description]', openEditor: clickable('[data-test-edit]'), + fadeText, editorContents: pageObjectFroalaEditorValue('[data-test-html-editor]'), edit: pageObjectFillInFroalaEditor('[data-test-html-editor]'), save: clickable('.done'), diff --git a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/fade-text.js b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/fade-text.js index 7997f25f05..254c69947d 100644 --- a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/fade-text.js +++ b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/fade-text.js @@ -1,12 +1,22 @@ -import { create } from 'ember-cli-page-object'; +import { attribute, clickable, create, hasClass, isPresent } from 'ember-cli-page-object'; const definition = { scope: '[data-test-fade-text]', - expand: { - scope: '[data-test-expand]', + enabled: isPresent('[data-test-fade-text-control]'), + displayText: { + scope: '.display-text-wrapper', + isFaded: hasClass('faded'), }, - collapse: { - scope: '[data-test-collapse]', + control: { + expand: { + scope: '[data-test-expand]', + click: clickable(), + }, + collapse: { + scope: '[data-test-collapse]', + click: clickable(), + }, + toggleMode: attribute('aria-label'), }, }; diff --git a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/session/objective-list-item-parents.js b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/session/objective-list-item-parents.js index e59dc586c1..8e77861892 100644 --- a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/session/objective-list-item-parents.js +++ b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/session/objective-list-item-parents.js @@ -1,10 +1,11 @@ import { clickable, create, collection, isHidden, isPresent } from 'ember-cli-page-object'; +import fadeText from '../fade-text'; const definition = { scope: '[data-test-objective-list-item-parents]', - list: collection('li', { - manage: clickable('[data-test-manage]'), - }), + fadeText, + list: collection('li'), + manage: clickable('[data-test-manage]'), empty: isHidden('[data-test-parent]'), saveParents: clickable('[data-test-save]'), cancelParents: clickable('[data-test-cancel]'), diff --git a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/session/objective-list-item.js b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/session/objective-list-item.js index 680d84b1dc..f7d0b5066d 100644 --- a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/session/objective-list-item.js +++ b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/session/objective-list-item.js @@ -1,5 +1,6 @@ import { clickable, create, hasClass, isVisible, property, text } from 'ember-cli-page-object'; import { pageObjectFillInFroalaEditor, pageObjectFroalaEditorValue } from 'ilios-common'; +import fadeText from '../fade-text'; import meshManager from './manage-objective-descriptors'; import parentManager from './manage-objective-parents'; import meshDescriptors from './objective-list-item-descriptors'; @@ -13,6 +14,7 @@ const definition = { description: { scope: '[data-test-description]', openEditor: clickable('[data-test-edit]'), + fadeText, editorContents: pageObjectFroalaEditorValue('[data-test-html-editor]'), edit: pageObjectFillInFroalaEditor('[data-test-html-editor]'), save: clickable('.done'), diff --git a/packages/ilios-common/addon/components/course/objective-list-item-parents.hbs b/packages/ilios-common/addon/components/course/objective-list-item-parents.hbs index b57dd64675..8fdf599d82 100644 --- a/packages/ilios-common/addon/components/course/objective-list-item-parents.hbs +++ b/packages/ilios-common/addon/components/course/objective-list-item-parents.hbs @@ -24,86 +24,80 @@ {{else}} -
    - {{#each (sort-by "title" @parents) as |parent|}} + {{#if @parents}} + {{#if @editable}} -
  • - - - {{#if isFaded}} -
    - + + - {{/if}} +
    + {{#if @showIcon}} + {{/if}} -     -
    • + + {{else}} -
  • - -
    • + +
    +
    + {{displayText}} +
    +
    +     {{/if}} - {{else}} -
  • - {{#if @editable}} - + + {{else}} + {{#if expanded}} + - {{else}} - {{t "general.none"}} {{/if}} -
    • - {{/each}} -
+ {{/if}} + + {{else}} + {{#if @editable}} + + {{else}} + {{t "general.none"}} + {{/if}} + {{/if}} {{/if}} diff --git a/packages/ilios-common/addon/components/course/objective-list-item-parents.js b/packages/ilios-common/addon/components/course/objective-list-item-parents.js new file mode 100644 index 0000000000..ea4da339e0 --- /dev/null +++ b/packages/ilios-common/addon/components/course/objective-list-item-parents.js @@ -0,0 +1,11 @@ +import Component from '@glimmer/component'; +import sortableByPosition from 'ilios-common/utils/sortable-by-position'; + +export default class CourseObjectiveListItemParentsComponent extends Component { + get parents() { + return this.args.parents + .slice() + .sort(sortableByPosition) + .map((t) => t.title); + } +} diff --git a/packages/ilios-common/addon/components/course/objective-list-item.hbs b/packages/ilios-common/addon/components/course/objective-list-item.hbs index c33a320128..9f547ec1fd 100644 --- a/packages/ilios-common/addon/components/course/objective-list-item.hbs +++ b/packages/ilios-common/addon/components/course/objective-list-item.hbs @@ -1,9 +1,6 @@
@@ -14,6 +11,8 @@ @isSaveDisabled={{this.hasErrorForTitle}} @save={{perform this.saveTitleChanges}} @close={{this.revertTitleChanges}} + @fadeTextExpanded={{this.fadeTextExpanded}} + @onExpandAllFadeText={{this.expandAllFadeText}} > {{else}} - + {{/if}}
- {{#if isFaded}} + {{#if shouldFade}}
- {{yield this.displayText this.expand this.collapse this.updateTextDims this.isFaded this.expanded}} + {{yield this.displayText this.expand this.collapse this.updateTextDims this.shouldFade this.expanded}} {{else}} -
-
+
+
{{this.displayText}}
- {{#if this.isFaded}} + {{#if this.shouldFade}}
{{else}} -
    - {{#each (sort-by-position @parents) as |parent|}} + {{#if @parents}} + {{#if @editable}} -
  • - - - {{#if isFaded}} -
    - + + - {{/if}} +
    + {{#if @showIcon}} + {{/if}} -     -
    • + + {{else}} -
  • - -
    • + +
    +
    + {{displayText}} +
    +
    +     {{/if}} - {{else}} -
  • - {{#if @editable}} - +
+ {{else}} + {{#if expanded}} + - {{else}} - {{t "general.none"}} {{/if}} - - {{/each}} - + {{/if}} + + {{else}} + {{#if @editable}} + + {{else}} + {{t "general.none"}} + {{/if}} + {{/if}} {{/if}} -
+
\ No newline at end of file diff --git a/packages/ilios-common/addon/components/session/objective-list-item-parents.js b/packages/ilios-common/addon/components/session/objective-list-item-parents.js new file mode 100644 index 0000000000..3fcf4f8794 --- /dev/null +++ b/packages/ilios-common/addon/components/session/objective-list-item-parents.js @@ -0,0 +1,11 @@ +import Component from '@glimmer/component'; +import sortableByPosition from 'ilios-common/utils/sortable-by-position'; + +export default class SessionObjectiveListItemParentsComponent extends Component { + get parents() { + return this.args.parents + .slice() + .sort(sortableByPosition) + .map((t) => t.title); + } +} diff --git a/packages/ilios-common/addon/components/session/objective-list-item.hbs b/packages/ilios-common/addon/components/session/objective-list-item.hbs index 3fc850ccc1..ae4cdcb3b9 100644 --- a/packages/ilios-common/addon/components/session/objective-list-item.hbs +++ b/packages/ilios-common/addon/components/session/objective-list-item.hbs @@ -1,6 +1,6 @@
@@ -11,12 +11,22 @@ @isSaveDisabled={{this.hasErrorForTitle}} @save={{perform this.saveTitleChanges}} @close={{this.revertTitleChanges}} + @fadeTextExpanded={{this.fadeTextExpanded}} + @onExpandAllFadeText={{this.expandAllFadeText}} > - + {{else}} - + {{/if}}
- {{#if (and @editable (not this.isManaging) (not this.showRemoveConfirmation) (not this.showRemoveConfirmation))}} + {{#if + (and + @editable + (not this.isManaging) + (not this.showRemoveConfirmation) + (not this.showRemoveConfirmation) + ) + }}
+
\ No newline at end of file diff --git a/packages/ilios-common/addon/components/session/objective-list-item.js b/packages/ilios-common/addon/components/session/objective-list-item.js index 9eaa7f3d46..97e5eb1d33 100644 --- a/packages/ilios-common/addon/components/session/objective-list-item.js +++ b/packages/ilios-common/addon/components/session/objective-list-item.js @@ -18,6 +18,7 @@ export default class SessionObjectiveListItemComponent extends Component { @tracked isManagingTerms; @tracked termsBuffer = []; @tracked selectedVocabulary; + @tracked fadeTextExpanded = false; constructor() { super(...arguments); @@ -113,6 +114,10 @@ export default class SessionObjectiveListItemComponent extends Component { this.highlightSave.perform(); }); + @action + expandAllFadeText(isExpanded) { + this.fadeTextExpanded = isExpanded; + } @action revertTitleChanges() { this.title = this.args.sessionObjective.title; diff --git a/packages/ilios-common/app/styles/ilios-common/components/course/objective-list.scss b/packages/ilios-common/app/styles/ilios-common/components/course/objective-list.scss index 2a3588bac9..0f0f04bb42 100644 --- a/packages/ilios-common/app/styles/ilios-common/components/course/objective-list.scss +++ b/packages/ilios-common/app/styles/ilios-common/components/course/objective-list.scss @@ -16,10 +16,6 @@ transparent, c.$culturedGrey ); - - button { - @include m.ilios-button; - } } } } diff --git a/packages/ilios-common/app/styles/ilios-common/components/fade-text.scss b/packages/ilios-common/app/styles/ilios-common/components/fade-text.scss index fc5cc67e9e..48c98961dc 100644 --- a/packages/ilios-common/app/styles/ilios-common/components/fade-text.scss +++ b/packages/ilios-common/app/styles/ilios-common/components/fade-text.scss @@ -5,7 +5,7 @@ .display-text-wrapper { display: inline-block; - &.is-faded { + &.faded { max-height: 200px; overflow: hidden; position: relative; @@ -15,6 +15,7 @@ button { &.expand-text-button { @include m.ilios-link-button; + display: block; } } diff --git a/packages/ilios-common/app/styles/ilios-common/components/session/objective-list.scss b/packages/ilios-common/app/styles/ilios-common/components/session/objective-list.scss index 242086fbff..df718c7c93 100644 --- a/packages/ilios-common/app/styles/ilios-common/components/session/objective-list.scss +++ b/packages/ilios-common/app/styles/ilios-common/components/session/objective-list.scss @@ -16,10 +16,6 @@ transparent, c.$culturedGrey ); - - button { - @include m.ilios-button; - } } } } diff --git a/packages/ilios-common/app/styles/ilios-common/mixins/objectives.scss b/packages/ilios-common/app/styles/ilios-common/mixins/objectives.scss index e5cb85bc66..929930c34b 100644 --- a/packages/ilios-common/app/styles/ilios-common/mixins/objectives.scss +++ b/packages/ilios-common/app/styles/ilios-common/mixins/objectives.scss @@ -69,6 +69,10 @@ .grid-item { border-bottom: 1px solid c.$davysGrey; padding: 0.5em 0.25em; + + &:has(.faded) { + max-height: 245px; + } } &:last-of-type { @@ -120,9 +124,11 @@ .description { p { + @include font-size.font-size("base"); margin: 0; } button { + @include ilios-button.ilios-link-button; @include font-size.font-size("base"); p { @@ -131,6 +137,14 @@ } } + .course-objective-list-item-parents, + .session-objective-list-item-parents { + p { + @include font-size.font-size("base"); + margin: 0; + } + } + &.confirm-removal { background-color: c.$lavenderBlush; @@ -178,7 +192,8 @@ margin-bottom: 0; } - button { + button, + .display-text { @include font-size.font-size("base"); } } diff --git a/packages/ilios-common/app/styles/ilios-common/mixins/sort-manager.scss b/packages/ilios-common/app/styles/ilios-common/mixins/sort-manager.scss index 4e7c8672fc..20b0e56aaf 100644 --- a/packages/ilios-common/app/styles/ilios-common/mixins/sort-manager.scss +++ b/packages/ilios-common/app/styles/ilios-common/mixins/sort-manager.scss @@ -38,15 +38,22 @@ .sortable-items { list-style-type: none; .item { + align-items: center; background-color: c.$culturedGrey; border-radius: 4px; box-sizing: border-box; cursor: pointer; + display: flex; + gap: 1em; margin: 10px 0.3rem 0 0; opacity: 1; padding: 1rem; vertical-align: middle; + svg { + min-width: 16px; + } + .fa { vertical-align: top; } @@ -58,12 +65,19 @@ display: inline-block; } - .fade-text-control { + .fade-text { + .display-text { + p { + margin: 0; + } + } button { - background: c.$tealBlue; - border-radius: 3px; - color: c.$white; - padding: 0.3em 1em; + &.expand-text-button { + background: c.$tealBlue; + border-radius: 3px; + color: c.$white; + padding: 0.3em 1em; + } } } diff --git a/packages/test-app/tests/integration/components/course/objective-list-item-parents-test.js b/packages/test-app/tests/integration/components/course/objective-list-item-parents-test.js index e8361fc1cd..e03b97f257 100644 --- a/packages/test-app/tests/integration/components/course/objective-list-item-parents-test.js +++ b/packages/test-app/tests/integration/components/course/objective-list-item-parents-test.js @@ -141,6 +141,6 @@ module('Integration | Component | course/objective-list-item-parents', function @isSaving={{false}} @cancel={{(noop)}} />`); - await component.list[0].manage(); + await component.manage(); }); }); diff --git a/packages/test-app/tests/integration/components/course/objective-list-item-test.js b/packages/test-app/tests/integration/components/course/objective-list-item-test.js index 585803d006..0054b7e6c5 100644 --- a/packages/test-app/tests/integration/components/course/objective-list-item-test.js +++ b/packages/test-app/tests/integration/components/course/objective-list-item-test.js @@ -78,7 +78,7 @@ module('Integration | Component | course/objective-list-item', function (hooks) @manageParents={{this.manageParents}} />`, ); - await component.parents.list[0].manage(); + await component.parents.manage(); assert.ok(component.parentManager.isPresent); }); diff --git a/packages/test-app/tests/integration/components/course/objectives-test.js b/packages/test-app/tests/integration/components/course/objectives-test.js index af1344fb2b..d5efeeaeea 100644 --- a/packages/test-app/tests/integration/components/course/objectives-test.js +++ b/packages/test-app/tests/integration/components/course/objectives-test.js @@ -98,7 +98,7 @@ module('Integration | Component | course/objectives', function (hooks) { 'course objective 0', ); assert.strictEqual(component.objectiveList.objectives[0].parents.list.length, 1); - await component.objectiveList.objectives[0].parents.list[0].manage(); + await component.objectiveList.objectives[0].parents.manage(); const m = component.objectiveList.objectives[0].parentManager; assert.notOk(m.hasMultipleCohorts); @@ -173,7 +173,7 @@ module('Integration | Component | course/objectives', function (hooks) { 'course objective 0', ); assert.strictEqual(component.objectiveList.objectives[0].parents.list.length, 1); - await component.objectiveList.objectives[0].parents.list[0].manage(); + await component.objectiveList.objectives[0].parents.manage(); const m = component.objectiveList.objectives[0].parentManager; assert.ok(m.hasMultipleCohorts); diff --git a/packages/test-app/tests/integration/components/editable-field-test.js b/packages/test-app/tests/integration/components/editable-field-test.js index b80fa005fb..3d42ee146f 100644 --- a/packages/test-app/tests/integration/components/editable-field-test.js +++ b/packages/test-app/tests/integration/components/editable-field-test.js @@ -104,12 +104,10 @@ module('Integration | Component | editable field', function (hooks) { test('focus when editor opens on textarea', async function (assert) { this.set('value', 'lorem'); this.set('label', 'Foo Bar'); - await render( - hbs` + await render(hbs` -`, - ); +`); await click('[data-test-edit]'); assert.dom('textarea', this.element).isFocused(); @@ -119,16 +117,28 @@ module('Integration | Component | editable field', function (hooks) { const text = `

A long list:

  1. One
  2. two
  3. Five!
  4. Six
  5. Seven but with extra text to make long
  6. a
  7. b
  8. c
  9. d
  10. e
  11. f
  12. g
  13. h
  14. iii
  15. Jjjjjj
  16. k
  17. lLLLLLLlll
  18. mmmmmMMMMMmm
  19. nnnnnOPE
  20. ohno
  21. pppppPowerbook
`; - const fadedClass = 'is-faded'; - const fadedSelector = '.is-faded'; + const fadedClass = 'faded'; + const fadedSelector = '.faded'; this.set('value', text); - await render(hbs``); + this.set('fadeTextIsExpanded', false); + this.set('expandAllFadeText', (isExpanded) => { + this.set('fadeTextIsExpanded', isExpanded); + }); + await render( + hbs``, + ); await waitFor(fadedSelector); assert.dom('.display-text-wrapper', this.element).hasClass(fadedClass); await click('[data-test-expand]'); + assert.dom('.display-text-wrapper', this.element).doesNotHaveClass(fadedClass); + await click('[data-test-collapse]'); await waitFor(fadedSelector); diff --git a/packages/test-app/tests/integration/components/fade-text-test.js b/packages/test-app/tests/integration/components/fade-text-test.js index 14a9f70bb9..3497ebd431 100644 --- a/packages/test-app/tests/integration/components/fade-text-test.js +++ b/packages/test-app/tests/integration/components/fade-text-test.js @@ -24,13 +24,13 @@ module('Integration | Component | fade-text', function (hooks) { An objective description so long that it fades.
An objective description so long that it fades. `; - this.fadedClass = 'is-faded'; - this.fadedSelector = '.is-faded'; + this.fadedClass = 'faded'; + this.fadedSelector = '.faded'; }); test('it renders empty', async function (assert) { await render(hbs``); - assert.strictEqual(component.text, ''); + assert.strictEqual(component.text, '', 'has no text'); await render(hbs``); assert.dom(this.element).hasText(''); @@ -41,9 +41,7 @@ module('Integration | Component | fade-text', function (hooks) { this.set('shortText', shortText); await render(hbs``); - assert.strictEqual(component.text, shortText); - assert.notOk(component.collapse.isVisible); - assert.notOk(component.expand.isVisible); + assert.notOk(component.enabled); await render(hbs` {{this.shortText}} @@ -54,35 +52,54 @@ module('Integration | Component | fade-text', function (hooks) { test('it fades tall text given as component argument', async function (assert) { this.set('longHtml', this.longHtml); - await render(hbs``); + this.set('expanded', false); + this.set('onExpandAll', (isExpanded) => { + this.set('expanded', isExpanded); + }); + await render( + hbs``, + ); // slight delay to allow for proper loading of component await waitFor(this.fadedSelector); + assert.false(this.expanded); assert.dom('.display-text-wrapper', this.element).hasClass(this.fadedClass); - await component.expand.click(); + await component.control.expand.click(); + assert.true(this.expanded); assert.dom('.display-text-wrapper', this.element).doesNotHaveClass(this.fadedClass); - await component.collapse.click(); + await component.control.collapse.click(); // slight delay to allow for proper loading of component await waitFor(this.fadedSelector); + assert.false(this.expanded); assert.dom('.display-text-wrapper', this.element).hasClass(this.fadedClass); }); test('it fades tall text given as block', async function (assert) { this.set('longHtml', this.longHtml); - await render(hbs` -
+ this.set('expanded', false); + this.set('onExpandAll', (isExpanded) => { + this.set('expanded', isExpanded); + }); + + await render(hbs` +
{{displayText}}
- {{#if isFaded}} + {{#if shouldFade}}
@@ -96,17 +113,20 @@ module('Integration | Component | fade-text', function (hooks) { // slight delay to allow for proper loading of component await waitFor(this.fadedSelector); + assert.false(this.expanded); assert.dom('.display-text-wrapper', this.element).hasClass(this.fadedClass); - await component.expand.click(); + await component.control.expand.click(); + assert.true(this.expanded); assert.dom('.display-text-wrapper', this.element).doesNotHaveClass(this.fadedClass); - await component.collapse.click(); + await component.control.collapse.click(); // slight delay to allow for proper loading of component await waitFor(this.fadedSelector); + assert.false(this.expanded); assert.dom('.display-text-wrapper', this.element).hasClass(this.fadedClass); }); @@ -114,29 +134,39 @@ module('Integration | Component | fade-text', function (hooks) { const longText = `An objective description so long that it fades. An objective description so long that it fades. An objective description so long that it fades. An objective description so long that it fades. An objective description so long that it fades. An objective description so long that it fades. An objective description so long that it fades. An objective description so long that it fades. An objective description so long that it fades. An objective description so long that it fades. An objective description so long that it fades. An objective description so long that it fades. An objective description so long that it fades. An objective description so long that it fades.`; this.set('longHtml', this.longHtml); this.set('longText', longText); - await render(hbs``); + + this.set('expanded', false); + this.set('onExpandAll', (isExpanded) => { + this.set('expanded', isExpanded); + }); + await render( + hbs``, + ); // slight delay to allow for proper loading of component await waitFor(this.fadedSelector); - assert.dom('.display-text-wrapper', this.element).hasClass(this.fadedClass); - assert.strictEqual(component.text, longText); - assert.ok(component.expand.isVisible); - assert.notOk(component.collapse.isVisible); + assert.false(this.expanded); + assert.ok(component.displayText.isFaded, 'text is faded'); + assert.strictEqual(component.text, longText, 'component text matches'); + assert.ok(component.control.expand.isVisible, 'expand button is visible'); + assert.notOk(component.control.collapse.isVisible, 'collapse button is NOT visible'); - await component.expand.click(); + await component.control.expand.click(); - assert.dom('.display-text-wrapper', this.element).doesNotHaveClass(this.fadedClass); - assert.notOk(component.expand.isVisible); - assert.ok(component.collapse.isVisible); + assert.true(this.expanded); + assert.notOk(component.displayText.isFaded, 'text is NOT faded'); + assert.notOk(component.control.expand.isVisible, 'expand button is NOT visible'); + assert.ok(component.control.collapse.isVisible, 'collpase button is visible'); - await component.collapse.click(); + await component.control.collapse.click(); // slight delay to allow for proper loading of component await waitFor(this.fadedSelector); - assert.dom('.display-text-wrapper', this.element).hasClass(this.fadedClass); - assert.ok(component.expand.isVisible); - assert.notOk(component.collapse.isVisible); + assert.false(this.expanded); + assert.ok(component.displayText.isFaded, 'text is faded'); + assert.ok(component.control.expand.isVisible, 'expand button is visible'); + assert.notOk(component.control.collapse.isVisible, 'collapse button is NOT visible'); }); }); diff --git a/packages/test-app/tests/integration/components/session/objective-list-item-parents-test.js b/packages/test-app/tests/integration/components/session/objective-list-item-parents-test.js index 91c3944b57..c72b114bfe 100644 --- a/packages/test-app/tests/integration/components/session/objective-list-item-parents-test.js +++ b/packages/test-app/tests/integration/components/session/objective-list-item-parents-test.js @@ -141,7 +141,7 @@ module('Integration | Component | session/objective-list-item-parents', function @isSaving={{false}} @cancel={{(noop)}} />`); - await component.list[0].manage(); + await component.manage(); }); test('parent objectives are correctly sorted', async function (assert) { diff --git a/packages/test-app/tests/integration/components/session/objective-list-item-test.js b/packages/test-app/tests/integration/components/session/objective-list-item-test.js index 344a100b38..4538649a10 100644 --- a/packages/test-app/tests/integration/components/session/objective-list-item-test.js +++ b/packages/test-app/tests/integration/components/session/objective-list-item-test.js @@ -85,7 +85,7 @@ module('Integration | Component | session/objective-list-item', function (hooks) @session={{this.sessionModel}} />`, ); - await component.parents.list[0].manage(); + await component.parents.manage(); assert.ok(component.parentManager.isPresent); });