collavre 0.23.0 → 0.24.0

data/app/javascript/modules/__tests__/creative_inline_payload.test.js

@@ -0,0 +1,231 @@
+/**
+ * Characterization tests for the inline creative payload mapping cluster
+ * extracted from creative_row_editor.js (slice 3 of the god-file decomposition).
+ *
+ * These pin the CURRENT behavior of the inverse pair that drives instant UI:
+ *   - inlinePayloadFromTree: reads a payload OUT of a rendered tree row's dataset
+ *   - updateRowFromData:     writes a server/API payload INTO a row's dataset
+ *
+ * The fixture mirrors the real creative-tree render: a `creative-tree-row`
+ * custom element wrapping a `.creative-tree` node whose `data-id`/`data-parent-id`
+ * carry the tree identity.
+ *
+ * Intentionally behavior-preserving: any surprising result below (e.g. missing
+ * fields defaulting to 0/'' rather than being omitted, or `hasOwnProperty`-gated
+ * writes) documents existing behavior, not an endorsement of it.
+ */
+import { inlinePayloadFromTree, updateRowFromData } from '../creative_inline_payload';
+
+// Build one row: <creative-tree-row><div.creative-tree/></creative-tree-row>
+function makeRow(id, { parentId = '', level = 1 } = {}) {
+  const row = document.createElement('creative-tree-row');
+  row.setAttribute('creative-id', String(id));
+  row.setAttribute('level', String(level));
+  const tree = document.createElement('div');
+  tree.className = 'creative-tree';
+  tree.id = `creative-${id}`;
+  tree.dataset.id = String(id);
+  tree.dataset.parentId = parentId;
+  tree.dataset.level = String(level);
+  row.appendChild(tree);
+  return { row, tree };
+}
+
+describe('inlinePayloadFromTree', () => {
+  test('returns null for falsy tree', () => {
+    expect(inlinePayloadFromTree(null)).toBeNull();
+    expect(inlinePayloadFromTree(undefined)).toBeNull();
+  });
+
+  test('returns null when tree has no wrapping creative-tree-row', () => {
+    const orphan = document.createElement('div');
+    orphan.dataset.id = '5';
+    expect(inlinePayloadFromTree(orphan)).toBeNull();
+  });
+
+  test('returns null when row exists but tree has no data-id', () => {
+    const { tree } = makeRow('9');
+    delete tree.dataset.id;
+    expect(inlinePayloadFromTree(tree)).toBeNull();
+  });
+
+  test('builds a fully-defaulted payload from a minimal row (only id)', () => {
+    const { tree } = makeRow('42', { parentId: '' });
+    expect(inlinePayloadFromTree(tree)).toEqual({
+      id: '42',
+      description: '',
+      description_raw_html: '',
+      origin_id: '',
+      parent_id: '',
+      progress: 0,
+      content_type: null,
+      markdown_editor: null,
+      markdown_source: null,
+    });
+  });
+
+  test('reads all fields from a fully-populated row', () => {
+    const { row, tree } = makeRow('7', { parentId: '3' });
+    row.dataset.descriptionHtml = '<p>hi</p>';
+    row.dataset.descriptionRawHtml = '<p>raw</p>';
+    row.dataset.progressValue = '55';
+    row.dataset.originId = '99';
+    row.dataset.contentType = 'markdown';
+    row.dataset.markdownEditor = 'rich';
+    row.dataset.markdownSource = '# hi';
+    expect(inlinePayloadFromTree(tree)).toEqual({
+      id: '7',
+      description: '<p>hi</p>',
+      description_raw_html: '<p>raw</p>',
+      origin_id: '99',
+      parent_id: '3',
+      progress: 55,
+      content_type: 'markdown',
+      markdown_editor: 'rich',
+      markdown_source: '# hi',
+    });
+  });
+
+  test('description falls back to raw html when descriptionHtml absent', () => {
+    const { row, tree } = makeRow('8');
+    row.dataset.descriptionRawHtml = '<p>only-raw</p>';
+    const payload = inlinePayloadFromTree(tree);
+    expect(payload.description).toBe('<p>only-raw</p>');
+    expect(payload.description_raw_html).toBe('<p>only-raw</p>');
+  });
+
+  test('non-numeric progress coerces to 0 (NaN guard)', () => {
+    const { row, tree } = makeRow('11');
+    row.dataset.progressValue = 'abc';
+    expect(inlinePayloadFromTree(tree).progress).toBe(0);
+  });
+
+  test('progress present but empty-string reads as 0', () => {
+    const { row, tree } = makeRow('12');
+    row.dataset.progressValue = '';
+    // Number('' ?? 0) === Number('') === 0
+    expect(inlinePayloadFromTree(tree).progress).toBe(0);
+  });
+});
+
+describe('updateRowFromData', () => {
+  test('no-ops on falsy row or data', () => {
+    const { row } = makeRow('1');
+    expect(() => updateRowFromData(null, { description: 'x' })).not.toThrow();
+    expect(() => updateRowFromData(row, null)).not.toThrow();
+    expect(row.dataset.descriptionHtml).toBeUndefined();
+  });
+
+  test('writes description + raw html (raw falls back to description)', () => {
+    const { row } = makeRow('1');
+    updateRowFromData(row, { description: '<p>d</p>' });
+    expect(row.descriptionHtml).toBe('<p>d</p>');
+    expect(row.dataset.descriptionHtml).toBe('<p>d</p>');
+    expect(row.dataset.descriptionRawHtml).toBe('<p>d</p>');
+  });
+
+  test('explicit description_raw_html is preserved distinctly', () => {
+    const { row } = makeRow('1');
+    updateRowFromData(row, { description: '<p>d</p>', description_raw_html: '<p>r</p>' });
+    expect(row.dataset.descriptionHtml).toBe('<p>d</p>');
+    expect(row.dataset.descriptionRawHtml).toBe('<p>r</p>');
+  });
+
+  test('missing description writes empty string (not skipped)', () => {
+    const { row } = makeRow('1');
+    updateRowFromData(row, { progress: 10 });
+    expect(row.dataset.descriptionHtml).toBe('');
+    expect(row.dataset.descriptionRawHtml).toBe('');
+  });
+
+  test('progress_html only written when non-null', () => {
+    const { row } = makeRow('1');
+    updateRowFromData(row, { description: 'd', progress_html: '<b>50%</b>' });
+    expect(row.progressHtml).toBe('<b>50%</b>');
+    expect(row.dataset.progressHtml).toBe('<b>50%</b>');
+
+    const { row: row2 } = makeRow('2');
+    updateRowFromData(row2, { description: 'd', progress_html: null });
+    expect(row2.dataset.progressHtml).toBeUndefined();
+  });
+
+  test('progress written from own key; null clears dataset value', () => {
+    const { row } = makeRow('1');
+    updateRowFromData(row, { description: 'd', progress: 30 });
+    expect(row.dataset.progressValue).toBe('30');
+
+    // `?? ''` maps null/undefined to '', and setRowDatasetValue deletes on ''? no:
+    // value '' is a string -> stored as ''.  null -> '' -> stored as ''.
+    const { row: row2 } = makeRow('2');
+    updateRowFromData(row2, { description: 'd', progress: null });
+    expect(row2.dataset.progressValue).toBe('');
+  });
+
+  test('hasOwnProperty gating: absent keys leave dataset untouched', () => {
+    const { row } = makeRow('1');
+    row.dataset.originId = 'pre';
+    row.dataset.contentType = 'pre';
+    updateRowFromData(row, { description: 'd' });
+    // origin_id / content_type not in payload -> not overwritten
+    expect(row.dataset.originId).toBe('pre');
+    expect(row.dataset.contentType).toBe('pre');
+  });
+
+  test('origin_id / content_type / markdown_source / markdown_editor round-trip', () => {
+    const { row } = makeRow('1');
+    updateRowFromData(row, {
+      description: 'd',
+      origin_id: '77',
+      content_type: 'markdown',
+      markdown_source: '# s',
+      markdown_editor: 'rich',
+    });
+    expect(row.dataset.originId).toBe('77');
+    expect(row.dataset.contentType).toBe('markdown');
+    expect(row.dataset.markdownSource).toBe('# s');
+    expect(row.dataset.markdownEditor).toBe('rich');
+  });
+
+  test('has_children truthy sets attribute + property; falsy removes', () => {
+    const { row } = makeRow('1');
+    updateRowFromData(row, { description: 'd', has_children: true });
+    expect(row.hasAttribute('has-children')).toBe(true);
+    expect(row.hasChildren).toBe(true);
+
+    updateRowFromData(row, { description: 'd', has_children: false });
+    expect(row.hasAttribute('has-children')).toBe(false);
+    expect(row.hasChildren).toBe(false);
+  });
+
+  test('calls requestUpdate when the row exposes it', () => {
+    const { row } = makeRow('1');
+    let called = 0;
+    row.requestUpdate = () => { called += 1; };
+    updateRowFromData(row, { description: 'd' });
+    expect(called).toBe(1);
+  });
+
+  test('round-trip: updateRowFromData then inlinePayloadFromTree', () => {
+    const { row, tree } = makeRow('50', { parentId: '2' });
+    updateRowFromData(row, {
+      description: '<p>body</p>',
+      description_raw_html: '<p>raw</p>',
+      progress: 40,
+      origin_id: '5',
+      content_type: 'markdown',
+      markdown_source: '# md',
+      markdown_editor: 'source',
+    });
+    expect(inlinePayloadFromTree(tree)).toEqual({
+      id: '50',
+      description: '<p>body</p>',
+      description_raw_html: '<p>raw</p>',
+      origin_id: '5',
+      parent_id: '2',
+      progress: 40,
+      content_type: 'markdown',
+      markdown_editor: 'source',
+      markdown_source: '# md',
+    });
+  });
+});

data/app/javascript/modules/__tests__/creative_save_queue.test.js

@@ -0,0 +1,228 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals';
+import { CreativeSaveQueue } from '../creative_save_queue';
+
+// A controllable timer harness so debounce behavior is deterministic without
+// wall-clock waits. Mirrors setTimeout/clearTimeout semantics closely enough
+// for the queue: fire() runs the most recently scheduled, uncleared callback.
+function fakeTimers() {
+  const scheduled = new Map();
+  let nextId = 1;
+  return {
+    setTimer: (fn, ms) => {
+      const id = nextId++;
+      scheduled.set(id, { fn, ms });
+      return id;
+    },
+    clearTimer: (id) => {
+      scheduled.delete(id);
+    },
+    fire: (id) => {
+      const entry = scheduled.get(id);
+      if (!entry) throw new Error(`timer ${id} not scheduled (cleared or never set)`);
+      scheduled.delete(id);
+      entry.fn();
+    },
+    pending: () => scheduled.size,
+    lastMs: () => [...scheduled.values()].map((e) => e.ms).pop(),
+  };
+}
+
+// A save request whose settlement we control from the test.
+function deferred() {
+  let resolve;
+  let reject;
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
+describe('CreativeSaveQueue', () => {
+  describe('debounce (schedule / cancelTimer)', () => {
+    test('schedule arms a timer with the configured debounce', () => {
+      const timers = fakeTimers();
+      const q = new CreativeSaveQueue({ debounceMs: 5000, setTimer: timers.setTimer, clearTimer: timers.clearTimer });
+      const flush = jest.fn();
+
+      q.schedule(flush);
+
+      expect(timers.pending()).toBe(1);
+      expect(timers.lastMs()).toBe(5000);
+      expect(flush).not.toHaveBeenCalled();
+    });
+
+    test('flush runs when the timer fires', () => {
+      const timers = fakeTimers();
+      const q = new CreativeSaveQueue({ setTimer: timers.setTimer, clearTimer: timers.clearTimer });
+      const flush = jest.fn();
+
+      q.schedule(flush);
+      timers.fire(1);
+
+      expect(flush).toHaveBeenCalledTimes(1);
+      expect(timers.pending()).toBe(0);
+    });
+
+    test('re-scheduling cancels the previous timer so only the latest fires', () => {
+      const timers = fakeTimers();
+      const q = new CreativeSaveQueue({ setTimer: timers.setTimer, clearTimer: timers.clearTimer });
+      const first = jest.fn();
+      const second = jest.fn();
+
+      q.schedule(first);
+      q.schedule(second);
+
+      // Only one timer is live; the first was cleared.
+      expect(timers.pending()).toBe(1);
+      expect(() => timers.fire(1)).toThrow(); // first timer id was cleared
+      timers.fire(2);
+      expect(first).not.toHaveBeenCalled();
+      expect(second).toHaveBeenCalledTimes(1);
+    });
+
+    test('default timers (no injection) schedule against the real timer API without illegal-invocation', () => {
+      jest.useFakeTimers();
+      try {
+        // No setTimer/clearTimer injected — exercises the window-bound wrappers.
+        // A regression that called setTimeout as a method of the queue threw
+        // "Illegal invocation" in browsers; this guards the default path.
+        const q = new CreativeSaveQueue({ debounceMs: 5000 });
+        const flush = jest.fn();
+
+        expect(() => q.schedule(flush)).not.toThrow();
+        expect(flush).not.toHaveBeenCalled();
+        jest.advanceTimersByTime(5000);
+        expect(flush).toHaveBeenCalledTimes(1);
+
+        // cancelTimer against the real timer API must also not throw.
+        q.schedule(flush);
+        expect(() => q.cancelTimer()).not.toThrow();
+        jest.advanceTimersByTime(5000);
+        expect(flush).toHaveBeenCalledTimes(1); // canceled — no second flush
+      } finally {
+        jest.useRealTimers();
+      }
+    });
+
+    test('cancelTimer prevents a scheduled flush and is idempotent', () => {
+      const timers = fakeTimers();
+      const q = new CreativeSaveQueue({ setTimer: timers.setTimer, clearTimer: timers.clearTimer });
+      const flush = jest.fn();
+
+      q.schedule(flush);
+      q.cancelTimer();
+      q.cancelTimer(); // no throw on second call
+
+      expect(timers.pending()).toBe(0);
+    });
+  });
+
+  describe('single-flight (runExclusive)', () => {
+    test('runs execute and tracks saving state across the request lifecycle', async () => {
+      const q = new CreativeSaveQueue();
+      const d = deferred();
+      const execute = jest.fn(() => d.promise);
+
+      expect(q.saving).toBe(false);
+      const p = q.runExclusive(execute);
+
+      expect(execute).toHaveBeenCalledTimes(1);
+      expect(q.saving).toBe(true);
+      expect(q.promise).toBe(p);
+
+      d.resolve('ok');
+      await p;
+      expect(q.saving).toBe(false);
+    });
+
+    test('coalesces: a second call while saving returns the in-flight promise without re-running execute', async () => {
+      const q = new CreativeSaveQueue();
+      const d = deferred();
+      const execute = jest.fn(() => d.promise);
+      const second = jest.fn(() => deferred().promise);
+
+      const p1 = q.runExclusive(execute);
+      const p2 = q.runExclusive(second);
+
+      expect(p2).toBe(p1); // same in-flight promise
+      expect(second).not.toHaveBeenCalled(); // no double save
+      expect(execute).toHaveBeenCalledTimes(1);
+
+      d.resolve();
+      await p1;
+    });
+
+    test('a fresh save runs after the previous one settles', async () => {
+      const q = new CreativeSaveQueue();
+      const d1 = deferred();
+      const execute1 = jest.fn(() => d1.promise);
+      const d2 = deferred();
+      const execute2 = jest.fn(() => d2.promise);
+
+      const p1 = q.runExclusive(execute1);
+      d1.resolve();
+      await p1;
+      expect(q.saving).toBe(false);
+
+      q.runExclusive(execute2);
+      expect(execute2).toHaveBeenCalledTimes(1);
+      expect(q.saving).toBe(true);
+      d2.resolve();
+    });
+
+    test('execute returning null (nothing to persist) does not enter the saving state', async () => {
+      const q = new CreativeSaveQueue();
+      const execute = jest.fn(() => null);
+
+      const p = q.runExclusive(execute);
+
+      expect(execute).toHaveBeenCalledTimes(1);
+      expect(q.saving).toBe(false);
+      await expect(p).resolves.toBeUndefined();
+    });
+
+    test('runExclusive cancels a pending debounce timer before saving', () => {
+      const timers = fakeTimers();
+      const q = new CreativeSaveQueue({ setTimer: timers.setTimer, clearTimer: timers.clearTimer });
+      const flush = jest.fn();
+
+      q.schedule(flush);
+      expect(timers.pending()).toBe(1);
+
+      q.runExclusive(() => deferred().promise);
+
+      expect(timers.pending()).toBe(0); // debounce canceled — no redundant trailing save
+      expect(flush).not.toHaveBeenCalled();
+    });
+
+    test('clears saving even when the request rejects', async () => {
+      const q = new CreativeSaveQueue();
+      const d = deferred();
+      const execute = jest.fn(() => d.promise);
+
+      const p = q.runExclusive(execute);
+      expect(q.saving).toBe(true);
+
+      d.reject(new Error('boom'));
+      await expect(p).rejects.toThrow('boom');
+      expect(q.saving).toBe(false);
+    });
+
+    test('after a rejection a subsequent save can run', async () => {
+      const q = new CreativeSaveQueue();
+      const d1 = deferred();
+      const p1 = q.runExclusive(() => d1.promise);
+      d1.reject(new Error('fail'));
+      await expect(p1).rejects.toThrow();
+
+      const execute2 = jest.fn(() => deferred().promise);
+      q.runExclusive(execute2);
+      expect(execute2).toHaveBeenCalledTimes(1);
+      expect(q.saving).toBe(true);
+    });
+  });
+});