@operato/event-view 10.10.2 → 10.11.0

package/dist/test/day-overflow.test.js

@@ -0,0 +1,81 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import '../src/ox-event-view.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) {
+    return {
+        async fetchEventsForCalendar(calendar) {
+            const events = 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, cap) {
+    const el = (await fixture(html `
+    <ox-event-view mode="monthly" style=${cap ? `--calendar-monthly-date-max-height:${cap}` : ''}></ox-event-view>
+  `));
+    const seen = [];
+    el.addEventListener('day-overflow', event => seen.push(event.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]');
+        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]');
+        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]'));
+        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([]);
+    });
+});
+//# sourceMappingURL=day-overflow.test.js.map

package/dist/test/day-overflow.test.js.map

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

package/dist/test/day-state.test.d.ts

@@ -0,0 +1 @@
+import '../src/ox-event-view.js';

package/dist/test/day-state.test.js

@@ -0,0 +1,115 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import '../src/ox-event-view.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, state) {
+    return {
+        async fetchEventsForCalendar() {
+            return new Map();
+        },
+        async fetchDayStatesForCalendar(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 = { 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 = {
+    '--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, mode) {
+    const el = (await fixture(html `<ox-event-view mode=${mode}></ox-event-view>`));
+    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]).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])');
+        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]'));
+        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]');
+        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]');
+        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);
+    });
+});
+//# sourceMappingURL=day-state.test.js.map

package/dist/test/day-state.test.js.map

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