feat(#8513): update target component to use material design

* Chore: update packages * Feat: update targets-below-color * Chore: change order of target card * Chore: update target card styles * Fix: update structure of targets test * Chore: update css styling * Chore: update test to check count number color * Fix: update target aggregate background color * Fix: update tests after targets page changes * Fix: update tests after targets page changes * Fix: update tests after targets page changes * Fix: revert changes * Fix: use saved variable * Fix: add and use target color constant * Fix: delete unused variable * Fix: use color constant * Fix: clean up * Fix: format code --------- Co-authored-by: Ben Kiarie <[email protected]>
medic · Oct 30, 2023 · e4cd644 · e4cd644
1 parent 0cc78cc
commit e4cd644
Show file tree

Hide file tree

Showing 12 changed files with 154 additions and 107 deletions.
diff --git a/tests/e2e/default/analytics/analytics.wdio-spec.js b/tests/e2e/default/analytics/analytics.wdio-spec.js
@@ -10,6 +10,7 @@ const placeFactory = require('@factories/cht/contacts/place');
 const personFactory = require('@factories/cht/contacts/person');
 const chtConfUtils = require('@utils/cht-conf');
 const chtDbUtils = require('@utils/cht-db');
+const { TARGET_MET_COLOR, TARGET_UNMET_COLOR } = analyticsPage;
 
 const updateSettings = async (settings) => {
   await utils.updateSettings(settings, 'api');
@@ -61,14 +62,14 @@ describe('Targets', () => {
     const targets = await analyticsPage.getTargets();
 
     expect(targets).to.have.deep.members([
-      { title: 'Deaths', goal: '0', count: '0' },
-      { title: 'New pregnancies', goal: '20', count: '0' },
-      { title: 'Live births', count: '0' },
-      { title: 'Active pregnancies', count: '0' },
-      { title: 'Active pregnancies with 1+ routine facility visits', count: '0' },
+      { title: 'Deaths', goal: '0', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'New pregnancies', goal: '20', count: '0', countNumberColor: TARGET_UNMET_COLOR },
+      { title: 'Live births', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active pregnancies', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active pregnancies with 1+ routine facility visits', count: '0', countNumberColor: TARGET_MET_COLOR },
       { title: 'In-facility deliveries', percent: '0%', percentCount: '(0 of 0)' },
-      { title: 'Active pregnancies with 4+ routine facility visits', count: '0' },
-      { title: 'Active pregnancies with 8+ routine contacts', count: '0' },
+      { title: 'Active pregnancies with 4+ routine facility visits', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active pregnancies with 8+ routine contacts', count: '0', countNumberColor: TARGET_MET_COLOR },
     ]);
   });
 

diff --git a/tests/e2e/default/enketo/death-report.wdio-spec.js b/tests/e2e/default/enketo/death-report.wdio-spec.js
@@ -11,6 +11,7 @@ const analyticsPage = require('@page-objects/default/analytics/analytics.wdio.pa
 const genericForm = require('@page-objects/default/enketo/generic-form.wdio.page');
 const deathReportForm = require('@page-objects/default/enketo/death-report.page');
 const sentinelUtils = require('@utils/sentinel');
+const { TARGET_MET_COLOR, TARGET_UNMET_COLOR } = analyticsPage;
 
 describe('Submit a death report', () => {
   const places = placeFactory.generateHierarchy();
@@ -74,14 +75,20 @@ describe('Submit a death report', () => {
     const targets = await analyticsPage.getTargets();
 
     expect(targets).to.have.deep.members([
-      { title: 'Deaths', goal: '0', count: '1' },
-      { title: 'New pregnancies', goal: '20', count: '0' },
-      { title: 'Live births', count: '0' },
-      { title: 'Active pregnancies', count: '0' },
-      { title: 'Active pregnancies with 1+ routine facility visits', count: '0' },
+      { title: 'Deaths', goal: '0', count: '1', countNumberColor: TARGET_MET_COLOR },
+      { title: 'New pregnancies', goal: '20', count: '0', countNumberColor: TARGET_UNMET_COLOR },
+      { title: 'Live births', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active pregnancies', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active pregnancies with 1+ routine facility visits',
+        count: '0',
+        countNumberColor: TARGET_MET_COLOR
+      },
       { title: 'In-facility deliveries', percent: '0%', percentCount: '(0 of 0)' },
-      { title: 'Active pregnancies with 4+ routine facility visits', count: '0' },
-      { title: 'Active pregnancies with 8+ routine contacts', count: '0' }
+      { title: 'Active pregnancies with 4+ routine facility visits',
+        count: '0',
+        countNumberColor: TARGET_MET_COLOR
+      },
+      { title: 'Active pregnancies with 8+ routine contacts', count: '0', countNumberColor: TARGET_MET_COLOR }
     ]);
   });
 

diff --git a/tests/e2e/default/enketo/pregnancy-complete-a-delivery.wdio-spec.js b/tests/e2e/default/enketo/pregnancy-complete-a-delivery.wdio-spec.js
@@ -11,6 +11,7 @@ const placeFactory = require('@factories/cht/contacts/place');
 const userFactory = require('@factories/cht/users/users');
 const personFactory = require('@factories/cht/contacts/person');
 const pregnancyForm = require('@page-objects/default/enketo/pregnancy.wdio.page');
+const { TARGET_MET_COLOR, TARGET_UNMET_COLOR } = analyticsPage;
 
 describe('Contact Delivery Form', () => {
   const BABY_NAME = 'Benja';
@@ -113,14 +114,14 @@ describe('Contact Delivery Form', () => {
     const targets = await analyticsPage.getTargets();
 
     expect(targets).to.have.deep.members([
-      { title: 'Deaths', goal: '0', count: '0' },
-      { title: 'New pregnancies', goal: '20', count: '1' },
-      { title: 'Live births', count: '1' },
-      { title: 'Active pregnancies', count: '0' },
-      { title: 'Active pregnancies with 1+ routine facility visits', count: '0' },
+      { title: 'Deaths', goal: '0', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'New pregnancies', goal: '20', count: '1', countNumberColor: TARGET_UNMET_COLOR },
+      { title: 'Live births', count: '1', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active pregnancies', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active pregnancies with 1+ routine facility visits', count: '0', countNumberColor: TARGET_MET_COLOR },
       { title: 'In-facility deliveries', percent: '100%', percentCount: '(1 of 1)' },
-      { title: 'Active pregnancies with 4+ routine facility visits', count: '0' },
-      { title: 'Active pregnancies with 8+ routine contacts', count: '0' },
+      { title: 'Active pregnancies with 4+ routine facility visits', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active pregnancies with 8+ routine contacts', count: '0', countNumberColor: TARGET_MET_COLOR },
     ]);
   });
 });
diff --git a/tests/e2e/default/enketo/pregnancy.wdio-spec.js b/tests/e2e/default/enketo/pregnancy.wdio-spec.js
@@ -11,6 +11,7 @@ const reportsPage = require('@page-objects/default/reports/reports.wdio.page');
 const analyticsPage = require('@page-objects/default/analytics/analytics.wdio.page');
 const genericForm = require('@page-objects/default/enketo/generic-form.wdio.page');
 const pregnancyForm = require('@page-objects/default/enketo/pregnancy.wdio.page');
+const { TARGET_MET_COLOR, TARGET_UNMET_COLOR } = analyticsPage;
 
 describe('Pregnancy registration', () => {
   const places = placeFactory.generateHierarchy();
@@ -125,14 +126,14 @@ describe('Pregnancy registration', () => {
     const targets = await analyticsPage.getTargets();
 
     expect(targets).to.have.deep.members([
-      { title: 'Deaths', goal: '0', count: '0' },
-      { title: 'New pregnancies', goal: '20', count: '1' },
-      { title: 'Live births', count: '0' },
-      { title: 'Active pregnancies', count: '1' },
-      { title: 'Active pregnancies with 1+ routine facility visits', count: '0' },
+      { title: 'Deaths', goal: '0', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'New pregnancies', goal: '20', count: '1', countNumberColor: TARGET_UNMET_COLOR },
+      { title: 'Live births', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active pregnancies', count: '1', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active pregnancies with 1+ routine facility visits', count: '0', countNumberColor: TARGET_MET_COLOR },
       { title: 'In-facility deliveries', percent: '0%', percentCount: '(0 of 0)' },
-      { title: 'Active pregnancies with 4+ routine facility visits', count: '0' },
-      { title: 'Active pregnancies with 8+ routine contacts', count: '0' }
+      { title: 'Active pregnancies with 4+ routine facility visits', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active pregnancies with 8+ routine contacts', count: '0', countNumberColor: TARGET_MET_COLOR  }
     ]);
   });
 });
diff --git a/tests/e2e/default/enketo/undo-death-report.wdio-spec.js b/tests/e2e/default/enketo/undo-death-report.wdio-spec.js
@@ -10,6 +10,7 @@ const reportsPage = require('@page-objects/default/reports/reports.wdio.page');
 const analyticsPage = require('@page-objects/default/analytics/analytics.wdio.page');
 const deathReportForm = require('@page-objects/default/enketo/death-report.page');
 const undoDeathReportForm = require('@page-objects/default/enketo/undo-death-report.page');
+const { TARGET_MET_COLOR, TARGET_UNMET_COLOR } = analyticsPage;
 
 describe('Submit an undo death report', () => {
   const places = placeFactory.generateHierarchy();
@@ -51,14 +52,14 @@ describe('Submit an undo death report', () => {
     const targets = await analyticsPage.getTargets();
 
     expect(targets).to.have.deep.members([
-      { title: 'Deaths', goal: '0', count: '0' },
-      { title: 'New pregnancies', goal: '20', count: '0' },
-      { title: 'Live births', count: '0' },
-      { title: 'Active pregnancies', count: '0' },
-      { title: 'Active pregnancies with 1+ routine facility visits', count: '0' },
+      { title: 'Deaths', goal: '0', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'New pregnancies', goal: '20', count: '0', countNumberColor: TARGET_UNMET_COLOR },
+      { title: 'Live births', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active pregnancies', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active pregnancies with 1+ routine facility visits', count: '0', countNumberColor: TARGET_MET_COLOR },
       { title: 'In-facility deliveries', percent: '0%', percentCount: '(0 of 0)' },
-      { title: 'Active pregnancies with 4+ routine facility visits', count: '0' },
-      { title: 'Active pregnancies with 8+ routine contacts', count: '0' }
+      { title: 'Active pregnancies with 4+ routine facility visits', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active pregnancies with 8+ routine contacts', count: '0', countNumberColor: TARGET_MET_COLOR },
     ]);
   });
 });
diff --git a/tests/e2e/standard/enketo/delivery.wdio-spec.js b/tests/e2e/standard/enketo/delivery.wdio-spec.js
@@ -12,6 +12,7 @@ const genericForm = require('@page-objects/default/enketo/generic-form.wdio.page
 const pregnancyForm = require('@page-objects/standard/enketo/pregnancy.wdio.page');
 const pregnancyVisitForm = require('@page-objects/standard/enketo/pregnancy-visit.wdio.page');
 const deliveryForm = require('@page-objects/standard/enketo/delivery.wdio.page');
+const { TARGET_MET_COLOR } = analyticsPage;
 
 describe('Delivery', () => {
   const places = placeFactory.generateHierarchy();
@@ -143,18 +144,18 @@ describe('Delivery', () => {
     const targets = await analyticsPage.getTargets();
 
     expect(targets).to.have.deep.members([
-      { title: 'Active pregnancies', count: '0' },
-      { title: 'New pregnancies', count: '2' },
-      { title: 'Births', count: '2' },
+      { title: 'Active pregnancies', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'New pregnancies', count: '2', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Births', count: '2', countNumberColor: TARGET_MET_COLOR },
       { title: 'Deliveries with 1+ visit', percent: '100%', percentCount: '(2 of 2)' },
       { title: 'Deliveries with 4+ visits', percent: '50%', percentCount: '(1 of 2)' },
       { title: 'Deliveries at facility', percent: '100%', percentCount: '(2 of 2)' },
       { title: '<5 children screened for growth monitoring', percent: '0%', percentCount: '(0 of 0)' },
-      { title: '<5 Underweight Growth Monitoring', count: '0' },
-      { title: 'Active MAM cases', count: '0' },
-      { title: 'Active SAM cases', count: '0' },
-      { title: 'Active OTP cases', count: '0' },
-      { title: 'Active SFP cases', count: '0' }
+      { title: '<5 Underweight Growth Monitoring', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active MAM cases', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active SAM cases', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active OTP cases', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active SFP cases', count: '0', countNumberColor: TARGET_MET_COLOR },
     ]);
   });
 });
diff --git a/tests/e2e/standard/enketo/immunization-visit.wdio-spec.js b/tests/e2e/standard/enketo/immunization-visit.wdio-spec.js
@@ -9,6 +9,7 @@ const placeFactory = require('@factories/cht/contacts/place');
 const userFactory = require('@factories/cht/users/users');
 const gatewayApiUtils = require('@utils/gateway-api');
 const immVisitForm = require('@page-objects/standard/enketo/immunization-visit.wdio.page');
+const { TARGET_MET_COLOR } = analyticsPage;
 
 describe('Immunization Visit', () => {
   const places = placeFactory.generateHierarchy();
@@ -34,7 +35,7 @@ describe('Immunization Visit', () => {
     await commonPage.waitForPageLoaded();
 
     const messageValue = `CW 60 ${babyName}`;
-    
+
     await gatewayApiUtils.api.postMessage({
       id: 'CW-id',
       from: user.phone,
@@ -51,7 +52,7 @@ describe('Immunization Visit', () => {
     expect(firstReport.heading).to.equal(babyName);
     expect(firstReport.form).to.equal('New Child Registration (SMS)');
   });
-  
+
   it('Submit immunization visit - webapp', async () => {
     await loginPage.login(user);
     await commonPage.waitForPageLoaded();
@@ -159,7 +160,7 @@ describe('Immunization Visit', () => {
       from: user.phone,
       content: messageValue
     });
-  
+
     await commonPage.goToReports();
     const firstReport = await reportsPage.getListReportInfo(await reportsPage.firstReport());
     expect(firstReport.heading).to.equal(babyName);
@@ -173,26 +174,26 @@ describe('Immunization Visit', () => {
 
     await commonPage.goToAnalytics();
     const targets = await analyticsPage.getTargets();
-    
+
     expect(targets).to.have.deep.members([
-      { title: 'Active pregnancies', count: '0' }, 
-      { title: 'New pregnancies', count: '0' }, 
-      { title: 'Births', count: '0' }, 
-      { title: 'Deliveries with 1+ visit', percent: '0%', percentCount: '(0 of 0)' }, 
-      { title: 'Deliveries with 4+ visits', percent: '0%', percentCount: '(0 of 0)' }, 
-      { title: 'Deliveries at facility', percent: '0%', percentCount: '(0 of 0)' }, 
-      { title: 'Children under 5', count: '1' }, 
-      { title: 'Children registered', count: '1' }, 
-      { title: 'Vaccines given', count: '2' },
-      { title: 'Children vaccinated', count: '1' }, 
-      { title: 'Children with no vaccines reported', count: '0' }, 
-      { title: 'Children with BCG reported', percent: '100%', percentCount: '(1 of 1)' }, 
-      { title: '<5 children screened for growth monitoring', percent: '0%', percentCount: '(0 of 1)' }, 
-      { title: '<5 Underweight Growth Monitoring', count: '0' }, 
-      { title: 'Active MAM cases', count: '0' }, 
-      { title: 'Active SAM cases', count: '0' }, 
-      { title: 'Active OTP cases', count: '0' }, 
-      { title: 'Active SFP cases', count: '0' } 
+      { title: 'Active pregnancies', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'New pregnancies', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Births', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Deliveries with 1+ visit', percent: '0%', percentCount: '(0 of 0)' },
+      { title: 'Deliveries with 4+ visits', percent: '0%', percentCount: '(0 of 0)' },
+      { title: 'Deliveries at facility', percent: '0%', percentCount: '(0 of 0)' },
+      { title: 'Children under 5', count: '1', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Children registered', count: '1', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Vaccines given', count: '2', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Children vaccinated', count: '1', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Children with no vaccines reported', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Children with BCG reported', percent: '100%', percentCount: '(1 of 1)' },
+      { title: '<5 children screened for growth monitoring', percent: '0%', percentCount: '(0 of 1)' },
+      { title: '<5 Underweight Growth Monitoring', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active MAM cases', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active SAM cases', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active OTP cases', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active SFP cases', count: '0', countNumberColor: TARGET_MET_COLOR },
     ]);
   });
 

diff --git a/tests/e2e/standard/enketo/pregnancy.wdio-spec.js b/tests/e2e/standard/enketo/pregnancy.wdio-spec.js
@@ -11,6 +11,7 @@ const reportsPage = require('@page-objects/default/reports/reports.wdio.page');
 const analyticsPage = require('@page-objects/default/analytics/analytics.wdio.page');
 const genericForm = require('@page-objects/default/enketo/generic-form.wdio.page');
 const pregnancyForm = require('@page-objects/standard/enketo/pregnancy.wdio.page');
+const { TARGET_MET_COLOR } = analyticsPage;
 
 describe('New pregnancy', () => {
   const places = placeFactory.generateHierarchy();
@@ -132,18 +133,18 @@ describe('New pregnancy', () => {
     const targets = await analyticsPage.getTargets();
 
     expect(targets).to.have.deep.members([
-      { title: 'Active pregnancies', count: '2' },
-      { title: 'New pregnancies', count: '2' },
-      { title: 'Births', count: '0' },
+      { title: 'Active pregnancies', count: '2', countNumberColor: TARGET_MET_COLOR },
+      { title: 'New pregnancies', count: '2', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Births', count: '0', countNumberColor: TARGET_MET_COLOR },
       { title: 'Deliveries with 1+ visit', percent: '0%', percentCount: '(0 of 0)' },
       { title: 'Deliveries with 4+ visits', percent: '0%', percentCount: '(0 of 0)' },
       { title: 'Deliveries at facility', percent: '0%', percentCount: '(0 of 0)' },
       { title: '<5 children screened for growth monitoring', percent: '0%', percentCount: '(0 of 0)' },
-      { title: '<5 Underweight Growth Monitoring', count: '0' },
-      { title: 'Active MAM cases', count: '0' },
-      { title: 'Active SAM cases', count: '0' },
-      { title: 'Active OTP cases', count: '0' },
-      { title: 'Active SFP cases', count: '0' }
+      { title: '<5 Underweight Growth Monitoring', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active MAM cases', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active SAM cases', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active OTP cases', count: '0', countNumberColor: TARGET_MET_COLOR },
+      { title: 'Active SFP cases', count: '0', countNumberColor: TARGET_MET_COLOR },
     ]);
   });
 

diff --git a/tests/page-objects/default/analytics/analytics.wdio.page.js b/tests/page-objects/default/analytics/analytics.wdio.page.js
@@ -1,3 +1,7 @@
+const TARGET_MET_COLOR = '#76b0b0';
+
+const TARGET_UNMET_COLOR = '#000000';
+
 const goToTargets = () => browser.url('/#/analytics/targets');
 
 const noSelectedTarget = () => $('.empty-selection');
@@ -12,13 +16,15 @@ const targetGoal = (targetElement) => targetElement.$('.body .count .goal');
 
 const targetCountNumber = (targetElement) => targetElement.$('.body .count .number');
 
+const targetCountNumberColor = (targetElement) => targetElement.$('.body .count .number:not(.goal-met)');
+
 const targetProgressNumber = (targetElement) => targetElement.$('.body .target-progress .number');
 
 const targetNumberPercent = (targetElement) => targetElement.$('.body .target-progress .number .value');
 
 const targetNumberPercentCount = (targetElement) => targetElement.$('.body .target-progress .number span:nth-child(2)');
 
-const targetGoalValue = (targetElement) => targetElement.$('.body .count .goal p');
+const targetGoalValue = (targetElement) => targetElement.$('.body .count .goal');
 
 const errorLog = () => $(`.page error-log`);
 
@@ -45,13 +51,18 @@ const getTargetInfo = async (targetElement) => {
   };
 
   if (await (await targetGoal(targetElement)).isExisting()) {
-    target.goal = await (await targetGoalValue(targetElement)).getText();
+    const fullText = await (await targetGoalValue(targetElement)).getText();
+    target.goal = fullText.split(' ').pop();
   }
 
   if (await (await targetCountNumber(targetElement)).isExisting()) {
     target.count = await (await targetCountNumber(targetElement)).getText();
   }
 
+  if (await (await targetCountNumberColor(targetElement)).isExisting()) {
+    target.countNumberColor = (await (await targetCountNumberColor(targetElement)).getCSSProperty('color')).parsed.hex;
+  }
+
   if (await (await targetProgressNumber(targetElement)).isExisting()) {
     target.percent = await (await targetNumberPercent(targetElement)).getText();
     target.percentCount = await (await targetNumberPercentCount(targetElement)).getText();
@@ -80,5 +91,7 @@ module.exports = {
   getErrorLog,
   emptySelectionError,
   emptySelectionNoError,
+  TARGET_MET_COLOR,
+  TARGET_UNMET_COLOR
 };