replace qunit-dom with page objects in dashboard calendar acceptance …

…test.

this requires reworking and fleshing out of existing page objects and
tests.

packages/frontend/tests/acceptance/dashboard/week-test.js

@@ -1,4 +1,4 @@
-import { currentRouteName } from '@ember/test-helpers';
+import { currentRouteName, findAll } from '@ember/test-helpers';
 import { DateTime } from 'luxon';
 import { module, test } from 'qunit';
 import { setupAuthentication, freezeDateAt, unfreezeDate } from 'ilios-common';
@@ -9,9 +9,11 @@ import percySnapshot from '@percy/ember';
 
 module('Acceptance | Dashboard Week at a Glance', function (hooks) {
   setupApplicationTest(hooks);
+
   const today = DateTime.fromObject({ hour: 8 });
 
   hooks.beforeEach(async function () {
+    this.intl = this.owner.lookup('service:intl');
     this.school = this.server.create('school');
     this.user = await setupAuthentication({ school: this.school });
   });
@@ -133,6 +135,51 @@ module('Acceptance | Dashboard Week at a Glance', function (hooks) {
     assert.ok(true, 'no a11y errors found!');
   });
 
+  test('week summary displays the whole week', async function (assert) {
+    assert.expect(3);
+    const startOfTheWeek = DateTime.fromJSDate(
+      this.owner.lookup('service:locale-days').firstDayOfThisWeek,
+    ).set({ minute: 2 });
+    const endOfTheWeek = DateTime.fromJSDate(
+      this.owner.lookup('service:locale-days').lastDayOfThisWeek,
+    ).set({ hour: 22, minute: 5 });
+
+    this.server.create('userevent', {
+      user: this.user.id,
+      startDate: startOfTheWeek.toJSDate(),
+      endDate: startOfTheWeek.plus({ hour: 1 }).toJSDate(),
+      offering: 1,
+      isPublished: true,
+    });
+    this.server.create('userevent', {
+      user: this.user.id,
+      startDate: endOfTheWeek.toJSDate(),
+      endDate: endOfTheWeek.plus({ hour: 1 }).toJSDate(),
+      offering: 2,
+      isPublished: true,
+    });
+    const dashboard = '.dashboard-week';
+    const events = `${dashboard} .event`;
+
+    await page.visit();
+
+    const eventBLocks = findAll(events);
+    assert.strictEqual(eventBLocks.length, 2);
+    const options = {
+      weekday: 'long',
+      hour: 'numeric',
+      minute: 'numeric',
+    };
+    assert.strictEqual(
+      page.week.weekGlance.events[0].text,
+      'event 0 ' + this.intl.formatTime(startOfTheWeek.toJSDate(), options),
+    );
+    assert.strictEqual(
+      page.week.weekGlance.events[1].text,
+      'event 1 ' + this.intl.formatTime(endOfTheWeek.toJSDate(), options),
+    );
+  });
+
   test('calendar is active in dashboard navigation', async function (assert) {
     await page.visit();
     assert.notOk(page.navigation.calendar.isActive);

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/dashboard/calendar-filters.js

@@ -1,8 +1,29 @@
-import { create } from 'ember-cli-page-object';
+import { collection, create, text } from 'ember-cli-page-object';
+import c from './filter-checkbox';
+import cohortsFilter from './cohort-calendar-filter';
+import coursesFilter from './courses-calendar-filter';
+import selectedVocabulary from './selected-vocabulary';
 
 const definition = {
   scope: '[data-test-dashboard-calendar-filters]',
-  // @todo implement [ST 2024/06/24]
+  coursesFilter,
+  sessionTypesFilter: {
+    scope: '[data-test-session-type-filter]',
+    title: text('h5'),
+    sessionTypes: collection('li', c),
+  },
+  vocabularyFilter: {
+    scope: '[data-test-vocabulary-filter]',
+    title: text('h5'),
+    sessionTypes: collection('li', c),
+    vocabularies: collection('[data-test-dashboard-selected-vocabulary]', selectedVocabulary),
+  },
+  courseLevelsFilter: {
+    scope: '[data-test-course-level-filter]',
+    title: text('h5'),
+    courseLevels: collection('li', c),
+  },
+  cohortsFilter,
 };
 
 export default definition;

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/dashboard/calendar.js

@@ -1,12 +1,9 @@
 import { collection, create, fillable, property } from 'ember-cli-page-object';
-import weeklyCalendar from './../weekly-calendar';
-import dailyCalendar from './../daily-calendar';
-import weekGlance from './../week-glance';
-import monthlyCalendar from './../monthly-calendar';
 import toggle from '../toggle-buttons';
 import userContextFilter from './user-context-filter';
-import calendarFilters from './calendar-filters';
+import filters from './calendar-filters';
 import filterTags from './filter-tags';
+import calendar from './../ilios-calendar';
 
 const definition = {
   scope: '[data-test-dashboard-calendar]',
@@ -38,13 +35,10 @@ const definition = {
         }),
       },
     },
-    calendarFilters,
+    filters,
   },
   filterTags,
-  dailyCalendar,
-  weekGlance,
-  weeklyCalendar,
-  monthlyCalendar,
+  calendar,
 };
 
 export default definition;

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/dashboard/filter-tags.js

@@ -1,8 +1,11 @@
-import { create } from 'ember-cli-page-object';
+import { collection, create } from 'ember-cli-page-object';
 
 const definition = {
   scope: '[data-test-dashboard-filter-tags]',
-  // @todo implement [ST 2024/06/24]
+  tags: collection('[data-test-filter-tag]'),
+  clearAll: {
+    scope: '[data-test-clear-filters]',
+  },
 };
 
 export default definition;

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/weekly-calendar-event.js

@@ -1,4 +1,4 @@
-import { attribute, create, hasClass, isPresent, text } from 'ember-cli-page-object';
+import { attribute, create, hasClass, isPresent, text, triggerable } from 'ember-cli-page-object';
 
 const definition = {
   scope: '[data-test-weekly-calendar-event]',
@@ -15,6 +15,11 @@ const definition = {
   isScheduled: isPresent('[data-test-scheduled-icon]'),
   isDraft: isPresent('[data-test-draft-icon]'),
   wasRecentlyUpdated: isPresent('[data-test-recently-updated-icon]'),
+  mouseOver: triggerable('mouseover'),
+  tooltip: {
+    scope: '[data-test-ilios-calendar-event-tooltip]',
+    resetScope: true,
+  },
 };
 
 export default definition;

packages/ilios-common/addon/components/dashboard/calendar-filters.hbs

@@ -37,7 +37,7 @@
     </div>
     <div
       class="calendar-filter-list vocabularyfilter"
-      data-test-vocbulary-filter
+      data-test-vocabulary-filter
     >
       <h5>
         {{t "general.terms"}}
@@ -72,7 +72,7 @@
         {{#if (is-array this.sessionTypes)}}
           <ul>
             {{#each this.sessionTypes as |type|}}
-              <li class="clickable">
+              <li class="clickable" data-test-filter>
                 <Dashboard::FilterCheckbox
                   @checked={{includes type.id @selectedSessionTypeIds}}
                   @add={{fn @addSessionTypeId type.id}}

packages/ilios-common/addon/components/dashboard/filter-tags.hbs

@@ -15,6 +15,7 @@
             class="filter-tag {{tag.class}}"
             type="button"
             {{on "click" (fn tag.remove tag.id)}}
+            data-test-filter-tag
           >
             {{tag.name}}
             <FaIcon @icon="xmark" />
@@ -25,6 +26,7 @@
           class="filters-clear-filters"
           type="button"
           {{on "click" @clearFilters}}
+          data-test-clear-filters
         >
           {{t "general.clearFilters"}}
         </button>