Merge pull request #7946 from stopfstedt/course_viz_vocabs_data_tables

adds data tables to more course visualizations
ilios · Aug 22, 2024 · 9f45a1e · 9f45a1e
2 parents 123406c + 1af7733
commit 9f45a1e
Show file tree

Hide file tree

Showing 76 changed files with 3,230 additions and 1,182 deletions.
diff --git a/.../course-visualizations-instructor-test.js → .../course/visualizations-instructor-test.js b/.../course-visualizations-instructor-test.js → .../course/visualizations-instructor-test.js
@@ -13,7 +13,7 @@ module('Acceptance | course visualizations - instructor', function (hooks) {
   });
 
   test('it renders', async function (assert) {
-    assert.expect(21);
+    assert.expect(26);
     const instructor = this.server.create('user');
     const vocabulary1 = this.server.create('vocabulary');
     const vocabulary2 = this.server.create('vocabulary');
@@ -78,24 +78,27 @@ module('Acceptance | course visualizations - instructor', function (hooks) {
     // wait for charts to load
     await waitFor('.loaded', { count: 2 });
     await waitFor('svg .bars');
-    await waitFor('svg .chart');
+    await waitFor('svg .slice');
     await percySnapshot(assert);
     assert.strictEqual(page.root.termsChart.chart.bars.length, 3);
     assert.strictEqual(page.root.termsChart.chart.labels.length, 3);
+    assert.strictEqual(page.root.termsChart.chart.labels[0].text, 'Vocabulary 1 - term 0');
+    assert.strictEqual(page.root.termsChart.chart.labels[1].text, 'Vocabulary 1 - term 1');
+    assert.strictEqual(page.root.termsChart.chart.labels[2].text, 'Vocabulary 2 - term 2');
+    assert.strictEqual(page.root.sessionTypesChart.chart.slices.length, 2);
+    assert.strictEqual(page.root.sessionTypesChart.chart.labels.length, 2);
+    assert.strictEqual(page.root.sessionTypesChart.chart.descriptions.length, 2);
+    assert.strictEqual(page.root.sessionTypesChart.chart.labels[0].text, 'session type 1');
+    assert.strictEqual(page.root.sessionTypesChart.chart.labels[1].text, 'session type 0');
+
     assert.strictEqual(
-      page.root.termsChart.chart.labels[0].text,
-      'Vocabulary 1 > term 0: 60 Minutes',
-    );
-    assert.strictEqual(
-      page.root.termsChart.chart.labels[1].text,
-      'Vocabulary 1 > term 1: 30 Minutes',
+      page.root.sessionTypesChart.chart.descriptions[0].text,
+      'session type 1 - 30 Minutes',
     );
     assert.strictEqual(
-      page.root.termsChart.chart.labels[2].text,
-      'Vocabulary 2 > term 2: 30 Minutes',
+      page.root.sessionTypesChart.chart.descriptions[1].text,
+      'session type 0 - 60 Minutes',
     );
-    assert.strictEqual(page.root.sessionTypesChart.chart.slices.length, 2);
-    assert.strictEqual(page.root.sessionTypesChart.chart.slices[0].text, 'session type 0 66.7%');
-    assert.strictEqual(page.root.sessionTypesChart.chart.slices[1].text, 'session type 1 33.3%');
+    assert.strictEqual(page.root.sessionTypesChart.dataTable.rows.length, 2);
   });
 });
diff --git a/...course-visualizations-instructors-test.js → ...course/visualizations-instructors-test.js b/...course-visualizations-instructors-test.js → ...course/visualizations-instructors-test.js
@@ -65,7 +65,7 @@ module('Acceptance | course visualizations - instructors', function (hooks) {
   });
 
   test('it renders', async function (assert) {
-    assert.expect(12);
+    assert.expect(15);
     await page.visit({ courseId: this.course.id });
     assert.strictEqual(currentURL(), '/data/courses/1/instructors');
     assert.strictEqual(page.root.title, 'course 0 2022');
@@ -80,15 +80,18 @@ module('Acceptance | course visualizations - instructors', function (hooks) {
     await waitFor('svg .bars');
     await percySnapshot(assert);
     assert.strictEqual(page.root.instructorsChart.chart.bars.length, 2);
-    assert.strictEqual(page.root.instructorsChart.chart.labels.length, 2);
     assert.strictEqual(
-      page.root.instructorsChart.chart.labels[0].text,
-      '1 guy M. Mc1son: 75 Minutes',
+      page.root.instructorsChart.chart.bars[0].description,
+      '1 guy M. Mc1son - 75 Minutes',
     );
     assert.strictEqual(
-      page.root.instructorsChart.chart.labels[1].text,
-      '2 guy M. Mc2son: 90 Minutes',
+      page.root.instructorsChart.chart.bars[1].description,
+      '2 guy M. Mc2son - 90 Minutes',
     );
+    assert.strictEqual(page.root.instructorsChart.chart.labels.length, 2);
+    assert.strictEqual(page.root.instructorsChart.chart.labels[0].text, '1 guy M. Mc1son');
+    assert.strictEqual(page.root.instructorsChart.chart.labels[1].text, '2 guy M. Mc2son');
+    assert.strictEqual(page.root.instructorsChart.dataTable.rows.length, 2);
   });
 
   test('clicking chart transitions user to instructor visualization', async function (assert) {
@@ -98,10 +101,7 @@ module('Acceptance | course visualizations - instructors', function (hooks) {
     // wait for charts to load
     await waitFor('.loaded');
     await waitFor('svg .bars');
-    assert.strictEqual(
-      page.root.instructorsChart.chart.labels[0].text,
-      '1 guy M. Mc1son: 75 Minutes',
-    );
+    assert.strictEqual(page.root.instructorsChart.chart.labels[0].text, '1 guy M. Mc1son');
     await page.root.instructorsChart.chart.bars[0].click();
     assert.strictEqual(currentURL(), '/data/courses/1/instructors/2');
   });

diff --git a/.../course-visualizations-objectives-test.js → .../course/visualizations-objectives-test.js b/.../course-visualizations-objectives-test.js → .../course/visualizations-objectives-test.js
@@ -12,7 +12,7 @@ module('Acceptance | course visualizations - objectives', function (hooks) {
   });
 
   test('it renders', async function (assert) {
-    assert.expect(14);
+    assert.expect(17);
     const school = this.server.create('school');
     const course = this.server.create('course', { year: 2021, school });
     const courseObjectives = this.server.createList('course-objective', 3, {
@@ -72,13 +72,22 @@ module('Acceptance | course visualizations - objectives', function (hooks) {
     await waitFor('svg .chart');
     await percySnapshot(assert);
     assert.strictEqual(page.root.objectivesChart.chart.slices.length, 2);
-    assert.strictEqual(page.root.objectivesChart.chart.slices[0].text, '77.8%');
-    assert.strictEqual(page.root.objectivesChart.chart.slices[1].text, '22.2%');
+    assert.strictEqual(page.root.objectivesChart.chart.slices[0].label, '77.8%');
+    assert.strictEqual(
+      page.root.objectivesChart.chart.slices[0].description,
+      'course objective 0 - 630 Minutes',
+    );
+    assert.strictEqual(page.root.objectivesChart.chart.slices[1].label, '22.2%');
+    assert.strictEqual(
+      page.root.objectivesChart.chart.slices[1].description,
+      'course objective 1 - 180 Minutes',
+    );
     assert.notOk(page.root.objectivesChart.unlinkedObjectives.isPresent);
     assert.strictEqual(page.root.objectivesChart.untaughtObjectives.items.length, 1);
     assert.strictEqual(
       page.root.objectivesChart.untaughtObjectives.items[0].text,
       'course objective 2',
     );
+    assert.strictEqual(page.root.objectivesChart.dataTable.rows.length, 3);
   });
 });
diff --git a/...ourse-visualizations-session-type-test.js → ...ourse/visualizations-session-type-test.js b/...ourse-visualizations-session-type-test.js → ...ourse/visualizations-session-type-test.js
@@ -13,7 +13,7 @@ module('Acceptance | course visualizations - session-type', function (hooks) {
   });
 
   test('it renders', async function (assert) {
-    assert.expect(16);
+    assert.expect(19);
     const sessionType = this.server.create('session-type');
     const vocabulary1 = this.server.create('vocabulary');
     const vocabulary2 = this.server.create('vocabulary');
@@ -70,18 +70,21 @@ module('Acceptance | course visualizations - session-type', function (hooks) {
     await percySnapshot(assert);
     assert.strictEqual(page.root.title, 'course 0 2022');
     assert.strictEqual(page.root.sessionTypeChart.chart.bars.length, 3);
-    assert.strictEqual(page.root.sessionTypeChart.chart.labels.length, 3);
     assert.strictEqual(
-      page.root.sessionTypeChart.chart.labels[0].text,
-      'Vocabulary 1 - term 1: 30 Minutes',
+      page.root.sessionTypeChart.chart.bars[0].description,
+      'Vocabulary 1 - term 1 - 30 Minutes',
     );
     assert.strictEqual(
-      page.root.sessionTypeChart.chart.labels[1].text,
-      'Vocabulary 1 - term 0: 60 Minutes',
+      page.root.sessionTypeChart.chart.bars[1].description,
+      'Vocabulary 1 - term 0 - 60 Minutes',
     );
     assert.strictEqual(
-      page.root.sessionTypeChart.chart.labels[2].text,
-      'Vocabulary 2 - term 2: 30 Minutes',
+      page.root.sessionTypeChart.chart.bars[2].description,
+      'Vocabulary 2 - term 2 - 30 Minutes',
     );
+    assert.strictEqual(page.root.sessionTypeChart.chart.labels.length, 3);
+    assert.strictEqual(page.root.sessionTypeChart.chart.labels[0].text, 'Vocabulary 1 - term 1');
+    assert.strictEqual(page.root.sessionTypeChart.chart.labels[1].text, 'Vocabulary 1 - term 0');
+    assert.strictEqual(page.root.sessionTypeChart.chart.labels[2].text, 'Vocabulary 2 - term 2');
   });
 });
diff --git a/...urse-visualizations-session-types-test.js → ...urse/visualizations-session-types-test.js b/...urse-visualizations-session-types-test.js → ...urse/visualizations-session-types-test.js
@@ -13,7 +13,7 @@ module('Acceptance | course visualizations - session-types', function (hooks) {
   });
 
   test('it renders', async function (assert) {
-    assert.expect(14);
+    assert.expect(18);
     const sessionType1 = this.server.create('session-type');
     const sessionType2 = this.server.create('session-type');
     const sessionType3 = this.server.create('session-type');
@@ -72,18 +72,22 @@ module('Acceptance | course visualizations - session-types', function (hooks) {
     await percySnapshot(assert);
     assert.strictEqual(page.root.title, 'course 0 2022');
     assert.strictEqual(page.root.sessionTypesChart.chart.bars.length, 3);
-    assert.strictEqual(page.root.sessionTypesChart.chart.labels.length, 3);
     assert.strictEqual(
-      page.root.sessionTypesChart.chart.labels[0].text,
-      'session type 1: 30 Minutes',
+      page.root.sessionTypesChart.chart.bars[0].description,
+      'session type 1 - 30 Minutes',
     );
     assert.strictEqual(
-      page.root.sessionTypesChart.chart.labels[1].text,
-      'session type 0: 60 Minutes',
+      page.root.sessionTypesChart.chart.bars[1].description,
+      'session type 0 - 60 Minutes',
     );
     assert.strictEqual(
-      page.root.sessionTypesChart.chart.labels[2].text,
-      'session type 2: 120 Minutes',
+      page.root.sessionTypesChart.chart.bars[2].description,
+      'session type 2 - 120 Minutes',
     );
+    assert.strictEqual(page.root.sessionTypesChart.chart.labels.length, 3);
+    assert.strictEqual(page.root.sessionTypesChart.chart.labels[0].text, 'session type 1');
+    assert.strictEqual(page.root.sessionTypesChart.chart.labels[1].text, 'session type 0');
+    assert.strictEqual(page.root.sessionTypesChart.chart.labels[2].text, 'session type 2');
+    assert.strictEqual(page.root.sessionTypesChart.dataTable.rows.length, 3);
   });
 });
diff --git a/.../acceptance/course-visualizations-test.js → .../acceptance/course/visualizations-test.js b/.../acceptance/course-visualizations-test.js → .../acceptance/course/visualizations-test.js
diff --git a/...ourse-visualizations-vocabularies-test.js → ...ourse/visualizations-vocabularies-test.js b/...ourse-visualizations-vocabularies-test.js → ...ourse/visualizations-vocabularies-test.js
@@ -13,7 +13,7 @@ module('Acceptance | course visualizations - vocabularies', function (hooks) {
   });
 
   test('it renders', async function (assert) {
-    assert.expect(12);
+    assert.expect(16);
     const sessionType = this.server.create('session-type');
     const vocabulary1 = this.server.create('vocabulary');
     const vocabulary2 = this.server.create('vocabulary');
@@ -67,10 +67,20 @@ module('Acceptance | course visualizations - vocabularies', function (hooks) {
     assert.strictEqual(page.root.breadcrumb.crumbs[2].text, 'Vocabularies');
     // wait for charts to load
     await waitFor('.loaded');
-    await waitFor('svg .chart');
+    await waitFor('svg .bars');
     await percySnapshot(assert);
-    assert.strictEqual(page.root.vocabulariesChart.chart.slices.length, 2);
-    assert.strictEqual(page.root.vocabulariesChart.chart.slices[0].text, 'Vocabulary 1');
-    assert.strictEqual(page.root.vocabulariesChart.chart.slices[1].text, 'Vocabulary 2');
+    assert.strictEqual(page.root.vocabulariesChart.chart.bars.length, 2);
+    assert.strictEqual(
+      page.root.vocabulariesChart.chart.bars[0].description,
+      'Vocabulary 2 - 30 Minutes',
+    );
+    assert.strictEqual(
+      page.root.vocabulariesChart.chart.bars[1].description,
+      'Vocabulary 1 - 90 Minutes',
+    );
+    assert.strictEqual(page.root.vocabulariesChart.chart.labels.length, 2);
+    assert.strictEqual(page.root.vocabulariesChart.chart.labels[0].text, 'Vocabulary 2');
+    assert.strictEqual(page.root.vocabulariesChart.chart.labels[1].text, 'Vocabulary 1');
+    assert.strictEqual(page.root.vocabulariesChart.dataTable.rows.length, 2);
   });
 });
diff --git a/.../course-visualizations-vocabulary-test.js → .../course/visualizations-vocabulary-test.js b/.../course-visualizations-vocabulary-test.js → .../course/visualizations-vocabulary-test.js
@@ -54,8 +54,7 @@ module('Acceptance | course visualizations - vocabulary', function (hooks) {
   });
 
   test('it renders', async function (assert) {
-    assert.expect(17);
-
+    assert.expect(21);
     await page.visit({ courseId: this.course.id, vocabularyId: this.vocabulary.id });
     assert.strictEqual(currentURL(), '/data/courses/1/vocabularies/1');
     assert.strictEqual(page.root.vocabularyTitle, 'Vocabulary 1');
@@ -74,10 +73,14 @@ module('Acceptance | course visualizations - vocabulary', function (hooks) {
     await waitFor('svg .bars');
     await percySnapshot(assert);
     assert.strictEqual(page.root.termsChart.chart.bars.length, 3);
+    assert.strictEqual(page.root.termsChart.chart.bars[0].description, 'term 1 - 30 Minutes');
+    assert.strictEqual(page.root.termsChart.chart.bars[1].description, 'term 0 - 60 Minutes');
+    assert.strictEqual(page.root.termsChart.chart.bars[2].description, 'term 2 - 150 Minutes');
     assert.strictEqual(page.root.termsChart.chart.labels.length, 3);
-    assert.strictEqual(page.root.termsChart.chart.labels[0].text, 'term 1: 30 Minutes');
-    assert.strictEqual(page.root.termsChart.chart.labels[1].text, 'term 0: 60 Minutes');
-    assert.strictEqual(page.root.termsChart.chart.labels[2].text, 'term 2: 150 Minutes');
+    assert.strictEqual(page.root.termsChart.chart.labels[0].text, 'term 1');
+    assert.strictEqual(page.root.termsChart.chart.labels[1].text, 'term 0');
+    assert.strictEqual(page.root.termsChart.chart.labels[2].text, 'term 2');
+    assert.strictEqual(page.root.termsChart.dataTable.rows.length, 3);
   });
 
   test('clicking chart transitions user to term visualization', async function (assert) {
@@ -86,7 +89,7 @@ module('Acceptance | course visualizations - vocabulary', function (hooks) {
     // wait for charts to load
     await waitFor('.loaded');
     await waitFor('svg .bars');
-    assert.strictEqual(page.root.termsChart.chart.labels[0].text, 'term 1: 30 Minutes');
+    assert.strictEqual(page.root.termsChart.chart.labels[0].text, 'term 1');
     await page.root.termsChart.chart.bars[0].click();
     assert.strictEqual(currentURL(), '/data/courses/1/terms/2');
   });

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,44 @@
-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'),
+    labels: collection('.slice text'),
+    descriptions: collection('.slice desc'),
+  },
+  noData: {
+    scope: '[data-test-no-data]',
+  },
+  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,46 @@
-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'),
   },
+  noData: {
+    scope: '[data-test-no-data]',
+  },
+  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;