@operato/event-view 10.10.2 → 10.11.0

package/test/day-state.test.ts

@@ -0,0 +1,139 @@
+import { html, fixture, expect } from '@open-wc/testing'
+
+import '../src/ox-event-view.js'
+import { OxEventView } from '../src/ox-event-view.js'
+import { CALENDAR, DayState, EventProvider } from '../src/types.js'
+
+/**
+ * A host can say something about a day itself, not only about what happened in it.
+ *
+ * Before this there was no such channel: CALENDAR carried only what the component works out
+ * (which month a date is in, whether it is today), so a screen wanting to mark a holiday had to
+ * send an event, and it drew as one more 6px dot among the day's actual work. That was the
+ * component's shape, not the screen's choice.
+ */
+
+function providerMarking(pick: (calendar: CALENDAR) => Date[], state: DayState): EventProvider {
+  return {
+    async fetchEventsForCalendar() {
+      return new Map()
+    },
+    async fetchDayStatesForCalendar(calendar: CALENDAR) {
+      /*
+       * Key by the very Date objects the component handed over. The component looks the day up
+       * by identity, the way it already does for events - a fresh Date with the same instant
+       * would not match, and a host that built its own would silently mark nothing.
+       */
+      return new Map(pick(calendar).map(date => [date, state]))
+    }
+  }
+}
+
+const HOLIDAY: DayState = { name: 'non-working', color: 'rgb(1, 2, 3)' }
+
+/*
+ * A bare test page carries no theme, and every surface in this component is a var() onto one.
+ * Without these the month cells compute to transparent and "the state did not paint" looks the
+ * same as "nothing paints here at all" — which is precisely the confusion these tests exist to
+ * rule out. Only the tokens the cell surfaces read.
+ */
+const THEME: Record<string, string> = {
+  '--md-sys-color-surface-container-lowest': 'rgb(255, 255, 255)',
+  '--md-sys-color-surface-variant': 'rgb(232, 235, 238)',
+  '--md-sys-color-surface': 'rgb(240, 242, 244)',
+  '--md-sys-color-tertiary-container': 'rgb(200, 220, 255)',
+  '--md-sys-color-primary': 'rgb(38, 46, 56)'
+}
+
+before(() => Object.entries(THEME).forEach(([name, value]) => document.documentElement.style.setProperty(name, value)))
+after(() => Object.keys(THEME).forEach(name => document.documentElement.style.removeProperty(name)))
+
+async function calendarWith(provider: EventProvider | undefined, mode: 'monthly' | 'weekly') {
+  const el = (await fixture(html`<ox-event-view mode=${mode}></ox-event-view>`)) as OxEventView
+  if (provider) el.eventProvider = provider
+  await el.updateComplete
+  /* The grid is filled in updated(), after the provider has answered. */
+  await new Promise(resolve => setTimeout(resolve, 50))
+
+  const view = el.renderRoot.querySelector(mode === 'monthly' ? 'calendar-monthly' : 'calendar-weekly')!
+  return view.shadowRoot!
+}
+
+describe('a host can mark the day itself', () => {
+  it('paints the marked day and leaves the rest alone', async () => {
+    const root = await calendarWith(providerMarking(calendar => [calendar[10].date], HOLIDAY), 'monthly')
+
+    const marked = root.querySelectorAll('li[day-state]')
+    expect(marked.length, 'exactly the day the host named').to.equal(1)
+    expect(getComputedStyle(marked[0] as HTMLElement).backgroundColor).to.equal('rgb(1, 2, 3)')
+    expect(marked[0].getAttribute('day-state'), 'the host word reaches the dom').to.equal('non-working')
+  })
+
+  it('leaves every cell unmarked when the host does not answer', async () => {
+    /* The old EventProvider shape, which must keep working - the method is optional. */
+    const root = await calendarWith({ async fetchEventsForCalendar() { return new Map() } }, 'monthly')
+
+    expect(root.querySelectorAll('li[day-state]').length).to.equal(0)
+  })
+
+  it('does not blank a cell when there is no state to draw', async () => {
+    /*
+     * The failure this guards. `background-color: var(--day-state-color)` with the property
+     * unset is invalid at computed-value time, which resolves to transparent - so an attribute
+     * written without a colour would erase the month surface underneath instead of adding to
+     * it. Unmarked days must keep the surface the month view gave them.
+     */
+    const root = await calendarWith(providerMarking(calendar => [calendar[10].date], HOLIDAY), 'monthly')
+
+    const plain = root.querySelector('li[current-month]:not([day-state])') as HTMLElement
+    expect(getComputedStyle(plain).backgroundColor, 'the month surface, untouched').to.equal('rgb(255, 255, 255)')
+  })
+
+  it('marks both cells of a day in the week view', async () => {
+    /*
+     * A day is two cells stacked there - the date band and the events under it. Marking only
+     * the band would tint a 37px strip and leave the 600px body untouched.
+     */
+    const root = await calendarWith(providerMarking(calendar => [calendar[3].date], HOLIDAY), 'weekly')
+
+    const marked = Array.from(root.querySelectorAll('li[day-state]')) as HTMLElement[]
+    expect(marked.length).to.equal(2)
+    expect(marked.some(li => li.hasAttribute('day-of-week')), 'the date band').to.be.true
+    expect(marked.some(li => !li.hasAttribute('day-of-week')), 'the events under it').to.be.true
+    marked.forEach(li => expect(getComputedStyle(li).backgroundColor).to.equal('rgb(1, 2, 3)'))
+  })
+
+  it('lets a selection win over the day state', async () => {
+    /*
+     * Both rules are (0,1,1), so the order they are written in is what decides. A day you have
+     * selected should look selected even if it is a holiday; a holiday you have not touched
+     * should look like a holiday. Get the order wrong and dragging across a holiday leaves a
+     * hole in the selection.
+     */
+    const root = await calendarWith(providerMarking(calendar => [calendar[10].date], HOLIDAY), 'monthly')
+    const cell = root.querySelector('li[day-state]') as HTMLElement
+
+    cell.setAttribute('selected', '')
+
+    expect(getComputedStyle(cell).backgroundColor).to.not.equal('rgb(1, 2, 3)')
+  })
+
+  it('keeps today readable on a marked day', async () => {
+    /*
+     * Today rides on a background-image and an outline, precisely so it survives whatever claims
+     * the background colour. A holiday that is also today has to show both.
+     */
+    const root = await calendarWith(
+      providerMarking(calendar => calendar.filter(one => one.today).map(one => one.date), HOLIDAY),
+      'monthly'
+    )
+    const today = root.querySelector('li[today]') as HTMLElement
+    const style = getComputedStyle(today)
+
+    expect(today.hasAttribute('day-state'), 'today was the day marked').to.be.true
+    expect(style.backgroundColor, 'the holiday surface').to.equal('rgb(1, 2, 3)')
+    expect(style.backgroundImage, 'today, still drawn on top').to.not.equal('none')
+    expect(style.outlineStyle, 'and the ring, which is an outline so it can sit inset').to.equal('solid')
+    expect(parseFloat(style.outlineWidth)).to.be.greaterThan(0)
+  })
+})