Webklar-Kundenbereich/analytics/test/heatclient.test.js

// Verhalten von dist/h.js (Heatmap-Overlay) im Fake-DOM: eigenes Fenster und Einbettung im Portal.
import { test } from 'node:test';
import assert from 'node:assert/strict';
import vm from 'node:vm';
import { readFileSync } from 'node:fs';
import { fileURLToPath } from 'node:url';
import { dirname, join } from 'node:path';

const H = readFileSync(join(dirname(fileURLToPath(import.meta.url)), '..', 'client', 'dist', 'h.js'), 'utf8');

function makeEl(tag) {
  const e = {
    tagName: String(tag).toUpperCase(), nodeType: 1, attrs: {}, children: [], listeners: {}, style: { setProperty() {} }, parentNode: null,
    textContent: '', removed: false,
    setAttribute(n, v) { this.attrs[n] = String(v); },
    getAttribute(n) { return n in this.attrs ? this.attrs[n] : null; },
    appendChild(c) { c.parentNode = this; this.children.push(c); return c; },
    addEventListener(t, f, o) { (this.listeners[t] ||= []).push({ f, o }); },
    removeEventListener(t, f) { this.listeners[t] = (this.listeners[t] || []).filter((x) => x.f !== f); },
    remove() { this.removed = true; },
    attachShadow() { const r = makeEl('shadow'); this.shadow = r; return r; },
    closest(sel) {
      const tags = sel.split(',').map((t) => t.trim().toUpperCase());
      for (let n = this; n && n.tagName; n = n.parentNode) if (tags.includes(n.tagName)) return n;
      return null;
    },
    getContext() {
      return {
        createLinearGradient: () => ({ addColorStop() {} }),
        createRadialGradient: () => ({ addColorStop() {} }),
        fillRect() {}, clearRect() {},
        getImageData: (x, y, w, hh) => ({ data: new Uint8ClampedArray(Math.max(4, w * hh * 4)) }),
        putImageData() {},
      };
    },
  };
  return e;
}

async function harness({ embed = false, framed = true, fail = false, points = [{ x: 0.5, y: 0.5 }, { x: 0.1, y: 0.2 }, { x: 2, y: 0 }] } = {}) {
  const body = makeEl('body'); const head = makeEl('head'); const html = makeEl('html');
  Object.assign(html, { scrollWidth: 402, scrollHeight: 2000, clientWidth: 402, clientHeight: 800 });
  const script = makeEl('script');
  script.setAttribute('src', 'https://project.webklar.com/a/h.js');
  script.setAttribute('data-token', 'TOK.sig');
  if (embed) script.setAttribute('data-embed', '1');
  script.src = 'https://project.webklar.com/a/h.js';
  const fetches = []; const posted = []; const winL = {};
  const document = {
    currentScript: script, documentElement: html, body, head,
    createElement: (t) => makeEl(t),
  };
  const win = {
    document,
    addEventListener(t, f, o) { (winL[t] ||= []).push({ f, o }); },
    removeEventListener(t, f) { winL[t] = (winL[t] || []).filter((x) => x.f !== f); },
  };
  const parent = framed ? { postMessage(data, origin) { posted.push({ data, origin }); } } : win;
  win.parent = parent;
  const sandbox = {
    window: win, document, URL, JSON, Math, String, Number, Array, Object, RegExp, Error, Uint8ClampedArray, Promise,
    setInterval: () => 1, clearInterval() {},
    fetch: (u, o) => {
      fetches.push({ u, o });
      if (fail) return Promise.resolve({ ok: false, json: () => Promise.resolve({}) });
      return Promise.resolve({ ok: true, json: () => Promise.resolve({ points }) });
    },
  };
  sandbox.globalThis = sandbox;
  vm.createContext(sandbox);
  vm.runInContext(H, sandbox);
  await new Promise((r) => setTimeout(r, 10));
  const fire = (type, target) => {
    const ev = { type, target, prevented: false, stopped: false, preventDefault() { this.prevented = true; }, stopPropagation() { this.stopped = true; } };
    for (const { f } of winL[type] || []) f(ev);
    return ev;
  };
  const shadowHosts = body.children.filter((c) => c.shadow);
  return { body, head, fetches, posted, winL, fire, shadowHosts };
}

const linkIn = () => { const a = makeEl('a'); a.setAttribute('href', '/kontakt'); const span = makeEl('span'); span.parentNode = a; return span; };

test('h.js eigenes Fenster: schwarze Leiste mit Klickzahl, keine Nachricht, Links bleiben klickbar', async () => {
  const h = await harness();
  assert.equal(h.fetches.length, 1);
  assert.equal(h.fetches[0].u, 'https://project.webklar.com/a/heat?token=TOK.sig');
  assert.equal(h.fetches[0].o.credentials, 'omit');
  assert.equal(h.shadowHosts.length, 1, 'Leiste');
  const msg = h.shadowHosts[0].shadow.children.find((c) => c.className === 'bar').children[0];
  assert.equal(msg.textContent, 'Heatmap – 2 Klicks (letzte 30 Tage)');
  assert.deepEqual(h.posted, []);
  assert.equal(h.fire('click', linkIn()).prevented, false);
});

test('h.js eingebettet: keine Leiste, meldet Klickzahl nur an project.webklar.com', async () => {
  const h = await harness({ embed: true });
  assert.equal(h.shadowHosts.length, 0, 'keine Leiste');
  assert.ok(h.body.children.some((c) => c.tagName === 'CANVAS'), 'Overlay da');
  assert.deepEqual(JSON.parse(JSON.stringify(h.posted)), [{ data: { wk: 'heat', state: 'ready', count: 2 }, origin: 'https://project.webklar.com' }]);
  // Scrollleisten ausgeblendet (Handy/Tablet haben ueberlagernde Leisten)
  assert.ok(h.head.children.some((c) => c.tagName === 'STYLE' && /scrollbar-width:none/.test(c.textContent)));
});

test('h.js eingebettet: Links und Formulare gesperrt, andere Klicks nicht', async () => {
  const h = await harness({ embed: true });
  assert.ok((h.winL.click || []).some((l) => l.o === true), 'Klick-Sperre in der Capture-Phase');
  const ev = h.fire('click', linkIn());
  assert.equal(ev.prevented, true);
  assert.equal(ev.stopped, true, 'Router der Seite bekommt den Klick nicht');
  const area = h.fire('click', makeEl('area'));
  assert.equal(area.prevented, true);
  const other = h.fire('click', makeEl('button'));
  assert.equal(other.prevented, false);
  const sub = h.fire('submit', makeEl('form'));
  assert.equal(sub.prevented, true);
});

test('h.js eingebettet: Fehler beim Laden => state error', async () => {
  const h = await harness({ embed: true, fail: true });
  assert.deepEqual(JSON.parse(JSON.stringify(h.posted)), [{ data: { wk: 'heat', state: 'error', count: 0 }, origin: 'https://project.webklar.com' }]);
});

test('h.js mit data-embed, aber nicht in einem Rahmen: verhaelt sich wie das eigene Fenster', async () => {
  const h = await harness({ embed: true, framed: false });
  assert.equal(h.shadowHosts.length, 1);
  assert.deepEqual(h.posted, []);
  assert.equal(h.fire('click', linkIn()).prevented, false);
});