@operato/utils 10.7.0 → 10.11.0

package/test/tooltip-reactive-controller.test.ts

@@ -0,0 +1,88 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing'
+import { LitElement, html as litHtml } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { TooltipReactiveController } from '../src/reactive-controllers/tooltip-reactive-controller.js'
+
+const LONG = 'CAM-LEAK-VISUAL-INSPECTION-STATION-284-AND-THEN-SOME'
+
+/**
+ * A row of the shape hosts actually draw: a marker, a prefix and the title, each in its own
+ * span. The pointer lands on one of those children, never on the row itself - on the plant
+ * calendar the title span alone covers 104 of the row's 114px.
+ */
+@customElement('tooltip-host-fixture')
+class TooltipHostFixture extends LitElement {
+  /*
+   * The content function the plant calendar passes: the host writes the sentence it wants read
+   * into the attribute, which is more than the row's own cut text.
+   */
+  tooltip = new TooltipReactiveController(this, {
+    enterDelay: 0,
+    content: element => element.getAttribute('data-reactive-tooltip') || element.textContent?.trim() || ''
+  })
+
+  render() {
+    return litHtml`
+      <div
+        data-reactive-tooltip="the whole sentence"
+        style="display:flex; gap:4px; width:60px; overflow:hidden; white-space:nowrap"
+      >
+        <span mark style="flex:none; width:6px; height:6px"></span>
+        <span title-part style="overflow:hidden; text-overflow:ellipsis">${LONG}</span>
+      </div>
+    `
+  }
+}
+
+function box(): HTMLElement {
+  return document.querySelector('.ox-tooltip-container') as HTMLElement
+}
+
+function hover(el: Element) {
+  el.dispatchEvent(new MouseEvent('mouseover', { bubbles: true, composed: true }))
+}
+
+describe('TooltipReactiveController', () => {
+  let host: TooltipHostFixture
+
+  beforeEach(async () => {
+    host = (await fixture(html`<tooltip-host-fixture></tooltip-host-fixture>`)) as TooltipHostFixture
+    box().style.display = 'none'
+  })
+
+  it('shows when the pointer is over a child of the marked row', async () => {
+    /*
+     * The regression this file exists for. The controller read the attribute off e.target, and
+     * the pointer is over a child for all but a few pixels of the row - so the tooltip never
+     * appeared on the plant calendar, on any row.
+     */
+    hover(host.shadowRoot!.querySelector('[title-part]')!)
+
+    await waitUntil(() => box().style.display === 'block')
+    expect(box().textContent).to.equal('the whole sentence')
+  })
+
+  it('shows when the pointer is over the marked row itself', async () => {
+    hover(host.shadowRoot!.querySelector('[data-reactive-tooltip]')!)
+
+    await waitUntil(() => box().style.display === 'block')
+  })
+
+  it('reads the attribute of the marked ancestor, not the child under the pointer', async () => {
+    hover(host.shadowRoot!.querySelector('[mark]')!)
+
+    await waitUntil(() => box().style.display === 'block')
+    expect(box().textContent, 'the marker span holds no text of its own').to.equal('the whole sentence')
+  })
+
+  it('stays hidden when nothing in the ancestry is marked', async () => {
+    const plain = (await fixture(html`<span>${LONG}</span>`)) as HTMLElement
+    host.shadowRoot!.appendChild(plain)
+
+    hover(plain)
+
+    await new Promise(resolve => setTimeout(resolve, 50))
+    expect(box().style.display).to.equal('none')
+  })
+})