From 2932740a94b08493bfa85c32513bdd3d792427f9 Mon Sep 17 00:00:00 2001 From: Stefan Topfstedt Date: Fri, 8 Sep 2023 16:44:28 -0700 Subject: [PATCH 1/2] hides user profile calendar behind toggle-button by default. this also moves the calendar up top, in order to be closer to the toggle controls. --- app/components/user-profile-calendar.hbs | 5 +- app/components/user-profile.hbs | 13 +++- app/components/user-profile.js | 2 + app/styles/components/user-profile.scss | 6 ++ .../components/user-profile-test.js | 69 +++++++++++++++++++ .../pages/components/user-profile-calendar.js | 9 +++ tests/pages/components/user-profile.js | 29 ++++++++ 7 files changed, 130 insertions(+), 3 deletions(-) create mode 100644 tests/integration/components/user-profile-test.js create mode 100644 tests/pages/components/user-profile-calendar.js create mode 100644 tests/pages/components/user-profile.js diff --git a/app/components/user-profile-calendar.hbs b/app/components/user-profile-calendar.hbs index 401c678d2d..b0993bc966 100644 --- a/app/components/user-profile-calendar.hbs +++ b/app/components/user-profile-calendar.hbs @@ -1,7 +1,8 @@

{{t "general.calendar"}} diff --git a/app/components/user-profile.hbs b/app/components/user-profile.hbs index aa33dc73a1..8e47f39899 100644 --- a/app/components/user-profile.hbs +++ b/app/components/user-profile.hbs @@ -16,7 +16,18 @@ {{/if}}

+
+ {{#if this.showCalendar}} + + {{/if}} - +
diff --git a/app/components/user-profile.js b/app/components/user-profile.js index b0bc2313cf..118516edc9 100644 --- a/app/components/user-profile.js +++ b/app/components/user-profile.js @@ -1,6 +1,8 @@ import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; import { inject as service } from '@ember/service'; export default class UserProfileComponent extends Component { @service currentUser; + @tracked showCalendar = false; } diff --git a/app/styles/components/user-profile.scss b/app/styles/components/user-profile.scss index 3ef69e2f50..5b099a2d04 100644 --- a/app/styles/components/user-profile.scss +++ b/app/styles/components/user-profile.scss @@ -10,6 +10,12 @@ text-align: center; } + .user-profile-actions { + display: flex; + justify-content: flex-end; + padding: 1rem 0 1rem 1rem; + } + .blocks { @include m.admin-blocks; } diff --git a/tests/integration/components/user-profile-test.js b/tests/integration/components/user-profile-test.js new file mode 100644 index 0000000000..03931b0144 --- /dev/null +++ b/tests/integration/components/user-profile-test.js @@ -0,0 +1,69 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { setupIntl } from 'ember-intl/test-support'; +import { render } from '@ember/test-helpers'; +import Service from '@ember/service'; +import { hbs } from 'ember-cli-htmlbars'; +import setupMirage from 'ember-cli-mirage/test-support/setup-mirage'; +import { component } from 'ilios/tests/pages/components/user-profile'; + +module('Integration | Component | user-profile', function (hooks) { + setupRenderingTest(hooks); + setupIntl(hooks, 'en-us'); + setupMirage(hooks); + + hooks.beforeEach(async function () { + const school = this.server.create('school'); + const program = this.server.create('program', { school }); + this.programYear = this.server.create('programYear', { program }); + this.cohort = this.server.create('cohort', { programYear: this.programYear }); + + const user = this.server.create('user', { school }); + const userModel = await this.owner.lookup('service:store').findRecord('user', user.id); + class CurrentUserMock extends Service { + async getModel() { + return userModel; + } + getRolesInSchool() { + return []; + } + } + this.owner.register('service:currentUser', CurrentUserMock); + }); + + test('user profile calendar', async function (assert) { + const user = this.server.create('user'); + const userModel = await this.owner.lookup('service:store').findRecord('user', user.id); + this.set('user', userModel); + + await render(hbs``); + + assert.notOk(component.calendar.isVisible); + assert.strictEqual(component.actions.calendarToggle.firstLabel.text, 'Hide Calendar'); + assert.ok(component.actions.calendarToggle.firstButton.isChecked); + assert.strictEqual(component.actions.calendarToggle.secondLabel.text, 'Show Calendar'); + assert.notOk(component.actions.calendarToggle.secondButton.isChecked); + await component.actions.calendarToggle.secondButton.click(); + assert.ok(component.calendar.isVisible); + await component.actions.calendarToggle.firstButton.click(); + assert.notOk(component.calendar.isVisible); + }); +}); diff --git a/tests/pages/components/user-profile-calendar.js b/tests/pages/components/user-profile-calendar.js new file mode 100644 index 0000000000..3bbbc3df01 --- /dev/null +++ b/tests/pages/components/user-profile-calendar.js @@ -0,0 +1,9 @@ +import { create } from 'ember-cli-page-object'; + +// @todo flesh this out. [ST 2023/09/08] +const definition = { + scope: '[data-test-user-profile-calendar]', +}; + +export default definition; +export const component = create(definition); diff --git a/tests/pages/components/user-profile.js b/tests/pages/components/user-profile.js new file mode 100644 index 0000000000..b59d64ff22 --- /dev/null +++ b/tests/pages/components/user-profile.js @@ -0,0 +1,29 @@ +import { create } from 'ember-cli-page-object'; + +import bio from 'ilios/tests/pages/components/user-profile-bio'; +import calendar from 'ilios/tests/pages/components/user-profile-calendar'; +import cohorts from 'ilios/tests/pages/components/user-profile-cohorts'; +import ics from 'ilios/tests/pages/components/user-profile-ics'; +import learnerGroups from 'ilios/tests/pages/components/user-profile/learner-groups'; +import permissions from 'ilios/tests/pages/components/user-profile-permissions'; +import roles from 'ilios/tests/pages/components/user-profile-roles'; +import toggleButtons from 'ilios-common/page-objects/components/toggle-buttons'; + +// @todo flesh this out. [ST 2023/09/08] +const definition = { + scope: '[data-test-user-profile]', + actions: { + scope: '[data-test-user-profile-actions]', + calendarToggle: toggleButtons, + }, + bio, + calendar, + cohorts, + learnerGroups, + ics, + permissions, + roles, +}; + +export default definition; +export const component = create(definition); From 0617a4c0b23619ec5bea7a9ba01213b129f4d2e2 Mon Sep 17 00:00:00 2001 From: Stefan Topfstedt Date: Tue, 12 Sep 2023 22:16:23 -0700 Subject: [PATCH 2/2] wait for svg to be on the screen. for some effin reason, this test started to glitch on in the CI pipeline today. hopefully, this change will set thing right again. --- .../components/visualizer-program-year-objectives-test.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/tests/integration/components/visualizer-program-year-objectives-test.js b/tests/integration/components/visualizer-program-year-objectives-test.js index 2331adcefc..0815e7bdc5 100644 --- a/tests/integration/components/visualizer-program-year-objectives-test.js +++ b/tests/integration/components/visualizer-program-year-objectives-test.js @@ -1,7 +1,7 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; import { setupIntl } from 'ember-intl/test-support'; -import { render } from '@ember/test-helpers'; +import { render, waitFor } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; import setupMirage from 'ember-cli-mirage/test-support/setup-mirage'; @@ -78,6 +78,9 @@ module('Integration | Component | visualizer-program-year-objectives', function this.set('programYear', programYearModel); await render(hbs``); + await waitFor('.loaded'); + await waitFor('svg .links'); + await waitFor('svg .nodes'); assert.dom('svg').exists({ count: 1 }); assert.dom('svg g.links').exists({ count: 1 }); assert.dom('svg g.nodes').exists({ count: 1 });