@operato/event-view 10.29.71 → 10.29.79

package/test/dark-theme.test.ts

@@ -0,0 +1,84 @@
+import { html, fixture, expect } from '@open-wc/testing'
+
+import '../src/ox-event-view.js'
+import { OxEventView } from '../src/ox-event-view.js'
+import { CALENDAR, EventProvider } from '../src/types.js'
+
+/**
+ * The calendar theme that @operato/styles ships reads in the dark theme.
+ *
+ * Its event chips sat on a fixed #f4f4f4 while their text followed the theme, so with `.dark`
+ * on the body every chip was light text on a light bar. The cell rules were black at 10%,
+ * which does not show on a dark cell.
+ *
+ * The test loads the published theme files as an app would and measures what is drawn.
+ */
+
+/* The styles package sits next to this one; the test server reaches it one level up. */
+const THEMES = '/__wds-outside-root__/1/styles/themes/'
+
+function luminance([r, g, b]: number[]) {
+  const f = (v: number) => ((v /= 255) <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4))
+  return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b)
+}
+
+function rgb(color: string) {
+  return color.match(/[\d.]+/g)!.slice(0, 3).map(Number)
+}
+
+function contrast(a: string, b: string) {
+  const [x, y] = [luminance(rgb(a)), luminance(rgb(b))]
+  return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05)
+}
+
+const provider: EventProvider = {
+  async fetchEventsForCalendar(calendar: CALENDAR) {
+    return new Map([[calendar[3].date, [{ title: 'chip', color: '#888' }]]])
+  }
+}
+
+const links: HTMLLinkElement[] = []
+
+before(async () => {
+  for (const name of ['dark.css', 'calendar-theme.css']) {
+    const link = document.createElement('link')
+    link.rel = 'stylesheet'
+    link.href = THEMES + name
+    document.head.append(link)
+    links.push(link)
+    await new Promise((resolve, reject) => ((link.onload = resolve), (link.onerror = reject)))
+  }
+  document.body.classList.add('dark')
+})
+
+after(() => {
+  links.forEach(link => link.remove())
+  document.body.classList.remove('dark')
+})
+
+for (const mode of ['monthly', 'weekly'] as const) {
+  describe(`${mode} calendar in the dark theme`, () => {
+    it('an event chip is readable on its own background', async () => {
+      const el = (await fixture(html`<ox-event-view mode=${mode}></ox-event-view>`)) as OxEventView
+      el.eventProvider = provider
+      await new Promise(resolve => setTimeout(resolve, 100))
+
+      const view = el.renderRoot.querySelector(mode === 'monthly' ? 'calendar-monthly' : 'calendar-weekly')!
+      const chip = view.shadowRoot!.querySelector('[event]') as HTMLElement
+      expect(chip, 'the chip is drawn').to.exist
+
+      const style = getComputedStyle(chip)
+      expect(contrast(style.color, style.backgroundColor)).to.be.at.least(4.5)
+    })
+
+    it('the cell rules follow the theme outline', async () => {
+      const el = (await fixture(html`<ox-event-view mode=${mode}></ox-event-view>`)) as OxEventView
+      await el.updateComplete
+      const view = el.renderRoot.querySelector(mode === 'monthly' ? 'calendar-monthly' : 'calendar-weekly')!
+      const cell = view.shadowRoot!.querySelector('li[date]') as HTMLElement
+      const outline = getComputedStyle(document.body).getPropertyValue('--md-sys-color-outline-variant').trim()
+
+      expect(rgb(getComputedStyle(cell).borderRightColor)).to.deep.equal(rgb(outline))
+    })
+  })
+}

package/test/selectable.test.ts

@@ -0,0 +1,62 @@
+import { html, fixture, expect } from '@open-wc/testing'
+
+import '../src/ox-event-view.js'
+import { OxEventView } from '../src/ox-event-view.js'
+
+/**
+ * A calendar picks dates only when the host says it is a picker.
+ *
+ * Every calendar used to take a press or drag over its days as a range selection, and set
+ * touch-action: none on them so the browser would not read the drag as a scroll. On a phone that
+ * left screens which only show a calendar unable to scroll past it.
+ */
+
+async function grid(mode: 'monthly' | 'weekly', selectable: boolean) {
+  const el = (await fixture(
+    html`<ox-event-view mode=${mode} ?selectable=${selectable}></ox-event-view>`
+  )) as OxEventView
+  await el.updateComplete
+  await new Promise(resolve => setTimeout(resolve, 50))
+
+  const view = el.renderRoot.querySelector(mode === 'monthly' ? 'calendar-monthly' : 'calendar-weekly')!
+  const days = Array.from(view.shadowRoot!.querySelectorAll('li[date]')) as HTMLElement[]
+  return { el, days }
+}
+
+function drag(from: HTMLElement, to: HTMLElement) {
+  const init = { bubbles: true, composed: true, cancelable: true, pointerId: 1, pointerType: 'touch' }
+  const down = new PointerEvent('pointerdown', init)
+  from.dispatchEvent(down)
+  to.dispatchEvent(new PointerEvent('pointermove', init))
+  to.dispatchEvent(new PointerEvent('pointerup', init))
+  return down
+}
+
+for (const mode of ['monthly', 'weekly'] as const) {
+  describe(`${mode} calendar selection`, () => {
+    it('a calendar that only shows leaves touch to the page and selects nothing', async () => {
+      const { el, days } = await grid(mode, false)
+      let selected = 0
+      el.addEventListener('select-date', () => selected++)
+
+      expect(getComputedStyle(days[1]).touchAction).to.equal('auto')
+
+      const down = drag(days[1], days[3])
+      expect(down.defaultPrevented).to.be.false
+      expect(selected).to.equal(0)
+      expect(days.some(day => day.hasAttribute('selected'))).to.be.false
+    })
+
+    it('a picker takes touch and reports the dragged range', async () => {
+      const { el, days } = await grid(mode, true)
+      let detail: Date[] | undefined
+      el.addEventListener('select-date', e => (detail = (e as CustomEvent).detail))
+
+      expect(getComputedStyle(days[1]).touchAction).to.equal('none')
+
+      const down = drag(days[3], days[1])
+      expect(down.defaultPrevented).to.be.true
+      expect(detail).to.deep.equal([(days[1] as any).date, (days[3] as any).date])
+    })
+  })
+}

package/themes/calendar-theme.css

@@ -3,7 +3,7 @@ body {
 
   /* monthly common color */
   --calendar-monthly-text-color: var(--md-sys-color-secondary);
-  --calendar-monthly-border: 1px solid rgba(0, 0, 0, 0.1);
+  --calendar-monthly-border: 1px solid var(--md-sys-color-outline-variant);
   --calendar-monthly-border-width: 0 1px 1px 0px;
 
   /* monthly layout */
@@ -21,16 +21,17 @@ body {
   --calendar-monthly-date-label-color: var(--md-sys-color-on-primary);
   --calendar-monthly-date-min-height: 120px;
 
-  --calendar-monthly-background-color: #f4f4f4;
+  --calendar-monthly-background-color: var(--md-sys-color-surface-container-low);
+  --calendar-monthly-color: var(--md-sys-color-on-surface);
   --calendar-monthly-event-border-radius: var(--border-radius);
   --calendar-monthly-event-margin: var(--padding-narrow) 0 0 0;
   --calendar-monthly-event-padding: 2px var(--padding-default);
-  --calendar-monthly-event-border: 3px solid #ccc;
+  --calendar-monthly-event-border: 3px solid var(--md-sys-color-outline);
   --calendar-monthly-event-border-width: 0 0 0 3px;
 
   /* weekly common color */
   --calendar-weekly-text-color: var(--md-sys-color-secondary);
-  --calendar-weekly-border: 1px solid rgba(0, 0, 0, 0.1);
+  --calendar-weekly-border: 1px solid var(--md-sys-color-outline-variant);
   --calendar-weekly-border-width: 0 1px 1px 0px;
 
   /* weekly layout */
@@ -47,11 +48,11 @@ body {
   --calendar-weekly-date-label-padding: 0px 6px;
   --calendar-weekly-date-label-color: var(--md-sys-color-on-primary);
 
-  --calendar-weekly-background-color: #f4f4f4;
+  --calendar-weekly-background-color: var(--md-sys-color-surface-container-low);
   --calendar-weekly-event-border-radius: var(--border-radius);
   --calendar-weekly-event-margin: var(--padding-narrow) 0 0 0;
   --calendar-weekly-event-padding: 2px var(--padding-default);
-  --calendar-weekly-event-border: 3px solid #ccc;
+  --calendar-weekly-event-border: 3px solid var(--md-sys-color-outline);
   --calendar-weekly-event-border-width: 0 0 0 3px;
 }