@operato/event-view 10.0.0 → 10.11.0

package/test/day-overflow.test.ts

@@ -0,0 +1,103 @@
+import { html, fixture, expect } from '@open-wc/testing'
+
+import '../src/ox-event-view.js'
+import { OxEventView } from '../src/ox-event-view.js'
+import { BizEvent, CALENDAR, EventProvider } from '../src/types.js'
+import { DayOverflow } from '../src/day-overflow.js'
+
+/**
+ * A cell takes a ceiling so one busy day does not set the height of every day beside it, and
+ * says what the ceiling cut so the host can fold harder.
+ *
+ * The ceiling on its own would be the defect it replaces - the old "+763 more" hid rows the same
+ * way. What makes it different is that somebody is told.
+ */
+
+const ROW_HEIGHT = 20
+
+function providerWith(rowsOnFirstDay: number): EventProvider {
+  return {
+    async fetchEventsForCalendar(calendar: CALENDAR) {
+      const events: BizEvent[] = Array.from({ length: rowsOnFirstDay }, (unused, index) => ({
+        title: `row ${index}`,
+        color: 'rgb(0, 0, 0)',
+        template: html`<div style="height: ${ROW_HEIGHT}px">row ${index}</div>`
+      }))
+
+      return new Map([[calendar[0].date, events]])
+    }
+  }
+}
+
+async function calendarWith(rows: number, cap?: string) {
+  const el = (await fixture(html`
+    <ox-event-view mode="monthly" style=${cap ? `--calendar-monthly-date-max-height:${cap}` : ''}></ox-event-view>
+  `)) as OxEventView
+
+  const seen: DayOverflow[][] = []
+  el.addEventListener('day-overflow', event => seen.push((event as CustomEvent<DayOverflow[]>).detail))
+
+  el.eventProvider = providerWith(rows)
+  await el.updateComplete
+  await new Promise(resolve => setTimeout(resolve, 80))
+
+  const root = el.renderRoot.querySelector('calendar-monthly')!.shadowRoot!
+  return { root, seen }
+}
+
+describe('a day cell that cannot hold everything says so', () => {
+  it('stays uncapped, and silent, when no theme sets a ceiling', async () => {
+    /*
+     * The default has to be none. A ceiling is only safe once the host folds its rows, so a
+     * component that capped by default would start hiding rows in every app that upgraded.
+     */
+    const { root, seen } = await calendarWith(40)
+    const cell = root.querySelector('li[date]') as HTMLElement
+
+    expect(getComputedStyle(cell).maxHeight).to.equal('none')
+    expect(cell.getBoundingClientRect().height, 'the cell grew to hold all forty').to.be.greaterThan(40 * ROW_HEIGHT)
+    expect(seen, 'nothing was cut, so nothing is reported').to.deep.equal([])
+  })
+
+  it('reports the rows a ceiling cut, and which day lost them', async () => {
+    const { root, seen } = await calendarWith(40, '160px')
+    const cell = root.querySelector('li[date]') as HTMLElement
+
+    expect(cell.getBoundingClientRect().height, 'held to the ceiling').to.be.at.most(161)
+
+    const last = seen[seen.length - 1]
+    expect(last, 'the host was told').to.not.be.undefined
+    expect(last.length).to.equal(1)
+    expect(last[0].hidden, 'roughly the rows past 160px, not all forty').to.be.greaterThan(20)
+    expect(last[0].date, 'named by day, so the host knows where to fold').to.be.instanceOf(Date)
+  })
+
+  it('keeps every other cell off the busy day\'s height', async () => {
+    /*
+     * The measured failure: a grid row is as tall as its tallest cell, so 767 events on the 8th
+     * made all seven of the week view's cells 670px, the two empty ones included.
+     */
+    const { root } = await calendarWith(40, '160px')
+    const cells = Array.from(root.querySelectorAll('li[date]')) as HTMLElement[]
+    const heights = cells.map(cell => Math.round(cell.getBoundingClientRect().height))
+
+    expect(Math.max(...heights)).to.be.at.most(161)
+  })
+
+  it('does not repeat itself when nothing changed', async () => {
+    /*
+     * This measurement runs after every render, and a host that re-renders in response would
+     * otherwise be told the same thing forever.
+     */
+    const { seen } = await calendarWith(40, '160px')
+    const signatures = seen.map(one => one.map(day => `${day.date?.getTime()}:${day.hidden}`).join(','))
+
+    expect(new Set(signatures).size, 'one distinct report, however many renders').to.equal(signatures.length)
+  })
+
+  it('says nothing for a day that fits under the ceiling', async () => {
+    const { seen } = await calendarWith(2, '160px')
+
+    expect(seen.flat()).to.deep.equal([])
+  })
+})

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)
+  })
+})