collavre 0.24.0 → 0.25.0

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

@@ -0,0 +1,346 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals'
+
+// The real inline editor is a JSX module (untransformed in Jest), so it is
+// stubbed. Everything else — the delete/archive button handlers, the empty
+// state bookkeeping — is the real module.
+const createInlineEditorMock = jest.fn()
+const destroyMock = jest.fn()
+const archiveMock = jest.fn()
+const unarchiveMock = jest.fn()
+
+jest.unstable_mockModule('../lexical_inline_editor', () => ({
+  createInlineEditor: createInlineEditorMock,
+}))
+jest.unstable_mockModule('../../lib/api/creatives', () => ({
+  default: {
+    save: jest.fn(() => Promise.resolve({ ok: true })),
+    get: jest.fn(() => Promise.resolve({})),
+    children: jest.fn(() => Promise.resolve([])),
+    destroy: destroyMock,
+    archive: archiveMock,
+    unarchive: unarchiveMock,
+  },
+}))
+jest.unstable_mockModule('../../lib/utils/dialog', () => ({
+  alertDialog: jest.fn(() => Promise.resolve()),
+  confirmDialog: jest.fn(() => Promise.resolve(true)),
+  promptDialog: jest.fn(() => Promise.resolve(null)),
+}))
+
+const { initializeCreativeRowEditor } = await import('../creative_row_editor')
+const {
+  buildEditorDom, defineTreeRowStub, renderEmptyState, appendExistingRow, flush,
+} = await import('./support/inline_editor_dom')
+
+// A workspace that loaded with rows has no placeholder left inside #creatives —
+// the tree render wiped it. All that survives is the pristine copy in the
+// server-rendered <template>, which restoreTreeEmptyState() clones. Set that up
+// and then clear the container, so only the template is available.
+//
+// The label is deliberately not English: markup assembled inside the module
+// rather than cloned from the server's template would fail this assertion.
+function installTemplateOnly() {
+  renderEmptyState()
+  const template = document.getElementById('creatives-empty-state-template')
+  template.innerHTML =
+    '<div data-creatives-empty-state><div class="creative-empty-state">' +
+    '<button type="button" class="new-root-creative-btn">추가</button></div></div>'
+  document.getElementById('creatives').innerHTML = ''
+}
+
+// Stands in for the connected creatives--tree controller so the root-level refetch
+// can be observed. Resolved through window.Stimulus on each call, as the archive
+// handler does.
+function stubTreeController() {
+  const calls = { load: 0, requestReload: 0 }
+  const controller = {
+    load() { calls.load += 1 },
+    requestReload() { calls.requestReload += 1 },
+  }
+  window.Stimulus = {
+    getControllerForElementAndIdentifier: (element, identifier) => (
+      element === document.getElementById('creatives') && identifier === 'creatives--tree' ? controller : null
+    ),
+  }
+  return calls
+}
+
+// The children container for `parentId`, plus the `has-children` flag the server
+// puts on the row itself. TreeBuilder emits both together: the flag records that
+// children exist, the container is where they render.
+function childrenContainerFor(parentId) {
+  const rowComponent = document.getElementById(`creative-${parentId}`).closest('creative-tree-row')
+  rowComponent.hasChildren = true
+  rowComponent.setAttribute('has-children', '')
+
+  let children = document.getElementById(`creative-children-${parentId}`)
+  if (!children) {
+    children = document.createElement('div')
+    children.className = 'creative-children'
+    children.id = `creative-children-${parentId}`
+    children.dataset.expanded = 'true'
+    children.dataset.loaded = 'true'
+    document.getElementById(`creative-${parentId}`).appendChild(children)
+  }
+  return children
+}
+
+// A child row nested under `parentId`, in the children container the delete path
+// inspects.
+function appendChildRow(parentId, childId) {
+  return appendExistingRow(childId, childrenContainerFor(parentId))
+}
+
+// What TreeBuilder#children_container_payload emits for a row whose children have
+// never been expanded: `has-children` on the row, but a container with
+// `loaded: false` and no rows inside it yet.
+function appendCollapsedChildren(parentId) {
+  const children = childrenContainerFor(parentId)
+  children.dataset.expanded = 'false'
+  children.dataset.loaded = 'false'
+  children.dataset.loadUrl = `/creatives/${parentId}/children`
+  children.style.display = 'none'
+  return children
+}
+
+async function openEditorOn(tree) {
+  document.dispatchEvent(new CustomEvent('creative-edit-click', { detail: { treeElement: tree } }))
+  await flush()
+}
+
+describe('empty state after the last creative is removed', () => {
+  beforeAll(() => {
+    defineTreeRowStub()
+    createInlineEditorMock.mockImplementation(() => ({
+      destroy: jest.fn(),
+      load: jest.fn(),
+      focus: jest.fn(),
+      reset: jest.fn(),
+      getDeletedAttachments: jest.fn(() => []),
+    }))
+  })
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="creatives"></div><div id="center-frame"></div>'
+    delete window.Stimulus
+    destroyMock.mockReset()
+    destroyMock.mockImplementation(() => Promise.resolve({ ok: true }))
+    archiveMock.mockReset()
+    archiveMock.mockImplementation(() => Promise.resolve({ ok: true }))
+    unarchiveMock.mockReset()
+    unarchiveMock.mockImplementation(() => Promise.resolve({ ok: true }))
+    buildEditorDom(document.getElementById('center-frame'))
+    initializeCreativeRowEditor()
+    document.getElementById('metadata-popup').style.display = 'none'
+  })
+
+  test('restores the hidden card when the first creative is deleted again', async () => {
+    // The card is still in #creatives, hidden by the inline-create flow that
+    // produced this creative in the first place.
+    const emptyState = renderEmptyState()
+    emptyState.style.display = 'none'
+    const { tree } = appendExistingRow(42)
+
+    await openEditorOn(tree)
+    document.getElementById('inline-delete').click()
+    await flush()
+
+    expect(destroyMock).toHaveBeenCalledWith('42', false)
+    expect(document.querySelectorAll('#creatives creative-tree-row')).toHaveLength(0)
+    expect(emptyState.style.display).toBe('')
+  })
+
+  test('restores the hidden card when the last creative is archived', async () => {
+    const emptyState = renderEmptyState()
+    emptyState.style.display = 'none'
+    const { tree } = appendExistingRow(42)
+
+    await openEditorOn(tree)
+    document.getElementById('inline-archive').click()
+    await flush()
+
+    expect(archiveMock).toHaveBeenCalledWith('42')
+    expect(document.querySelectorAll('#creatives creative-tree-row')).toHaveLength(0)
+    expect(emptyState.style.display).toBe('')
+  })
+
+  test('clones the server-rendered template when no card is left in the DOM', async () => {
+    installTemplateOnly()
+    const { tree } = appendExistingRow(42)
+
+    await openEditorOn(tree)
+    document.getElementById('inline-delete').click()
+    await flush()
+
+    const restored = document.querySelector('#creatives .creative-empty-state')
+    expect(restored).not.toBeNull()
+    expect(restored.querySelector('.new-root-creative-btn').textContent).toBe('추가')
+  })
+
+  test('leaves the tree alone while other rows remain', async () => {
+    installTemplateOnly()
+    const { tree } = appendExistingRow(42)
+    appendExistingRow(43)
+
+    await openEditorOn(tree)
+    document.getElementById('inline-delete').click()
+    await flush()
+
+    expect(document.querySelectorAll('#creatives creative-tree-row')).toHaveLength(1)
+    expect(document.querySelector('#creatives .creative-empty-state')).toBeNull()
+  })
+
+  test('does not re-render the empty state when the archive request fails', async () => {
+    installTemplateOnly()
+    archiveMock.mockImplementation(() => Promise.resolve({ ok: false, status: 500 }))
+    const { tree } = appendExistingRow(42)
+
+    await openEditorOn(tree)
+    document.getElementById('inline-archive').click()
+    await flush()
+
+    // The row is still there, so there is nothing to replace it with.
+    expect(document.querySelectorAll('#creatives creative-tree-row')).toHaveLength(1)
+    expect(document.querySelector('#creatives .creative-empty-state')).toBeNull()
+  })
+
+  test('closes the editor when the deleted row was the last one', async () => {
+    // move(1) has no row to move to here, so it used to leave currentTree on the
+    // row being detached with the template still displayed. Hold the element:
+    // removeTreeElement() takes the row away with the template inside it, so
+    // getElementById would stop finding it either way.
+    renderEmptyState()
+    const { tree } = appendExistingRow(42)
+
+    await openEditorOn(tree)
+    const editor = document.getElementById('inline-edit-form')
+    expect(editor.style.display).toBe('block')
+
+    document.getElementById('inline-delete').click()
+    await flush()
+
+    expect(document.querySelectorAll('#creatives creative-tree-row')).toHaveLength(0)
+    expect(editor.style.display).toBe('none')
+  })
+
+  test('the restored Add button creates a row on the first click after a delete', async () => {
+    // The symptom of leaving the editor open on the deleted row: the delegated
+    // handler reads a displayed template as "close the open editor", so the first
+    // click on the restored CTA did nothing but flush a save for a creative that
+    // no longer exists.
+    renderEmptyState()
+    const { tree } = appendExistingRow(42)
+
+    await openEditorOn(tree)
+    document.getElementById('inline-delete').click()
+    await flush()
+
+    document.querySelector('#creatives .new-root-creative-btn').click()
+    await flush()
+
+    expect(document.querySelectorAll('#creatives creative-tree-row')).toHaveLength(1)
+  })
+
+  test('refetches the root tree when "delete only this" promotes children to the root', async () => {
+    // DestroyService#reparent_children moves the children up to the deleted
+    // creative's parent — the root here, since this row is top level. The only
+    // copy of them in the DOM is inside the children container the delete path
+    // drops, so without a refetch the tree would show the "no creatives yet" card
+    // while the server still holds the promoted rows.
+    renderEmptyState()
+    const calls = stubTreeController()
+    const { tree } = appendExistingRow(42)
+    appendChildRow(42, 43)
+
+    await openEditorOn(tree)
+    document.getElementById('inline-delete').click()
+    await flush()
+
+    expect(destroyMock).toHaveBeenCalledWith('42', false)
+    // requestReload(), not load(): move(1) has just put the editor on the next
+    // row, so an unconditional re-render would detach it mid-edit.
+    expect(calls.requestReload).toBe(1)
+    expect(calls.load).toBe(0)
+  })
+
+  test('refetches the root tree when the promoted children were never expanded', async () => {
+    // A collapsed row still gets a children container, but TreeBuilder marks it
+    // `loaded: false` and leaves it empty — the children only arrive when the user
+    // expands it. The relationship is recorded on the row's `has-children` flag
+    // instead, so that is what the delete path has to consult. Looking for a
+    // rendered `creative-tree-row` sees nothing here and would skip the refetch,
+    // leaving the actionable empty card over children the server just promoted.
+    renderEmptyState()
+    const calls = stubTreeController()
+    const { tree } = appendExistingRow(42)
+    appendCollapsedChildren(42)
+
+    await openEditorOn(tree)
+    document.getElementById('inline-delete').click()
+    await flush()
+
+    expect(destroyMock).toHaveBeenCalledWith('42', false)
+    expect(calls.requestReload).toBe(1)
+    expect(calls.load).toBe(0)
+  })
+
+  test('does not refetch when the deleted row has no children to promote', async () => {
+    renderEmptyState()
+    const calls = stubTreeController()
+    const { tree } = appendExistingRow(42)
+
+    await openEditorOn(tree)
+    document.getElementById('inline-delete').click()
+    await flush()
+
+    expect(calls.requestReload).toBe(0)
+  })
+
+  test('does not refetch when "delete with children" removes them too', async () => {
+    // Nothing is promoted in this case: the children are gone from the server.
+    renderEmptyState()
+    const calls = stubTreeController()
+    const { tree } = appendExistingRow(42)
+    appendChildRow(42, 43)
+
+    await openEditorOn(tree)
+    document.getElementById('inline-delete-with-children').click()
+    await flush()
+
+    expect(destroyMock).toHaveBeenCalledWith('42', true)
+    expect(calls.requestReload).toBe(0)
+  })
+
+  test('does not refetch when "delete with children" removes collapsed children', async () => {
+    // Same as above, but reached through the `has-children` flag rather than
+    // rendered rows: the flag must not pull the refetch into a branch that has
+    // nothing to preserve.
+    renderEmptyState()
+    const calls = stubTreeController()
+    const { tree } = appendExistingRow(42)
+    appendCollapsedChildren(42)
+
+    await openEditorOn(tree)
+    document.getElementById('inline-delete-with-children').click()
+    await flush()
+
+    expect(destroyMock).toHaveBeenCalledWith('42', true)
+    expect(calls.requestReload).toBe(0)
+  })
+
+  test('keeps the editor open on the next row when one remains', async () => {
+    renderEmptyState()
+    const { tree } = appendExistingRow(42)
+    appendExistingRow(43)
+
+    await openEditorOn(tree)
+    document.getElementById('inline-delete').click()
+    await flush()
+
+    // move(1) had somewhere to go, so the editor follows it rather than closing.
+    expect(document.getElementById('inline-edit-form').style.display).toBe('block')
+  })
+})

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

@@ -0,0 +1,144 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals'
+
+// The real inline editor is a JSX module (untransformed in Jest) and the
+// delegated click handler is exercised by its own test file — both are
+// mocked here so this file can observe the session lifecycle itself.
+const createInlineEditorMock = jest.fn()
+const createDelegatedClickHandlerMock = jest.fn()
+
+jest.unstable_mockModule('../lexical_inline_editor', () => ({
+  createInlineEditor: createInlineEditorMock,
+}))
+jest.unstable_mockModule('../creative_row_editor_delegated_clicks', () => ({
+  createDelegatedClickHandler: createDelegatedClickHandlerMock,
+}))
+
+const { initializeCreativeRowEditor } = await import('../creative_row_editor')
+const { buildEditorDom } = await import('./support/inline_editor_dom')
+
+function swapCenterContent() {
+  const container = document.getElementById('center-frame')
+  container.innerHTML = ''
+  return buildEditorDom(container)
+}
+
+describe('creative row editor session lifecycle', () => {
+  beforeAll(() => {
+    document.body.innerHTML = '<div id="creatives"></div><div id="center-frame"></div>'
+    createInlineEditorMock.mockImplementation(() => ({
+      destroy: jest.fn(),
+      load: jest.fn(),
+      focus: jest.fn(),
+      getDeletedAttachments: jest.fn(() => []),
+    }))
+    createDelegatedClickHandlerMock.mockImplementation(() => jest.fn())
+  })
+
+  test('builds a session for the mounted template on first initialization', () => {
+    const template = swapCenterContent()
+
+    initializeCreativeRowEditor()
+
+    expect(createDelegatedClickHandlerMock).toHaveBeenCalledTimes(1)
+    expect(createDelegatedClickHandlerMock.mock.calls[0][0].template).toBe(template)
+  })
+
+  test('stays idempotent while the same template remains mounted', () => {
+    const calls = createDelegatedClickHandlerMock.mock.calls.length
+
+    initializeCreativeRowEditor()
+    document.dispatchEvent(new Event('turbo:load'))
+
+    expect(createDelegatedClickHandlerMock).toHaveBeenCalledTimes(calls)
+  })
+
+  test('rebuilds the session against the new template after a center frame swap', () => {
+    const previousEditor = createInlineEditorMock.mock.results.at(-1).value
+    const newTemplate = swapCenterContent()
+
+    // Non-promoted frame navigations fire no turbo:load; the Stimulus wrapper
+    // reconnecting inside the swapped frame content is the only signal.
+    initializeCreativeRowEditor()
+
+    const session = createDelegatedClickHandlerMock.mock.calls.at(-1)[0]
+    expect(session.template).toBe(newTemplate)
+    expect(previousEditor.destroy).toHaveBeenCalledTimes(1)
+  })
+
+  test('rebuilds the session from turbo:load after a full page navigation', () => {
+    const calls = createDelegatedClickHandlerMock.mock.calls.length
+    const newTemplate = swapCenterContent()
+
+    document.dispatchEvent(new Event('turbo:load'))
+
+    expect(createDelegatedClickHandlerMock).toHaveBeenCalledTimes(calls + 1)
+    expect(createDelegatedClickHandlerMock.mock.calls.at(-1)[0].template).toBe(newTemplate)
+  })
+
+  test('tears down the session when no template is mounted', () => {
+    const previousEditor = createInlineEditorMock.mock.results.at(-1).value
+    document.getElementById('center-frame').innerHTML = ''
+
+    document.dispatchEvent(new Event('turbo:load'))
+
+    expect(previousEditor.destroy).toHaveBeenCalledTimes(1)
+    // A later mount recovers with a fresh session.
+    const template = swapCenterContent()
+    initializeCreativeRowEditor()
+    expect(createDelegatedClickHandlerMock.mock.calls.at(-1)[0].template).toBe(template)
+  })
+
+  test('stops the orphaned editing ping when a frame swap discards a session with the editor open', () => {
+    jest.useFakeTimers()
+    const stopSpy = jest.fn()
+    const startSpy = jest.fn()
+    document.addEventListener('creative-editing:stop', stopSpy)
+    document.addEventListener('creative-editing:start', startSpy)
+
+    try {
+      // Fresh session against a mounted template, same as a real workspace frame load.
+      swapCenterContent()
+      initializeCreativeRowEditor()
+      // The cached-data fast path in loadCreative() bypasses the network only when
+      // the popup is hidden; otherwise applyCreativeData() would fetch metadata.
+      document.getElementById('metadata-popup').style.display = 'none'
+
+      // A tree row with inline dataset (id/description/progress) so opening it
+      // takes the synchronous cached-data path instead of an API call.
+      const treeRow = document.createElement('creative-tree-row')
+      treeRow.dataset.descriptionRawHtml = 'hello'
+      treeRow.dataset.progressValue = '0'
+      const tree = document.createElement('div')
+      tree.className = 'creative-tree'
+      tree.id = 'creative-42'
+      tree.dataset.id = '42'
+      treeRow.appendChild(tree)
+      document.getElementById('center-frame').appendChild(treeRow)
+
+      document.dispatchEvent(new CustomEvent('creative-edit-click', { detail: { treeElement: tree } }))
+
+      expect(startSpy).toHaveBeenCalledTimes(1)
+      expect(startSpy.mock.calls[0][0].detail.creativeId).toBe(42)
+
+      // Workspace frame swap: center content is replaced wholesale and the
+      // Stimulus wrapper reconnects, without the outgoing session ever calling
+      // hideCurrent()/move() on itself.
+      swapCenterContent()
+      initializeCreativeRowEditor()
+
+      expect(stopSpy).toHaveBeenCalledTimes(1)
+      expect(stopSpy.mock.calls[0][0].detail.creativeId).toBe(42)
+
+      startSpy.mockClear()
+      jest.advanceTimersByTime(10000)
+      expect(startSpy).not.toHaveBeenCalled()
+    } finally {
+      document.removeEventListener('creative-editing:stop', stopSpy)
+      document.removeEventListener('creative-editing:start', startSpy)
+      jest.useRealTimers()
+    }
+  })
+})

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

@@ -422,4 +422,34 @@ describe('removeTreeElement', () => {
   test('no-ops on nullish tree', () => {
     expect(() => removeTreeElement(null)).not.toThrow();
   });
+
+  function addHiddenEmptyState() {
+    root.insertAdjacentHTML(
+      'beforeend',
+      '<div data-creatives-empty-state="" hidden><p>No sub-creatives found.</p></div>'
+    );
+    return root.querySelector('[data-creatives-empty-state]');
+  }
+
+  test('restores the empty-state placeholder once the last row is gone', () => {
+    const placeholder = addHiddenEmptyState();
+    const { row, tree } = makeRow(1);
+    root.appendChild(row);
+
+    removeTreeElement(tree);
+
+    expect(placeholder.hidden).toBe(false);
+  });
+
+  test('leaves the placeholder hidden while other rows remain', () => {
+    const placeholder = addHiddenEmptyState();
+    const { row: first, tree } = makeRow(1);
+    const { row: second } = makeRow(2);
+    root.appendChild(first);
+    root.appendChild(second);
+
+    removeTreeElement(tree);
+
+    expect(placeholder.hidden).toBe(true);
+  });
 });