From a9aea1eedbc3976729cca91dcba5a18edfa120bd Mon Sep 17 00:00:00 2001 From: Diana Barsan <35681649+dianabarsan@users.noreply.github.com> Date: Thu, 14 Nov 2024 08:50:32 +0300 Subject: [PATCH 01/30] fix(#9618): don't crash api on startup if form is broken (#9641) #9618 --- api/server.js | 12 ++++++++---- tests/integration/api/server.spec.js | 24 ++++++++++++++++++++++++ 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/api/server.js b/api/server.js index fb8d799d8ef..6364630fda2 100644 --- a/api/server.js +++ b/api/server.js @@ -82,7 +82,6 @@ process await migrations.run(); logger.info('Database migrations completed successfully'); - startupLog.start('forms'); logger.info('Generating manifest'); await manifest.generate(); logger.info('Manifest generated successfully'); @@ -90,15 +89,20 @@ process logger.info('Generating service worker'); await generateServiceWorker.run(true); logger.info('Service worker generated successfully'); + } catch (err) { + logger.error('Fatal error initialising API'); + logger.error('%o', err); + process.exit(1); + } + try { + startupLog.start('forms'); logger.info('Updating xforms…'); await generateXform.updateAll(); logger.info('xforms updated successfully'); - } catch (err) { - logger.error('Fatal error initialising API'); + logger.error('Error initialising API'); logger.error('%o', err); - process.exit(1); } startupLog.complete(); diff --git a/tests/integration/api/server.spec.js b/tests/integration/api/server.spec.js index 16c529221c6..2b50dec116c 100644 --- a/tests/integration/api/server.spec.js +++ b/tests/integration/api/server.spec.js @@ -430,4 +430,28 @@ describe('server', () => { }); }); + + describe('api startup', () => { + it('should start up with broken forms', async () => { + const waitForLogs = await utils.waitForApiLogs(/Failed to update xform/); + + const formName = 'broken'; + const formDoc = { + _id: `form:${formName}`, + title: formName, + type: 'form', + _attachments: { + xml: { + content_type: 'application/octet-stream', + data: btoa('this is totally not an xml'), + }, + }, + }; + await utils.db.put(formDoc); // don't use utils.saveDoc because that actually waits for good forms + await waitForLogs.promise; + + await utils.stopApi(); + await utils.startApi(); + }); + }); }); From df74663324dbae4e31053a97929b4a1090c54b62 Mon Sep 17 00:00:00 2001 From: Rafa Date: Thu, 14 Nov 2024 13:36:36 +0100 Subject: [PATCH 02/30] chore(#9594): add remaining e2e test to tasks for offline user (#9640) Co-authored-by: Rafa --- .../tasks/config/tasks-breadcrumbs-config.js | 33 ++++++++++++++++++- tests/e2e/default/tasks/tasks.wdio-spec.js | 18 ++++++++++ 2 files changed, 50 insertions(+), 1 deletion(-) diff --git a/tests/e2e/default/tasks/config/tasks-breadcrumbs-config.js b/tests/e2e/default/tasks/config/tasks-breadcrumbs-config.js index 2c6687693e9..d6a4a79f934 100644 --- a/tests/e2e/default/tasks/config/tasks-breadcrumbs-config.js +++ b/tests/e2e/default/tasks/config/tasks-breadcrumbs-config.js @@ -38,7 +38,7 @@ module.exports = [ ], events: [ { - id: 'person-creation-follow-up', + id: 'person-creation', start: 3, end: 7, dueDate: function (event, contact) { @@ -47,4 +47,35 @@ module.exports = [ } ] }, + + { + name: 'person_create_follow_up', + icon: 'icon-person', + title: 'person_create_follow_up', + appliesTo: 'reports', + appliesToType: ['home_visit'], + appliesIf: function () { + return true; + }, + resolvedIf: function (contact) { + return isFormArraySubmittedInWindow(contact.reports, ['home_visit'], contact.contact.reported_date); + }, + actions: [ + { + type: 'report', + form: 'home_visit' + } + ], + events: [ + { + id: 'person-creation-follow-up', + start: 3, + end: 1, + dueDate: function (event, contact) { + return contact.contact.reported_date; + } + } + ] + }, + ]; diff --git a/tests/e2e/default/tasks/tasks.wdio-spec.js b/tests/e2e/default/tasks/tasks.wdio-spec.js index e2a1ed6ba26..f0e770a1de0 100644 --- a/tests/e2e/default/tasks/tasks.wdio-spec.js +++ b/tests/e2e/default/tasks/tasks.wdio-spec.js @@ -92,6 +92,24 @@ describe('Tasks', () => { expect(list).to.have.length(2); }); + it('should add a task when CHW completes a task successfully, and that task creates another task', async () => { + await tasksPage.compileTasks('tasks-breadcrumbs-config.js', false); + + await commonPage.goToTasks(); + let list = await tasksPage.getTasks(); + expect(list).to.have.length(2); + let task = await tasksPage.getTaskByContactAndForm('Megan Spice', 'person_create'); + await task.click(); + await tasksPage.waitForTaskContentLoaded('Home Visit'); + const taskElement = await tasksPage.getOpenTaskElement(); + await genericForm.submitForm(); + await taskElement.waitForDisplayed(); + await commonPage.sync(true); + task = await tasksPage.getTaskByContactAndForm('Megan Spice', 'person_create_follow_up'); + list = await tasksPage.getTasks(); + expect(list).to.have.length(3); + }); + it('should load multiple pages of tasks on infinite scrolling', async () => { await tasksPage.compileTasks('tasks-multiple-config.js', true); From ac1147c4f45d316eb67316aa2a313990b2b62c5b Mon Sep 17 00:00:00 2001 From: Diana Barsan <35681649+dianabarsan@users.noreply.github.com> Date: Sat, 16 Nov 2024 17:35:33 +0300 Subject: [PATCH 03/30] fix(#9286): don't pass request timeout prop (#9634) Removes view indexer request timeout param. This didn't end up terminating the request at haproxy level. #9286 #9617 #8573 --- api/src/services/setup/view-indexer.js | 1 - api/tests/mocha/services/setup/view-indexer.spec.js | 13 +++---------- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/api/src/services/setup/view-indexer.js b/api/src/services/setup/view-indexer.js index 7055f867f80..6dac3ff3476 100644 --- a/api/src/services/setup/view-indexer.js +++ b/api/src/services/setup/view-indexer.js @@ -66,7 +66,6 @@ const indexView = async (dbName, ddocId, viewName) => { uri: `${environment.serverUrl}/${dbName}/${ddocId}/_view/${viewName}`, json: true, qs: { limit: 1 }, - timeout: 2000, }); } catch (requestError) { if (!continueIndexing) { diff --git a/api/tests/mocha/services/setup/view-indexer.spec.js b/api/tests/mocha/services/setup/view-indexer.spec.js index c61787d0870..098a53601d1 100644 --- a/api/tests/mocha/services/setup/view-indexer.spec.js +++ b/api/tests/mocha/services/setup/view-indexer.spec.js @@ -6,7 +6,8 @@ const db = require('../../../../src/db'); const env = require('@medic/environment'); const request = require('@medic/couch-request'); const databases = require('../../../../src/services/setup/databases'); -const upgradeLogService = require('../../../../src/services/setup/upgrade-log'); +const upgradeLogService = require('../../../../src/service' + + 's/setup/upgrade-log'); let viewIndexer; @@ -60,38 +61,33 @@ describe('View indexer service', () => { uri: 'http://localhost/thedb/_design/:staged:one/_view/view1', json: true, qs: { limit: 1 }, - timeout: 2000, }], [{ uri: 'http://localhost/thedb/_design/:staged:one/_view/view2', json: true, qs: { limit: 1 }, - timeout: 2000, }], [{ uri: 'http://localhost/thedb/_design/:staged:one/_view/view3', json: true, qs: { limit: 1 }, - timeout: 2000, }], [{ uri: 'http://localhost/thedb/_design/:staged:three/_view/view4', json: true, qs: { limit: 1 }, - timeout: 2000, }], [{ uri: 'http://localhost/thedb-users-meta/_design/:staged:four/_view/view', json: true, qs: { limit: 1 }, - timeout: 2000, }], ]); }); }); describe('indexView', () => { - it('should query the view with a timeout', async () => { + it('should query the view', async () => { sinon.stub(request, 'get').resolves(); sinon.stub(env, 'serverUrl').value('http://localhost'); @@ -102,7 +98,6 @@ describe('View indexer service', () => { uri: 'http://localhost/medic/_design/:staged:medic/_view/contacts', json: true, qs: { limit: 1 }, - timeout: 2000, }]); }); @@ -119,7 +114,6 @@ describe('View indexer service', () => { uri: 'http://localhost/other/_design/mydesign/_view/viewname', json: true, qs: { limit: 1 }, - timeout: 2000, }; expect(request.get.args).to.deep.equal(Array.from({ length: 21 }).map(() => [params])); }); @@ -137,7 +131,6 @@ describe('View indexer service', () => { uri: 'http://localhost/other/_design/mydesign/_view/viewname', json: true, qs: { limit: 1 }, - timeout: 2000, }; expect(request.get.args).to.deep.equal(Array.from({ length: 21 }).map(() => [params])); }); From 58dcfb6d746fee5c5640e35ccf16e95b53f3057f Mon Sep 17 00:00:00 2001 From: Jennifer Q <66472237+latin-panda@users.noreply.github.com> Date: Mon, 18 Nov 2024 11:01:51 +0700 Subject: [PATCH 04/30] chore(#9648): update version to 4.15 (#9649) --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 819b0b5e2aa..f5bf5d6881f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "medic", - "version": "4.14.0", + "version": "4.15.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "medic", - "version": "4.14.0", + "version": "4.15.0", "hasInstallScript": true, "license": "AGPL-3.0-only", "workspaces": [ diff --git a/package.json b/package.json index 43e9019ccce..7472d6780fc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "medic", - "version": "4.14.0", + "version": "4.15.0", "private": true, "license": "AGPL-3.0-only", "repository": { From 51da792b7bc0c6e9b212bc61a7ff0afe05fa440a Mon Sep 17 00:00:00 2001 From: Diana Barsan <35681649+dianabarsan@users.noreply.github.com> Date: Mon, 18 Nov 2024 09:50:16 +0300 Subject: [PATCH 05/30] fix(#9612): hide last submitted task from task list (#9650) Due to a recent debounce in setting contacts as dirty, task-list ended up waiting for two debounce delays when reloading tasks: one from rules engine and one from tasks component itself. It previously had only one debounce, so this issue was less visible, but still existed. As a fix: - emit the change notification early in rules engine, this way both debounces are in parallel - hide the last submitted task from the task list immediately after submission. if the task was not completed by the action, it will show up again when the task list refreshes. Optimizing an e2e test that took a long time due to getting info from "not rendered" angular elements. #9612 --- tests/page-objects/default/tasks/tasks.wdio.page.js | 1 + webapp/src/ts/reducers/tasks.ts | 1 + webapp/src/ts/services/rules-engine.service.ts | 2 +- webapp/tests/karma/ts/reducers/tasks.spec.ts | 1 + webapp/tests/karma/ts/services/rules-engine.service.spec.ts | 6 +++++- 5 files changed, 9 insertions(+), 2 deletions(-) diff --git a/tests/page-objects/default/tasks/tasks.wdio.page.js b/tests/page-objects/default/tasks/tasks.wdio.page.js index c9fc2a98177..3c9ffee7c35 100644 --- a/tests/page-objects/default/tasks/tasks.wdio.page.js +++ b/tests/page-objects/default/tasks/tasks.wdio.page.js @@ -12,6 +12,7 @@ const getTaskById = (emissionId) => $(`${TASK_LIST_SELECTOR} li[data-record-id=" const getTasks = () => $$(`${TASK_LIST_SELECTOR} li.content-row`); const getTaskInfo = async (taskElement) => { + await taskElement.scrollIntoView(); const contactName = await (await taskElement.$('h4 span')).getText(); const formTitle = await (await taskElement.$('.summary p')).getText(); let lineage = ''; diff --git a/webapp/src/ts/reducers/tasks.ts b/webapp/src/ts/reducers/tasks.ts index 8768ff14d90..6bad3eb217b 100644 --- a/webapp/src/ts/reducers/tasks.ts +++ b/webapp/src/ts/reducers/tasks.ts @@ -47,6 +47,7 @@ const _tasksReducer = createReducer( on(Actions.setLastSubmittedTask, (state, { payload: { task } }) => ({ ...state, + tasksList: state.tasksList.filter(t => task?._id !== t._id), taskGroup: { ...state.taskGroup, lastSubmittedTask: task diff --git a/webapp/src/ts/services/rules-engine.service.ts b/webapp/src/ts/services/rules-engine.service.ts index 8e7a4712e90..cf16f0e1380 100644 --- a/webapp/src/ts/services/rules-engine.service.ts +++ b/webapp/src/ts/services/rules-engine.service.ts @@ -214,6 +214,7 @@ export class RulesEngineService implements OnDestroy { private dirtyContactCallback(change) { const subjectIds = [this.isReport(change.doc) ? RegistrationUtils.getSubjectId(change.doc) : change.id]; + this.observable.next(subjectIds); if (this.debounceActive[this.CHANGE_WATCHER_KEY]?.active) { const oldSubjectIds = this.debounceActive[this.CHANGE_WATCHER_KEY].params; @@ -238,7 +239,6 @@ export class RulesEngineService implements OnDestroy { this.telemetryService.record(this.getTelemetryTrackName('refresh', 'dirty-contacts'), contactIds.length); await this.rulesEngineCore.updateEmissionsFor(contactIds); - this.observable.next(contactIds); trackPerformance?.stop({ name: this.getTelemetryTrackName('refresh') }); }, this.DEBOUNCE_CHANGE_MILLIS); diff --git a/webapp/tests/karma/ts/reducers/tasks.spec.ts b/webapp/tests/karma/ts/reducers/tasks.spec.ts index 97403ef4997..acfc397952f 100644 --- a/webapp/tests/karma/ts/reducers/tasks.spec.ts +++ b/webapp/tests/karma/ts/reducers/tasks.spec.ts @@ -277,6 +277,7 @@ describe('Tasks reducer', () => { tasksList: [ { _id: 'task1', dueDate: 22, state: 'Ready' }, { _id: 'task2', dueDate: 33, state: 'Ready' }, + { _id: 'task_id2', due: '33', field: 2 } ], loaded: true, taskGroup: { diff --git a/webapp/tests/karma/ts/services/rules-engine.service.spec.ts b/webapp/tests/karma/ts/services/rules-engine.service.spec.ts index a3dbc7e793d..9b20579d25c 100644 --- a/webapp/tests/karma/ts/services/rules-engine.service.spec.ts +++ b/webapp/tests/karma/ts/services/rules-engine.service.spec.ts @@ -468,11 +468,15 @@ describe('RulesEngineService', () => { const change = changesService.subscribe.args[0][0]; await change.callback(changeFeedFormat({ type: 'data_record', form: 'f', fields: { patient_id: 'p1' } })); + expect(callback.callCount).to.equal(1); await change.callback(changeFeedFormat({ _id: '2', type: 'person', patient_id: 'p2' })); + expect(callback.callCount).to.equal(2); tick(500); await change.callback(changeFeedFormat({ _id: '3', type: 'person', patient_id: 'p3' })); + expect(callback.callCount).to.equal(3); tick(900); await change.callback(changeFeedFormat({ type: 'data_record', form: 'f', fields: { patient_id: 'p3' }})); + expect(callback.callCount).to.equal(4); expect(rulesEngineCoreStubs.updateEmissionsFor.callCount).to.equal(0); @@ -480,7 +484,7 @@ describe('RulesEngineService', () => { expect(rulesEngineCoreStubs.updateEmissionsFor.callCount).to.equal(1); expect(rulesEngineCoreStubs.updateEmissionsFor.args[0][0]).to.have.members([ 'p3', '3', '2', 'p1' ]); - expect(callback.callCount).to.equal(1); + expect(callback.callCount).to.equal(4); subscription.unsubscribe(); expect(telemetryService.record.calledOnce).to.be.true; From e33cd8738be9bbe1e3c34566fe07d7bf9fa9da6f Mon Sep 17 00:00:00 2001 From: Jennifer Q <66472237+latin-panda@users.noreply.github.com> Date: Mon, 18 Nov 2024 16:59:13 +0700 Subject: [PATCH 06/30] feat(#9598): add training materials page (#9592) --- .../translations/messages-en.properties | 17 +- .../translations/messages-es.properties | 5 +- .../translations/messages-fr.properties | 5 +- .../translations/messages-hi.properties | 4 + .../translations/messages-id.properties | 4 + .../translations/messages-ne.properties | 5 +- .../translations/messages-sw.properties | 5 +- .../enketo/training-cards.wdio-spec.js | 5 +- .../service-worker.wdio-spec.js | 1 + tests/e2e/default/suites.js | 1 + .../forms/expired-training.xml | 95 ++++ .../forms/first-training.xml | 95 ++++ .../forms/second-training.xml | 95 ++++ .../training-materials.wdio-spec.js | 166 +++++++ .../default/common/common.wdio.page.js | 8 + .../enketo/training-cards.wdio.page.js | 49 +- webapp/src/css/content-list.less | 15 + webapp/src/css/inbox.less | 21 +- webapp/src/css/modal.less | 61 ++- webapp/src/css/old-nav.less | 16 + webapp/src/css/variables.less | 5 + webapp/src/img/icon-check.svg | 4 + webapp/src/ts/actions/global.ts | 15 + webapp/src/ts/app-routing.module.ts | 2 + webapp/src/ts/app.component.ts | 21 +- webapp/src/ts/components/components.module.ts | 3 + .../components/header/header.component.html | 6 + .../modal-layout/modal-layout.component.html | 2 +- .../sidebar-menu/sidebar-menu.component.ts | 6 + .../training-cards-form.component.html | 15 + .../training-cards-form.component.ts | 230 ++++++++++ webapp/src/ts/modals/modals.module.ts | 3 + .../training-cards-confirm.component.html | 12 + .../training-cards-confirm.component.ts | 33 ++ .../training-cards.component.html | 42 +- .../training-cards.component.ts | 222 ++------- webapp/src/ts/modules/modules.module.ts | 8 + .../src/ts/modules/tasks/tasks.component.html | 8 +- .../trainings-content.component.html | 21 + .../trainings/trainings-content.component.ts | 112 +++++ .../trainings-route.guard.provider.ts | 18 + .../trainings/trainings.component.html | 42 ++ .../modules/trainings/trainings.component.ts | 129 ++++++ .../ts/modules/trainings/trainings.routes.ts | 28 ++ webapp/src/ts/reducers/global.ts | 5 + webapp/src/ts/selectors/index.ts | 1 + .../src/ts/services/training-cards.service.ts | 132 ++++-- webapp/src/ts/training-card.guard.provider.ts | 2 +- .../sidebar-menu.component.spec.ts | 6 + .../training-cards-form.component.spec.ts | 351 +++++++++++++++ .../training-cards.component.spec.ts | 394 ++-------------- .../trainings-content.component.spec.ts | 173 +++++++ .../trainings/trainings.component.spec.ts | 200 ++++++++ webapp/tests/karma/ts/selectors/index.spec.ts | 1 + .../services/training-cards.service.spec.ts | 426 +++++++++++------- 55 files changed, 2514 insertions(+), 837 deletions(-) create mode 100644 tests/e2e/default/training-materials/forms/expired-training.xml create mode 100644 tests/e2e/default/training-materials/forms/first-training.xml create mode 100644 tests/e2e/default/training-materials/forms/second-training.xml create mode 100644 tests/e2e/default/training-materials/training-materials.wdio-spec.js create mode 100644 webapp/src/img/icon-check.svg create mode 100644 webapp/src/ts/components/training-cards-form/training-cards-form.component.html create mode 100644 webapp/src/ts/components/training-cards-form/training-cards-form.component.ts create mode 100644 webapp/src/ts/modals/training-cards-confirm/training-cards-confirm.component.html create mode 100644 webapp/src/ts/modals/training-cards-confirm/training-cards-confirm.component.ts create mode 100644 webapp/src/ts/modules/trainings/trainings-content.component.html create mode 100644 webapp/src/ts/modules/trainings/trainings-content.component.ts create mode 100644 webapp/src/ts/modules/trainings/trainings-route.guard.provider.ts create mode 100644 webapp/src/ts/modules/trainings/trainings.component.html create mode 100644 webapp/src/ts/modules/trainings/trainings.component.ts create mode 100644 webapp/src/ts/modules/trainings/trainings.routes.ts create mode 100644 webapp/tests/karma/ts/components/training-cards-form/training-cards-form.component.spec.ts create mode 100644 webapp/tests/karma/ts/modules/trainings/trainings-content.component.spec.ts create mode 100644 webapp/tests/karma/ts/modules/trainings/trainings.component.spec.ts diff --git a/api/resources/translations/messages-en.properties b/api/resources/translations/messages-en.properties index cb04a0a6e72..3bc93546cdc 100644 --- a/api/resources/translations/messages-en.properties +++ b/api/resources/translations/messages-en.properties @@ -437,7 +437,7 @@ configuration.sms = SMS configuration.sms.forms = SMS forms configuration.sms.forms.title = You need to choose both an XML file and a Meta file before clicking the upload button. You may only upload one app form file at a time and any existing forms will be overwritten. configuration.sms.settings = Basic settings -configuration.sms.test.description = Use this page to send a test message to the production application without going through the SMS Gateway. Be sure to use a phone number registered to a CHW’s profile to mimic a report coming from him or her about a particular patient. +configuration.sms.test.description = Use this page to send a test message to the production application without going through the SMS Gateway. Be sure to use a phone number registered to a CHW?s profile to mimic a report coming from him or her about a particular patient. configuration.sms.test.from.number = From phone number configuration.sms.test.message.description = Limit of 144 characters configuration.sms.test.number.validation.description = Please enter a valid phone number without dashes or punctuation. @@ -454,7 +454,7 @@ confirm.destructive.navigation.submit = Exit confirm.destructive.navigation.title = Exit form? confirm.logout = You will need an internet connection to log back in. password.updated = Your password has been successfully updated. -confirm.verification = This report will be verified as “correct”. This cannot be changed later. +confirm.verification = This report will be verified as ?correct?. This cannot be changed later. confirm.verification.submit = Verify as correct confirm.verification.title = Verify report contact.age = Age @@ -654,8 +654,8 @@ enketo.geopicker.altitude = altitude (m) enketo.geopicker.closepolygon = close polygon enketo.geopicker.kmlcoords = KML coordinates enketo.geopicker.kmlpaste = paste KML coordinates here -enketo.geopicker.latitude = latitude (x.y °) -enketo.geopicker.longitude = longitude (x.y °) +enketo.geopicker.latitude = latitude (x.y ) +enketo.geopicker.longitude = longitude (x.y ) enketo.geopicker.points = points enketo.geopicker.searchPlaceholder = search for place or address enketo.geopicker.removePoint = This will completely remove the current geopoint from the list of geopoints and cannot be undone. Are you sure you want to do this? @@ -686,7 +686,7 @@ export.dhis.place.all = All Places export.dhis.place.description = Filter exported data to include data associated with contacts under this place in the hierarchy. export.dhis.place.label = Filter by place export.dhis.unconfigured = DHIS2 integration is not configured. -export.feedback.description = Download a log of detected errors and user feedback submitted via the “Report bug” feature in CSV format. The table below shows the most recently submitted reports. +export.feedback.description = Download a log of detected errors and user feedback submitted via the ?Report bug? feature in CSV format. The table below shows the most recently submitted reports. export.messages.description = Download all messages that have ever been sent or received in CSV format. export.people.description = Download all contacts registered in the system in JSON format. export.reports.description = Download a summary of all the reports that have ever been submitted in CSV format. @@ -1215,7 +1215,7 @@ sync.last_success = Last sync sync.now = Sync now sync.retry = Retry sync.feedback.failure.unknown = Sync failed. Unable to connect. -sync.status.in_progress = Currently syncing… +sync.status.in_progress = Currently syncing? sync.status.not_required = All reports synced sync.status.required = Reports to sync sync.status.unknown = Unable to connect @@ -1264,7 +1264,10 @@ training_cards.confirm.title = Leave training? training_cards.error.loading = Error loading training. Please contact your supervisor. training_cards.error.save = Error saving training. training_cards.form.saved = Training completed. -training_cards.modal.title = Important changes +training_materials.page.no_more_trainings = No more trainings +training_materials.page.no_selected = No training material selected +training_materials.page.no_trainings = No trainings found +training_materials.page.title = Training materials translation.add = Add new translation key translation.key = Translation key unique.id = Unique ID diff --git a/api/resources/translations/messages-es.properties b/api/resources/translations/messages-es.properties index 2bb18b9bcf7..4dcc0aa8506 100644 --- a/api/resources/translations/messages-es.properties +++ b/api/resources/translations/messages-es.properties @@ -1264,7 +1264,10 @@ training_cards.confirm.title = \¿Salir del entrenamiento\? training_cards.error.loading = Hubo un error al cargar el entrenamiento. Por favor contacte a su supervisor. training_cards.error.save = Hubo un error al guardar el entrenamiento. training_cards.form.saved = Entrenamiento completado. -training_cards.modal.title = Cambios importantes +training_materials.page.no_more_trainings = No hay más entrenamientos +training_materials.page.no_selected = Ningún material de entrenamiento seleccionado +training_materials.page.no_trainings = No se encontraron entrenamientos +training_materials.page.title = Materiales de entrenamiento translation.add = Agregar Traducción translation.key = Clave de traducción unique.id = Identificación única diff --git a/api/resources/translations/messages-fr.properties b/api/resources/translations/messages-fr.properties index a82b00af6de..87b2ddd1e14 100644 --- a/api/resources/translations/messages-fr.properties +++ b/api/resources/translations/messages-fr.properties @@ -1264,7 +1264,10 @@ training_cards.confirm.title = Quitter l'entraînement? training_cards.error.loading = Erreur lors du chargement de la formation. Veuillez contacter votre superviseur. training_cards.error.save = Erreur lors de l'enregistrement de la formation. training_cards.form.saved = Formation terminée. -training_cards.modal.title = Changements importants +training_materials.page.no_more_trainings = Aucune formation restante +training_materials.page.no_selected = Aucun matériel de formation sélectionné +training_materials.page.no_trainings = Aucune formation trouvée +training_materials.page.title = Matériel de formation translation.add = Ajouter une traduction translation.key = Clé de traduction unique.id = ID unique diff --git a/api/resources/translations/messages-hi.properties b/api/resources/translations/messages-hi.properties index 9b012194aff..e39d2bf0510 100644 --- a/api/resources/translations/messages-hi.properties +++ b/api/resources/translations/messages-hi.properties @@ -1168,6 +1168,10 @@ training_cards.confirm.exit = यह प्रशिक्षण समाप् training_cards.confirm.button.no = रद्द करें training_cards.confirm.button.yes = बाहर निकलें training_cards.confirm.title = प्रशिक्षण छोड़ें? +training_materials.page.no_more_trainings = अब और कोई प्रशिक्षण नहीं है +training_materials.page.no_selected = कोई प्रशिक्षण दस्तावेज़ नहीं चुना गया +training_materials.page.no_trainings = कोई प्रशिक्षण नहीं मिला +training_materials.page.title = प्रशिक्षण दस्तावेज़ translation.add = अनुवाद दर्ज करें translation.key = अनुवाद का गाइड unique.id = diff --git a/api/resources/translations/messages-id.properties b/api/resources/translations/messages-id.properties index 53a0b392f54..28e9a589877 100644 --- a/api/resources/translations/messages-id.properties +++ b/api/resources/translations/messages-id.properties @@ -1175,6 +1175,10 @@ training_cards.confirm.exit = Pelatihan ini belum selesai. Jika Anda keluar seka training_cards.confirm.button.no = Batalkan training_cards.confirm.button.yes = Keluar training_cards.confirm.title = Keluar dari pelatihan? +training_materials.page.no_more_trainings = Tidak ada lagi pelatihan +training_materials.page.no_selected = Tidak ada materi pelatihan yang dipilih +training_materials.page.no_trainings = Tidak ditemukan pelatihan +training_materials.page.title = Materi pelatihan translation.add = Tambah terjemahan translation.key = Kunci terjemahan unique.id = diff --git a/api/resources/translations/messages-ne.properties b/api/resources/translations/messages-ne.properties index ab858cbc35b..78fa02deecf 100644 --- a/api/resources/translations/messages-ne.properties +++ b/api/resources/translations/messages-ne.properties @@ -1264,7 +1264,10 @@ training_cards.confirm.title = तालिम छोड्ने हो? training_cards.error.loading = तालिम लोड गर्दा त्रुटि भयो। तपाइँको सुपरभाइजरलाई सम्पर्क गर्नुहोस्। training_cards.error.save = तालिम सेभ गर्न त्रुटि। training_cards.form.saved = तालिम सम्पन्न भयो। -training_cards.modal.title = महत्वपुर्ण परिवर्तनहरु +training_materials.page.no_more_trainings = थप तालिम छैन +training_materials.page.no_selected = कुनै तालिम सामग्री छनोट गरिएको छैन। +training_materials.page.no_trainings = तालिम फेला परेन +training_materials.page.title = तालिम शीर्षक translation.add = नयाँ अनुवाद कुञ्जी थप्नुहोस् translation.key = अनुवाद कुञ्जी unique.id = आईडी diff --git a/api/resources/translations/messages-sw.properties b/api/resources/translations/messages-sw.properties index b7e0f9dae7e..13c4eadb09e 100644 --- a/api/resources/translations/messages-sw.properties +++ b/api/resources/translations/messages-sw.properties @@ -1264,7 +1264,10 @@ training_cards.confirm.title = Ungependa kuondoka kwenye mafunzo? training_cards.error.loading = Hitilafu katika kupakia mafunzo. Tafadhali wasiliana na msimamizi wako. training_cards.error.save = Hitilafu katika kuhifadhi mafunzo. training_cards.form.saved = Mafunzo yamekamilika. -training_cards.modal.title = Mabadiliko muhimu +training_materials.page.no_more_trainings = Hakuna mafunzo mengine +training_materials.page.no_selected = Hakuna nyenzo za mafunzo zilizochaguliwa +training_materials.page.no_trainings = Hakuna mafunzo yaliyopatikana +training_materials.page.title = Vifaa vya mafunzo translation.add = Ongeza tafsiri translation.key = Ufunguo wa tafsiri unique.id = Kitambulisho cha kipekee diff --git a/tests/e2e/default/enketo/training-cards.wdio-spec.js b/tests/e2e/default/enketo/training-cards.wdio-spec.js index b9bd689ba2f..1a5ff4d781c 100644 --- a/tests/e2e/default/enketo/training-cards.wdio-spec.js +++ b/tests/e2e/default/enketo/training-cards.wdio-spec.js @@ -4,7 +4,6 @@ const commonPage = require('@page-objects/default/common/common.wdio.page'); const trainingCardsPage = require('@page-objects/default/enketo/training-cards.wdio.page'); const placeFactory = require('@factories/cht/contacts/place'); const userFactory = require('@factories/cht/users/users'); -const personFactory = require('@factories/cht/contacts/person'); const reportsPage = require('@page-objects/default/reports/reports.wdio.page'); const privacyPolicyFactory = require('@factories/cht/settings/privacy-policy'); const privacyPage = require('@page-objects/default/privacy-policy/privacy-policy.wdio.page'); @@ -26,7 +25,6 @@ describe('Training Cards', () => { before(async () => { const parent = placeFactory.place().build({ _id: 'dist1', type: 'district_hospital' }); const user = userFactory.build({ roles: [ 'nurse', 'chw' ] }); - const patient = personFactory.build({ parent: { _id: user.place._id, parent: { _id: parent._id } } }); const formDoc = commonPage.createFormDoc(`${__dirname}/forms/training-cards-text-only`); formDoc._id = `form:${formDocId}`; formDoc.internalId = formDocId; @@ -36,8 +34,7 @@ describe('Training Cards', () => { duration: 5, }; - await utils.saveDocs([ parent, patient ]); - await utils.saveDoc(formDoc); + await utils.saveDocs([ parent, formDoc ]); await utils.createUsers([ user ]); await loginPage.login(user); await commonPage.waitForPageLoaded(); diff --git a/tests/e2e/default/service-worker/service-worker.wdio-spec.js b/tests/e2e/default/service-worker/service-worker.wdio-spec.js index 3fe432351a0..4c1cf4c3302 100644 --- a/tests/e2e/default/service-worker/service-worker.wdio-spec.js +++ b/tests/e2e/default/service-worker/service-worker.wdio-spec.js @@ -120,6 +120,7 @@ describe('Service worker cache', () => { '/img/icon-pregnant-selected.svg', '/img/icon-pregnant.svg', '/img/icon-filter.svg', + '/img/icon-check.svg', '/img/icon.png', '/img/icon-back.svg', '/img/layers.png', diff --git a/tests/e2e/default/suites.js b/tests/e2e/default/suites.js index 7514c73f9b1..d0254acd85b 100644 --- a/tests/e2e/default/suites.js +++ b/tests/e2e/default/suites.js @@ -6,6 +6,7 @@ const SUITES = { './more-options-menu/**/*.wdio-spec.js', './users/**/*.wdio-spec.js', './about/**/*.wdio-spec.js', + './training-materials/**/*.wdio-spec.js', './navigation/**/*.wdio-spec.js', './old-navigation/**/*.wdio-spec.js', './privacy-policy/**/*.wdio-spec.js', diff --git a/tests/e2e/default/training-materials/forms/expired-training.xml b/tests/e2e/default/training-materials/forms/expired-training.xml new file mode 100644 index 00000000000..9461ad67964 --- /dev/null +++ b/tests/e2e/default/training-materials/forms/expired-training.xml @@ -0,0 +1,95 @@ + + + + First Training + + + + + **Old feature** + + + **New feature** + + + The "New Action" icon at the bottom of your app has also changed. + + + If you do not understand these changes, please contact your supervisor. + + + When you're ready, go ahead and start using your app. + + + There have been some changes to icons in your app. The next few screens will show you the difference. + + + Read each screen carefully and tap "Next" if you understand. If you need extra support, please contact your supervisor. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/e2e/default/training-materials/forms/first-training.xml b/tests/e2e/default/training-materials/forms/first-training.xml new file mode 100644 index 00000000000..3f50b1d7c07 --- /dev/null +++ b/tests/e2e/default/training-materials/forms/first-training.xml @@ -0,0 +1,95 @@ + + + + First Training + + + + + **Old feature** + + + **New feature** + + + The "New Action" icon at the bottom of your app has also changed. + + + If you do not understand these changes, please contact your supervisor. + + + When you're ready, go ahead and start using your app. + + + There have been some changes to icons in your app. The next few screens will show you the difference. + + + Read each screen carefully and tap "Next" if you understand. If you need extra support, please contact your supervisor. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/e2e/default/training-materials/forms/second-training.xml b/tests/e2e/default/training-materials/forms/second-training.xml new file mode 100644 index 00000000000..9bebba6a873 --- /dev/null +++ b/tests/e2e/default/training-materials/forms/second-training.xml @@ -0,0 +1,95 @@ + + + + Second Training + + + + + **Old icon** + + + **New icon** + + + The "New Action" icon at the bottom of your app has also changed. + + + If you do not understand these changes, please contact your supervisor. + + + When you're ready, go ahead and start using your app. + + + The next few screens will show you the difference. + + + Read each screen carefully and tap "Next" if you understand. If you need extra support, please contact your supervisor. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/e2e/default/training-materials/training-materials.wdio-spec.js b/tests/e2e/default/training-materials/training-materials.wdio-spec.js new file mode 100644 index 00000000000..26490843d3e --- /dev/null +++ b/tests/e2e/default/training-materials/training-materials.wdio-spec.js @@ -0,0 +1,166 @@ +const fs = require('fs'); +const utils = require('@utils'); +const loginPage = require('@page-objects/default/login/login.wdio.page'); +const commonPage = require('@page-objects/default/common/common.wdio.page'); +const trainingCardsPage = require('@page-objects/default/enketo/training-cards.wdio.page'); +const placeFactory = require('@factories/cht/contacts/place'); +const userFactory = require('@factories/cht/users/users'); +const commonElements = require('@page-objects/default/common/common.wdio.page'); +const reportsPage = require('@page-objects/default/reports/reports.wdio.page'); + +describe('Training Materials Page', () => { + const CONFIRM_TITLE = 'Leave training?'; + const CONFIRM_CONTENT = 'This training is not finished. ' + + 'If you leave now, you will lose your progress and be prompted again later to complete it.'; + const FORMS_FOLDER = `${__dirname}/../../../e2e/default/training-materials/forms`; + const FIRST_TRAINING_NAME = 'first_training'; + const FIRST_TRAINING_ID = `training:${FIRST_TRAINING_NAME}`; + const SECOND_TRAINING_NAME = 'second_training'; + const SECOND_TRAINING_ID = `training:${SECOND_TRAINING_NAME}`; + + before(async () => { + const facility = placeFactory.place().build({ _id: 'dist1', type: 'district_hospital' }); + const user = userFactory.build({ roles: [ 'pharmacist', 'chw' ] }); + + const firstXML = fs.readFileSync(`${FORMS_FOLDER}/first-training.xml`, 'utf8'); + const firstTraining = { + _id: `form:${FIRST_TRAINING_ID}`, + internalId: FIRST_TRAINING_ID, + title: FIRST_TRAINING_NAME, + type: 'form', + context: { start_date: new Date().getTime(), user_roles: [ 'pharmacist' ], duration: 5 }, + _attachments: { + xml: { content_type: 'application/octet-stream', data: Buffer.from(firstXML).toString('base64') }, + }, + }; + + const secondXML = fs.readFileSync(`${FORMS_FOLDER}/second-training.xml`, 'utf8'); + const secondTraining = { + _id: `form:${SECOND_TRAINING_ID}`, + internalId: SECOND_TRAINING_ID, + title: SECOND_TRAINING_NAME, + type: 'form', + context: { start_date: new Date().getTime(), user_roles: [ 'pharmacist' ], duration: 5 }, + _attachments: { + xml: { content_type: 'application/octet-stream', data: Buffer.from(secondXML).toString('base64') }, + }, + }; + + const expiredTrainingXML = fs.readFileSync(`${FORMS_FOLDER}/expired-training.xml`, 'utf8'); + const expiredTraining = { + _id: 'form:training:expired_training', + internalId: 'training:expired_training', + title: 'expired_training', + type: 'form', + context: { start_date: '2023-12-8', user_roles: [ 'pharmacist' ], duration: 50 }, + _attachments: { + xml: { content_type: 'application/octet-stream', data: Buffer.from(expiredTrainingXML).toString('base64') }, + }, + }; + + await utils.saveDocs([ facility, firstTraining, expiredTraining, secondTraining ]); + await utils.createUsers([ user ]); + await loginPage.login(user); + await commonElements.waitForPageLoaded(); + }); + + it('should quit training in modal, and be able to complete it later in the Training Material page,' + + ' verify completed trainings display in the list', async () => { + await trainingCardsPage.waitForTrainingCards(); + const trainingModalTitle = await trainingCardsPage.getTrainingTitle(); + expect(trainingModalTitle).to.equal(FIRST_TRAINING_NAME); + + const confirmMessage = await trainingCardsPage.quitTraining(); + expect(confirmMessage.header).to.equal(CONFIRM_TITLE); + expect(confirmMessage.body).to.contain(CONFIRM_CONTENT); + await trainingCardsPage.confirmQuitTraining(); + await trainingCardsPage.checkTrainingCardIsNotDisplayed(); + + await commonPage.openHamburgerMenu(); + await commonPage.openTrainingMaterials(); + + const trainings = await trainingCardsPage.getAllTrainingsText(); + expect(trainings.length).to.equal(2); + expect(trainings).to.have.members([ FIRST_TRAINING_NAME, SECOND_TRAINING_NAME ]); + expect(await trainingCardsPage.isTrainingComplete(FIRST_TRAINING_ID)).to.be.false; + expect(await trainingCardsPage.isTrainingComplete(SECOND_TRAINING_ID)).to.be.false; + + await trainingCardsPage.openTrainingMaterial(FIRST_TRAINING_ID); + const trainingMaterialTitle = await trainingCardsPage.getTrainingTitle(); + expect(trainingMaterialTitle).to.equal(FIRST_TRAINING_NAME); + + const introCard = await trainingCardsPage.getCardContent(FIRST_TRAINING_NAME, 'intro/intro_note_1:label"]'); + expect(introCard).to.equal( + 'There have been some changes to icons in your app. The next few screens will show you the difference.' + ); + const nextCard = await trainingCardsPage.getNextCardContent( + FIRST_TRAINING_NAME, + 'action_icons/action_icons_note_1:label"]', + ); + expect(nextCard).to.equal('The "New Action" icon at the bottom of your app has also changed.'); + const lastCard = await trainingCardsPage.getNextCardContent(FIRST_TRAINING_NAME, 'ending/ending_note_1:label"]'); + expect(lastCard).to.equal('If you do not understand these changes, please contact your supervisor.'); + await trainingCardsPage.submitTraining(false); + + const allTrainings = await trainingCardsPage.getAllTrainingsText(); + expect(allTrainings.length).to.equal(2); + expect(allTrainings).to.have.members([ FIRST_TRAINING_NAME, SECOND_TRAINING_NAME ]); + expect(await trainingCardsPage.isTrainingComplete(FIRST_TRAINING_ID)).to.be.true; + expect(await trainingCardsPage.isTrainingComplete(SECOND_TRAINING_ID)).to.be.false; + + await commonPage.goToReports(); + const firstReport = await reportsPage.getListReportInfo(await reportsPage.leftPanelSelectors.firstReport()); + expect(firstReport.form).to.equal(FIRST_TRAINING_ID); + }); + + it('should revisit completed trainings and load uncompleted trainings', async () => { + await commonPage.openHamburgerMenu(); + await commonPage.openTrainingMaterials(); + + const trainings = await trainingCardsPage.getAllTrainingsText(); + expect(trainings.length).to.equal(2); + expect(trainings).to.have.members([ FIRST_TRAINING_NAME, SECOND_TRAINING_NAME ]); + expect(await trainingCardsPage.isTrainingComplete(FIRST_TRAINING_ID)).to.be.true; + expect(await trainingCardsPage.isTrainingComplete(SECOND_TRAINING_ID)).to.be.false; + + await trainingCardsPage.openTrainingMaterial(FIRST_TRAINING_ID); + const trainingMaterialTitle = await trainingCardsPage.getTrainingTitle(); + expect(trainingMaterialTitle).to.equal(FIRST_TRAINING_NAME); + + const introCard = await trainingCardsPage.getCardContent(FIRST_TRAINING_NAME, 'intro/intro_note_1:label"]'); + expect(introCard).to.equal( + 'There have been some changes to icons in your app. The next few screens will show you the difference.' + ); + const nextCard = await trainingCardsPage.getNextCardContent( + FIRST_TRAINING_NAME, + 'action_icons/action_icons_note_1:label"]', + ); + expect(nextCard).to.equal('The "New Action" icon at the bottom of your app has also changed.'); + + const confirmMessage = await trainingCardsPage.quitTraining(); + expect(confirmMessage.header).to.equal(CONFIRM_TITLE); + expect(confirmMessage.body).to.contain(CONFIRM_CONTENT); + await trainingCardsPage.confirmQuitTraining(); + await trainingCardsPage.checkTrainingCardIsNotDisplayed(); + + await trainingCardsPage.openTrainingMaterial(SECOND_TRAINING_ID); + const secondTrainingTitle = await trainingCardsPage.getTrainingTitle(); + expect(secondTrainingTitle).to.equal(SECOND_TRAINING_NAME); + const secondIntroCard = await trainingCardsPage.getCardContent(SECOND_TRAINING_NAME, 'intro/intro_note_1:label"]'); + expect(secondIntroCard).to.equal( + 'The next few screens will show you the difference.' + ); + + const secondConfirmMessage = await trainingCardsPage.quitTraining(); + expect(secondConfirmMessage.header).to.equal(CONFIRM_TITLE); + expect(secondConfirmMessage.body).to.contain(CONFIRM_CONTENT); + await trainingCardsPage.confirmQuitTraining(); + await trainingCardsPage.checkTrainingCardIsNotDisplayed(); + + const allTrainings = await trainingCardsPage.getAllTrainingsText(); + expect(allTrainings.length).to.equal(2); + expect(allTrainings).to.have.members([ FIRST_TRAINING_NAME, SECOND_TRAINING_NAME ]); + expect(await trainingCardsPage.isTrainingComplete(FIRST_TRAINING_ID)).to.be.true; + expect(await trainingCardsPage.isTrainingComplete(SECOND_TRAINING_ID)).to.be.false; + }); +}); diff --git a/tests/page-objects/default/common/common.wdio.page.js b/tests/page-objects/default/common/common.wdio.page.js index 4c196d6f2f1..14579e7724f 100644 --- a/tests/page-objects/default/common/common.wdio.page.js +++ b/tests/page-objects/default/common/common.wdio.page.js @@ -20,6 +20,7 @@ const hamburgerMenuSelectors = { syncSuccess: () => $('aria/All reports synced'), syncInProgress: () => $('mat-sidenav-content').$('*="Currently syncing"'), aboutButton: () => $('aria/About'), + trainingMaterialsButton: () => $('aria/Training materials'), userSettingsButton: () => $('aria/User settings'), feedbackMenuOption: () => $('aria/Report bug'), logoutButton: () => $('aria/Log out'), @@ -436,6 +437,12 @@ const openUserSettingsAndFetchProperties = async () => { await (await userSettingsSelectors.editProfileButton()).waitForDisplayed(); }; +const openTrainingMaterials = async () => { + await (await hamburgerMenuSelectors.trainingMaterialsButton()).waitForClickable(); + await (await hamburgerMenuSelectors.trainingMaterialsButton()).click(); + await waitForPageLoaded(); +}; + const openEditProfile = async () => { await (await userSettingsSelectors.editProfileButton()).waitForClickable(); await (await userSettingsSelectors.editProfileButton()).click(); @@ -555,6 +562,7 @@ module.exports = { closeReportBug, openAboutMenu, openUserSettings, + openTrainingMaterials, openUserSettingsAndFetchProperties, openEditProfile, openAppManagement, diff --git a/tests/page-objects/default/enketo/training-cards.wdio.page.js b/tests/page-objects/default/enketo/training-cards.wdio.page.js index a88d0579cdb..8726e8e91f9 100644 --- a/tests/page-objects/default/enketo/training-cards.wdio.page.js +++ b/tests/page-objects/default/enketo/training-cards.wdio.page.js @@ -1,11 +1,18 @@ const genericFormPage = require('./generic-form.wdio.page'); const modalPage = require('@page-objects/default/common/modal.wdio.page'); +const commonElements = require('@page-objects/default/common/common.wdio.page'); -const ENKETO_MODAL = '.enketo-modal'; - -const trainingCardsForm = () => $(ENKETO_MODAL); +const trainingCardsForm = () => $('#training-cards-form'); const cardText = (context, field) => $(`.question-label[lang="en"][data-itext-id="/${context}/${field}`); -const quitTrainingBtn = () => $(`${ENKETO_MODAL} .item-content button[test-id="quit-training"]`); +const quitTrainingBtn = () => $('.item-content button[test-id="quit-training"]'); + +const TRAINING_LIST_ID = '#trainings-list'; +const ALL_TRAININGS = `${TRAINING_LIST_ID} li.content-row`; +const leftPanelSelectors = { + allTrainings: () => $$(ALL_TRAININGS), + trainingRowsText: () => $$(`${ALL_TRAININGS} .heading h4 span`), + trainingByUUID: (uuid) => $(`${TRAINING_LIST_ID} li.content-row[data-record-id="${uuid}"]`), +}; const waitForTrainingCards = async () => { await (await trainingCardsForm()).waitForDisplayed(); @@ -15,6 +22,12 @@ const checkTrainingCardIsNotDisplayed = async () => { await (await trainingCardsForm()).waitForDisplayed({ reverse: true }); }; +const getTrainingTitle = async () => { + const title = await $('#form-title'); + await title.waitForDisplayed(); + return title.getText(); +}; + const getCardContent = async (context, field) => { return await (await cardText(context, field)).getText(); }; @@ -35,17 +48,37 @@ const confirmQuitTraining = async () => { await modalPage.checkModalHasClosed(); }; -const submitTraining = async () => { +const submitTraining = async (checkModal = true) => { await genericFormPage.submitForm(); - await modalPage.checkModalHasClosed(); + if (checkModal) { + await modalPage.checkModalHasClosed(); + } +}; + +const openTrainingMaterial = async (formID) => { + await (await leftPanelSelectors.trainingByUUID(formID)).waitForClickable(); + await (await leftPanelSelectors.trainingByUUID(formID)).click(); +}; + +const getAllTrainingsText = async () => { + await (await leftPanelSelectors.allTrainings()[0]).waitForDisplayed(); + return commonElements.getTextForElements(leftPanelSelectors.trainingRowsText); +}; + +const isTrainingComplete = async (formId) => { + return (await $(`[data-record-id="${formId}"] .mat-icon-check`)).isExisting(); }; module.exports = { checkTrainingCardIsNotDisplayed, - waitForTrainingCards, + confirmQuitTraining, + getAllTrainingsText, getCardContent, getNextCardContent, + getTrainingTitle, + isTrainingComplete, + openTrainingMaterial, quitTraining, - confirmQuitTraining, submitTraining, + waitForTrainingCards, }; diff --git a/webapp/src/css/content-list.less b/webapp/src/css/content-list.less index 9df79d09088..9401940fdcf 100644 --- a/webapp/src/css/content-list.less +++ b/webapp/src/css/content-list.less @@ -217,6 +217,21 @@ } } +.trainings .content-row { + &.selected, &.selected-to-view { + background-color: @training-highlight; + } + + &:hover { + border-left-color: @training-color; + } + + &.completed .mat-icon-check { + padding-top: 6px; + color: @completed-state-color; + } +} + .contacts .content-row { &.selected { background-color: @contacts-highlight; diff --git a/webapp/src/css/inbox.less b/webapp/src/css/inbox.less index 71a71b4af99..8e324ff468a 100644 --- a/webapp/src/css/inbox.less +++ b/webapp/src/css/inbox.less @@ -53,18 +53,20 @@ body { } &.about, + &.trainings, &.testing, &.user, &.privacy-policy { .tool-bar { background-color: @top-header-color; - .ellipsis-title { + .ellipsis-title, + .app-menu-button .mat-icon[fonticon="fa-bars"]:before { color: @text-inverse-color; } - .app-menu-button .mat-icon[fonticon="fa-bars"]:before { - color: @text-inverse-color; + .navigation .mat-icon-back path { + fill: @text-inverse-color; } } @@ -479,7 +481,10 @@ mm-analytics-filters { background-color: @background-color; } -.reports .inbox-items, .contacts .inbox-items, .messages .inbox-items { +.reports .inbox-items, +.contacts .inbox-items, +.messages .inbox-items, +.trainings .inbox-items { overflow-y: hidden; overflow-x: hidden; height: 100%; @@ -846,6 +851,7 @@ a.fa:hover { .reports, .messages, +.trainings, .tasks { .item-content { .body { @@ -1376,6 +1382,11 @@ mm-sidebar-menu .mat-sidenav-container { margin-left: 10px; flex-shrink: 0; } + + mat-icon.fa-graduation-cap:before { + font-size: @font-medium; + vertical-align: middle; + } } .nav-item:not(:not(.hidden) ~ .nav-item) { // The first element without .hidden class, compatible with Chrome +90 @@ -1432,6 +1443,7 @@ mm-sidebar-menu .mat-sidenav-container { &.messages, &.tasks, &.reports, + &.trainings, &.contacts { .loading-status { margin: 10px 10px calc(@tab-navbar-size + 10px); @@ -1667,6 +1679,7 @@ mm-sidebar-menu .mat-sidenav-container { } } .reports, + .trainings, .tasks { .content .item-content .body > div > ul > li { padding: 10px; diff --git a/webapp/src/css/modal.less b/webapp/src/css/modal.less index 5e2dc806890..80e70b07d6f 100644 --- a/webapp/src/css/modal.less +++ b/webapp/src/css/modal.less @@ -36,6 +36,7 @@ mm-modal-layout { .modal-footer { padding: 24px 0; + margin-bottom: 0; } } @@ -55,7 +56,8 @@ mm-modal-layout { text-align: left; } - .enketo-modal { + .enketo-modal, + .modal-body training-cards-confirm { &.content-pane { position: relative; } @@ -63,15 +65,13 @@ mm-modal-layout { .item-content { padding: 0; background: none; + & > .body { + margin: 0; + } } .modal-body { overflow: hidden; - margin-bottom: 11px; - } - - .modal-footer { - padding: 0; } .enketo { @@ -100,18 +100,31 @@ mm-modal-layout { } } - form { - max-height: 65vh; + form.pages [role=page].current { + margin: 0; + display: block; + max-height: @training-cards-page-height; overflow-y: auto; + padding-bottom: @training-cards-footer-height; } } - .form-no-title #form-title { - display: none; + #form-title { + font-size: @font-XXL; + font-weight: normal; + letter-spacing: normal; + border: none; + background: @form-background-color; + width: 100%; } .form-footer { - padding: 24px 0; + position: absolute; + bottom: 0; + margin: 0; + background: @form-background-color; + padding: 20px 0; + z-index: 20; .btn, .btn:active, .btn:focus { @@ -121,16 +134,24 @@ mm-modal-layout { } } } + + &:not(.has-error) .enketo-modal .modal-footer { + padding: 0; + } + + &.has-error .enketo-modal .modal-body { + padding-top: 40px; + } + + .enketo-modal training-cards-confirm .modal-footer { + margin-bottom: 20px; + } } @media (max-width: @media-mobile) { mm-modal-layout { .enketo-modal { .enketo { - form { - max-height: 60vh; - } - .form-footer { .btn.btn-link.cancel { display: inline-block; @@ -142,13 +163,9 @@ mm-modal-layout { } } - // The form title is hidden by default for mobile devices, but in training cards, the title is optional. - :not(.form-no-title) #form-title { - display: inherit; - } - - .form-no-title #form-title { - display: none; + // The form's title is hidden by default for mobile devices; but in training cards, the title is displayed. + #form-title { + display: inline-block; } } } diff --git a/webapp/src/css/old-nav.less b/webapp/src/css/old-nav.less index c2d2dae7864..87c928d0f30 100644 --- a/webapp/src/css/old-nav.less +++ b/webapp/src/css/old-nav.less @@ -8,6 +8,18 @@ padding-top: 0; } + &.trainings { + .content .inner .page { + padding-top: 0; + padding-left: 0; + top: @top-without-filter; + } + + .tool-bar .inner { + background-color: @top-header-color; + } + } + .app-menu-button { display: none; } @@ -435,6 +447,10 @@ .targets .target:last-child { margin-bottom: 10px; } + + &.trainings.show-content .content .inner .page { + top: @toolbar-mobile-height; + } } #target-aggregates-list { diff --git a/webapp/src/css/variables.less b/webapp/src/css/variables.less index 3be3de65763..7453356dc76 100644 --- a/webapp/src/css/variables.less +++ b/webapp/src/css/variables.less @@ -68,6 +68,8 @@ @contacts-highlight: @pink-highlight; @reports-color: @yellow; @reports-highlight: @yellow-highlight; +@training-color: @gray-medium; +@training-highlight: @gray-ultra-lighter; @analytics-color: @teal; @analytics-highlight: @teal-highlight; @admin-color: @gray-dark; @@ -78,6 +80,7 @@ @pending-state-color: @yellow; @success-state-color: @teal-dark; @sent-state-color: @teal-dark; +@completed-state-color: @teal-dark; @muted-state-color: @gray-medium; @failed-state-color: @red; @cleared-state-color: @gray-medium; @@ -122,6 +125,8 @@ @tab-navbar-size: 80px; @more-options-icon-size-mobile: 32px; @more-options-icon-size-desktop: 24px; +@training-cards-footer-height: 95px; +@training-cards-page-height: 54vh; /* fonts */ @font-family-main: Noto, sans-serif; diff --git a/webapp/src/img/icon-check.svg b/webapp/src/img/icon-check.svg new file mode 100644 index 00000000000..cd4d2dece43 --- /dev/null +++ b/webapp/src/img/icon-check.svg @@ -0,0 +1,4 @@ + + + + diff --git a/webapp/src/ts/actions/global.ts b/webapp/src/ts/actions/global.ts index c058d2e395f..0e1472723e5 100644 --- a/webapp/src/ts/actions/global.ts +++ b/webapp/src/ts/actions/global.ts @@ -11,6 +11,7 @@ export const Actions = { setLoadingContent: createSingleValueAction('SET_LOADING_CONTENT', 'loadingContent'), setShowContent: createSingleValueAction('SET_SHOW_CONTENT', 'showContent'), setForms: createSingleValueAction('SET_FORMS', 'forms'), + setTrainingMaterials: createSingleValueAction('SET_TRAINING_MATERIALS', 'trainingMaterials'), clearFilters: createSingleValueAction('CLEAR_FILTERS', 'skip'), setFilter: createSingleValueAction('SET_FILTER', 'filter'), setSidebarFilter: createSingleValueAction('SET_SIDEBAR_FILTER', 'sidebarFilter'), @@ -38,6 +39,7 @@ export const Actions = { openSidebarMenu: createAction('OPEN_SIDEBAR_MENU'), setSearchBar: createSingleValueAction('SET_SEARCH_BAR', 'searchBar'), setTrainingCard: createSingleValueAction('SET_TRAINING_CARD', 'trainingCard'), + clearTrainingCards: createAction('CLEAR_TRAINING_CARDS'), }; export class GlobalActions { @@ -71,6 +73,10 @@ export class GlobalActions { return this.store.dispatch(Actions.setForms(forms)); } + setTrainingMaterials(trainingMaterials) { + return this.store.dispatch(Actions.setTrainingMaterials(trainingMaterials)); + } + setShowContent(showContent) { return this.store.dispatch(Actions.setShowContent(showContent)); } @@ -100,6 +106,15 @@ export class GlobalActions { return this.store.dispatch(Actions.setTrainingCard(trainingCard)); } + clearTrainingCards() { + this.setTrainingCard({ + formId: null, + isOpen: false, + showConfirmExit: false, + nextUrl: null, + }); + } + clearSidebarFilter() { return this.store.dispatch(Actions.clearSidebarFilter()); } diff --git a/webapp/src/ts/app-routing.module.ts b/webapp/src/ts/app-routing.module.ts index 3ecbaafc0cd..9ba91864672 100644 --- a/webapp/src/ts/app-routing.module.ts +++ b/webapp/src/ts/app-routing.module.ts @@ -11,6 +11,7 @@ import { routes as messagesRoutes } from '@mm-modules/messages/messages.routes'; import { routes as contactsRoutes } from '@mm-modules/contacts/contacts.routes'; import { routes as privacyPolicyRoutes } from '@mm-modules/privacy-policy/privacy-policy.routes'; import { routes as tasksRoutes } from '@mm-modules/tasks/tasks.routes'; +import { routes as trainingRoutes } from '@mm-modules/trainings/trainings.routes'; import { routes as testingRoutes } from '@mm-modules/testing/testing.routes'; const routes: Routes = [ @@ -23,6 +24,7 @@ const routes: Routes = [ ...contactsRoutes, ...privacyPolicyRoutes, ...tasksRoutes, + ...trainingRoutes, ...testingRoutes, ...errorRoutes, ]; diff --git a/webapp/src/ts/app.component.ts b/webapp/src/ts/app.component.ts index 6ee6738633a..a0079893d52 100644 --- a/webapp/src/ts/app.component.ts +++ b/webapp/src/ts/app.component.ts @@ -83,7 +83,6 @@ export class AppComponent implements OnInit, AfterViewInit { private analyticsActions: AnalyticsActions; setupPromise; translationsLoaded; - currentTab = ''; privacyPolicyAccepted; isSidebarFilterOpen = false; @@ -94,14 +93,13 @@ export class AppComponent implements OnInit, AfterViewInit { canLogOut; replicationStatus; androidAppVersion; - unreadCount = {}; hasOldNav = false; initialisationComplete = false; - trainingCardFormId = ''; private readonly SVG_ICONS = new Map([ ['icon-close', './img/icon-close.svg'], ['icon-filter', './img/icon-filter.svg'], ['icon-back', './img/icon-back.svg'], + ['icon-check', './img/icon-check.svg'], ]); constructor ( @@ -482,16 +480,9 @@ export class AppComponent implements OnInit, AfterViewInit { combineLatest([ this.store.select(Selectors.getPrivacyPolicyAccepted), this.store.select(Selectors.getShowPrivacyPolicy), - this.store.select(Selectors.getTrainingCardFormId), - ]).subscribe(([ - privacyPolicyAccepted, - showPrivacyPolicy, - trainingCardFormId, - ]) => { + ]).subscribe(([ privacyPolicyAccepted, showPrivacyPolicy ]) => { this.showPrivacyPolicy = showPrivacyPolicy; this.privacyPolicyAccepted = privacyPolicyAccepted; - this.trainingCardFormId = trainingCardFormId || ''; - this.displayTrainingCards(); }); combineLatest([ @@ -502,14 +493,6 @@ export class AppComponent implements OnInit, AfterViewInit { }); } - private displayTrainingCards() { - if (!this.trainingCardFormId || (this.showPrivacyPolicy && !this.privacyPolicyAccepted)) { - return; - } - - this.trainingCardsService.displayTrainingCards(); - } - private async subscribeToSideFilterStore() { this.store .select(Selectors.getSidebarFilter) diff --git a/webapp/src/ts/components/components.module.ts b/webapp/src/ts/components/components.module.ts index f983ff0dd06..0c930b97e08 100644 --- a/webapp/src/ts/components/components.module.ts +++ b/webapp/src/ts/components/components.module.ts @@ -46,6 +46,7 @@ import { ModalLayoutComponent } from '@mm-components/modal-layout/modal-layout.c import { PanelHeaderComponent } from '@mm-components/panel-header/panel-header.component'; import { SidebarMenuComponent } from '@mm-components/sidebar-menu/sidebar-menu.component'; import { ToolBarComponent } from '@mm-components/tool-bar/tool-bar.component'; +import { TrainingCardsFormComponent } from '@mm-components/training-cards-form/training-cards-form.component'; @NgModule({ declarations: [ @@ -75,6 +76,7 @@ import { ToolBarComponent } from '@mm-components/tool-bar/tool-bar.component'; ModalLayoutComponent, PanelHeaderComponent, SidebarMenuComponent, + TrainingCardsFormComponent, ToolBarComponent, ], imports: [ @@ -118,6 +120,7 @@ import { ToolBarComponent } from '@mm-components/tool-bar/tool-bar.component'; ModalLayoutComponent, PanelHeaderComponent, SidebarMenuComponent, + TrainingCardsFormComponent, ToolBarComponent, ] }) diff --git a/webapp/src/ts/components/header/header.component.html b/webapp/src/ts/components/header/header.component.html index be5bd14f2f2..cd347ff4880 100644 --- a/webapp/src/ts/components/header/header.component.html +++ b/webapp/src/ts/components/header/header.component.html @@ -75,6 +75,12 @@ +
  • + + + {{'training_materials.page.title' | translate}} + +
  • diff --git a/webapp/src/ts/components/modal-layout/modal-layout.component.html b/webapp/src/ts/components/modal-layout/modal-layout.component.html index 105d9cc16bb..40e97d26b33 100644 --- a/webapp/src/ts/components/modal-layout/modal-layout.component.html +++ b/webapp/src/ts/components/modal-layout/modal-layout.component.html @@ -1,5 +1,5 @@
    - +
    diff --git a/webapp/src/ts/components/sidebar-menu/sidebar-menu.component.ts b/webapp/src/ts/components/sidebar-menu/sidebar-menu.component.ts index 3cee129ba70..bf2ddbe6b8e 100644 --- a/webapp/src/ts/components/sidebar-menu/sidebar-menu.component.ts +++ b/webapp/src/ts/components/sidebar-menu/sidebar-menu.component.ts @@ -129,6 +129,12 @@ export class SidebarMenuComponent implements OnInit, OnDestroy { private setSecondaryOptions(showPrivacyPolicy = false) { this.secondaryOptions = [ + { + routerLink: 'trainings', + icon: 'fa-graduation-cap', + translationKey: 'training_materials.page.title', + canDisplay: true, + }, { routerLink: 'about', icon: 'fa-question', diff --git a/webapp/src/ts/components/training-cards-form/training-cards-form.component.html b/webapp/src/ts/components/training-cards-form/training-cards-form.component.html new file mode 100644 index 00000000000..2ef7a86c6d3 --- /dev/null +++ b/webapp/src/ts/components/training-cards-form/training-cards-form.component.html @@ -0,0 +1,15 @@ +
    +
    +
    {{ errorTranslationKey | translate }}
    +
    + +
    +
    + + +
    +
    diff --git a/webapp/src/ts/components/training-cards-form/training-cards-form.component.ts b/webapp/src/ts/components/training-cards-form/training-cards-form.component.ts new file mode 100644 index 00000000000..d2c40715cd8 --- /dev/null +++ b/webapp/src/ts/components/training-cards-form/training-cards-form.component.ts @@ -0,0 +1,230 @@ +import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from '@angular/core'; +import { Store } from '@ngrx/store'; +import { combineLatest, Subscription } from 'rxjs'; + +import { XmlFormsService } from '@mm-services/xml-forms.service'; +import { FormService } from '@mm-services/form.service'; +import { Selectors } from '@mm-selectors/index'; +import { GlobalActions } from '@mm-actions/global'; +import { GeolocationService } from '@mm-services/geolocation.service'; +import { TranslateService } from '@mm-services/translate.service'; +import { PerformanceService } from '@mm-services/performance.service'; +import { EnketoFormContext } from '@mm-services/enketo.service'; +import { TranslateFromService } from '@mm-services/translate-from.service'; + +@Component({ + selector: 'training-cards-form', + templateUrl: './training-cards-form.component.html', +}) +export class TrainingCardsFormComponent implements OnInit, OnDestroy { + @Input() isEmbedded = true; + @Output() quit = new EventEmitter(); + @Output() save = new EventEmitter(); + @Output() handleError = new EventEmitter(); + private geoHandle:any; + private readonly globalActions: GlobalActions; + private trackRender; + private trackEditDuration; + private trackSave; + private trackMetadata = { action: '', form: '' }; + readonly FORM_WRAPPER_ID = 'training-cards-form'; + trainingCardFormId: null | string = null; + formNoTitle = false; + form; + loadingContent = true; + contentError; + errorTranslationKey; + enketoError; + enketoStatus; + enketoSaving; + subscriptions: Subscription = new Subscription(); + + constructor( + private readonly ngZone: NgZone, + private readonly store: Store, + private readonly xmlFormsService: XmlFormsService, + private readonly formService: FormService, + private readonly geolocationService: GeolocationService, + private readonly translateService: TranslateService, + private readonly performanceService: PerformanceService, + private readonly translateFromService: TranslateFromService, + ) { + this.globalActions = new GlobalActions(this.store); + } + + ngOnInit() { + this.trackRender = this.performanceService.track(); + this.reset(); + this.subscribeToStore(); + } + + ngOnDestroy() { + this.subscriptions.unsubscribe(); + this.geoHandle?.cancel(); + // old code checked whether the component is reused before unloading the form + // this is because AngularJS created the new "controller" before destroying the old one + // in Angular, unless specific RouteReuseStrategies are employed, components are always + // destroyed before new ones are created + // see https://github.com/angular/angular/blob/10.2.x/packages/router/src/operators/activate_routes.ts#L37 + // for Angular behavior + // see https://github.com/medic/cht-core/issues/2198#issuecomment-210202785 for AngularJS behavior + this.formService.unload(this.form); + this.globalActions.clearEnketoStatus(); + } + + private subscribeToStore() { + const reduxSubscription = combineLatest([ + this.store.select(Selectors.getEnketoStatus), + this.store.select(Selectors.getEnketoSavingStatus), + this.store.select(Selectors.getEnketoError), + this.store.select(Selectors.getTrainingCardFormId), + ]).subscribe(([ + enketoStatus, + enketoSaving, + enketoError, + trainingCardFormId, + ]) => { + this.enketoStatus = enketoStatus; + this.enketoSaving = enketoSaving; + this.enketoError = enketoError; + + if (trainingCardFormId && trainingCardFormId !== this.trainingCardFormId) { + this.trainingCardFormId = trainingCardFormId; + this.loadForm(); + } + }); + this.subscriptions.add(reduxSubscription); + } + + private loadForm() { + this.ngZone.runOutsideAngular(() => this._loadForm()); + } + + private async _loadForm() { + try { + this.loadingContent = true; + this.geoHandle?.cancel(); + this.geoHandle = this.geolocationService.init(); + const form = await this.xmlFormsService.get(this.trainingCardFormId); + await this.ngZone.run(() => this.renderForm(form)); + } catch (error) { + this.setError(error); + console.error('TrainingCardsFormComponent :: Error fetching form.', error); + } + } + + private async renderForm(formDoc) { + try { + const formContext = new EnketoFormContext(`#${this.FORM_WRAPPER_ID}`, 'training-card', formDoc); + formContext.isFormInModal = !this.isEmbedded; + formContext.valuechangeListener = this.resetFormError.bind(this); + + this.form = await this.formService.render(formContext); + this.formNoTitle = !formDoc?.title; + this.setNavigationTitle(formDoc); + this.showContent(); + this.recordPerformancePostRender(); + } catch (error) { + this.setError(error); + console.error('TrainingCardsFormComponent :: Error rendering form.', error); + } + } + + private showContent() { + this.loadingContent = false; + if (!this.isEmbedded) { + return; + } + this.globalActions.setShowContent(true); + } + + private setNavigationTitle(formDoc) { + if (!this.isEmbedded) { + return; + } + + if (formDoc?.translation_key) { + this.globalActions.setTitle(this.translateService.instant(formDoc.translation_key)); + return; + } + + if (formDoc?.title) { + this.globalActions.setTitle(this.translateFromService.get(formDoc?.title)); + return; + } + + this.globalActions.setTitle(formDoc?.internalId); + } + + private reset() { + this.resetFormError(); + this.contentError = false; + this.trainingCardFormId = null; + this.form = null; + this.loadingContent = true; + } + + private resetFormError() { + if (this.enketoError) { + this.globalActions.setEnketoError(null); + } + } + + setError(error) { + this.errorTranslationKey = error?.translationKey || 'training_cards.error.loading'; + this.contentError = true; + this.handleError.emit(); + this.showContent(); + } + + async saveForm() { + if (this.enketoSaving) { + console.debug('Attempted to call TrainingCardsFormComponent:saveForm more than once'); + return; + } + + this.recordPerformancePreSave(); + this.globalActions.setEnketoSavingStatus(true); + this.resetFormError(); + + try { + const docs = await this.formService.save(this.trainingCardFormId, this.form, this.geoHandle); + console.debug('Saved form and associated docs', docs); + const snackText = await this.translateService.get('training_cards.form.saved'); + this.globalActions.setSnackbarContent(snackText); + this.globalActions.setEnketoSavingStatus(false); + this.formService.unload(this.form); + this.globalActions.unsetSelected(); + this.recordPerformancePostSave(); + this.save.emit(); + } catch (error) { + this.globalActions.setEnketoSavingStatus(false); + console.error('TrainingCardsFormComponent :: Error submitting form data.', error); + const friendlyMessage = await this.translateService.get('training_cards.error.save'); + this.globalActions.setEnketoError(friendlyMessage); + } + } + + private recordPerformancePostRender() { + this.trackMetadata.action = 'add'; + this.trackMetadata.form = this.trainingCardFormId!; + this.trackRender?.stop({ + name: [ 'enketo', this.trackMetadata.form, this.trackMetadata.action, 'render' ].join(':'), + recordApdex: true, + }); + this.trackEditDuration = this.performanceService.track(); + } + + private recordPerformancePreSave() { + this.trackEditDuration?.stop({ + name: [ 'enketo', this.trackMetadata.form, this.trackMetadata.action, 'user_edit_time' ].join(':'), + }); + this.trackSave = this.performanceService.track(); + } + + private recordPerformancePostSave() { + this.trackSave?.stop({ + name: [ 'enketo', this.trackMetadata.form, this.trackMetadata.action, 'save' ].join(':'), + }); + } +} diff --git a/webapp/src/ts/modals/modals.module.ts b/webapp/src/ts/modals/modals.module.ts index 9612024cd8b..43f1ed2b68c 100644 --- a/webapp/src/ts/modals/modals.module.ts +++ b/webapp/src/ts/modals/modals.module.ts @@ -23,6 +23,7 @@ import { EditMessageGroupComponent } from '@mm-modals/edit-message-group/edit-me import { SessionExpiredComponent } from '@mm-modals/session-expired/session-expired.component'; import { DatabaseClosedComponent } from '@mm-modals/database-closed/database-closed.component'; import { ContactsMutedComponent } from '@mm-modals/contacts-muted/contacts-muted.component'; +import { TrainingCardsConfirmComponent } from '@mm-modals/training-cards-confirm/training-cards-confirm.component'; import { BrowserCompatibilityComponent } from '@mm-modals/browser-compatibility/browser-compatibility.component'; @@ -45,6 +46,7 @@ import { BrowserCompatibilityComponent } from '@mm-modals/browser-compatibility/ SessionExpiredComponent, DatabaseClosedComponent, ContactsMutedComponent, + TrainingCardsConfirmComponent, BrowserCompatibilityComponent, ], imports: [ @@ -69,6 +71,7 @@ import { BrowserCompatibilityComponent } from '@mm-modals/browser-compatibility/ CheckDateComponent, EditMessageGroupComponent, SessionExpiredComponent, + TrainingCardsConfirmComponent, BrowserCompatibilityComponent, ] }) diff --git a/webapp/src/ts/modals/training-cards-confirm/training-cards-confirm.component.html b/webapp/src/ts/modals/training-cards-confirm/training-cards-confirm.component.html new file mode 100644 index 00000000000..f9ba1f54796 --- /dev/null +++ b/webapp/src/ts/modals/training-cards-confirm/training-cards-confirm.component.html @@ -0,0 +1,12 @@ +
    + +
    {{ 'training_cards.confirm.exit' | translate }}
    + +
    + + +
    + +
    diff --git a/webapp/src/ts/modals/training-cards-confirm/training-cards-confirm.component.ts b/webapp/src/ts/modals/training-cards-confirm/training-cards-confirm.component.ts new file mode 100644 index 00000000000..8e54bda3a58 --- /dev/null +++ b/webapp/src/ts/modals/training-cards-confirm/training-cards-confirm.component.ts @@ -0,0 +1,33 @@ +import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core'; +import { Store } from '@ngrx/store'; +import { Subscription } from 'rxjs'; + +import { Selectors } from '@mm-selectors/index'; + +@Component({ + selector: 'training-cards-confirm', + templateUrl: './training-cards-confirm.component.html' +}) +export class TrainingCardsConfirmComponent implements OnInit, OnDestroy { + @Output() exit = new EventEmitter(); + @Output() stay = new EventEmitter(); + nextUrl: null | string = null; + subscriptions: Subscription = new Subscription(); + + constructor(private readonly store: Store) {} + + ngOnInit() { + this.subscribeToStore(); + } + + ngOnDestroy() { + this.subscriptions.unsubscribe(); + } + + private subscribeToStore() { + const reduxSubscription = this.store + .select(Selectors.getTrainingCard) + .subscribe(trainingCard => this.nextUrl = trainingCard.nextUrl); + this.subscriptions.add(reduxSubscription); + } +} diff --git a/webapp/src/ts/modals/training-cards/training-cards.component.html b/webapp/src/ts/modals/training-cards/training-cards.component.html index b702c2234f7..f9d8c604e86 100644 --- a/webapp/src/ts/modals/training-cards/training-cards.component.html +++ b/webapp/src/ts/modals/training-cards/training-cards.component.html @@ -1,36 +1,18 @@ + [class.has-error]="hasError"> -
    -
    -
    + -
    -
    {{ errorTranslationKey | translate }}
    -
    - -
    -
    {{ 'training_cards.confirm.exit' | translate }}
    -
    - - -
    -
    - -
    -
    - - -
    -
    +     diff --git a/webapp/src/ts/modals/training-cards/training-cards.component.ts b/webapp/src/ts/modals/training-cards/training-cards.component.ts index 47a9397499b..94277c1baf8 100644 --- a/webapp/src/ts/modals/training-cards/training-cards.component.ts +++ b/webapp/src/ts/modals/training-cards/training-cards.component.ts @@ -1,243 +1,83 @@ -import { Component, NgZone, OnDestroy, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { Store } from '@ngrx/store'; import { combineLatest, Subscription } from 'rxjs'; import { MatDialogRef } from '@angular/material/dialog'; import { Router } from '@angular/router'; -import { XmlFormsService } from '@mm-services/xml-forms.service'; -import { FormService } from '@mm-services/form.service'; import { Selectors } from '@mm-selectors/index'; import { GlobalActions } from '@mm-actions/global'; -import { GeolocationService } from '@mm-services/geolocation.service'; -import { TranslateService } from '@mm-services/translate.service'; import { PerformanceService } from '@mm-services/performance.service'; -import { EnketoFormContext } from '@mm-services/enketo.service'; @Component({ selector: 'training-cards-modal', templateUrl: './training-cards.component.html' }) export class TrainingCardsComponent implements OnInit, OnDestroy { + readonly MODAL_ID = 'training-cards-modal'; + private readonly globalActions: GlobalActions; + private trackRender; + private trainingCardID; + hasError = false; + showConfirmExit = false; + subscriptions: Subscription = new Subscription(); constructor( - private ngZone: NgZone, - private store: Store, + private readonly store: Store, private readonly router: Router, - private xmlFormsService: XmlFormsService, - private formService: FormService, - private geolocationService: GeolocationService, - private translateService: TranslateService, - private performanceService: PerformanceService, - private matDialogRef: MatDialogRef, + private readonly matDialogRef: MatDialogRef, + private readonly performanceService: PerformanceService, ) { this.globalActions = new GlobalActions(this.store); } - static id = 'training-cards-modal'; - private geoHandle:any; - private globalActions; - private trackRender; - private trackEditDuration; - private trackSave; - private trackMetadata = { action: '', form: '' }; - formNoTitle = false; - form; - trainingCardFormId; - formWrapperId = 'training-cards-form'; - modalTitleKey = 'training_cards.modal.title'; - loadingContent; - contentError; - hideModalFooter; - errorTranslationKey; - enketoError; - enketoStatus; - enketoSaving; - showConfirmExit; - nextUrl; - subscription: Subscription = new Subscription(); - ngOnInit() { this.trackRender = this.performanceService.track(); - this.reset(); this.subscribeToStore(); this.globalActions.setTrainingCard({ isOpen: true }); } ngOnDestroy() { - this.subscription.unsubscribe(); - this.geoHandle?.cancel(); - // old code checked whether the component is reused before unloading the form - // this is because AngularJS created the new "controller" before destroying the old one - // in Angular, unless specific RouteReuseStrategies are employed, components are always - // destroyed before new ones are created - // see https://github.com/angular/angular/blob/10.2.x/packages/router/src/operators/activate_routes.ts#L37 - // for Angular behavior - // see https://github.com/medic/cht-core/issues/2198#issuecomment-210202785 for AngularJS behavior - this.formService.unload(this.form); - this.globalActions.clearEnketoStatus(); - this.globalActions.setTrainingCard({ formId: null, isOpen: false, showConfirmExit: false, nextUrl: null }); - } - - private loadForm() { - this.ngZone.runOutsideAngular(() => this._loadForm()); - } - - private async _loadForm() { - try { - this.loadingContent = true; - this.hideModalFooter = true; - this.geoHandle && this.geoHandle.cancel(); - this.geoHandle = this.geolocationService.init(); - const form = await this.xmlFormsService.get(this.trainingCardFormId); - await this.ngZone.run(() => this.renderForm(form)); - } catch (error) { - this.setError(error); - console.error('Training Cards :: Error fetching form.', error); - } - } - - private async renderForm(formDoc) { - try { - const formContext = new EnketoFormContext(`#${this.formWrapperId}`, 'training-card', formDoc); - formContext.isFormInModal = true; - formContext.valuechangeListener = this.resetFormError.bind(this); - - this.form = await this.formService.render(formContext); - this.formNoTitle = !formDoc?.title; - this.loadingContent = false; - this.recordPerformancePostRender(); - } catch (error) { - this.setError(error); - console.error('Training Cards :: Error rendering form.', error); - } + this.subscriptions.unsubscribe(); + this.globalActions.clearTrainingCards(); } private subscribeToStore() { - const reduxSubscription = combineLatest([ - this.store.select(Selectors.getEnketoStatus), - this.store.select(Selectors.getEnketoSavingStatus), - this.store.select(Selectors.getEnketoError), - this.store.select(Selectors.getTrainingCardFormId), + const subscription = combineLatest([ this.store.select(Selectors.getTrainingCard), - ]).subscribe(([ - enketoStatus, - enketoSaving, - enketoError, - trainingCardFormId, - trainingCard, - ]) => { - this.enketoStatus = enketoStatus; - this.enketoSaving = enketoSaving; - this.enketoError = enketoError; - this.showConfirmExit = trainingCard.showConfirmExit; - this.nextUrl = trainingCard.nextUrl; - - if (trainingCardFormId && trainingCardFormId !== this.trainingCardFormId) { - this.trainingCardFormId = trainingCardFormId; - this.loadForm(); - } + this.store.select(Selectors.getTrainingCardFormId), + ]).subscribe(([trainingCard, trainingCardID]) => { + this.showConfirmExit = trainingCard?.showConfirmExit; + this.trainingCardID = trainingCardID; }); - this.subscription.add(reduxSubscription); - } - - private reset() { - this.resetFormError(); - this.contentError = false; - this.trainingCardFormId = null; - this.form = null; - this.loadingContent = true; - this.hideModalFooter = true; - } - - private resetFormError() { - if (this.enketoError) { - this.globalActions.setEnketoError(null); - } - } - - setError(error) { - this.errorTranslationKey = error?.translationKey || 'training_cards.error.loading'; - this.loadingContent = false; - this.hideModalFooter = false; - this.contentError = true; + this.subscriptions.add(subscription); } close() { - this.globalActions.setTrainingCard({ formId: null, isOpen: false, showConfirmExit: false, nextUrl: null }); this.matDialogRef.close(); + this.globalActions.clearTrainingCards(); } - async saveForm() { - if (this.enketoSaving) { - console.debug('Attempted to call TrainingCardsComponent:saveForm more than once'); - return; - } - - this.recordPerformancePreSave(); - this.globalActions.setEnketoSavingStatus(true); - this.resetFormError(); - - try { - const docs = await this.formService.save(this.trainingCardFormId, this.form, this.geoHandle); - console.debug('Saved form and associated docs', docs); - const snackText = await this.translateService.get('training_cards.form.saved'); - this.globalActions.setSnackbarContent(snackText); - this.globalActions.setEnketoSavingStatus(false); - this.formService.unload(this.form); - this.recordPerformancePostSave(); - this.close(); - - } catch (error) { - this.globalActions.setEnketoSavingStatus(false); - console.error('Training Cards :: Error submitting form data.', error); - const friendlyMessage = await this.translateService.get('training_cards.error.save'); - this.globalActions.setEnketoError(friendlyMessage); - } + continueTraining() { + this.globalActions.setTrainingCard({ showConfirmExit: false }); } - private recordPerformancePostRender() { - this.trackMetadata.action = 'add'; - this.trackMetadata.form = this.trainingCardFormId; + exitTraining(nextUrl: string) { this.trackRender?.stop({ - name: [ 'enketo', this.trackMetadata.form, this.trackMetadata.action, 'render' ].join(':') + name: [ 'enketo', this.trainingCardID, 'add', 'quit' ].join(':'), }); - this.trackEditDuration = this.performanceService.track(); - } - - private recordPerformancePreSave() { - this.trackEditDuration?.stop({ - name: [ 'enketo', this.trackMetadata.form, this.trackMetadata.action, 'user_edit_time' ].join(':'), - }); - this.trackSave = this.performanceService.track(); - } - private recordPerformancePostSave() { - this.trackSave?.stop({ - name: [ 'enketo', this.trackMetadata.form, this.trackMetadata.action, 'save' ].join(':'), - }); - } + if (nextUrl) { + this.router.navigateByUrl(nextUrl); + } - private recordPerformanceQuitTraining() { - this.trackEditDuration?.stop({ - name: [ 'enketo', this.trackMetadata.form, this.trackMetadata.action, 'quit' ].join(':'), - }); + this.close(); } - confirmExit(confirm) { - if (this.contentError) { - this.close(); + quit() { + if (!this.hasError) { + this.globalActions.setTrainingCard({ showConfirmExit: true }); return; } - this.showConfirmExit = confirm; - } - - quitTraining() { - this.recordPerformanceQuitTraining(); - - if (this.nextUrl) { - this.router.navigateByUrl(this.nextUrl); - } - this.close(); } } diff --git a/webapp/src/ts/modules/modules.module.ts b/webapp/src/ts/modules/modules.module.ts index 38705b91c54..3adb183516c 100644 --- a/webapp/src/ts/modules/modules.module.ts +++ b/webapp/src/ts/modules/modules.module.ts @@ -41,11 +41,14 @@ import { AnalyticsTargetAggregatesSidebarFilterComponent } import { AnalyticsTargetAggregatesDetailComponent } from '@mm-modules/analytics/analytics-target-aggregates-detail.component'; +import { TrainingsComponent } from '@mm-modules/trainings/trainings.component'; +import { TrainingsContentComponent } from '@mm-modules/trainings/trainings-content.component'; import { TasksComponent } from '@mm-modules/tasks/tasks.component'; import { TasksContentComponent } from '@mm-modules/tasks/tasks-content.component'; import { TasksGroupComponent } from '@mm-modules/tasks/tasks-group.component'; import { TestingComponent } from '@mm-modules/testing/testing.component'; import { DirectivesModule } from '@mm-directives/directives.module'; +import { ModalsModule } from '@mm-modals/modals.module'; @NgModule({ declarations: [ @@ -74,6 +77,8 @@ import { DirectivesModule } from '@mm-directives/directives.module'; AnalyticsTargetAggregatesComponent, AnalyticsTargetAggregatesDetailComponent, AnalyticsTargetAggregatesSidebarFilterComponent, + TrainingsComponent, + TrainingsContentComponent, TasksComponent, TasksContentComponent, TasksGroupComponent, @@ -94,6 +99,7 @@ import { DirectivesModule } from '@mm-directives/directives.module'; MatDialogModule, MatExpansionModule, MatMenuModule, + ModalsModule, ], exports: [ HomeComponent, @@ -104,6 +110,8 @@ import { DirectivesModule } from '@mm-directives/directives.module'; ReportsComponent, MessagesComponent, ContactsComponent, + TrainingsComponent, + TrainingsContentComponent, PrivacyPolicyComponent, TasksComponent, ] diff --git a/webapp/src/ts/modules/tasks/tasks.component.html b/webapp/src/ts/modules/tasks/tasks.component.html index bad7260cce7..faea4ce565b 100644 --- a/webapp/src/ts/modules/tasks/tasks.component.html +++ b/webapp/src/ts/modules/tasks/tasks.component.html @@ -6,10 +6,10 @@
    • + [attr.data-record-id]="task._id" + [class.selected]="task.selected" + [class.overdue]="task.overdue" + class="content-row">
      diff --git a/webapp/src/ts/modules/trainings/trainings-content.component.html b/webapp/src/ts/modules/trainings/trainings-content.component.html new file mode 100644 index 00000000000..f9843168916 --- /dev/null +++ b/webapp/src/ts/modules/trainings/trainings-content.component.html @@ -0,0 +1,21 @@ +
      +
      +
      {{ 'training_materials.page.no_selected' | translate }}
      +
      + + +
      + + + + + + diff --git a/webapp/src/ts/modules/trainings/trainings-content.component.ts b/webapp/src/ts/modules/trainings/trainings-content.component.ts new file mode 100644 index 00000000000..1fb5c052965 --- /dev/null +++ b/webapp/src/ts/modules/trainings/trainings-content.component.ts @@ -0,0 +1,112 @@ +import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { Store } from '@ngrx/store'; +import { Subscription } from 'rxjs'; + +import { GlobalActions } from '@mm-actions/global'; +import { ModalService } from '@mm-services/modal.service'; +import { PerformanceService } from '@mm-services/performance.service'; +import { Selectors } from '@mm-selectors/index'; + +@Component({ + selector: 'training-content', + templateUrl: './trainings-content.component.html' +}) +export class TrainingsContentComponent implements OnInit, OnDestroy { + @ViewChild('confirmModal') confirmModalTemplate; + private readonly globalActions: GlobalActions; + private confirmModalRef; + private trackRender; + private trainingCardID; + private canExit = false; + showNoSelection = false; + showConfirmExit = false; + hasError = false; + subscriptions: Subscription = new Subscription(); + + constructor( + private readonly store: Store, + private readonly route: ActivatedRoute, + private readonly router: Router, + private readonly modalService: ModalService, + private readonly performanceService: PerformanceService, + ) { + this.globalActions = new GlobalActions(this.store); + } + + ngOnInit() { + this.trackRender = this.performanceService.track(); + this.subscribeToRouteParams(); + this.subscribeToStore(); + } + + ngOnDestroy() { + this.subscriptions.unsubscribe(); + this.globalActions.clearNavigation(); + this.globalActions.clearTrainingCards(); + } + + private subscribeToStore() { + const reduxSubscription = this.store + .select(Selectors.getTrainingCardFormId) + .subscribe(trainingCardID => this.trainingCardID = trainingCardID); + this.subscriptions.add(reduxSubscription); + } + + private subscribeToRouteParams() { + const routeSubscription = this.route.params.subscribe(params => { + this.globalActions.setTrainingCard({ formId: params?.id || null }); + if (!params?.id) { + this.showNoSelection = true; + this.globalActions.setShowContent(false); + } + }); + this.subscriptions.add(routeSubscription); + } + + close(nextUrl?) { + this.canExit = true; + this.globalActions.clearNavigation(); + this.globalActions.clearTrainingCards(); + if (nextUrl) { + return this.router.navigateByUrl(nextUrl); + } + return this.router.navigate([ '/', 'trainings' ]); + } + + exitTraining(nextUrl: string) { + this.trackRender?.stop({ + name: [ 'enketo', this.trainingCardID, 'add', 'quit' ].join(':'), + }); + + this.close(nextUrl); + this.confirmModalRef?.close(); + } + + continueTraining() { + this.confirmModalRef?.close(); + } + + quit() { + if (this.hasError) { + return this.close(); + } + + this.showConfirmExit = true; + this.confirmModalRef = this.modalService.show(this.confirmModalTemplate); + const subscription = this.confirmModalRef + ?.afterClosed() + .subscribe(() => this.showConfirmExit = false); + this.subscriptions.add(subscription); + } + + canDeactivate(nextUrl) { + if (this.canExit) { + this.canExit = false; + return true; + } + this.globalActions.setTrainingCard({ nextUrl }); + this.quit(); + return false; + } +} diff --git a/webapp/src/ts/modules/trainings/trainings-route.guard.provider.ts b/webapp/src/ts/modules/trainings/trainings-route.guard.provider.ts new file mode 100644 index 00000000000..6fe39900d6b --- /dev/null +++ b/webapp/src/ts/modules/trainings/trainings-route.guard.provider.ts @@ -0,0 +1,18 @@ +import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; +import { Injectable } from '@angular/core'; + +import { TrainingsContentComponent } from '@mm-modules/trainings/trainings-content.component'; + +@Injectable({ + providedIn: 'root' +}) +export class TrainingsRouteGuardProvider implements CanDeactivate { + canDeactivate( + component:TrainingsContentComponent, + currentRoute:ActivatedRouteSnapshot, + currentState:RouterStateSnapshot, + nextState:RouterStateSnapshot, + ) { + return component.canDeactivate(nextState.url); + } +} diff --git a/webapp/src/ts/modules/trainings/trainings.component.html b/webapp/src/ts/modules/trainings/trainings.component.html new file mode 100644 index 00000000000..95ff6bf484e --- /dev/null +++ b/webapp/src/ts/modules/trainings/trainings.component.html @@ -0,0 +1,42 @@ + + +
      +
      + +
      +
      + + +

      {{ 'training_materials.page.no_trainings' | translate }}

      +

      + {{ 'training_materials.page.no_more_trainings' | translate }} +

      +
      +
      +
      +
      + + + +
      +
      diff --git a/webapp/src/ts/modules/trainings/trainings.component.ts b/webapp/src/ts/modules/trainings/trainings.component.ts new file mode 100644 index 00000000000..802e3e0a486 --- /dev/null +++ b/webapp/src/ts/modules/trainings/trainings.component.ts @@ -0,0 +1,129 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Store } from '@ngrx/store'; +import { Subscription } from 'rxjs'; + +import { GlobalActions } from '@mm-actions/global'; +import { PerformanceService } from '@mm-services/performance.service'; +import { TrainingCardsService, TrainingMaterial } from '@mm-services/training-cards.service'; +import { Selectors } from '@mm-selectors/index'; +import { ScrollLoaderProvider } from '@mm-providers/scroll-loader.provider'; + +const PAGE_SIZE = 50; + +@Component({ + templateUrl: './trainings.component.html' +}) +export class TrainingsComponent implements OnInit, OnDestroy { + private readonly globalActions: GlobalActions; + private trackInitialLoadPerformance; + private isInitialized; + private trainingForms; + selectedTrainingId: null | string = null; + subscriptions: Subscription = new Subscription(); + trainingList: TrainingMaterial[] = []; + moreTrainings = true; + loading = true; + + constructor( + private readonly store: Store, + private readonly performanceService: PerformanceService, + private readonly trainingCardsService: TrainingCardsService, + private readonly scrollLoaderProvider: ScrollLoaderProvider, + ) { + this.globalActions = new GlobalActions(this.store); + } + + ngOnInit() { + this.trackInitialLoadPerformance = this.performanceService.track(); + this.subscribeToTrainingMaterials(); + this.subscribeToSelectedTraining(); + } + + ngOnDestroy() { + this.subscriptions.unsubscribe(); + this.globalActions.unsetSelected(); + } + + private subscribeToTrainingMaterials() { + const trainingSubscription = this.store + .select(Selectors.getTrainingMaterials) + .subscribe(forms => { + this.trainingList = []; + this.trainingForms = forms; + this.isInitialized = this.getTrainings(); + }); + this.subscriptions.add(trainingSubscription); + } + + private subscribeToSelectedTraining() { + const selectedTraining = this.store + .select(Selectors.getTrainingCardFormId) + .subscribe(newSelectedId => this.isInitialized?.then(() => { + this.refreshList(this.selectedTrainingId, newSelectedId); + this.selectedTrainingId = newSelectedId; + })); + this.subscriptions.add(selectedTraining); + } + + private refreshList(oldSelectedId, newSelectedId) { + const isTrainingClosing = oldSelectedId && !newSelectedId; + if (!isTrainingClosing) { + return; + } + + const isUncompletedTraining = this.trainingList?.find(training => { + return training.code === oldSelectedId && !training.isCompletedTraining; + }); + + if (isUncompletedTraining) { + this.trainingList = []; + this.getTrainings(); + } + } + + async getTrainings() { + if (!this.trainingForms?.length) { + this.loading = false; + return; + } + + try { + this.loading = true; + const list = await this.trainingCardsService.getNextTrainings( + this.trainingForms, + PAGE_SIZE, + this.trainingList.length, + ) ?? []; + + this.moreTrainings = list.length >= PAGE_SIZE; + this.trainingList = [ ...this.trainingList, ...list ]; + + await this.recordInitialLoadPerformance(); + this.initScroll(); + } catch (error) { + console.error('Error getting training materials.', error); + } finally { + this.loading = false; + } + } + + private async recordInitialLoadPerformance() { + if (!this.trackInitialLoadPerformance) { + return; + } + await this.trackInitialLoadPerformance.stop({ name: 'training_materials_list:load', recordApdex: true }); + this.trackInitialLoadPerformance = null; + } + + trackBy(index, training) { + return training._id + index + training._rev + training.selected; + } + + private initScroll() { + this.scrollLoaderProvider.init(() => { + if (!this.loading && this.moreTrainings) { + this.getTrainings(); + } + }); + } +} diff --git a/webapp/src/ts/modules/trainings/trainings.routes.ts b/webapp/src/ts/modules/trainings/trainings.routes.ts new file mode 100644 index 00000000000..54adf17b417 --- /dev/null +++ b/webapp/src/ts/modules/trainings/trainings.routes.ts @@ -0,0 +1,28 @@ +import { Routes } from '@angular/router'; + +import { AppRouteGuardProvider } from '../../app-route.guard.provider'; +import { TrainingsComponent } from '@mm-modules/trainings/trainings.component'; +import { TrainingsContentComponent } from '@mm-modules/trainings/trainings-content.component'; +import { TrainingsRouteGuardProvider } from '@mm-modules/trainings/trainings-route.guard.provider'; + +export const routes: Routes = [ + { + path: 'trainings', + component: TrainingsComponent, + data: { permissions: [ 'can_edit' ], tab: 'trainings', hideTraining: true }, + canActivate: [ AppRouteGuardProvider ], + children: [ + { + path: '', + component: TrainingsContentComponent, + data: { hideTraining: true }, + }, + { + path: ':id', + component: TrainingsContentComponent, + data: { hideTraining: true }, + canDeactivate: [ TrainingsRouteGuardProvider ], + }, + ] + }, +]; diff --git a/webapp/src/ts/reducers/global.ts b/webapp/src/ts/reducers/global.ts index e1c6f4c5651..c94c7124b9c 100644 --- a/webapp/src/ts/reducers/global.ts +++ b/webapp/src/ts/reducers/global.ts @@ -27,6 +27,7 @@ const initialState: GlobalState = { trainingCard: { formId: null, isOpen: false, showConfirmExit: false, nextUrl: null }, sidebarMenu: { isOpen: false }, forms: null, + trainingMaterials: null, lastChangedDoc: false, loadingContent: false, processingReportVerification: false, @@ -77,6 +78,9 @@ const _globalReducer = createReducer( on(Actions.setForms, (state, { payload: { forms } }) => { return { ...state, forms }; }), + on(Actions.setTrainingMaterials, (state, { payload: { trainingMaterials } }) => { + return { ...state, trainingMaterials }; + }), on(Actions.clearFilters, (state, { payload: { skip } }) => { const newValue = skip && state.filters[skip] ? { [skip]: state.filters[skip] } : {}; return { ...state, filters: newValue }; @@ -192,6 +196,7 @@ export interface GlobalState { trainingCard: TrainingCardState; sidebarMenu: SidebarMenuState; forms: null | Record[]; + trainingMaterials: null | Record[]; lastChangedDoc: boolean | Record; loadingContent: boolean; processingReportVerification: boolean; diff --git a/webapp/src/ts/selectors/index.ts b/webapp/src/ts/selectors/index.ts index 83b66d7658d..95c5fc52eb1 100644 --- a/webapp/src/ts/selectors/index.ts +++ b/webapp/src/ts/selectors/index.ts @@ -25,6 +25,7 @@ export const Selectors = { getShowContent: createSelector(getGlobalState, (globalState) => globalState.showContent), getSelectMode: createSelector(getGlobalState, (globalState) => globalState.selectMode), getForms: createSelector(getGlobalState, (globalState) => globalState.forms), + getTrainingMaterials: createSelector(getGlobalState, (globalState) => globalState.trainingMaterials), getFilters: createSelector(getGlobalState, (globalState) => globalState.filters), getSidebarFilter: createSelector(getGlobalState, (globalState) => globalState.sidebarFilter), getSearchBar: createSelector(getGlobalState, (globalState) => globalState.searchBar), diff --git a/webapp/src/ts/services/training-cards.service.ts b/webapp/src/ts/services/training-cards.service.ts index f3618d05d9d..b3b7d2346b1 100644 --- a/webapp/src/ts/services/training-cards.service.ts +++ b/webapp/src/ts/services/training-cards.service.ts @@ -3,6 +3,7 @@ import { Store } from '@ngrx/store'; import * as moment from 'moment'; import { v4 as uuid } from 'uuid'; import { first } from 'rxjs/operators'; +import { combineLatest } from 'rxjs'; import { XmlFormsService } from '@mm-services/xml-forms.service'; import { TrainingCardsComponent } from '@mm-modals/training-cards/training-cards.component'; @@ -11,6 +12,9 @@ import { GlobalActions } from '@mm-actions/global'; import { ModalService } from '@mm-services/modal.service'; import { SessionService } from '@mm-services/session.service'; import { RouteSnapshotService } from '@mm-services/route-snapshot.service'; +import { Selectors } from '@mm-selectors/index'; +import { TranslateService } from '@ngx-translate/core'; +import { TranslateFromService } from '@mm-services/translate-from.service'; export const TRAINING_PREFIX: string = 'training:'; @@ -22,22 +26,46 @@ export class TrainingCardsService { private readonly STORAGE_KEY_LAST_VIEWED_DATE = 'training-cards-last-viewed-date'; constructor( - private store: Store, - private xmlFormsService: XmlFormsService, - private dbService: DbService, - private modalService: ModalService, - private sessionService: SessionService, - private routeSnapshotService: RouteSnapshotService, + private readonly store: Store, + private readonly xmlFormsService: XmlFormsService, + private readonly dbService: DbService, + private readonly modalService: ModalService, + private readonly sessionService: SessionService, + private readonly routeSnapshotService: RouteSnapshotService, + private readonly translateService: TranslateService, + private readonly translateFromService: TranslateFromService, ) { this.globalActions = new GlobalActions(this.store); + this.subscribeToStore(); + } + + private subscribeToStore(): void { + combineLatest([ + this.store.select(Selectors.getPrivacyPolicyAccepted), + this.store.select(Selectors.getShowPrivacyPolicy), + this.store.select(Selectors.getTrainingMaterials), + ]).subscribe(([ privacyPolicyAccepted, showPrivacyPolicy, xforms ]) => { + this.displayTrainingCards(xforms, showPrivacyPolicy, privacyPolicyAccepted); + }); + } + + private getFormTitle(labelKey?: string, label?: string): string|undefined { + if (labelKey) { + return this.translateService.instant(labelKey); + } + + if (label) { + return this.translateFromService.get(label); + } } private getAvailableTrainingCards(xForms, userCtx) { const today = moment(); return xForms - .map(xForm => ({ + ?.map(xForm => ({ id: xForm._id, + title: this.getFormTitle(xForm.titleKey, xForm.title), code: xForm.internalId, startDate: xForm.context?.start_date ? moment(xForm.context.start_date) : today.clone(), duration: xForm.context?.duration, @@ -80,47 +108,51 @@ export class TrainingCardsService { return docs?.rows?.length ? new Set(docs.rows.map(row => row?.doc?.form)) : new Set(); } - private async handleTrainingCards(error, xForms) { - if (error) { - console.error('Training Cards :: Error fetching forms.', error); + private openModal(form) { + this.globalActions.setTrainingCard({ formId: form?.code }); + + this.modalService + .show(TrainingCardsComponent, { closeOnNavigation: false, width: '700px' }) + ?.afterOpened() + .pipe(first()) + .subscribe(() => { + const key = this.getLocalStorageKey(); + if (key) { + window.localStorage.setItem(key, new Date().toISOString()); + } + }); + } + + private canDisplayTrainingCards(trainingForms, showPrivacyPolicy, privacyPolicyAccepted) { + if (!trainingForms?.length + || (showPrivacyPolicy && !privacyPolicyAccepted) + || this.hasBeenDisplayed() + ) { + return false; + } + + const routeSnapshot = this.routeSnapshotService.get(); + return !routeSnapshot?.data?.hideTraining; + } + + async displayTrainingCards(trainingForms, showPrivacyPolicy, privacyPolicyAccepted) { + if (!this.canDisplayTrainingCards(trainingForms, showPrivacyPolicy, privacyPolicyAccepted)) { return; } try { - const firstChronologicalTrainingCard = await this.getFirstChronologicalForm(xForms); + const firstChronologicalTrainingCard = await this.getFirstChronologicalForm(trainingForms); if (!firstChronologicalTrainingCard) { return; } - this.globalActions.setTrainingCard({ formId: firstChronologicalTrainingCard.code }); + this.openModal(firstChronologicalTrainingCard); } catch (error) { console.error('Training Cards :: Error showing modal.', error); return; } } - displayTrainingCards() { - if (this.hasBeenDisplayed()) { - return; - } - - const routeSnapshot = this.routeSnapshotService.get(); - if (routeSnapshot?.data?.hideTraining) { - return; - } - - this.modalService - .show(TrainingCardsComponent, { closeOnNavigation: false }) - ?.afterOpened() - .pipe(first()) - .subscribe(() => { - const key = this.getLocalStorageKey(); - if (key) { - window.localStorage.setItem(key, new Date().toISOString()); - } - }); - } - private async getFirstChronologicalForm(xForms) { const userCtx = this.sessionService.userCtx(); const trainingCards = this.getAvailableTrainingCards(xForms, userCtx) || []; @@ -139,7 +171,13 @@ export class TrainingCardsService { this.xmlFormsService.subscribe( 'TrainingCards', { trainingCards: true }, - (error, xForms) => this.handleTrainingCards(error, xForms) + (error, xForms) => { + if (error) { + console.error('Training Cards :: Error fetching forms.', error); + return; + } + this.globalActions.setTrainingMaterials(xForms); + } ); } @@ -182,4 +220,28 @@ export class TrainingCardsService { return `${this.STORAGE_KEY_LAST_VIEWED_DATE}-${username}`; } + + public async getNextTrainings(xForms, pageSize, skip): Promise { + const userCtx = this.sessionService.userCtx(); + const availableTrainingCards = this.getAvailableTrainingCards(xForms, userCtx); + const trainingCards = availableTrainingCards?.slice(skip, skip + pageSize); + if (!trainingCards.length) { + return; + } + + const completedTrainings = await this.getCompletedTrainings(userCtx); + return trainingCards + .map(form => ({ ...form, isCompletedTraining: completedTrainings.has(form.code) })) + .sort((a, b) => a.startDate.diff(b.startDate)); + } +} + +export interface TrainingMaterial { + id: string; + title: string; + code: string; + startDate: Date; + duration: number; + userRoles: string[]; + isCompletedTraining: boolean; } diff --git a/webapp/src/ts/training-card.guard.provider.ts b/webapp/src/ts/training-card.guard.provider.ts index 5c5f1ad2ad8..edd612acd5e 100644 --- a/webapp/src/ts/training-card.guard.provider.ts +++ b/webapp/src/ts/training-card.guard.provider.ts @@ -10,7 +10,7 @@ import { Selectors } from '@mm-selectors/index'; providedIn: 'root' }) export class TrainingCardDeactivationGuardProvider implements CanDeactivate { - private readonly globalActions; + private readonly globalActions: GlobalActions; constructor(private readonly store: Store) { this.globalActions = new GlobalActions(this.store); diff --git a/webapp/tests/karma/ts/components/sidebar-menu/sidebar-menu.component.spec.ts b/webapp/tests/karma/ts/components/sidebar-menu/sidebar-menu.component.spec.ts index 7951f75f9e1..ce7db203d4b 100644 --- a/webapp/tests/karma/ts/components/sidebar-menu/sidebar-menu.component.spec.ts +++ b/webapp/tests/karma/ts/components/sidebar-menu/sidebar-menu.component.spec.ts @@ -109,6 +109,12 @@ describe('SidebarMenuComponent', () => { ]); expect(component.secondaryOptions).excluding('click').have.deep.members([ + { + routerLink: 'trainings', + icon: 'fa-graduation-cap', + translationKey: 'training_materials.page.title', + canDisplay: true, + }, { routerLink: 'about', icon: 'fa-question', diff --git a/webapp/tests/karma/ts/components/training-cards-form/training-cards-form.component.spec.ts b/webapp/tests/karma/ts/components/training-cards-form/training-cards-form.component.spec.ts new file mode 100644 index 00000000000..fd0b192a47a --- /dev/null +++ b/webapp/tests/karma/ts/components/training-cards-form/training-cards-form.component.spec.ts @@ -0,0 +1,351 @@ +import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core'; +import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing'; +import { MockStore, provideMockStore } from '@ngrx/store/testing'; +import { expect } from 'chai'; +import sinon from 'sinon'; + +import { GeolocationService } from '@mm-services/geolocation.service'; +import { XmlFormsService } from '@mm-services/xml-forms.service'; +import { FormService } from '@mm-services/form.service'; +import { TranslateService } from '@mm-services/translate.service'; +import { Selectors } from '@mm-selectors/index'; +import { GlobalActions } from '@mm-actions/global'; +import { PerformanceService } from '@mm-services/performance.service'; +import { FeedbackService } from '@mm-services/feedback.service'; +import { ModalLayoutComponent } from '@mm-components/modal-layout/modal-layout.component'; +import { PanelHeaderComponent } from '@mm-components/panel-header/panel-header.component'; +import { EnketoComponent } from '@mm-components/enketo/enketo.component'; +import { TrainingCardsFormComponent } from '@mm-components/training-cards-form/training-cards-form.component'; + +describe('TrainingCardsFormComponent', () => { + let fixture: ComponentFixture; + let component: TrainingCardsFormComponent; + let store: MockStore; + let geolocationService; + let geoHandle; + let xmlFormsService; + let translateService; + let formService; + let globalActions; + let feedbackService; + let consoleErrorMock; + let performanceService; + let stopPerformanceTrackStub; + + beforeEach(() => { + consoleErrorMock = sinon.stub(console, 'error'); + geoHandle = { cancel: sinon.stub() }; + geolocationService = { init: sinon.stub().returns(geoHandle) }; + xmlFormsService = { get: sinon.stub().resolves() }; + translateService = { + get: sinon.stub().resolvesArg(0), + instant: sinon.stub().returnsArg(0), + }; + formService = { + unload: sinon.stub(), + save: sinon.stub(), + render: sinon.stub().resolves(), + }; + feedbackService = { submit: sinon.stub() }; + const mockedSelectors = [ + { selector: Selectors.getEnketoStatus, value: {} }, + { selector: Selectors.getEnketoSavingStatus, value: false }, + { selector: Selectors.getEnketoError, value: false }, + { selector: Selectors.getTrainingCardFormId, value: null }, + { selector: Selectors.getTrainingCard, value: {} }, + ]; + globalActions = { + clearEnketoStatus: sinon.stub(GlobalActions.prototype, 'clearEnketoStatus'), + setEnketoSavingStatus: sinon.stub(GlobalActions.prototype, 'setEnketoSavingStatus'), + setEnketoError: sinon.stub(GlobalActions.prototype, 'setEnketoError'), + setSnackbarContent: sinon.stub(GlobalActions.prototype, 'setSnackbarContent'), + setTrainingCard: sinon.stub(GlobalActions.prototype, 'setTrainingCard'), + }; + stopPerformanceTrackStub = sinon.stub(); + performanceService = { track: sinon.stub().returns({ stop: stopPerformanceTrackStub }) }; + + return TestBed + .configureTestingModule({ + imports: [ + TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: TranslateFakeLoader } }), + ], + declarations: [ + TrainingCardsFormComponent, + ModalLayoutComponent, + PanelHeaderComponent, + EnketoComponent, + ], + providers: [ + provideMockStore({ selectors: mockedSelectors }), + { provide: GeolocationService, useValue: geolocationService }, + { provide: XmlFormsService, useValue: xmlFormsService }, + { provide: TranslateService, useValue: translateService }, + { provide: FormService, useValue: formService }, + { provide: PerformanceService, useValue: performanceService }, + { provide: FeedbackService, useValue: feedbackService }, + ], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(TrainingCardsFormComponent); + store = TestBed.inject(MockStore); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + }); + + afterEach(() => sinon.restore()); + + it('should create component', () => { + expect(component).to.exist; + }); + + it('should unsubscribe from everything, cancel geohandle and clear enketo form', fakeAsync(() => { + const unsubscribeStub = sinon.stub(component.subscriptions, 'unsubscribe'); + + store.overrideSelector(Selectors.getTrainingCardFormId, 'training:a_form_id'); + store.refreshState(); + tick(); + sinon.resetHistory(); + component.ngOnDestroy(); + tick(); + + expect(unsubscribeStub.calledOnce).to.be.true; + expect(geoHandle.cancel.calledOnce).to.be.true; + expect(formService.unload.calledOnce).to.be.true; + expect(globalActions.clearEnketoStatus.calledOnce).to.be.true; + })); + + describe('onInit', () => { + it('should subscribe to redux and init component', fakeAsync(() => { + const AddSpy = sinon.spy(component.subscriptions, 'add'); + sinon.resetHistory(); + + component.ngOnInit(); + + expect(AddSpy.calledOnce).to.be.true; + expect(component.contentError).to.be.false; + expect(component.enketoError).to.be.false; + expect(component.trainingCardFormId).to.be.null; + expect(component.form).to.be.null; + expect(component.loadingContent).to.be.true; + + store.overrideSelector(Selectors.getTrainingCardFormId, 'form-123'); + store.overrideSelector( + Selectors.getEnketoStatus, + { form: true, edited: false, saving: true, error: 'ups an error' }, + ); + store.overrideSelector(Selectors.getEnketoSavingStatus, true); + store.overrideSelector(Selectors.getEnketoError, 'ups an error'); + store.refreshState(); + + flush(); + + expect(component.enketoError).to.equal('ups an error'); + expect(component.trainingCardFormId).to.equal('form-123'); + expect(component.enketoStatus).to.deep.equal({ form: true, edited: false, saving: true, error: 'ups an error' }); + expect(component.enketoSaving).to.be.true; + })); + + it('should reset component', () => { + component.contentError = true; + component.trainingCardFormId = 'training:a_form_id'; + component.form = { the: 'rendered training form' }; + component.loadingContent = false; + component.enketoError = 'some_error'; + sinon.resetHistory(); + + component.ngOnInit(); + + expect(globalActions.setEnketoError.calledOnce).to.be.true; + expect(globalActions.setEnketoError.args[0]).to.deep.equal([ null ]); + expect(component.contentError).to.be.false; + expect(component.trainingCardFormId).to.be.null; + expect(component.form).to.be.null; + expect(component.loadingContent).to.be.true; + }); + }); + + describe('saveForm', () => { + it('should do nothing if already saving', fakeAsync(() => { + const consoleDebugMock = sinon.stub(console, 'debug'); + component.enketoSaving = true; + + component.saveForm(); + tick(); + + expect(consoleDebugMock.calledOnce).to.be.true; + expect(consoleDebugMock.args[0]).to.deep.equal([ + 'Attempted to call TrainingCardsFormComponent:saveForm more than once' + ]); + expect(formService.save.notCalled).to.be.true; + expect(formService.unload.notCalled).to.be.true; + expect(globalActions.setEnketoSavingStatus.notCalled).to.be.true; + expect(globalActions.setSnackbarContent.notCalled).to.be.true; + expect(globalActions.setEnketoError.notCalled).to.be.true; + })); + + it('should call enketo save, set content in snackbar and unload form', fakeAsync(() => { + const consoleDebugMock = sinon.stub(console, 'debug'); + xmlFormsService.get.resolves({ _id: 'form:training:new_feature' }); + formService.save.resolves([{ _id: 'completed_training' }]); + formService.render.resolves({ + _id: 'form:training:new_feature', + pages: { activePages: [ { id: 'page-1' } ] }, + }); + + store.overrideSelector(Selectors.getTrainingCardFormId, 'training:a_form_id'); + store.refreshState(); + tick(); + component.saveForm(); + tick(); + + expect(formService.unload.calledOnce).to.be.true; + expect(formService.unload.args[0]).to.deep.equal([{ + _id: 'form:training:new_feature', + pages: { activePages: [ { id: 'page-1' } ] }, + }]); + expect(formService.save.calledOnce).to.be.true; + expect(formService.save.args[0]).to.deep.equal([ + 'training:a_form_id', + { + _id: 'form:training:new_feature', + pages: { activePages: [ { id: 'page-1' } ] }, + }, + geoHandle + ]); + expect(consoleDebugMock.callCount).to.equal(1); + expect(consoleDebugMock.args[0]).to.deep.equal([ + 'Saved form and associated docs', + [{ _id: 'completed_training' }] + ]); + expect(globalActions.setEnketoSavingStatus.calledTwice).to.be.true; + expect(globalActions.setEnketoSavingStatus.args).to.deep.equal([[ true ], [ false ]]); + expect(globalActions.setSnackbarContent.calledOnce).to.be.true; + expect(globalActions.setSnackbarContent.args[0]).to.deep.equal([ 'training_cards.form.saved' ]); + expect(stopPerformanceTrackStub.callCount).to.equal(3); + expect(stopPerformanceTrackStub.args[0][0]) + .to.deep.equal({ name: 'enketo:training:a_form_id:add:render', recordApdex: true }); + expect(stopPerformanceTrackStub.args[1][0]) + .to.deep.equal({ name: 'enketo:training:a_form_id:add:user_edit_time' }); + expect(stopPerformanceTrackStub.args[2][0]).to.deep.equal({ name: 'enketo:training:a_form_id:add:save' }); + expect(globalActions.setEnketoError.notCalled).to.be.true; + })); + + it('should catch enketo saving error', fakeAsync(() => { + sinon.resetHistory(); + xmlFormsService.get.resolves({ the: 'rendered training form' }); + formService.render.resolves({ the: 'rendered training form' }); + formService.save.rejects({ some: 'error' }); + store.overrideSelector(Selectors.getTrainingCardFormId, 'training:a_form_id'); + store.refreshState(); + tick(); + + component.saveForm(); + tick(); + + expect(formService.save.calledOnce).to.be.true; + expect(formService.save.args[0]).to.deep.equal([ + 'training:a_form_id', + { the: 'rendered training form' }, + geoHandle + ]); + expect(consoleErrorMock.calledOnce).to.be.true; + expect(consoleErrorMock.args[0]).to.deep.equal([ + 'TrainingCardsFormComponent :: Error submitting form data.', + { some: 'error' } + ]); + expect(globalActions.setEnketoError.calledOnce).to.be.true; + expect(globalActions.setEnketoError.args[0]).to.deep.equal([ 'training_cards.error.save' ]); + expect(globalActions.setEnketoSavingStatus.calledTwice).to.be.true; + expect(globalActions.setEnketoSavingStatus.args).to.deep.equal([[ true ], [ false ]]); + expect(globalActions.setSnackbarContent.notCalled).to.be.true; + })); + }); + + describe('loadForm', () => { + it('should load form', fakeAsync(() => { + sinon.resetHistory(); + const xmlForm = { _id: 'training:a_form_id', some: 'content' }; + const renderedForm = { rendered: 'form', model: {}, instance: {} }; + xmlFormsService.get.resolves(xmlForm); + formService.render.resolves(renderedForm); + store.overrideSelector(Selectors.getTrainingCardFormId, 'training:a_form_id'); + store.refreshState(); + tick(); + + expect(geolocationService.init.calledOnce).to.be.true; + expect(xmlFormsService.get.calledOnce).to.be.true; + expect(xmlFormsService.get.args[0]).to.deep.equal([ 'training:a_form_id' ]); + expect(formService.render.calledOnce).to.be.true; + expect(formService.render.args[0][0].formDoc).to.deep.equal(xmlForm); + expect(component.form).to.equal(renderedForm); + expect(consoleErrorMock.notCalled).to.be.true; + expect(feedbackService.submit.notCalled).to.be.true; + expect(stopPerformanceTrackStub.calledOnce).to.be.true; + expect(stopPerformanceTrackStub.args[0][0]) + .to.deep.equal({ name: 'enketo:training:a_form_id:add:render', recordApdex: true }); + + const resetFormError = formService.render.args[0][0].valuechangeListener; + resetFormError(); + expect(globalActions.setEnketoError.notCalled).to.be.true; // No error so no call + component.enketoError = 'some error'; + resetFormError(); + expect(globalActions.setEnketoError.calledOnce).to.be.true; + expect(globalActions.setEnketoError.args[0]).to.deep.equal([ null ]); + })); + + it('should reset geohandle on reload', fakeAsync(() => { + store.overrideSelector(Selectors.getTrainingCardFormId, 'training:a_form_id'); + store.refreshState(); + tick(); + + expect(geoHandle.cancel.notCalled).to.be.true; + expect(geolocationService.init.calledOnce).to.be.true; + + store.overrideSelector(Selectors.getTrainingCardFormId, 'training:another_form_id'); + store.refreshState(); + tick(); + + expect(geolocationService.init.calledTwice).to.be.true; + expect(geoHandle.cancel.calledOnce).to.be.true; + })); + + it('should catch form loading errors', fakeAsync(() => { + xmlFormsService.get.rejects({ error: 'boom' }); + sinon.resetHistory(); + store.overrideSelector(Selectors.getTrainingCardFormId, 'training:a_form_id'); + store.refreshState(); + tick(); + + expect(xmlFormsService.get.calledOnce).to.be.true; + expect(formService.render.notCalled).to.be.true; + expect(consoleErrorMock.calledOnce).to.be.true; + expect(consoleErrorMock.args[0]).to.deep.equal([ + 'TrainingCardsFormComponent :: Error fetching form.', + { error: 'boom' } + ]); + expect(component.errorTranslationKey).to.equal('training_cards.error.loading'); + expect(component.loadingContent).to.be.false; + expect(component.contentError).to.be.true; + })); + + it('should catch enketo errors', fakeAsync(() => { + xmlFormsService.get.resolves({ _id: 'training:a_form_id', some: 'content' }); + formService.render.rejects({ some: 'error' }); + sinon.resetHistory(); + store.overrideSelector(Selectors.getTrainingCardFormId, 'training:a_form_id'); + store.refreshState(); + tick(); + + expect(xmlFormsService.get.calledOnce).to.be.true; + expect(formService.render.calledOnce).to.be.true; + expect(component.form).to.equal(null); + expect(consoleErrorMock.calledOnce).to.be.true; + expect(consoleErrorMock.args[0]).to.deep.equal([ + 'TrainingCardsFormComponent :: Error rendering form.', + { some: 'error' } + ]); + })); + }); +}); diff --git a/webapp/tests/karma/ts/modals/training-cards/training-cards.component.spec.ts b/webapp/tests/karma/ts/modals/training-cards/training-cards.component.spec.ts index b00309fa782..794c80d9f2f 100644 --- a/webapp/tests/karma/ts/modals/training-cards/training-cards.component.spec.ts +++ b/webapp/tests/karma/ts/modals/training-cards/training-cards.component.spec.ts @@ -1,76 +1,46 @@ import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core'; -import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; -import { MockStore, provideMockStore } from '@ngrx/store/testing'; +import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testing'; +import { provideMockStore } from '@ngrx/store/testing'; import { Router } from '@angular/router'; -import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { MatDialogRef } from '@angular/material/dialog'; import { expect } from 'chai'; import sinon from 'sinon'; import { TrainingCardsComponent } from '@mm-modals/training-cards/training-cards.component'; -import { GeolocationService } from '@mm-services/geolocation.service'; -import { XmlFormsService } from '@mm-services/xml-forms.service'; -import { FormService } from '@mm-services/form.service'; -import { TranslateService } from '@mm-services/translate.service'; -import { Selectors } from '@mm-selectors/index'; import { GlobalActions } from '@mm-actions/global'; import { PerformanceService } from '@mm-services/performance.service'; -import { FeedbackService } from '@mm-services/feedback.service'; import { ModalLayoutComponent } from '@mm-components/modal-layout/modal-layout.component'; -import { PanelHeaderComponent } from '@mm-components/panel-header/panel-header.component'; +import { TrainingCardsFormComponent } from '@mm-components/training-cards-form/training-cards-form.component'; +import { XmlFormsService } from '@mm-services/xml-forms.service'; +import { FormService } from '@mm-services/form.service'; +import { GeolocationService } from '@mm-services/geolocation.service'; import { EnketoComponent } from '@mm-components/enketo/enketo.component'; +import { Selectors } from '@mm-selectors/index'; describe('TrainingCardsComponent', () => { let fixture: ComponentFixture; let component: TrainingCardsComponent; - let store: MockStore; - let geolocationService; - let geoHandle; - let xmlFormsService; let matDialogRef; - let translateService; - let formService; let globalActions; - let feedbackService; - let consoleErrorMock; let performanceService; let stopPerformanceTrackStub; let routerMock; beforeEach(() => { - consoleErrorMock = sinon.stub(console, 'error'); - geoHandle = { cancel: sinon.stub() }; - geolocationService = { init: sinon.stub().returns(geoHandle) }; - xmlFormsService = { get: sinon.stub().resolves() }; matDialogRef = { close: sinon.stub() }; - translateService = { - get: sinon.stub().resolvesArg(0), - instant: sinon.stub().returnsArg(0), - }; - formService = { - unload: sinon.stub(), - save: sinon.stub(), - render: sinon.stub().resolves(), - }; routerMock = { navigateByUrl: sinon.stub(), }; - feedbackService = { submit: sinon.stub() }; - const mockedSelectors = [ - { selector: Selectors.getEnketoStatus, value: {} }, - { selector: Selectors.getEnketoSavingStatus, value: false }, - { selector: Selectors.getEnketoError, value: false }, - { selector: Selectors.getTrainingCardFormId, value: null }, - { selector: Selectors.getTrainingCard, value: {} }, - ]; globalActions = { - clearEnketoStatus: sinon.stub(GlobalActions.prototype, 'clearEnketoStatus'), - setEnketoSavingStatus: sinon.stub(GlobalActions.prototype, 'setEnketoSavingStatus'), - setEnketoError: sinon.stub(GlobalActions.prototype, 'setEnketoError'), - setSnackbarContent: sinon.stub(GlobalActions.prototype, 'setSnackbarContent'), + clearTrainingCards: sinon.stub(GlobalActions.prototype, 'clearTrainingCards'), setTrainingCard: sinon.stub(GlobalActions.prototype, 'setTrainingCard'), }; stopPerformanceTrackStub = sinon.stub(); performanceService = { track: sinon.stub().returns({ stop: stopPerformanceTrackStub }) }; + const mockedSelectors = [ + { selector: Selectors.getTrainingCard, value: null }, + { selector: Selectors.getTrainingCardFormId, value: null }, + ]; return TestBed .configureTestingModule({ @@ -80,351 +50,83 @@ describe('TrainingCardsComponent', () => { declarations: [ TrainingCardsComponent, ModalLayoutComponent, - PanelHeaderComponent, + TrainingCardsFormComponent, EnketoComponent, ], providers: [ provideMockStore({ selectors: mockedSelectors }), - { provide: GeolocationService, useValue: geolocationService }, - { provide: XmlFormsService, useValue: xmlFormsService }, - { provide: TranslateService, useValue: translateService }, - { provide: FormService, useValue: formService }, { provide: PerformanceService, useValue: performanceService }, - { provide: FeedbackService, useValue: feedbackService }, { provide: MatDialogRef, useValue: matDialogRef }, { provide: Router, useValue: routerMock }, - { provide: MAT_DIALOG_DATA, useValue: {} }, + { provide: XmlFormsService, useValue: {} }, + { provide: FormService, useValue: { unload: sinon.stub() } }, + { provide: GeolocationService, useValue: {} }, ], }) .compileComponents() .then(() => { fixture = TestBed.createComponent(TrainingCardsComponent); - store = TestBed.inject(MockStore); component = fixture.componentInstance; fixture.detectChanges(); + sinon.resetHistory(); }); }); afterEach(() => sinon.restore()); - it('should create component', () => { + it('should create component', fakeAsync(() => { expect(component).to.exist; - }); - it('should close modal', () => { - component.close(); + component.ngOnInit(); + flush(); - expect(matDialogRef.close.calledOnce).to.be.true; - }); + expect(globalActions.setTrainingCard.calledOnce).to.be.true; + expect(globalActions.setTrainingCard.args[0][0]).to.deep.equal({ isOpen: true }); + })); - it('should unsubscribe from everything, cancel geohandle and clear enketo form', fakeAsync(() => { - const unsubscribeStub = sinon.stub(component.subscription, 'unsubscribe'); + it('should unsubscribe from store and clear training cards state', () => { + const unsubscribeStub = sinon.stub(component.subscriptions, 'unsubscribe'); - store.overrideSelector(Selectors.getTrainingCardFormId, 'training:a_form_id'); - store.refreshState(); - tick(); - sinon.resetHistory(); component.ngOnDestroy(); - tick(); expect(unsubscribeStub.calledOnce).to.be.true; - expect(geoHandle.cancel.calledOnce).to.be.true; - expect(formService.unload.calledOnce).to.be.true; - expect(globalActions.clearEnketoStatus.calledOnce).to.be.true; - })); - - it('should close modal when quiting training', fakeAsync(() => { - sinon.resetHistory(); - const xmlForm = { _id: 'training:a_form_id', some: 'content' }; - const renderedForm = { rendered: 'form', model: {}, instance: {} }; - xmlFormsService.get.resolves(xmlForm); - formService.render.resolves(renderedForm); - store.overrideSelector(Selectors.getTrainingCardFormId, 'training:a_form_id'); - store.overrideSelector( - Selectors.getTrainingCard, - { formId: '', isOpen: false, showConfirmExit: false, nextUrl: '' } - ); - store.refreshState(); - tick(); - - component.quitTraining(); - - expect(matDialogRef.close.calledOnce).to.be.true; - expect(geolocationService.init.calledOnce).to.be.true; - expect(xmlFormsService.get.calledOnce).to.be.true; - expect(xmlFormsService.get.args[0]).to.deep.equal([ 'training:a_form_id' ]); - expect(formService.render.calledOnce).to.be.true; - expect(formService.render.args[0][0].formDoc).to.deep.equal(xmlForm); - expect(component.form).to.equal(renderedForm); - expect(consoleErrorMock.notCalled).to.be.true; - expect(feedbackService.submit.notCalled).to.be.true; - expect(stopPerformanceTrackStub.callCount).to.equal(2); - expect(stopPerformanceTrackStub.args[0][0]).to.deep.equal({ name: 'enketo:training:a_form_id:add:render' }); - expect(stopPerformanceTrackStub.args[1][0]).to.deep.equal({ name: 'enketo:training:a_form_id:add:quit' }); - expect(globalActions.setTrainingCard.args[0]).to.deep.equal([{ - formId: null, - isOpen: false, - showConfirmExit: false, - nextUrl: null, - }]); - })); - - it('should get training card state from store', fakeAsync(() => { - sinon.resetHistory(); - store.overrideSelector( - Selectors.getTrainingCard, - { formId: '', isOpen: true, showConfirmExit: true, nextUrl: '/next/page' } - ); - store.refreshState(); - tick(); + expect(globalActions.clearTrainingCards.calledOnce).to.be.true; + }); - component.ngOnInit(); + it('should set training cards state when not quitting the training', () => { + component.continueTraining(); expect(globalActions.setTrainingCard.calledOnce).to.be.true; - expect(globalActions.setTrainingCard.args[0][0]).to.deep.equal({ isOpen: true }); - expect(component.showConfirmExit).to.be.true; - expect(component.nextUrl).to.equal('/next/page'); - })); + expect(globalActions.setTrainingCard.args[0][0]).to.deep.equal({ showConfirmExit: false }); + }); - it('should navigate to nextUrl if present', () => { - sinon.resetHistory(); - component.nextUrl = '/next/page'; - component.quitTraining(); + it('should exit training and navigate to nextUrl if present', () => { + const nextUrl = '/next/page'; + component.exitTraining(nextUrl); + + expect(stopPerformanceTrackStub.calledOnce).to.be.true; expect(matDialogRef.close.calledOnce).to.be.true; + expect(globalActions.clearTrainingCards.calledOnce).to.be.true; expect(routerMock.navigateByUrl.calledOnce).to.be.true; - expect(routerMock.navigateByUrl.args[0]).to.have.deep.members(['/next/page']); + expect(routerMock.navigateByUrl.args[0][0]).to.equal(nextUrl); }); - it('should not navigate to nextUrl if not present', () => { - sinon.resetHistory(); - component.nextUrl = null; - component.quitTraining(); + it('should exit training and not navigate to nextUrl if not present', () => { + component.exitTraining(''); + expect(stopPerformanceTrackStub.calledOnce).to.be.true; expect(matDialogRef.close.calledOnce).to.be.true; + expect(globalActions.clearTrainingCards.calledOnce).to.be.true; expect(routerMock.navigateByUrl.notCalled).to.be.true; }); - describe('onInit', () => { - it('should subscribe to redux and init component', () => { - const AddSpy = sinon.spy(component.subscription, 'add'); - sinon.resetHistory(); - - component.ngOnInit(); - - expect(AddSpy.calledOnce).to.be.true; - expect(component.contentError).to.be.false; - expect(component.trainingCardFormId).to.be.null; - expect(component.form).to.be.null; - expect(component.loadingContent).to.be.true; - expect(component.hideModalFooter).to.be.true; - expect(component.nextUrl).to.be.undefined; - expect(component.showConfirmExit).to.be.undefined; - }); - - it('should reset component', () => { - component.contentError = true; - component.trainingCardFormId = 'training:a_form_id'; - component.form = { the: 'rendered training form' }; - component.loadingContent = false; - component.hideModalFooter = false; - component.enketoError = 'some_error'; - sinon.resetHistory(); - - component.ngOnInit(); - - expect(globalActions.setEnketoError.calledOnce).to.be.true; - expect(globalActions.setEnketoError.args[0]).to.deep.equal([ null ]); - expect(component.contentError).to.be.false; - expect(component.trainingCardFormId).to.be.null; - expect(component.form).to.be.null; - expect(component.loadingContent).to.be.true; - expect(component.hideModalFooter).to.be.true; - }); - }); - - describe('saveForm', () => { - it('should do nothing if already saving', fakeAsync(() => { - const consoleDebugMock = sinon.stub(console, 'debug'); - component.enketoSaving = true; - - component.saveForm(); - tick(); - - expect(consoleDebugMock.calledOnce).to.be.true; - expect(consoleDebugMock.args[0]).to.deep.equal([ - 'Attempted to call TrainingCardsComponent:saveForm more than once' - ]); - expect(formService.save.notCalled).to.be.true; - expect(formService.unload.notCalled).to.be.true; - expect(globalActions.setEnketoSavingStatus.notCalled).to.be.true; - expect(globalActions.setSnackbarContent.notCalled).to.be.true; - expect(globalActions.setEnketoError.notCalled).to.be.true; - expect(matDialogRef.close.notCalled).to.be.true; - })); - - it('should call enketo save, set content in snackbar and unload form', fakeAsync(() => { - const consoleDebugMock = sinon.stub(console, 'debug'); - xmlFormsService.get.resolves({ _id: 'form:training:new_feature' }); - formService.save.resolves([{ _id: 'completed_training' }]); - formService.render.resolves({ - _id: 'form:training:new_feature', - pages: { activePages: [ { id: 'page-1' } ] }, - }); - - store.overrideSelector(Selectors.getTrainingCardFormId, 'training:a_form_id'); - store.refreshState(); - tick(); - component.saveForm(); - tick(); - - expect(formService.unload.calledOnce).to.be.true; - expect(formService.unload.args[0]).to.deep.equal([{ - _id: 'form:training:new_feature', - pages: { activePages: [ { id: 'page-1' } ] }, - }]); - expect(formService.save.calledOnce).to.be.true; - expect(formService.save.args[0]).to.deep.equal([ - 'training:a_form_id', - { - _id: 'form:training:new_feature', - pages: { activePages: [ { id: 'page-1' } ] }, - }, - geoHandle - ]); - expect(consoleDebugMock.callCount).to.equal(1); - expect(consoleDebugMock.args[0]).to.deep.equal([ - 'Saved form and associated docs', - [{ _id: 'completed_training' }] - ]); - expect(globalActions.setEnketoSavingStatus.calledTwice).to.be.true; - expect(globalActions.setEnketoSavingStatus.args).to.deep.equal([[ true ], [ false ]]); - expect(globalActions.setSnackbarContent.calledOnce).to.be.true; - expect(globalActions.setSnackbarContent.args[0]).to.deep.equal([ 'training_cards.form.saved' ]); - expect(stopPerformanceTrackStub.callCount).to.equal(3); - expect(stopPerformanceTrackStub.args[0][0]).to.deep.equal({ name: 'enketo:training:a_form_id:add:render' }); - expect(stopPerformanceTrackStub.args[1][0]) - .to.deep.equal({ name: 'enketo:training:a_form_id:add:user_edit_time' }); - expect(stopPerformanceTrackStub.args[2][0]).to.deep.equal({ name: 'enketo:training:a_form_id:add:save' }); - expect(globalActions.setEnketoError.notCalled).to.be.true; - expect(matDialogRef.close.calledOnce).to.be.true; - })); - - it('should catch enketo saving error', fakeAsync(() => { - sinon.resetHistory(); - xmlFormsService.get.resolves({ the: 'rendered training form' }); - formService.render.resolves({ the: 'rendered training form' }); - formService.save.rejects({ some: 'error' }); - store.overrideSelector(Selectors.getTrainingCardFormId, 'training:a_form_id'); - store.refreshState(); - tick(); - - component.saveForm(); - tick(); + it('should close training cards', () => { + component.close(); - expect(formService.save.calledOnce).to.be.true; - expect(formService.save.args[0]).to.deep.equal([ - 'training:a_form_id', - { the: 'rendered training form' }, - geoHandle - ]); - expect(consoleErrorMock.calledOnce).to.be.true; - expect(consoleErrorMock.args[0]).to.deep.equal([ - 'Training Cards :: Error submitting form data.', - { some: 'error' } - ]); - expect(globalActions.setEnketoError.calledOnce).to.be.true; - expect(globalActions.setEnketoError.args[0]).to.deep.equal([ 'training_cards.error.save' ]); - expect(globalActions.setEnketoSavingStatus.calledTwice).to.be.true; - expect(globalActions.setEnketoSavingStatus.args).to.deep.equal([[ true ], [ false ]]); - expect(matDialogRef.close.notCalled).to.be.true; - expect(globalActions.setSnackbarContent.notCalled).to.be.true; - })); + expect(matDialogRef.close.calledOnce).to.be.true; + expect(globalActions.clearTrainingCards.calledOnce).to.be.true; }); - describe('loadForm', () => { - it('should load form', fakeAsync(() => { - sinon.resetHistory(); - const xmlForm = { _id: 'training:a_form_id', some: 'content' }; - const renderedForm = { rendered: 'form', model: {}, instance: {} }; - xmlFormsService.get.resolves(xmlForm); - formService.render.resolves(renderedForm); - store.overrideSelector(Selectors.getTrainingCardFormId, 'training:a_form_id'); - store.refreshState(); - tick(); - - expect(geolocationService.init.calledOnce).to.be.true; - expect(xmlFormsService.get.calledOnce).to.be.true; - expect(xmlFormsService.get.args[0]).to.deep.equal([ 'training:a_form_id' ]); - expect(formService.render.calledOnce).to.be.true; - expect(formService.render.args[0][0].formDoc).to.deep.equal(xmlForm); - expect(component.form).to.equal(renderedForm); - expect(consoleErrorMock.notCalled).to.be.true; - expect(feedbackService.submit.notCalled).to.be.true; - expect(stopPerformanceTrackStub.calledOnce).to.be.true; - expect(stopPerformanceTrackStub.args[0][0]).to.deep.equal({ name: 'enketo:training:a_form_id:add:render' }); - - const resetFormError = formService.render.args[0][0].valuechangeListener; - resetFormError(); - expect(globalActions.setEnketoError.notCalled).to.be.true; // No error so no call - component.enketoError = 'some error'; - resetFormError(); - expect(globalActions.setEnketoError.calledOnce).to.be.true; - expect(globalActions.setEnketoError.args[0]).to.deep.equal([ null ]); - })); - - it('should reset geohandle on reload', fakeAsync(() => { - store.overrideSelector(Selectors.getTrainingCardFormId, 'training:a_form_id'); - store.refreshState(); - tick(); - - expect(geoHandle.cancel.notCalled).to.be.true; - expect(geolocationService.init.calledOnce).to.be.true; - - store.overrideSelector(Selectors.getTrainingCardFormId, 'training:another_form_id'); - store.refreshState(); - tick(); - - expect(geolocationService.init.calledTwice).to.be.true; - expect(geoHandle.cancel.calledOnce).to.be.true; - })); - - it('should catch form loading errors', fakeAsync(() => { - xmlFormsService.get.rejects({ error: 'boom' }); - sinon.resetHistory(); - store.overrideSelector(Selectors.getTrainingCardFormId, 'training:a_form_id'); - store.refreshState(); - tick(); - - expect(xmlFormsService.get.calledOnce).to.be.true; - expect(formService.render.notCalled).to.be.true; - expect(consoleErrorMock.calledOnce).to.be.true; - expect(consoleErrorMock.args[0]).to.deep.equal([ - 'Training Cards :: Error fetching form.', - { error: 'boom' } - ]); - expect(component.errorTranslationKey).to.equal('training_cards.error.loading'); - expect(component.loadingContent).to.be.false; - expect(component.hideModalFooter).to.be.false; - expect(component.contentError).to.be.true; - })); - - it('should catch enketo errors', fakeAsync(() => { - xmlFormsService.get.resolves({ _id: 'training:a_form_id', some: 'content' }); - formService.render.rejects({ some: 'error' }); - sinon.resetHistory(); - store.overrideSelector(Selectors.getTrainingCardFormId, 'training:a_form_id'); - store.refreshState(); - tick(); - - expect(xmlFormsService.get.calledOnce).to.be.true; - expect(formService.render.calledOnce).to.be.true; - expect(component.form).to.equal(null); - expect(consoleErrorMock.calledOnce).to.be.true; - expect(consoleErrorMock.args[0]).to.deep.equal([ - 'Training Cards :: Error rendering form.', - { some: 'error' } - ]); - })); - }); }); + diff --git a/webapp/tests/karma/ts/modules/trainings/trainings-content.component.spec.ts b/webapp/tests/karma/ts/modules/trainings/trainings-content.component.spec.ts new file mode 100644 index 00000000000..f49adeaa107 --- /dev/null +++ b/webapp/tests/karma/ts/modules/trainings/trainings-content.component.spec.ts @@ -0,0 +1,173 @@ +import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { provideMockStore } from '@ngrx/store/testing'; +import { ActivatedRoute, Router } from '@angular/router'; +import { expect } from 'chai'; +import sinon from 'sinon'; +import { of, Subject } from 'rxjs'; + +import { GlobalActions } from '@mm-actions/global'; +import { PerformanceService } from '@mm-services/performance.service'; +import { ModalLayoutComponent } from '@mm-components/modal-layout/modal-layout.component'; +import { TrainingCardsFormComponent } from '@mm-components/training-cards-form/training-cards-form.component'; +import { XmlFormsService } from '@mm-services/xml-forms.service'; +import { FormService } from '@mm-services/form.service'; +import { GeolocationService } from '@mm-services/geolocation.service'; +import { EnketoComponent } from '@mm-components/enketo/enketo.component'; +import { Selectors } from '@mm-selectors/index'; +import { TrainingsContentComponent } from '@mm-modules/trainings/trainings-content.component'; +import { ModalService } from '@mm-services/modal.service'; + +describe('TrainingsContentComponent', () => { + let fixture: ComponentFixture; + let component: TrainingsContentComponent; + let modalService; + let globalActions; + let performanceService; + let stopPerformanceTrackStub; + let routerMock; + + beforeEach(() => { + modalService = { show: sinon.stub() }; + routerMock = { + navigateByUrl: sinon.stub(), + navigate: sinon.stub(), + }; + globalActions = { + clearTrainingCards: sinon.stub(GlobalActions.prototype, 'clearTrainingCards'), + setTrainingCard: sinon.stub(GlobalActions.prototype, 'setTrainingCard'), + clearNavigation: sinon.stub(GlobalActions.prototype, 'clearNavigation'), + }; + stopPerformanceTrackStub = sinon.stub(); + performanceService = { track: sinon.stub().returns({ stop: stopPerformanceTrackStub }) }; + const mockedSelectors = [ + { selector: Selectors.getTrainingCardFormId, value: null }, + ]; + + return TestBed + .configureTestingModule({ + imports: [ + TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: TranslateFakeLoader } }), + ], + declarations: [ + TrainingsContentComponent, + ModalLayoutComponent, + TrainingCardsFormComponent, + EnketoComponent, + ], + providers: [ + provideMockStore({ selectors: mockedSelectors }), + { provide: ActivatedRoute, useValue: { params: new Subject() } }, + { provide: PerformanceService, useValue: performanceService }, + { provide: ModalService, useValue: modalService }, + { provide: Router, useValue: routerMock }, + { provide: XmlFormsService, useValue: {} }, + { provide: FormService, useValue: { unload: sinon.stub() } }, + { provide: GeolocationService, useValue: {} }, + ], + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(TrainingsContentComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + sinon.resetHistory(); + }); + }); + + afterEach(() => sinon.restore()); + + it('should unsubscribe from store and clear training cards state', () => { + const unsubscribeStub = sinon.stub(component.subscriptions, 'unsubscribe'); + + component.ngOnDestroy(); + + expect(unsubscribeStub.calledOnce).to.be.true; + expect(globalActions.clearNavigation.calledOnce).to.be.true; + expect(globalActions.clearTrainingCards.calledOnce).to.be.true; + }); + + it('should close confirmation modal when not quitting the training', () => { + const modalRefMock = { close: sinon.stub(), afterClosed: sinon.stub().returns(of(null)) }; + modalService.show.returns(modalRefMock); + component.quit(); + + component.continueTraining(); + + expect(modalRefMock.close.calledOnce).to.be.true; + }); + + it('should exit training and navigate to nextUrl if present', () => { + const modalRefMock = { close: sinon.stub(), afterClosed: sinon.stub().returns(of(null)) }; + modalService.show.returns(modalRefMock); + component.quit(); + + component.exitTraining('/next/url'); + + expect(stopPerformanceTrackStub.calledOnce).to.be.true; + expect(modalRefMock.close.calledOnce).to.be.true; + expect(globalActions.clearNavigation.calledOnce).to.be.true; + expect(globalActions.clearTrainingCards.calledOnce).to.be.true; + expect(routerMock.navigateByUrl.calledOnceWith('/next/url')).to.be.true; + }); + + it('should exit training and navigate to default path', () => { + const modalRefMock = { close: sinon.stub(), afterClosed: sinon.stub().returns(of(null)) }; + modalService.show.returns(modalRefMock); + component.quit(); + + component.exitTraining(''); + + expect(stopPerformanceTrackStub.calledOnce).to.be.true; + expect(modalRefMock.close.calledOnce).to.be.true; + expect(globalActions.clearNavigation.calledOnce).to.be.true; + expect(globalActions.clearTrainingCards.calledOnce).to.be.true; + expect(routerMock.navigateByUrl.notCalled).to.be.true; + expect(routerMock.navigate.calledOnceWith([ '/', 'trainings' ])).to.be.true; + }); + + it('should not show confirm modal if there are errors', () => { + component.hasError = true; + + component.quit(); + + expect(routerMock.navigate.calledOnceWith([ '/', 'trainings' ])).to.be.true; + expect(globalActions.clearNavigation.calledOnce).to.be.true; + expect(globalActions.clearTrainingCards.calledOnce).to.be.true; + expect(component.showConfirmExit).to.be.false; + expect(modalService.show.notCalled).to.be.true; + }); + + it('should show confirm modal if there are not errors', () => { + component.hasError = false; + + component.quit(); + + expect(routerMock.navigate.notCalled).to.be.true; + expect(globalActions.clearNavigation.notCalled).to.be.true; + expect(globalActions.clearTrainingCards.notCalled).to.be.true; + expect(component.showConfirmExit).to.be.true; + expect(modalService.show.calledOnce).to.be.true; + }); + + it('should not deactivate navigation when it cannot exit', () => { + const result = component.canDeactivate('/next/url'); + + expect(result).to.be.false; + expect(globalActions.setTrainingCard.calledOnceWith({ nextUrl: '/next/url' })).to.be.true; + expect(component.showConfirmExit).to.be.true; + expect(modalService.show.calledOnce).to.be.true; + }); + + it('should deactivate navigation when it cannot exit', () => { + component.close(); + + const result = component.canDeactivate('/next/url'); + + expect(result).to.be.true; + expect(globalActions.setTrainingCard.notCalled).to.be.true; + expect(component.showConfirmExit).to.be.false; + expect(modalService.show.notCalled).to.be.true; + }); +}); + diff --git a/webapp/tests/karma/ts/modules/trainings/trainings.component.spec.ts b/webapp/tests/karma/ts/modules/trainings/trainings.component.spec.ts new file mode 100644 index 00000000000..346194e488a --- /dev/null +++ b/webapp/tests/karma/ts/modules/trainings/trainings.component.spec.ts @@ -0,0 +1,200 @@ +import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core'; +import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testing'; +import { MockStore, provideMockStore } from '@ngrx/store/testing'; +import { MatIconModule } from '@angular/material/icon'; +import { RouterModule } from '@angular/router'; +import { expect } from 'chai'; +import sinon from 'sinon'; + +import { GlobalActions } from '@mm-actions/global'; +import { PerformanceService } from '@mm-services/performance.service'; +import { ModalLayoutComponent } from '@mm-components/modal-layout/modal-layout.component'; +import { TrainingCardsFormComponent } from '@mm-components/training-cards-form/training-cards-form.component'; +import { EnketoComponent } from '@mm-components/enketo/enketo.component'; +import { Selectors } from '@mm-selectors/index'; +import { TrainingsComponent } from '@mm-modules/trainings/trainings.component'; +import { TrainingCardsService } from '@mm-services/training-cards.service'; +import { ScrollLoaderProvider } from '@mm-providers/scroll-loader.provider'; +import { ToolBarComponent } from '@mm-components/tool-bar/tool-bar.component'; + +describe('TrainingsComponent', () => { + let fixture: ComponentFixture; + let component: TrainingsComponent; + let globalActions; + let performanceService; + let stopPerformanceTrackStub; + let trainingCardsService; + let scrollLoaderProvider; + let consoleErrorMock; + let store; + + beforeEach(() => { + consoleErrorMock = sinon.stub(console, 'error'); + globalActions = { + unsetSelected: sinon.stub(GlobalActions.prototype, 'unsetSelected'), + }; + stopPerformanceTrackStub = sinon.stub(); + performanceService = { track: sinon.stub().returns({ stop: stopPerformanceTrackStub }) }; + trainingCardsService = { getNextTrainings: sinon.stub() }; + scrollLoaderProvider = { init: sinon.stub() }; + const mockedSelectors = [ + { selector: Selectors.getTrainingMaterials, value: null }, + { selector: Selectors.getTrainingCardFormId, value: null }, + ]; + + return TestBed + .configureTestingModule({ + imports: [ + RouterModule, + MatIconModule, + TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: TranslateFakeLoader } }), + ], + declarations: [ + TrainingsComponent, + ModalLayoutComponent, + TrainingCardsFormComponent, + EnketoComponent, + ToolBarComponent, + ], + providers: [ + provideMockStore({ selectors: mockedSelectors }), + { provide: PerformanceService, useValue: performanceService }, + { provide: TrainingCardsService, useValue: trainingCardsService }, + { provide: ScrollLoaderProvider, useValue: scrollLoaderProvider }, + ], + }) + .overrideComponent(ToolBarComponent, { + set: { + selector: 'mm-tool-bar', + template: '
      Tool bar mock
      ' + } + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(TrainingsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + sinon.resetHistory(); + store = TestBed.inject(MockStore); + }); + }); + + afterEach(() => { + store.resetSelectors(); + sinon.restore(); + }); + + it('should unsubscribe from store and clear selected from global state', () => { + const unsubscribeStub = sinon.stub(component.subscriptions, 'unsubscribe'); + + component.ngOnDestroy(); + + expect(unsubscribeStub.calledOnce).to.be.true; + expect(globalActions.unsetSelected.calledOnce).to.be.true; + }); + + it('should not get trainings when no forms', fakeAsync(async () => { + store.overrideSelector(Selectors.getTrainingMaterials, []); + store.refreshState(); + flush(); + + expect(trainingCardsService.getNextTrainings.notCalled).to.be.true; + })); + + it('should load trainings when there are forms', fakeAsync(async () => { + trainingCardsService.getNextTrainings.returns([ { code: 'form-1' } ]); + store.overrideSelector(Selectors.getTrainingMaterials, [ { _id: 'form-1' }, { _id: 'form-2' } ]); + store.refreshState(); + flush(); + + expect(trainingCardsService.getNextTrainings.calledOnce).to.be.true; + expect(trainingCardsService.getNextTrainings.args[0]).to.have.deep.members([ + [ { _id: 'form-1' }, { _id: 'form-2' } ], + 50, + 0, + ]); + expect(component.moreTrainings).to.be.false; + expect(component.loading).to.be.false; + expect(component.trainingList).to.have.deep.members([ { code: 'form-1' } ]); + expect(stopPerformanceTrackStub.calledOnce).to.be.true; + expect(scrollLoaderProvider.init.calledOnce).to.be.true; + expect(consoleErrorMock.notCalled).to.be.true; + })); + + it('should load next page of trainings', fakeAsync(async () => { + store.overrideSelector(Selectors.getTrainingMaterials, [ { _id: 'form-3' }, { _id: 'form-4' } ]); + store.refreshState(); + flush(); + sinon.resetHistory(); + const previousPage = Array + .from({ length: 50 }) + .map((form, index) => ({ + code: 'form-x-' + index, + id: 'form-id', + title: 'training-x', + startDate: new Date(), + duration: 1, + userRoles: [ 'chw' ], + isCompletedTraining: true, + })); + const nextPage = Array + .from({ length: 50 }) + .map((form, index) => ({ + code: 'form-y-' + index, + id: 'form-id', + title: 'training-y', + startDate: new Date(), + duration: 1, + userRoles: [ 'chw' ], + isCompletedTraining: true, + })); + component.trainingList = [...previousPage]; + trainingCardsService.getNextTrainings.returns(nextPage); + + await component.getTrainings(); + + expect(trainingCardsService.getNextTrainings.calledOnce).to.be.true; + expect(trainingCardsService.getNextTrainings.args[0]).to.have.deep.members([ + [ { _id: 'form-3' }, { _id: 'form-4' } ], + 50, + 50, + ]); + expect(component.moreTrainings).to.be.true; + expect(component.loading).to.be.false; + expect(component.trainingList).to.have.deep.members([ ...previousPage, ...nextPage ]); + expect(scrollLoaderProvider.init.calledOnce).to.be.true; + expect(consoleErrorMock.notCalled).to.be.true; + })); + + it('should catch error when loading a page of trainings', fakeAsync(async () => { + store.overrideSelector(Selectors.getTrainingMaterials, [ { _id: 'form-3' } ]); + store.refreshState(); + flush(); + sinon.resetHistory(); + component.trainingList = [{ + code: 'form-x', + id: 'form-id', + title: 'training-x', + startDate: new Date(), + duration: 1, + userRoles: [ 'chw' ], + isCompletedTraining: true, + }]; + trainingCardsService.getNextTrainings.throws(new Error('Ups an error')); + + await component.getTrainings(); + + expect(trainingCardsService.getNextTrainings.calledOnce).to.be.true; + expect(trainingCardsService.getNextTrainings.args[0]).to.have.deep.members([ + [ { _id: 'form-3' } ], + 50, + 1, + ]); + expect(component.loading).to.be.false; + expect(stopPerformanceTrackStub.notCalled).to.be.true; + expect(scrollLoaderProvider.init.notCalled).to.be.true; + expect(consoleErrorMock.calledOnce).to.be.true; + expect(consoleErrorMock.args[0][0]).to.equal('Error getting training materials.'); + })); +}); + diff --git a/webapp/tests/karma/ts/selectors/index.spec.ts b/webapp/tests/karma/ts/selectors/index.spec.ts index ef29ab4fd92..579d7425eda 100644 --- a/webapp/tests/karma/ts/selectors/index.spec.ts +++ b/webapp/tests/karma/ts/selectors/index.spec.ts @@ -15,6 +15,7 @@ const globalState: GlobalState = { showContent: true, selectMode: false, forms: [ { _id: 'these' } ], + trainingMaterials: [ { _id: 'these' } ], filters: { some: 'filters' }, sidebarFilter: { isOpen: false, diff --git a/webapp/tests/karma/ts/services/training-cards.service.spec.ts b/webapp/tests/karma/ts/services/training-cards.service.spec.ts index e7a67de3c7d..387c3718c4a 100644 --- a/webapp/tests/karma/ts/services/training-cards.service.spec.ts +++ b/webapp/tests/karma/ts/services/training-cards.service.spec.ts @@ -10,7 +10,8 @@ import { ModalService } from '@mm-services/modal.service'; import { TrainingCardsService } from '@mm-services/training-cards.service'; import { SessionService } from '@mm-services/session.service'; import { RouteSnapshotService } from '@mm-services/route-snapshot.service'; -import { FeedbackService } from '@mm-services/feedback.service'; +import { TranslateService } from '@ngx-translate/core'; +import { TranslateFromService } from '@mm-services/translate-from.service'; describe('TrainingCardsService', () => { let service: TrainingCardsService; @@ -20,24 +21,22 @@ describe('TrainingCardsService', () => { let modalService; let localDb; let clock; - let consoleErrorMock; + let consoleErrorSpy; let sessionService; let routeSnapshotService; - let feedbackService; beforeEach(() => { - localDb = { allDocs: sinon.stub() }; + localDb = { allDocs: sinon.stub().resolves({}) }; dbService = { get: () => localDb }; globalActions = { setTrainingCard: sinon.stub(GlobalActions.prototype, 'setTrainingCard') }; xmlFormsService = { subscribe: sinon.stub() }; modalService = { show: sinon.stub() }; sessionService = { - userCtx: sinon.stub(), + userCtx: sinon.stub().returns({}), hasRole: sinon.spy(SessionService.prototype, 'hasRole'), }; - feedbackService = { submit: sinon.stub() }; - consoleErrorMock = sinon.stub(console, 'error'); - routeSnapshotService = { get: sinon.stub() }; + consoleErrorSpy = sinon.spy(console, 'error'); + routeSnapshotService = { get: sinon.stub().returns({}) }; TestBed.configureTestingModule({ providers: [ @@ -47,22 +46,23 @@ describe('TrainingCardsService', () => { { provide: ModalService, useValue: modalService }, { provide: SessionService, useValue: sessionService }, { provide: RouteSnapshotService, useValue: routeSnapshotService }, - { provide: FeedbackService, useValue: feedbackService }, - ] + { provide: TranslateService, useValue: { instant: sinon.stub() } }, + { provide: TranslateFromService, useValue: { get: sinon.stub().returnsArg(0) } }, + ], }); service = TestBed.inject(TrainingCardsService); }); afterEach(() => { - clock && clock.restore(); + clock?.restore(); sinon.restore(); document .querySelectorAll('#enketo-test') .forEach(element => element.remove()); }); - it('should set uncompleted training form when none are completed', async () => { + it('should show uncompleted training when none are completed', async () => { sessionService.userCtx.returns({ roles: [ 'chw' ], name: 'a_user' }); localDb.allDocs.resolves({ rows: [] }); clock = sinon.useFakeTimers(new Date('2022-05-23 20:29:25')); @@ -104,16 +104,10 @@ describe('TrainingCardsService', () => { }, }, ]; - service.initTrainingCards(); - - expect(xmlFormsService.subscribe.calledOnce).to.be.true; - expect(xmlFormsService.subscribe.args[0][0]).to.equal('TrainingCards'); - expect(xmlFormsService.subscribe.args[0][1]).to.deep.equal({ trainingCards: true }); - const callback = xmlFormsService.subscribe.args[0][2]; - await callback(null, xforms); + await service.displayTrainingCards(xforms, true, true); - expect(sessionService.userCtx.calledOnce).to.be.true; + expect(sessionService.userCtx.calledTwice).to.be.true; expect(sessionService.hasRole.callCount).to.equal(4); expect(localDb.allDocs.calledOnce).to.be.true; expect(localDb.allDocs.args[0][0]).to.deep.equal({ @@ -121,13 +115,12 @@ describe('TrainingCardsService', () => { startkey: 'training:a_user:', endkey: 'training:a_user:\ufff0', }); - expect(globalActions.setTrainingCard.calledOnce); + expect(globalActions.setTrainingCard.calledOnce).to.be.true; expect(globalActions.setTrainingCard.args[0]).to.deep.equal([ { formId: 'training:form-b' } ]); - expect(consoleErrorMock.notCalled).to.be.true; - expect(feedbackService.submit.notCalled).to.be.true; + expect(consoleErrorSpy.notCalled).to.be.true; }); - it('should set uncompleted training form when there are some completed', async () => { + it('should show uncompleted training when there are some completed', async () => { sessionService.userCtx.returns({ roles: [ 'chw' ], name: 'a_user' }); localDb.allDocs.resolves({ rows: [ { doc: { form: 'training:form-a' } }, @@ -172,16 +165,10 @@ describe('TrainingCardsService', () => { }, }, ]; - service.initTrainingCards(); - - expect(xmlFormsService.subscribe.calledOnce).to.be.true; - expect(xmlFormsService.subscribe.args[0][0]).to.equal('TrainingCards'); - expect(xmlFormsService.subscribe.args[0][1]).to.deep.equal({ trainingCards: true }); - const callback = xmlFormsService.subscribe.args[0][2]; - await callback(null, xforms); + await service.displayTrainingCards(xforms, true, true); - expect(sessionService.userCtx.calledOnce).to.be.true; + expect(sessionService.userCtx.calledTwice).to.be.true; expect(sessionService.hasRole.callCount).to.equal(4); expect(localDb.allDocs.calledOnce).to.be.true; expect(localDb.allDocs.args[0][0]).to.deep.equal({ @@ -189,11 +176,10 @@ describe('TrainingCardsService', () => { startkey: 'training:a_user:', endkey: 'training:a_user:\ufff0', }); - expect(globalActions.setTrainingCard.calledOnce); + expect(globalActions.setTrainingCard.calledOnce).to.be.true; expect(globalActions.setTrainingCard.args[0]).to.deep.equal([ { formId: 'training:form-d' } ]); - expect(modalService.show.notCalled).to.be.true; - expect(consoleErrorMock.notCalled).to.be.true; - expect(feedbackService.submit.notCalled).to.be.true; + expect(modalService.show.calledOnce).to.be.true; + expect(consoleErrorSpy.notCalled).to.be.true; }); it('should show uncompleted training form when they dont have duration set', async () => { @@ -229,16 +215,10 @@ describe('TrainingCardsService', () => { }, }, ]; - service.initTrainingCards(); - expect(xmlFormsService.subscribe.calledOnce).to.be.true; - expect(xmlFormsService.subscribe.args[0][0]).to.equal('TrainingCards'); - expect(xmlFormsService.subscribe.args[0][1]).to.deep.equal({ trainingCards: true }); - const callback = xmlFormsService.subscribe.args[0][2]; - - await callback(null, xforms); + await service.displayTrainingCards(xforms, true, true); - expect(sessionService.userCtx.calledOnce).to.be.true; + expect(sessionService.userCtx.calledTwice).to.be.true; expect(sessionService.hasRole.calledThrice).to.be.true; expect(localDb.allDocs.calledOnce).to.be.true; expect(localDb.allDocs.args[0][0]).to.deep.equal({ @@ -246,11 +226,10 @@ describe('TrainingCardsService', () => { startkey: 'training:a_user:', endkey: 'training:a_user:\ufff0', }); - expect(globalActions.setTrainingCard.calledOnce); + expect(globalActions.setTrainingCard.calledOnce).to.be.true; expect(globalActions.setTrainingCard.args[0]).to.deep.equal([ { formId: 'training:form-c' } ]); - expect(modalService.show.notCalled).to.be.true; - expect(consoleErrorMock.notCalled).to.be.true; - expect(feedbackService.submit.notCalled).to.be.true; + expect(modalService.show.calledOnce).to.be.true; + expect(consoleErrorSpy.notCalled).to.be.true; }); it('should show uncompleted training form when they dont have start_date set', async () => { @@ -294,16 +273,10 @@ describe('TrainingCardsService', () => { }, }, ]; - service.initTrainingCards(); - expect(xmlFormsService.subscribe.calledOnce).to.be.true; - expect(xmlFormsService.subscribe.args[0][0]).to.equal('TrainingCards'); - expect(xmlFormsService.subscribe.args[0][1]).to.deep.equal({ trainingCards: true }); - const callback = xmlFormsService.subscribe.args[0][2]; - - await callback(null, xforms); + await service.displayTrainingCards(xforms, true, true); - expect(sessionService.userCtx.calledOnce).to.be.true; + expect(sessionService.userCtx.calledTwice).to.be.true; expect(sessionService.hasRole.callCount).to.equal(4); expect(localDb.allDocs.calledOnce).to.be.true; expect(localDb.allDocs.args[0][0]).to.deep.equal({ @@ -311,11 +284,30 @@ describe('TrainingCardsService', () => { startkey: 'training:a_user:', endkey: 'training:a_user:\ufff0', }); - expect(globalActions.setTrainingCard.calledOnce); + expect(globalActions.setTrainingCard.calledOnce).to.be.true; expect(globalActions.setTrainingCard.args[0]).to.deep.equal([ { formId: 'training:form-c' } ]); + expect(modalService.show.calledOnce).to.be.true; + expect(consoleErrorSpy.notCalled).to.be.true; + }); + + it('should not show training when privacy policy has not been accepted yet', async () => { + sessionService.userCtx.returns({ roles: [ 'chw' ], name: 'a_user' }); + localDb.allDocs.resolves({ rows: []}); + clock = sinon.useFakeTimers(new Date('2022-05-23 20:29:25')); + const xforms = [{ + _id: 'form:training:abc-100', + internalId: 'training:form-c', + context: { duration: 9, user_roles: [ 'chw' ] }, + }]; + + await service.displayTrainingCards(xforms, true, false); + + expect(sessionService.userCtx.notCalled).to.be.true; + expect(sessionService.hasRole.notCalled).to.be.true; + expect(localDb.allDocs.notCalled).to.be.true; + expect(globalActions.setTrainingCard.notCalled).to.be.true; expect(modalService.show.notCalled).to.be.true; - expect(consoleErrorMock.notCalled).to.be.true; - expect(feedbackService.submit.notCalled).to.be.true; + expect(consoleErrorSpy.notCalled).to.be.true; }); it('should not show training form when all trainings are completed', async () => { @@ -355,16 +347,10 @@ describe('TrainingCardsService', () => { }, }, ]; - service.initTrainingCards(); - - expect(xmlFormsService.subscribe.calledOnce).to.be.true; - expect(xmlFormsService.subscribe.args[0][0]).to.equal('TrainingCards'); - expect(xmlFormsService.subscribe.args[0][1]).to.deep.equal({ trainingCards: true }); - const callback = xmlFormsService.subscribe.args[0][2]; - await callback(null, xforms); + await service.displayTrainingCards(xforms, true, true); - expect(sessionService.userCtx.calledOnce).to.be.true; + expect(sessionService.userCtx.calledTwice).to.be.true; expect(sessionService.hasRole.calledThrice).to.be.true; expect(localDb.allDocs.calledOnce).to.be.true; expect(localDb.allDocs.args[0][0]).to.deep.equal({ @@ -374,8 +360,7 @@ describe('TrainingCardsService', () => { }); expect(globalActions.setTrainingCard.notCalled).to.be.true; expect(modalService.show.notCalled).to.be.true; - expect(consoleErrorMock.notCalled).to.be.true; - expect(feedbackService.submit.notCalled).to.be.true; + expect(consoleErrorSpy.notCalled).to.be.true; }); it('should not show training forms when all trainings have expired', async () => { @@ -413,21 +398,14 @@ describe('TrainingCardsService', () => { }, }, ]; - service.initTrainingCards(); - - expect(xmlFormsService.subscribe.calledOnce).to.be.true; - expect(xmlFormsService.subscribe.args[0][0]).to.equal('TrainingCards'); - expect(xmlFormsService.subscribe.args[0][1]).to.deep.equal({ trainingCards: true }); - const callback = xmlFormsService.subscribe.args[0][2]; - await callback(null, xforms); + await service.displayTrainingCards(xforms, true, true); expect(sessionService.hasRole.calledThrice).to.be.true; expect(localDb.allDocs.notCalled).to.be.true; expect(globalActions.setTrainingCard.notCalled).to.be.true; expect(modalService.show.notCalled).to.be.true; - expect(consoleErrorMock.notCalled).to.be.true; - expect(feedbackService.submit.notCalled).to.be.true; + expect(consoleErrorSpy.notCalled).to.be.true; }); it('should not show training forms when all trainings start in the future', async () => { @@ -463,21 +441,14 @@ describe('TrainingCardsService', () => { }, }, ]; - service.initTrainingCards(); - expect(xmlFormsService.subscribe.calledOnce).to.be.true; - expect(xmlFormsService.subscribe.args[0][0]).to.equal('TrainingCards'); - expect(xmlFormsService.subscribe.args[0][1]).to.deep.equal({ trainingCards: true }); - const callback = xmlFormsService.subscribe.args[0][2]; - - await callback(null, xforms); + await service.displayTrainingCards(xforms, true, true); expect(sessionService.hasRole.calledThrice).to.be.true; expect(localDb.allDocs.notCalled).to.be.true; expect(globalActions.setTrainingCard.notCalled).to.be.true; expect(modalService.show.notCalled).to.be.true; - expect(consoleErrorMock.notCalled).to.be.true; - expect(feedbackService.submit.notCalled).to.be.true; + expect(consoleErrorSpy.notCalled).to.be.true; }); it('should not show training forms if their internalID does not have the right prefix', async () => { @@ -513,25 +484,19 @@ describe('TrainingCardsService', () => { }, }, ]; - service.initTrainingCards(); - expect(xmlFormsService.subscribe.calledOnce).to.be.true; - expect(xmlFormsService.subscribe.args[0][0]).to.equal('TrainingCards'); - expect(xmlFormsService.subscribe.args[0][1]).to.deep.equal({ trainingCards: true }); - const callback = xmlFormsService.subscribe.args[0][2]; - - await callback(null, xforms); + await service.displayTrainingCards(xforms, true, true); expect(localDb.allDocs.notCalled).to.be.true; expect(globalActions.setTrainingCard.notCalled).to.be.true; expect(modalService.show.notCalled).to.be.true; - expect(consoleErrorMock.calledThrice).to.be.true; - expect(consoleErrorMock.args[0][0].message) + expect(consoleErrorSpy.calledThrice).to.be.true; + expect(consoleErrorSpy.args[0][0].message) .to.equal('Training Cards :: Incorrect internalId format. Doc ID: form:training:cards-1'); - expect(consoleErrorMock.args[1][0].message) + expect(consoleErrorSpy.args[1][0].message) .to.equal('Training Cards :: Incorrect internalId format. Doc ID: form:training:cards-2'); - expect(consoleErrorMock.args[2][0].message) + expect(consoleErrorSpy.args[2][0].message) .to.equal('Training Cards :: Incorrect internalId format. Doc ID: form:training:cards-3'); }); @@ -539,21 +504,14 @@ describe('TrainingCardsService', () => { sessionService.userCtx.returns({ roles: [ 'chw' ], name: 'a_user' }); localDb.allDocs.resolves({ rows: [] }); clock = sinon.useFakeTimers(new Date('2022-05-23 20:29:25')); - service.initTrainingCards(); - - expect(xmlFormsService.subscribe.calledOnce).to.be.true; - expect(xmlFormsService.subscribe.args[0][0]).to.equal('TrainingCards'); - expect(xmlFormsService.subscribe.args[0][1]).to.deep.equal({ trainingCards: true }); - const callback = xmlFormsService.subscribe.args[0][2]; - await callback(null, []); + await service.displayTrainingCards([], true, true); expect(sessionService.hasRole.notCalled).to.be.true; expect(localDb.allDocs.notCalled).to.be.true; expect(globalActions.setTrainingCard.notCalled).to.be.true; expect(modalService.show.notCalled).to.be.true; - expect(consoleErrorMock.notCalled).to.be.true; - expect(feedbackService.submit.notCalled).to.be.true; + expect(consoleErrorSpy.notCalled).to.be.true; }); it('should log error from xmlFormsService', async () => { @@ -566,14 +524,10 @@ describe('TrainingCardsService', () => { await callback(new Error('some error'), []); - expect(localDb.allDocs.notCalled).to.be.true; - expect(sessionService.userCtx.notCalled).to.be.true; - expect(sessionService.hasRole.notCalled).to.be.true; expect(globalActions.setTrainingCard.notCalled).to.be.true; - expect(modalService.show.notCalled).to.be.true; - expect(consoleErrorMock.calledOnce).to.be.true; - expect(consoleErrorMock.args[0][0]).to.equal('Training Cards :: Error fetching forms.'); - expect(consoleErrorMock.args[0][1].message).to.equal('some error'); + expect(consoleErrorSpy.calledOnce).to.be.true; + expect(consoleErrorSpy.args[0][0]).to.equal('Training Cards :: Error fetching forms.'); + expect(consoleErrorSpy.args[0][1].message).to.equal('some error'); }); it('should catch exception', async () => { @@ -589,34 +543,37 @@ describe('TrainingCardsService', () => { user_roles: [ 'chw' ], }, }]; - service.initTrainingCards(); - expect(xmlFormsService.subscribe.calledOnce).to.be.true; - expect(xmlFormsService.subscribe.args[0][0]).to.equal('TrainingCards'); - expect(xmlFormsService.subscribe.args[0][1]).to.deep.equal({ trainingCards: true }); - const callback = xmlFormsService.subscribe.args[0][2]; - - await callback(null, xforms); + await service.displayTrainingCards(xforms, true, true); expect(sessionService.hasRole.calledOnce).to.be.true; - expect(sessionService.userCtx.calledOnce).to.be.true; + expect(sessionService.userCtx.calledTwice).to.be.true; expect(localDb.allDocs.calledOnce).to.be.true; expect(globalActions.setTrainingCard.notCalled).to.be.true; expect(modalService.show.notCalled).to.be.true; - expect(consoleErrorMock.calledOnce).to.be.true; - expect(consoleErrorMock.args[0][0]).to.equal('Training Cards :: Error showing modal.'); - expect(consoleErrorMock.args[0][1].message).to.equal('some error'); + expect(consoleErrorSpy.calledOnce).to.be.true; + expect(consoleErrorSpy.args[0][0]).to.equal('Training Cards :: Error showing modal.'); + expect(consoleErrorSpy.args[0][1].message).to.equal('some error'); }); - it('should not display training if route has hideTraining flag', async () => { + it('should display training if route has hideTraining false', async () => { + sessionService.userCtx.returns({ roles: [ 'chw' ], name: 'a_user' }); + localDb.allDocs.resolves({ rows: [ { doc: { form: 'training:form-b' } } ] }); + clock = sinon.useFakeTimers(new Date('2022-05-23 20:29:25')); + const xforms = [ { + _id: 'form:training:abc-100', + internalId: 'training:form-c', + context: { duration: 9, user_roles: [ 'chw' ] }, + }]; + routeSnapshotService.get.returns({ data: { hideTraining: true } }); - service.displayTrainingCards(); + await service.displayTrainingCards(xforms, true, true); + expect(modalService.show.notCalled).to.be.true; - }); - it('should display training', () => { routeSnapshotService.get.returns({ data: { hideTraining: false } }); - service.displayTrainingCards(); + await service.displayTrainingCards(xforms, true, true); + expect(modalService.show.calledOnce).to.be.true; }); @@ -672,16 +629,10 @@ describe('TrainingCardsService', () => { }, }, ]; - service.initTrainingCards(); - expect(xmlFormsService.subscribe.calledOnce).to.be.true; - expect(xmlFormsService.subscribe.args[0][0]).to.equal('TrainingCards'); - expect(xmlFormsService.subscribe.args[0][1]).to.deep.equal({ trainingCards: true }); - const callback = xmlFormsService.subscribe.args[0][2]; + await service.displayTrainingCards(xforms, true, true); - await callback(null, xforms); - - expect(sessionService.userCtx.calledOnce).to.be.true; + expect(sessionService.userCtx.calledTwice).to.be.true; expect(sessionService.hasRole.callCount).to.equal(5); expect(localDb.allDocs.calledOnce).to.be.true; expect(localDb.allDocs.args[0][0]).to.deep.equal({ @@ -689,11 +640,10 @@ describe('TrainingCardsService', () => { startkey: 'training:a_user:', endkey: 'training:a_user:\ufff0', }); - expect(globalActions.setTrainingCard.calledOnce); + expect(globalActions.setTrainingCard.calledOnce).to.be.true; expect(globalActions.setTrainingCard.args[0]).to.deep.equal([ { formId: 'training:form-e' } ]); - expect(modalService.show.notCalled).to.be.true; - expect(consoleErrorMock.notCalled).to.be.true; - expect(feedbackService.submit.notCalled).to.be.true; + expect(modalService.show.calledOnce).to.be.true; + expect(consoleErrorSpy.notCalled).to.be.true; }); it('should show uncompleted training when form does not have user_roles defined', async () => { @@ -721,16 +671,10 @@ describe('TrainingCardsService', () => { }, }, ]; - service.initTrainingCards(); - expect(xmlFormsService.subscribe.calledOnce).to.be.true; - expect(xmlFormsService.subscribe.args[0][0]).to.equal('TrainingCards'); - expect(xmlFormsService.subscribe.args[0][1]).to.deep.equal({ trainingCards: true }); - const callback = xmlFormsService.subscribe.args[0][2]; + await service.displayTrainingCards(xforms, true, true); - await callback(null, xforms); - - expect(sessionService.userCtx.calledOnce).to.be.true; + expect(sessionService.userCtx.calledTwice).to.be.true; expect(sessionService.hasRole.calledOnce).to.be.true; expect(localDb.allDocs.calledOnce).to.be.true; expect(localDb.allDocs.args[0][0]).to.deep.equal({ @@ -738,11 +682,10 @@ describe('TrainingCardsService', () => { startkey: 'training:a_user:', endkey: 'training:a_user:\ufff0', }); - expect(globalActions.setTrainingCard.calledOnce); + expect(globalActions.setTrainingCard.calledOnce).to.be.true; expect(globalActions.setTrainingCard.args[0]).to.deep.equal([ { formId: 'training:form-d' } ]); - expect(modalService.show.notCalled).to.be.true; - expect(consoleErrorMock.notCalled).to.be.true; - expect(feedbackService.submit.notCalled).to.be.true; + expect(modalService.show.calledOnce).to.be.true; + expect(consoleErrorSpy.notCalled).to.be.true; }); it('should evaluate if the internalID is from a training card', () => { @@ -777,46 +720,207 @@ describe('TrainingCardsService', () => { it('should display training when it has not been displayed today', async () => { routeSnapshotService.get.returns({ data: { hideTraining: false } }); - sessionService.userCtx.returns({ name: 'ronald' }); + sessionService.userCtx.returns({ roles: [ 'chw' ], name: 'ronald' }); window.localStorage.setItem('training-cards-last-viewed-date-ronald', '2024-05-23 20:29:25'); clock = sinon.useFakeTimers(new Date('2025-05-25 20:29:25')); + localDb.allDocs.resolves({ rows: [] }); + const xforms = [ { + _id: 'form:training:abc-100', + internalId: 'training:form-c', + context: { duration: 9, user_roles: [ 'chw' ] }, + }]; - service.displayTrainingCards(); + await service.displayTrainingCards(xforms, true, true); expect(modalService.show.calledOnce).to.be.true; }); it('should display training when last viewed date is empty', async () => { + sessionService.userCtx.returns({ roles: [ 'chw' ], name: 'ronald' }); routeSnapshotService.get.returns({ data: { hideTraining: false } }); window.localStorage.setItem('training-cards-last-viewed-date-ronald', ''); clock = sinon.useFakeTimers(new Date('2025-05-25 20:29:25')); + localDb.allDocs.resolves({ rows: [] }); + const xforms = [ { + _id: 'form:training:abc-100', + internalId: 'training:form-c', + context: { duration: 9, user_roles: [ 'chw' ] }, + }]; - service.displayTrainingCards(); + await service.displayTrainingCards(xforms, true, true); expect(modalService.show.calledOnce).to.be.true; }); it('should not display training when it has been displayed today for the same user', async () => { routeSnapshotService.get.returns({ data: { hideTraining: false } }); - sessionService.userCtx.returns({ name: 'ronald' }); + sessionService.userCtx.returns({ roles: [ 'chw' ], name: 'ronald' }); window.localStorage.setItem('training-cards-last-viewed-date-ronald', '2024-05-23 20:29:25'); clock = sinon.useFakeTimers(new Date('2024-05-23 06:29:25')); + localDb.allDocs.resolves({ rows: [] }); + const xforms = [ { + _id: 'form:training:abc-100', + internalId: 'training:form-c', + context: { duration: 9, user_roles: [ 'chw' ] }, + }]; - service.displayTrainingCards(); + await service.displayTrainingCards(xforms, true, true); expect(modalService.show.notCalled).to.be.true; }); it('should display training when it has not been displayed for a different user', async () => { routeSnapshotService.get.returns({ data: { hideTraining: false } }); - sessionService.userCtx.returns({ name: 'sarah' }); + sessionService.userCtx.returns({ roles: [ 'chw' ], name: 'sarah' }); window.localStorage.setItem('training-cards-last-viewed-date-ronald', '2024-05-23 20:29:25'); clock = sinon.useFakeTimers(new Date('2024-05-23 06:29:25')); + localDb.allDocs.resolves({ rows: [ { doc: { form: 'training:form-b' } } ] }); + const xforms = [ { + _id: 'form:training:abc-100', + internalId: 'training:form-c', + context: { duration: 9, user_roles: [ 'chw' ] }, + }]; - service.displayTrainingCards(); + await service.displayTrainingCards(xforms, true, true); expect(modalService.show.calledOnce).to.be.true; }); }); + describe('Get next available trainings', () => { + it('should return list of available trainings', async () => { + sessionService.userCtx.returns({ roles: [ 'chw' ], name: 'a_user' }); + localDb.allDocs.resolves({ rows: [ + { doc: { form: 'training:form-a' } }, + { doc: { form: 'training:form-b' } }, + ]}); + clock = sinon.useFakeTimers(new Date('2022-05-23 20:29:25')); + const xforms = [ + { + _id: 'form:training:abc-789', + internalId: 'training:form-c', + context: { start_date: '2022-05-28', duration: 6, user_roles: [ 'chw' ] }, + }, + { + _id: 'form:training:abc-456', + internalId: 'training:form-a', + context: { start_date: '2022-05-18', duration: 2, user_roles: [ 'chw' ] }, + }, + { + _id: 'form:training:abc-123', + internalId: 'training:form-b', + context: { start_date: '2022-05-21', duration: 3, user_roles: [ 'chw' ] }, + }, + { + _id: 'form:training:abc-098', + internalId: 'training:form-d', + context: { start_date: '2022-05-21', duration: 9, user_roles: [ 'chw' ] }, + }, + ]; + + const result = await service.getNextTrainings(xforms, 50, 0); + + expect(sessionService.userCtx.calledOnce).to.be.true; + expect(sessionService.hasRole.callCount).to.equal(4); + expect(localDb.allDocs.calledOnce).to.be.true; + expect(localDb.allDocs.args[0][0]).to.deep.equal({ + include_docs: true, + startkey: 'training:a_user:', + endkey: 'training:a_user:\ufff0', + }); + expect(result).excluding('startDate').to.have.deep.members([ + { + id: 'form:training:abc-123', + code: 'training:form-b', + isCompletedTraining: true, + title: undefined, + userRoles: [ 'chw' ], + duration: 3, + }, + { + id: 'form:training:abc-098', + code: 'training:form-d', + isCompletedTraining: false, + title: undefined, + userRoles: [ 'chw' ], + duration: 9, + }, + ]); + }); + + it('should paginate the list of available trainings', async () => { + sessionService.userCtx.returns({ roles: [ 'chw' ], name: 'a_user' }); + localDb.allDocs.resolves({ rows: [ + { doc: { form: 'training:form-a' } }, + { doc: { form: 'training:form-b' } }, + ]}); + clock = sinon.useFakeTimers(new Date('2022-05-23 20:29:25')); + const xforms = [ + ...Array.from({ length: 30 }).map((item, index) => ({ + _id: 'form:training:abc-123' + index, + internalId: 'training:form-b', + context: { start_date: '2022-05-21', duration: 3, user_roles: [ 'chw' ] }, + })), + ...Array.from({ length: 30 }).map((item, index) => ({ + _id: 'form:training:abc-789' + index, + internalId: 'training:form-c', + context: { start_date: '2022-05-28', duration: 6, user_roles: [ 'chw' ] }, + })), + ...Array.from({ length: 30 }).map((item, index) => ({ + _id: 'form:training:abc-098' + index, + title: 'A Title', + internalId: 'training:form-d', + context: { start_date: '2022-05-21', duration: 9, user_roles: [ 'chw' ] }, + })), + ]; + + const expectedPage1 = [ + ...Array.from({ length: 30 }).map((item, index) => ({ + id: 'form:training:abc-123' + index, + code: 'training:form-b', + duration: 3, + title: undefined, + isCompletedTraining: true, + userRoles: [ 'chw' ], + })), + ...Array.from({ length: 20 }).map((item, index) => ({ + id: 'form:training:abc-098' + index, + title: 'A Title', + code: 'training:form-d', + isCompletedTraining: false, + duration: 9, + userRoles: [ 'chw' ], + })), + ]; + + const expectedPage2 = [ + ...Array.from({ length: 10 }).map((item, index) => ({ + id: 'form:training:abc-098' + (20 + index), + title: 'A Title', + code: 'training:form-d', + isCompletedTraining: false, + duration: 9, + userRoles: [ 'chw' ], + })), + ]; + + const resultPage1 = await service.getNextTrainings(xforms, 50, 0); + + expect(sessionService.userCtx.calledOnce).to.be.true; + expect(sessionService.hasRole.callCount).to.equal(90); + expect(localDb.allDocs.calledOnce).to.be.true; + expect(localDb.allDocs.args[0][0]).to.deep.equal({ + include_docs: true, + startkey: 'training:a_user:', + endkey: 'training:a_user:\ufff0', + }); + expect(resultPage1?.length).to.equal(50); + expect(resultPage1).excluding('startDate').to.have.deep.members(expectedPage1); + + const resultPage2 = await service.getNextTrainings(xforms, 50, 50); + + expect(resultPage2?.length).to.equal(10); + expect(resultPage2).excluding('startDate').to.have.deep.members(expectedPage2); + }); + }); }); From d36ecf1b12f1095bf5e10512935f3e7c1ee7eaa6 Mon Sep 17 00:00:00 2001 From: Fred <10602047+freddieptf@users.noreply.github.com> Date: Tue, 19 Nov 2024 01:10:04 +0300 Subject: [PATCH 07/30] chore(#9644): update cht-conf gh-action (#9645) Fixes #9644 Adds the commands needed for converting and uploading training forms via the cht-conf gh-action --- .github/actions/deploy-conf/action.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/actions/deploy-conf/action.yml b/.github/actions/deploy-conf/action.yml index 4037f5cd455..557f4223135 100644 --- a/.github/actions/deploy-conf/action.yml +++ b/.github/actions/deploy-conf/action.yml @@ -28,6 +28,6 @@ runs: shell: bash working-directory: ${{ inputs.directory }} - name: run cht - run: npx cht --url=https://${{ inputs.username }}:${{ inputs.password }}@${{ inputs.hostname }} compile-app-settings convert-app-forms convert-collect-forms convert-contact-forms upload-app-settings upload-app-forms upload-collect-forms upload-contact-forms upload-resources upload-custom-translations --force + run: npx cht --url=https://${{ inputs.username }}:${{ inputs.password }}@${{ inputs.hostname }} compile-app-settings convert-app-forms convert-collect-forms convert-contact-forms convert-training-forms upload-app-settings upload-app-forms upload-collect-forms upload-contact-forms upload-training-forms upload-resources upload-custom-translations --force shell: bash working-directory: ${{ inputs.directory }} From b5c91d941cbcac7f06f6f96269b6a60ac0941bf5 Mon Sep 17 00:00:00 2001 From: Joshua Kuestersteffen Date: Wed, 20 Nov 2024 10:29:52 -0600 Subject: [PATCH 08/30] chore(#9561): refactor services to fix cht-from error (#9647) --- .../cht-form/default/person-edit.wdio-spec.js | 3 - tests/integration/cht-form/wdio.conf.js | 20 +- .../ts/modules/messages/messages.component.ts | 24 +-- .../ts/modules/reports/reports.component.ts | 2 +- .../src/ts/modules/tasks/tasks.component.ts | 18 +- .../ts/services/extract-lineage.service.ts | 25 +-- .../src/ts/services/user-contact.service.ts | 18 +- .../messages/messages.component.spec.ts | 15 +- .../modules/reports/reports.component.spec.ts | 12 +- .../ts/modules/tasks/tasks.component.spec.ts | 13 +- .../services/extract-lineage.service.spec.ts | 63 ------- .../ts/services/user-contact.service.spec.ts | 173 ++++++++++++------ 12 files changed, 199 insertions(+), 187 deletions(-) diff --git a/tests/integration/cht-form/default/person-edit.wdio-spec.js b/tests/integration/cht-form/default/person-edit.wdio-spec.js index 9220a09228b..f40bf01dfcd 100644 --- a/tests/integration/cht-form/default/person-edit.wdio-spec.js +++ b/tests/integration/cht-form/default/person-edit.wdio-spec.js @@ -40,9 +40,6 @@ describe('cht-form web component - Edit Person Form', () => { created_by_place_uuid: '' } }, - meta: { - instanceID: 'uuid:c558e232-0951-4ed8-8392-5ed8ac3c81b3' - } }; }); diff --git a/tests/integration/cht-form/wdio.conf.js b/tests/integration/cht-form/wdio.conf.js index 2d89f9daa43..29799c128d6 100644 --- a/tests/integration/cht-form/wdio.conf.js +++ b/tests/integration/cht-form/wdio.conf.js @@ -11,6 +11,17 @@ const logPath = path.join('tests', 'logs'); const browserLogPath = path.join(logPath, 'browser.console.log'); const mockConfig = require('./mock-config'); +const ALLOWED_LOG_MSGS = [ + 'favicon.ico - Failed to load resource: the server responded with a status of 404 (Not Found)', + 'tag was parsed inside of a +