diff --git a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-instructor-session-type-graph.js b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-instructor-session-type-graph.js index 45cc0f87c5..14d238ca7a 100644 --- a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-instructor-session-type-graph.js +++ b/packages/ilios-common/addon-test-support/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/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-instructor-term-graph.js b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-instructor-term-graph.js index f32aca173e..e085f7f67c 100644 --- a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-instructor-term-graph.js +++ b/packages/ilios-common/addon-test-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/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-term-graph.js b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-term-graph.js new file mode 100644 index 0000000000..2c4722c85d --- /dev/null +++ b/packages/ilios-common/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/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-vocabularies-graph.js b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-vocabularies-graph.js index d6498f2f17..f0bc9c52e6 100644 --- a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-vocabularies-graph.js +++ b/packages/ilios-common/addon-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/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-vocabulary-graph.js b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-vocabulary-graph.js index 4a58a55a36..f4aa6bec63 100644 --- a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/visualize-vocabulary-graph.js +++ b/packages/ilios-common/addon-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 index dec7c7cd68..d1ad55bc25 100644 --- 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 index aae01443fa..da88ac34d0 100644 --- 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 index 1a85fd21fe..6e15e8cd5b 100644 --- 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"}} @@ -55,7 +55,7 @@ {{#each (sort-by this.sortBy this.tableData) as |row|}} - {{row.sessionType}} + {{row.sessionType}} {{#each row.sessions as |session index|}} diff --git a/packages/ilios-common/addon/components/course/visualize-term-graph.js b/packages/ilios-common/addon/components/course/visualize-term-graph.js index e888d4bb25..0922b454f3 100644 --- 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 index bf999ad4d2..6219f9b9c8 100644 --- 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 index 26ac4cb0f9..308ae3f613 100644 --- 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; }) diff --git a/packages/test-app/tests/integration/components/course/visualize-instructor-session-type-graph-test.js b/packages/test-app/tests/integration/components/course/visualize-instructor-session-type-graph-test.js index 71672d6ffa..40c2a0b268 100644 --- a/packages/test-app/tests/integration/components/course/visualize-instructor-session-type-graph-test.js +++ b/packages/test-app/tests/integration/components/course/visualize-instructor-session-type-graph-test.js @@ -11,7 +11,7 @@ module( setupRenderingTest(hooks); setupMirage(hooks); - test('it renders', async function (assert) { + hooks.beforeEach(async function () { const instructor = this.server.create('user'); const sessionType1 = this.server.create('session-type', { title: 'Standalone', @@ -49,26 +49,81 @@ module( instructors: [instructor], }); - const courseModel = await this.owner.lookup('service:store').findRecord('course', course.id); - const instructorModel = await this.owner - .lookup('service:store') - .findRecord('user', instructor.id); - - this.set('course', courseModel); - this.set('instructor', instructorModel); + this.course = await this.owner.lookup('service:store').findRecord('course', course.id); + this.instructor = await this.owner.lookup('service:store').findRecord('user', instructor.id); + }); + test('it renders', async function (assert) { + this.set('course', this.course); + this.set('instructor', this.instructor); await render( - hbs` + hbs` `, ); - //let the chart animations finish await waitFor('.loaded'); - await waitFor('svg .chart .slice'); + await waitFor('svg .bars'); + + assert.strictEqual(component.chart.bars.length, 2); + assert.strictEqual(component.chart.bars[0].description, 'Campaign - 180 Minutes'); + assert.strictEqual(component.chart.bars[1].description, 'Standalone - 630 Minutes'); + assert.strictEqual(component.chart.labels.length, 2); + assert.strictEqual(component.chart.labels[0].text, 'Campaign'); + assert.strictEqual(component.chart.labels[1].text, 'Standalone'); + }); + + test('sort data-table by session type', async function (assert) { + this.set('course', this.course); + await render( + hbs` +`, + ); + assert.strictEqual(component.dataTable.rows[0].sessionType, 'Campaign'); + assert.strictEqual(component.dataTable.rows[1].sessionType, 'Standalone'); + await component.dataTable.header.sessionType.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessionType, 'Campaign'); + assert.strictEqual(component.dataTable.rows[1].sessionType, 'Standalone'); + await component.dataTable.header.sessionType.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessionType, 'Standalone'); + assert.strictEqual(component.dataTable.rows[1].sessionType, 'Campaign'); + await component.dataTable.header.sessionType.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessionType, 'Campaign'); + assert.strictEqual(component.dataTable.rows[1].sessionType, 'Standalone'); + }); + + test('sort data-table by sessions', async function (assert) { + this.set('course', this.course); + await render( + hbs` +`, + ); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'The San Leandro Horror'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'Berkeley Investigations'); + await component.dataTable.header.sessions.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'Berkeley Investigations'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'The San Leandro Horror'); + await component.dataTable.header.sessions.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'The San Leandro Horror'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'Berkeley Investigations'); + await component.dataTable.header.sessions.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'Berkeley Investigations'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'The San Leandro Horror'); + }); - assert.strictEqual(component.chart.slices.length, 2); - assert.strictEqual(component.chart.slices[0].text, 'Standalone 77.8%'); - assert.strictEqual(component.chart.slices[1].text, 'Campaign 22.2%'); + test('sort data-table by minutes', async function (assert) { + this.set('course', this.course); + await render( + hbs` +`, + ); + assert.strictEqual(component.dataTable.rows[0].minutes, '180'); + assert.strictEqual(component.dataTable.rows[1].minutes, '630'); + await component.dataTable.header.minutes.toggle(); + assert.strictEqual(component.dataTable.rows[0].minutes, '630'); + assert.strictEqual(component.dataTable.rows[1].minutes, '180'); + await component.dataTable.header.minutes.toggle(); + assert.strictEqual(component.dataTable.rows[0].minutes, '180'); + assert.strictEqual(component.dataTable.rows[1].minutes, '630'); }); }, ); diff --git a/packages/test-app/tests/integration/components/course/visualize-instructor-term-graph-test.js b/packages/test-app/tests/integration/components/course/visualize-instructor-term-graph-test.js index 6710586853..2458702f49 100644 --- a/packages/test-app/tests/integration/components/course/visualize-instructor-term-graph-test.js +++ b/packages/test-app/tests/integration/components/course/visualize-instructor-term-graph-test.js @@ -9,7 +9,7 @@ module('Integration | Component | course/visualize-instructor-term-graph', funct setupRenderingTest(hooks); setupMirage(hooks); - test('it renders', async function (assert) { + hooks.beforeEach(async function () { const instructor = this.server.create('user'); const vocabulary1 = this.server.create('vocabulary'); const vocabulary2 = this.server.create('vocabulary'); @@ -54,23 +54,85 @@ module('Integration | Component | course/visualize-instructor-term-graph', funct instructors: [instructor], }); - const courseModel = await this.owner.lookup('service:store').findRecord('course', course.id); - const userModel = await this.owner.lookup('service:store').findRecord('user', instructor.id); - - this.set('course', courseModel); - this.set('instructor', userModel); + this.course = await this.owner.lookup('service:store').findRecord('course', course.id); + this.user = await this.owner.lookup('service:store').findRecord('user', instructor.id); + }); + test('it renders', async function (assert) { + this.set('course', this.course); + this.set('instructor', this.user); await render( - hbs` + hbs` `, ); //let the chart animations finish await waitFor('.loaded'); await waitFor('svg .bars'); - assert.strictEqual(component.chart.bars.length, 2); + assert.strictEqual( + component.chart.bars[0].description, + 'Vocabulary 1 - Standalone - 630 Minutes', + ); + assert.strictEqual( + component.chart.bars[1].description, + 'Vocabulary 2 - Campaign - 180 Minutes', + ); assert.strictEqual(component.chart.labels.length, 2); - assert.strictEqual(component.chart.labels[0].text, 'Vocabulary 1 > Standalone: 630 Minutes'); - assert.strictEqual(component.chart.labels[1].text, 'Vocabulary 2 > Campaign: 180 Minutes'); + assert.strictEqual(component.chart.labels[0].text, 'Vocabulary 1 - Standalone'); + assert.strictEqual(component.chart.labels[1].text, 'Vocabulary 2 - Campaign'); + }); + + test('sort data-table by vocabulary term', async function (assert) { + this.set('course', this.course); + this.set('instructor', this.user); + await render( + hbs` +`, + ); + assert.strictEqual(component.dataTable.rows[0].vocabularyTerm, 'Vocabulary 2 - Campaign'); + assert.strictEqual(component.dataTable.rows[1].vocabularyTerm, 'Vocabulary 1 - Standalone'); + await component.dataTable.header.vocabularyTerm.toggle(); + assert.strictEqual(component.dataTable.rows[0].vocabularyTerm, 'Vocabulary 1 - Standalone'); + assert.strictEqual(component.dataTable.rows[1].vocabularyTerm, 'Vocabulary 2 - Campaign'); + await component.dataTable.header.vocabularyTerm.toggle(); + assert.strictEqual(component.dataTable.rows[0].vocabularyTerm, 'Vocabulary 2 - Campaign'); + assert.strictEqual(component.dataTable.rows[1].vocabularyTerm, 'Vocabulary 1 - Standalone'); + }); + + test('sort data-table by sessions', async function (assert) { + this.set('course', this.course); + this.set('instructor', this.user); + await render( + hbs` +`, + ); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'The San Leandro Horror'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'Berkeley Investigations'); + await component.dataTable.header.sessions.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'Berkeley Investigations'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'The San Leandro Horror'); + await component.dataTable.header.sessions.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'The San Leandro Horror'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'Berkeley Investigations'); + await component.dataTable.header.sessions.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'Berkeley Investigations'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'The San Leandro Horror'); + }); + + test('sort data-table by minutes', async function (assert) { + this.set('course', this.course); + this.set('instructor', this.user); + await render( + hbs` +`, + ); + assert.strictEqual(component.dataTable.rows[0].minutes, '180'); + assert.strictEqual(component.dataTable.rows[1].minutes, '630'); + await component.dataTable.header.minutes.toggle(); + assert.strictEqual(component.dataTable.rows[0].minutes, '630'); + assert.strictEqual(component.dataTable.rows[1].minutes, '180'); + await component.dataTable.header.minutes.toggle(); + assert.strictEqual(component.dataTable.rows[0].minutes, '180'); + assert.strictEqual(component.dataTable.rows[1].minutes, '630'); }); }); diff --git a/packages/test-app/tests/integration/components/course/visualize-instructor-test.js b/packages/test-app/tests/integration/components/course/visualize-instructor-test.js index 75f46f0399..72f03946b4 100644 --- a/packages/test-app/tests/integration/components/course/visualize-instructor-test.js +++ b/packages/test-app/tests/integration/components/course/visualize-instructor-test.js @@ -139,23 +139,14 @@ module('Integration | Component | course/visualize-instructor', function (hooks) // wait for charts to load await waitFor('.loaded'); await waitFor('svg .bars'); - await waitFor('svg .chart'); assert.strictEqual(component.termsChart.chart.bars.length, 3); assert.strictEqual(component.termsChart.chart.labels.length, 3); - assert.strictEqual( - component.termsChart.chart.labels[0].text, - 'Vocabulary 1 > term 0: 60 Minutes', - ); - assert.strictEqual( - component.termsChart.chart.labels[1].text, - 'Vocabulary 1 > term 1: 30 Minutes', - ); - assert.strictEqual( - component.termsChart.chart.labels[2].text, - 'Vocabulary 2 > term 2: 30 Minutes', - ); - assert.strictEqual(component.sessionTypesChart.chart.slices.length, 2); - assert.strictEqual(component.sessionTypesChart.chart.slices[0].text, 'session type 0 66.7%'); - assert.strictEqual(component.sessionTypesChart.chart.slices[1].text, 'session type 1 33.3%'); + assert.strictEqual(component.termsChart.chart.labels[0].text, 'Vocabulary 1 - term 0'); + assert.strictEqual(component.termsChart.chart.labels[1].text, 'Vocabulary 1 - term 1'); + assert.strictEqual(component.termsChart.chart.labels[2].text, 'Vocabulary 2 - term 2'); + assert.strictEqual(component.sessionTypesChart.chart.bars.length, 2); + assert.strictEqual(component.sessionTypesChart.chart.labels.length, 2); + assert.strictEqual(component.sessionTypesChart.chart.labels[0].text, 'session type 1'); + assert.strictEqual(component.sessionTypesChart.chart.labels[1].text, 'session type 0'); }); }); diff --git a/packages/test-app/tests/integration/components/course/visualize-term-graph-test.js b/packages/test-app/tests/integration/components/course/visualize-term-graph-test.js index 0ee602e55a..668df8a103 100644 --- a/packages/test-app/tests/integration/components/course/visualize-term-graph-test.js +++ b/packages/test-app/tests/integration/components/course/visualize-term-graph-test.js @@ -1,14 +1,15 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'test-app/tests/helpers'; -import { render, findAll, waitFor } from '@ember/test-helpers'; +import { render, waitFor } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; import { setupMirage } from 'test-app/tests/test-support/mirage'; +import { component } from 'ilios-common/page-objects/components/course/visualize-term-graph'; module('Integration | Component | course/visualize-term-graph', function (hooks) { setupRenderingTest(hooks); setupMirage(hooks); - test('it renders', async function (assert) { + hooks.beforeEach(async function () { const vocabulary = this.server.create('vocabulary'); const term = this.server.create('term', { vocabulary }); const course = this.server.create('course'); @@ -46,23 +47,97 @@ module('Integration | Component | course/visualize-term-graph', function (hooks) endDate: new Date('2019-12-05T21:00:00'), }); - const courseModel = await this.owner.lookup('service:store').findRecord('course', course.id); - const termModel = await this.owner.lookup('service:store').findRecord('term', term.id); + this.course = await this.owner.lookup('service:store').findRecord('course', course.id); + this.term = await this.owner.lookup('service:store').findRecord('term', term.id); + }); - this.set('course', courseModel); - this.set('term', termModel); + test('it renders', async function (assert) { + this.set('course', this.course); + this.set('term', this.term); await render( - hbs` + hbs` `, ); //let the chart animations finish await waitFor('.loaded'); await waitFor('svg .bars'); + assert.strictEqual(component.chart.bars.length, 2); + assert.strictEqual(component.chart.bars[0].text, 'Campaign - 180 Minutes'); + assert.strictEqual(component.chart.bars[1].text, 'Standalone - 630 Minutes'); + assert.strictEqual(component.chart.labels.length, 2); + assert.strictEqual(component.chart.labels[0].text, 'Campaign'); + assert.strictEqual(component.chart.labels[1].text, 'Standalone'); + assert.strictEqual(component.dataTable.rows.length, 2); + assert.strictEqual(component.dataTable.rows[0].sessionType, 'Campaign'); + assert.strictEqual(component.dataTable.rows[0].sessions.links.length, 1); + assert.strictEqual( + component.dataTable.rows[0].sessions.links[0].text, + 'The San Leandro Horror', + ); + assert.strictEqual(component.dataTable.rows[0].sessions.links[0].url, '/courses/1/sessions/2'); + assert.strictEqual(component.dataTable.rows[0].minutes, '180'); + assert.strictEqual(component.dataTable.rows[1].sessionType, 'Standalone'); + assert.strictEqual(component.dataTable.rows[1].sessions.links.length, 1); + assert.strictEqual( + component.dataTable.rows[1].sessions.links[0].text, + 'Berkeley Investigations', + ); + assert.strictEqual(component.dataTable.rows[1].sessions.links[0].url, '/courses/1/sessions/1'); + assert.strictEqual(component.dataTable.rows[1].minutes, '630'); + }); - const chartLabels = 'svg .bars text'; - assert.dom(chartLabels).exists({ count: 2 }); - assert.dom(findAll(chartLabels)[0]).hasText('Standalone 77.8%'); - assert.dom(findAll(chartLabels)[1]).hasText('Campaign 22.2%'); + test('sort data-table by session type', async function (assert) { + this.set('course', this.course); + await render( + hbs` +`, + ); + assert.strictEqual(component.dataTable.rows[0].sessionType, 'Campaign'); + assert.strictEqual(component.dataTable.rows[1].sessionType, 'Standalone'); + await component.dataTable.header.sessionType.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessionType, 'Campaign'); + assert.strictEqual(component.dataTable.rows[1].sessionType, 'Standalone'); + await component.dataTable.header.sessionType.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessionType, 'Standalone'); + assert.strictEqual(component.dataTable.rows[1].sessionType, 'Campaign'); + await component.dataTable.header.sessionType.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessionType, 'Campaign'); + assert.strictEqual(component.dataTable.rows[1].sessionType, 'Standalone'); + }); + + test('sort data-table by sessions', async function (assert) { + this.set('course', this.course); + await render( + hbs` +`, + ); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'The San Leandro Horror'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'Berkeley Investigations'); + await component.dataTable.header.sessions.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'Berkeley Investigations'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'The San Leandro Horror'); + await component.dataTable.header.sessions.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'The San Leandro Horror'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'Berkeley Investigations'); + await component.dataTable.header.sessions.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'Berkeley Investigations'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'The San Leandro Horror'); + }); + + test('sort data-table by minutes', async function (assert) { + this.set('course', this.course); + await render( + hbs` +`, + ); + assert.strictEqual(component.dataTable.rows[0].minutes, '180'); + assert.strictEqual(component.dataTable.rows[1].minutes, '630'); + await component.dataTable.header.minutes.toggle(); + assert.strictEqual(component.dataTable.rows[0].minutes, '630'); + assert.strictEqual(component.dataTable.rows[1].minutes, '180'); + await component.dataTable.header.minutes.toggle(); + assert.strictEqual(component.dataTable.rows[0].minutes, '180'); + assert.strictEqual(component.dataTable.rows[1].minutes, '630'); }); }); diff --git a/packages/test-app/tests/integration/components/course/visualize-vocabularies-graph-test.js b/packages/test-app/tests/integration/components/course/visualize-vocabularies-graph-test.js index 3e5f8c0fab..3a4ae49123 100644 --- a/packages/test-app/tests/integration/components/course/visualize-vocabularies-graph-test.js +++ b/packages/test-app/tests/integration/components/course/visualize-vocabularies-graph-test.js @@ -9,7 +9,7 @@ module('Integration | Component | course/visualize-vocabularies-graph', function setupRenderingTest(hooks); setupMirage(hooks); - test('it renders', async function (assert) { + hooks.beforeEach(async function () { const vocabulary1 = this.server.create('vocabulary', { title: 'Standalone', }); @@ -45,17 +45,95 @@ module('Integration | Component | course/visualize-vocabularies-graph', function endDate: new Date('2019-12-05T21:00:00'), }); - const courseModel = await this.owner.lookup('service:store').findRecord('course', course.id); - - this.set('course', courseModel); + this.course = await this.owner.lookup('service:store').findRecord('course', course.id); + }); - await render(hbs` -`); + test('it renders', async function (assert) { + this.set('course', this.course); + await render( + hbs` +`, + ); //let the chart animations finish await waitFor('.loaded'); - await waitFor('svg .slice'); - assert.strictEqual(component.chart.slices.length, 2); - assert.strictEqual(component.chart.slices[0].text, 'Standalone'); - assert.strictEqual(component.chart.slices[1].text, 'Campaign'); + await waitFor('svg .bars'); + assert.strictEqual(component.chart.bars.length, 2); + assert.strictEqual(component.chart.bars[0].text, 'Campaign - 180 Minutes'); + assert.strictEqual(component.chart.bars[1].text, 'Standalone - 630 Minutes'); + assert.strictEqual(component.chart.labels.length, 2); + assert.strictEqual(component.chart.labels[0].text, 'Campaign'); + assert.strictEqual(component.chart.labels[1].text, 'Standalone'); + + assert.strictEqual(component.dataTable.rows.length, 2); + assert.strictEqual(component.dataTable.rows[0].vocabulary, 'Campaign'); + assert.strictEqual(component.dataTable.rows[0].sessions.links.length, 1); + assert.strictEqual( + component.dataTable.rows[0].sessions.links[0].text, + 'The San Leandro Horror', + ); + assert.strictEqual(component.dataTable.rows[0].sessions.links[0].url, '/courses/1/sessions/2'); + assert.strictEqual(component.dataTable.rows[0].minutes, '180'); + assert.strictEqual(component.dataTable.rows[1].vocabulary, 'Standalone'); + assert.strictEqual(component.dataTable.rows[1].sessions.links.length, 1); + assert.strictEqual( + component.dataTable.rows[1].sessions.links[0].text, + 'Berkeley Investigations', + ); + assert.strictEqual(component.dataTable.rows[1].sessions.links[0].url, '/courses/1/sessions/1'); + assert.strictEqual(component.dataTable.rows[1].minutes, '630'); + }); + + test('sort data-table by vocabulary', async function (assert) { + this.set('course', this.course); + await render( + hbs` +`, + ); + assert.strictEqual(component.dataTable.rows[0].vocabulary, 'Campaign'); + assert.strictEqual(component.dataTable.rows[1].vocabulary, 'Standalone'); + await component.dataTable.header.vocabulary.toggle(); + assert.strictEqual(component.dataTable.rows[0].vocabulary, 'Campaign'); + assert.strictEqual(component.dataTable.rows[1].vocabulary, 'Standalone'); + await component.dataTable.header.vocabulary.toggle(); + assert.strictEqual(component.dataTable.rows[0].vocabulary, 'Standalone'); + assert.strictEqual(component.dataTable.rows[1].vocabulary, 'Campaign'); + await component.dataTable.header.vocabulary.toggle(); + assert.strictEqual(component.dataTable.rows[0].vocabulary, 'Campaign'); + assert.strictEqual(component.dataTable.rows[1].vocabulary, 'Standalone'); + }); + + test('sort data-table by sessions', async function (assert) { + this.set('course', this.course); + await render( + hbs` +`, + ); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'The San Leandro Horror'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'Berkeley Investigations'); + await component.dataTable.header.sessions.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'Berkeley Investigations'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'The San Leandro Horror'); + await component.dataTable.header.sessions.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'The San Leandro Horror'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'Berkeley Investigations'); + await component.dataTable.header.sessions.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'Berkeley Investigations'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'The San Leandro Horror'); + }); + + test('sort data-table by minutes', async function (assert) { + this.set('course', this.course); + await render( + hbs` +`, + ); + assert.strictEqual(component.dataTable.rows[0].minutes, '180'); + assert.strictEqual(component.dataTable.rows[1].minutes, '630'); + await component.dataTable.header.minutes.toggle(); + assert.strictEqual(component.dataTable.rows[0].minutes, '630'); + assert.strictEqual(component.dataTable.rows[1].minutes, '180'); + await component.dataTable.header.minutes.toggle(); + assert.strictEqual(component.dataTable.rows[0].minutes, '180'); + assert.strictEqual(component.dataTable.rows[1].minutes, '630'); }); }); diff --git a/packages/test-app/tests/integration/components/course/visualize-vocabulary-graph-test.js b/packages/test-app/tests/integration/components/course/visualize-vocabulary-graph-test.js index 7ad084c60d..0af6c95e92 100644 --- a/packages/test-app/tests/integration/components/course/visualize-vocabulary-graph-test.js +++ b/packages/test-app/tests/integration/components/course/visualize-vocabulary-graph-test.js @@ -46,18 +46,17 @@ module('Integration | Component | course/visualize-vocabulary-graph', function ( endDate: new Date('2019-12-05T21:00:00'), }); - this.courseModel = await this.owner.lookup('service:store').findRecord('course', course.id); - this.vocabularyModel = await this.owner + this.course = await this.owner.lookup('service:store').findRecord('course', course.id); + this.vocabulary = await this.owner .lookup('service:store') .findRecord('vocabulary', vocabulary.id); }); test('it renders', async function (assert) { - this.set('course', this.courseModel); - this.set('vocabulary', this.vocabularyModel); - + this.set('course', this.course); + this.set('vocabulary', this.vocabulary); await render( - hbs` + hbs` `, ); //let the chart animations finish @@ -65,8 +64,81 @@ module('Integration | Component | course/visualize-vocabulary-graph', function ( await waitFor('svg .bars'); assert.strictEqual(component.chart.bars.length, 2); + assert.strictEqual(component.chart.bars[0].text, 'Campaign - 180 Minutes'); + assert.strictEqual(component.chart.bars[1].text, 'Standalone - 630 Minutes'); assert.strictEqual(component.chart.labels.length, 2); - assert.strictEqual(component.chart.labels[0].text, 'Campaign: 180 Minutes'); - assert.strictEqual(component.chart.labels[1].text, 'Standalone: 630 Minutes'); + assert.strictEqual(component.chart.labels[0].text, 'Campaign'); + assert.strictEqual(component.chart.labels[1].text, 'Standalone'); + assert.strictEqual(component.dataTable.rows.length, 2); + assert.strictEqual(component.dataTable.rows[0].term, 'Campaign'); + assert.strictEqual(component.dataTable.rows[0].sessions.links.length, 1); + assert.strictEqual( + component.dataTable.rows[0].sessions.links[0].text, + 'The San Leandro Horror', + ); + assert.strictEqual(component.dataTable.rows[0].sessions.links[0].url, '/courses/1/sessions/2'); + assert.strictEqual(component.dataTable.rows[0].minutes, '180'); + assert.strictEqual(component.dataTable.rows[1].term, 'Standalone'); + assert.strictEqual(component.dataTable.rows[1].sessions.links.length, 1); + assert.strictEqual( + component.dataTable.rows[1].sessions.links[0].text, + 'Berkeley Investigations', + ); + assert.strictEqual(component.dataTable.rows[1].sessions.links[0].url, '/courses/1/sessions/1'); + assert.strictEqual(component.dataTable.rows[1].minutes, '630'); + }); + + test('sort data-table by term', async function (assert) { + this.set('course', this.course); + this.set('vocabulary', this.vocabulary); + await render( + hbs``, + ); + assert.strictEqual(component.dataTable.rows[0].term, 'Campaign'); + assert.strictEqual(component.dataTable.rows[1].term, 'Standalone'); + await component.dataTable.header.term.toggle(); + assert.strictEqual(component.dataTable.rows[0].term, 'Campaign'); + assert.strictEqual(component.dataTable.rows[1].term, 'Standalone'); + await component.dataTable.header.term.toggle(); + assert.strictEqual(component.dataTable.rows[0].term, 'Standalone'); + assert.strictEqual(component.dataTable.rows[1].term, 'Campaign'); + await component.dataTable.header.term.toggle(); + assert.strictEqual(component.dataTable.rows[0].term, 'Campaign'); + assert.strictEqual(component.dataTable.rows[1].term, 'Standalone'); + }); + + test('sort data-table by sessions', async function (assert) { + this.set('course', this.course); + this.set('vocabulary', this.vocabulary); + await render( + hbs``, + ); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'The San Leandro Horror'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'Berkeley Investigations'); + await component.dataTable.header.sessions.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'Berkeley Investigations'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'The San Leandro Horror'); + await component.dataTable.header.sessions.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'The San Leandro Horror'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'Berkeley Investigations'); + await component.dataTable.header.sessions.toggle(); + assert.strictEqual(component.dataTable.rows[0].sessions.text, 'Berkeley Investigations'); + assert.strictEqual(component.dataTable.rows[1].sessions.text, 'The San Leandro Horror'); + }); + + test('sort data-table by minutes', async function (assert) { + this.set('course', this.course); + this.set('vocabulary', this.vocabulary); + await render( + hbs``, + ); + assert.strictEqual(component.dataTable.rows[0].minutes, '180'); + assert.strictEqual(component.dataTable.rows[1].minutes, '630'); + await component.dataTable.header.minutes.toggle(); + assert.strictEqual(component.dataTable.rows[0].minutes, '630'); + assert.strictEqual(component.dataTable.rows[1].minutes, '180'); + await component.dataTable.header.minutes.toggle(); + assert.strictEqual(component.dataTable.rows[0].minutes, '180'); + assert.strictEqual(component.dataTable.rows[1].minutes, '630'); }); }); diff --git a/packages/test-app/tests/integration/components/course/visualize-vocabulary-test.js b/packages/test-app/tests/integration/components/course/visualize-vocabulary-test.js index 392063790f..7d084d7bb1 100644 --- a/packages/test-app/tests/integration/components/course/visualize-vocabulary-test.js +++ b/packages/test-app/tests/integration/components/course/visualize-vocabulary-test.js @@ -91,7 +91,7 @@ module('Integration | Component | course/visualize-vocabulary', function (hooks) await waitFor('svg .bars'); assert.strictEqual(component.termsChart.chart.bars.length, 2); assert.strictEqual(component.termsChart.chart.labels.length, 2); - assert.strictEqual(component.termsChart.chart.labels[0].text, 'term 1: 60 Minutes'); - assert.strictEqual(component.termsChart.chart.labels[1].text, 'term 0: 150 Minutes'); + assert.strictEqual(component.termsChart.chart.labels[0].text, 'term 1'); + assert.strictEqual(component.termsChart.chart.labels[1].text, 'term 0'); }); });