wip: adds description to charts and fixes up chart-related integratio…

…n tests.
ilios · Jul 25, 2024 · 87eb034 · 87eb034
1 parent 4236deb
commit 87eb034
Show file tree

Hide file tree

Showing 19 changed files with 620 additions and 86 deletions.
diff --git a/...rt/ilios-common/page-objects/components/course/visualize-instructor-session-type-graph.js b/...rt/ilios-common/page-objects/components/course/visualize-instructor-session-type-graph.js
@@ -1,11 +1,42 @@
-import { collection, create, notHasClass } from 'ember-cli-page-object';
+import { attribute, clickable, collection, create, notHasClass, text } from 'ember-cli-page-object';
 
 const definition = {
   scope: '[data-test-course-visualize-instructor-session-type-graph]',
   isIcon: notHasClass('no-icon'),
   chart: {
     scope: '.simple-chart',
-    slices: collection('svg .slice'),
+    bars: collection('.bars rect', {
+      description: text('desc'),
+    }),
+    labels: collection('.bars text'),
+  },
+  dataTable: {
+    scope: '[data-test-data-table]',
+    header: {
+      scope: 'thead',
+      sessionType: {
+        scope: '[data-test-session-type]',
+        toggle: clickable('button'),
+      },
+      sessions: {
+        scope: '[data-test-sessions]',
+        toggle: clickable('button'),
+      },
+      minutes: {
+        scope: '[data-test-minutes]',
+        toggle: clickable('button'),
+      },
+    },
+    rows: collection('tbody tr', {
+      sessionType: text('[data-test-session-type]'),
+      sessions: {
+        scope: '[data-test-sessions]',
+        links: collection('a', {
+          url: attribute('href'),
+        }),
+      },
+      minutes: text('[data-test-minutes]'),
+    }),
   },
 };
 

diff --git a/...st-support/ilios-common/page-objects/components/course/visualize-instructor-term-graph.js b/...st-support/ilios-common/page-objects/components/course/visualize-instructor-term-graph.js
@@ -1,13 +1,43 @@
-import { collection, create, notHasClass } from 'ember-cli-page-object';
+import { attribute, clickable, collection, create, notHasClass, text } from 'ember-cli-page-object';
 
 const definition = {
   scope: '[data-test-course-visualize-instructor-term-graph]',
   isIcon: notHasClass('no-icon'),
   chart: {
     scope: '.simple-chart',
-    bars: collection('.bars rect'),
+    bars: collection('.bars rect', {
+      description: text('desc'),
+    }),
     labels: collection('.bars text'),
   },
+  dataTable: {
+    scope: '[data-test-data-table]',
+    header: {
+      scope: 'thead',
+      vocabularyTerm: {
+        scope: '[data-test-vocabulary-term]',
+        toggle: clickable('button'),
+      },
+      sessions: {
+        scope: '[data-test-sessions]',
+        toggle: clickable('button'),
+      },
+      minutes: {
+        scope: '[data-test-minutes]',
+        toggle: clickable('button'),
+      },
+    },
+    rows: collection('tbody tr', {
+      vocabularyTerm: text('[data-test-vocabulary-term]'),
+      sessions: {
+        scope: '[data-test-sessions]',
+        links: collection('a', {
+          url: attribute('href'),
+        }),
+      },
+      minutes: text('[data-test-minutes]'),
+    }),
+  },
 };
 
 export default definition;

diff --git a/...n-test-support/ilios-common/page-objects/components/course/visualize-instructors-graph.js b/...n-test-support/ilios-common/page-objects/components/course/visualize-instructors-graph.js
@@ -1,4 +1,4 @@
-import { collection, create, notHasClass } from 'ember-cli-page-object';
+import { attribute, clickable, collection, create, notHasClass, text } from "ember-cli-page-object";
 
 const definition = {
   scope: '[data-test-course-visualize-instructors-graph]',
@@ -9,6 +9,34 @@ const definition = {
     labels: collection('.bars text'),
     slices: collection('svg .slice'),
   },
+  dataTable: {
+    scope: '[data-test-data-table]',
+    header: {
+      scope: 'thead',
+      instructor: {
+        scope: '[data-test-instructor]',
+        toggle: clickable('button'),
+      },
+      sessions: {
+        scope: '[data-test-sessions]',
+        toggle: clickable('button'),
+      },
+      minutes: {
+        scope: '[data-test-minutes]',
+        toggle: clickable('button'),
+      },
+    },
+    rows: collection('tbody tr', {
+      instructor: text('[data-test-instructor]'),
+      sessions: {
+        scope: '[data-test-sessions]',
+        links: collection('a', {
+          url: attribute('href'),
+        }),
+      },
+      minutes: text('[data-test-minutes]'),
+    }),
+  },
 };
 
 export default definition;

diff --git a/...on/addon-test-support/ilios-common/page-objects/components/course/visualize-term-graph.js b/...on/addon-test-support/ilios-common/page-objects/components/course/visualize-term-graph.js
@@ -0,0 +1,44 @@
+import { attribute, clickable, collection, create, notHasClass, text } from 'ember-cli-page-object';
+
+const definition = {
+  scope: '[data-test-course-visualize-term-graph]',
+  isIcon: notHasClass('no-icon'),
+  chart: {
+    scope: '.simple-chart',
+    bars: collection('.bars rect', {
+      description: text('desc'),
+    }),
+    labels: collection('.bars text'),
+  },
+  dataTable: {
+    scope: '[data-test-data-table]',
+    header: {
+      scope: 'thead',
+      sessionType: {
+        scope: '[data-test-session-type]',
+        toggle: clickable('button'),
+      },
+      sessions: {
+        scope: '[data-test-sessions]',
+        toggle: clickable('button'),
+      },
+      minutes: {
+        scope: '[data-test-minutes]',
+        toggle: clickable('button'),
+      },
+    },
+    rows: collection('tbody tr', {
+      sessionType: text('[data-test-session-type]'),
+      sessions: {
+        scope: '[data-test-sessions]',
+        links: collection('a', {
+          url: attribute('href'),
+        }),
+      },
+      minutes: text('[data-test-minutes]'),
+    }),
+  },
+};
+
+export default definition;
+export const component = create(definition);
diff --git a/...-test-support/ilios-common/page-objects/components/course/visualize-vocabularies-graph.js b/...-test-support/ilios-common/page-objects/components/course/visualize-vocabularies-graph.js
@@ -1,11 +1,42 @@
-import { collection, create, notHasClass } from 'ember-cli-page-object';
+import { attribute, clickable, collection, create, notHasClass, text } from 'ember-cli-page-object';
 
 const definition = {
   scope: '[data-test-course-visualize-vocabularies-graph]',
   isIcon: notHasClass('no-icon'),
   chart: {
     scope: '.simple-chart',
-    slices: collection('svg .slice'),
+    bars: collection('.bars rect', {
+      description: text('desc'),
+    }),
+    labels: collection('.bars text'),
+  },
+  dataTable: {
+    scope: '[data-test-data-table]',
+    header: {
+      scope: 'thead',
+      vocabulary: {
+        scope: '[data-test-vocabulary]',
+        toggle: clickable('button'),
+      },
+      sessions: {
+        scope: '[data-test-sessions]',
+        toggle: clickable('button'),
+      },
+      minutes: {
+        scope: '[data-test-minutes]',
+        toggle: clickable('button'),
+      },
+    },
+    rows: collection('tbody tr', {
+      vocabulary: text('[data-test-vocabulary]'),
+      sessions: {
+        scope: '[data-test-sessions]',
+        links: collection('a', {
+          url: attribute('href'),
+        }),
+      },
+      minutes: text('[data-test-minutes]'),
+    }),
   },
 };
 

diff --git a/...on-test-support/ilios-common/page-objects/components/course/visualize-vocabulary-graph.js b/...on-test-support/ilios-common/page-objects/components/course/visualize-vocabulary-graph.js
@@ -1,13 +1,43 @@
-import { collection, create, notHasClass } from 'ember-cli-page-object';
+import { attribute, clickable, collection, create, notHasClass, text } from 'ember-cli-page-object';
 
 const definition = {
   scope: '[data-test-course-visualize-vocabulary-graph]',
   isIcon: notHasClass('no-icon'),
   chart: {
     scope: '.simple-chart',
-    bars: collection('.bars rect'),
+    bars: collection('.bars rect', {
+      description: text('desc'),
+    }),
     labels: collection('.bars text'),
   },
+  dataTable: {
+    scope: '[data-test-data-table]',
+    header: {
+      scope: 'thead',
+      term: {
+        scope: '[data-test-term]',
+        toggle: clickable('button'),
+      },
+      sessions: {
+        scope: '[data-test-sessions]',
+        toggle: clickable('button'),
+      },
+      minutes: {
+        scope: '[data-test-minutes]',
+        toggle: clickable('button'),
+      },
+    },
+    rows: collection('tbody tr', {
+      term: text('[data-test-term]'),
+      sessions: {
+        scope: '[data-test-sessions]',
+        links: collection('a', {
+          url: attribute('href'),
+        }),
+      },
+      minutes: text('[data-test-minutes]'),
+    }),
+  },
 };
 
 export default definition;

diff --git a/packages/ilios-common/addon/components/course/visualize-instructor-session-type-graph.js b/packages/ilios-common/addon/components/course/visualize-instructor-session-type-graph.js
@@ -110,6 +110,7 @@ export default class CourseVisualizeInstructorSessionTypeGraph extends Component
         return set;
       }, [])
       .map((obj) => {
+        obj.description = `${obj.meta.sessionType.title} - ${obj.data} ${this.intl.t('general.minutes')}`;
         delete obj.id;
         return obj;
       })

diff --git a/packages/ilios-common/addon/components/course/visualize-instructor-term-graph.js b/packages/ilios-common/addon/components/course/visualize-instructor-term-graph.js
@@ -125,7 +125,8 @@ export default class CourseVisualizeInstructorTermGraph extends Component {
         return set;
       }, [])
       .map((obj) => {
-        delete obj.id;
+        (obj.description = `${obj.meta.vocabulary.title} - ${obj.meta.term.title} - ${obj.data} ${this.intl.t('general.minutes')}`),
+          delete obj.id;
         return obj;
       })
       .filter((obj) => {

diff --git a/packages/ilios-common/addon/components/course/visualize-term-graph.hbs b/packages/ilios-common/addon/components/course/visualize-term-graph.hbs
@@ -28,7 +28,7 @@
               @sortedAscending={{this.sortedAscending}}
               @sortedBy={{or (eq this.sortBy "sessionType") (eq this.sortBy "sessionType:desc")}}
               @onClick={{fn this.setSortBy "sessionType"}}
-              data-test-vocabulary-term
+              data-test-session-type
             >
               {{t "general.sessionType"}}
             </SortableTh>
@@ -55,7 +55,7 @@
           <tbody>
           {{#each (sort-by this.sortBy this.tableData) as |row|}}
             <tr>
-              <td data-test-vocabulary-session-type>{{row.sessionType}}</td>
+              <td data-test-session-type>{{row.sessionType}}</td>
               <td colspan="2" data-test-sessions>
                 {{#each row.sessions as |session index|}}
                   <LinkTo @route="session" @models={{array @course session}}>

diff --git a/packages/ilios-common/addon/components/course/visualize-term-graph.js b/packages/ilios-common/addon/components/course/visualize-term-graph.js
@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { map } from 'rsvp';
 import { htmlSafe } from '@ember/template';
 import { restartableTask, timeout } from 'ember-concurrency';
 import { service } from '@ember/service';
@@ -66,13 +67,13 @@ export default class CourseVisualizeTermGraph extends Component {
   async getDataObjects(sessions, termIds) {
     const filteredSessions = sessions.filter((session) => termIds.includes(session.id));
     const sessionTypes = await Promise.all(filteredSessions.map((s) => s.sessionType));
-    const sessionTypeData = filteredSessions.map((session) => {
-      const minutes = Math.round(session.totalSumDuration * 60);
+    const sessionTypeData = await map(filteredSessions, async (session) => {
+      const hours = await session.getTotalSumDuration();
       const sessionType = findById(sessionTypes, session.belongsTo('sessionType').id());
       return {
         session,
         sessionType,
-        minutes,
+        minutes: Math.round(hours * 60),
       };
     });
 
@@ -96,7 +97,9 @@ export default class CourseVisualizeTermGraph extends Component {
         existing.meta.sessions.push(session);
         return set;
       }, [])
+      .filter((obj) => obj.data)
       .map((obj) => {
+        obj.description = `${obj.meta.sessionType.title} - ${obj.data} ${this.intl.t('general.minutes')}`;
         delete obj.id;
         return obj;
       })

diff --git a/packages/ilios-common/addon/components/course/visualize-vocabularies-graph.js b/packages/ilios-common/addon/components/course/visualize-vocabularies-graph.js
@@ -110,6 +110,7 @@ export default class CourseVisualizeVocabulariesGraph extends Component {
         return set;
       }, [])
       .map((obj) => {
+        obj.description = `${obj.meta.vocabulary.title} - ${obj.data} ${this.intl.t('general.minutes')}`;
         delete obj.id;
         return obj;
       })

diff --git a/packages/ilios-common/addon/components/course/visualize-vocabulary-graph.js b/packages/ilios-common/addon/components/course/visualize-vocabulary-graph.js
@@ -113,6 +113,7 @@ export default class CourseVisualizeVocabularyGraph extends Component {
         return set;
       }, [])
       .map((obj) => {
+        obj.description = `${obj.meta.term.title} - ${obj.data} ${this.intl.t('general.minutes')}`;
         delete obj.id;
         return obj;
       })