Add visual-diffs for events.

BrightspaceUI · Sep 23, 2024 · 5ec4b2d · 5ec4b2d
1 parent 6189cad
commit 5ec4b2d
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/components/calendar/test/calendar.vdiff.js b/components/calendar/test/calendar.vdiff.js
@@ -1,4 +1,5 @@
 import '../calendar.js';
+import '../calendar-event.js';
 import { clickElem, expect, fixture, focusElem, html, sendKeys, sendKeysElem } from '@brightspace-ui/testing';
 import sinon from 'sinon';
 
@@ -7,6 +8,11 @@ sinon.useFakeTimers({ now: newToday.getTime(), toFake: ['Date'] });
 
 const simpleTemplate = html`<d2l-calendar selected-value="2018-02-14"></d2l-calendar>`;
 const minMaxTemplate = html`<d2l-calendar min-value="2018-01-31" max-value="2018-02-27" selected-value="2018-02-14"></d2l-calendar>`;
+const eventsTemplate = html`<d2l-calendar selected-value="2018-02-14">
+	<d2l-calendar-event start-value="2018-01-29" end-value="2018-01-29"></d2l-calendar-event>
+	<d2l-calendar-event start-value="2018-02-12" end-value="2018-02-15"></d2l-calendar-event>
+	<d2l-calendar-event start-value="2018-03-03" end-value="2018-03-03"></d2l-calendar-event>
+</d2l-calendar>`;
 
 describe('calendar', () => {
 	let elem;
@@ -21,10 +27,15 @@ describe('calendar', () => {
 		{ name: 'min-max', template: minMaxTemplate },
 		{ name: 'min-max-no-selected', template: html`<d2l-calendar min-value="2017-08-31" max-value="2017-10-27" ></d2l-calendar>` },
 		{ name: 'no-selected', template: html`<d2l-calendar></d2l-calendar>` },
-		{ name: 'today-selected', template: html`<d2l-calendar selected-value="2018-02-12"></d2l-calendar>` }
-	].forEach(({ name, template }) => {
+		{ name: 'today-selected', template: html`<d2l-calendar selected-value="2018-02-12"></d2l-calendar>` },
+		{ name: 'events', template: eventsTemplate },
+		{ name: 'events-focus', template: eventsTemplate, action: () => focusElem(elem.shadowRoot.querySelector('td[data-date="29"]')) },
+		{ name: 'events-today-focus', template: eventsTemplate, action: () => focusElem(elem.shadowRoot.querySelector('td[data-date="12"]')) },
+		{ name: 'events-selected-focus', template: eventsTemplate, action: () => focusElem(elem.shadowRoot.querySelector('td[data-date="14"]')) }
+	].forEach(({ name, template, action }) => {
 		it(name, async() => {
 			await setupFixture(template);
+			if (action) await action();
 			await expect(elem).to.be.golden();
 		});
 	});