collavre 0.23.0 → 0.24.1

data/app/javascript/controllers/comments/__tests__/topics_controller_action_errors.test.js

@@ -0,0 +1,178 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+
+// Every topic mutation used to alert a hardcoded English literal on failure.
+// These tests pin that each failure path reaches the user through the localized
+// string handed down by the ERB partial, and that the English literals survive
+// only as the last-resort fallback when the partial supplied nothing.
+jest.unstable_mockModule('../../../lib/utils/dialog', () => ({
+  confirmDialog: jest.fn(),
+  alertDialog: jest.fn(),
+}))
+
+const { Application } = await import('@hotwired/stimulus')
+const TopicsController = (await import('../topics_controller')).default
+const { alertDialog, confirmDialog } = await import('../../../lib/utils/dialog')
+
+// Mirrors the data attributes emitted by _comments_popup.html.erb.
+const LOCALIZED = {
+  topicSetAgentError: '에이전트를 지정할 수 없습니다.',
+  topicCreateError: '토픽을 만들 수 없습니다.',
+  topicUpdateError: '토픽을 수정할 수 없습니다.',
+  topicDeleteError: '토픽을 삭제할 수 없습니다.',
+  topicArchiveError: '토픽을 보관할 수 없습니다.',
+  topicRestoreError: '토픽을 복원할 수 없습니다.',
+}
+
+const ENGLISH_FALLBACK = {
+  set_agent_error: 'Unable to assign the agent to this topic.',
+  create_error: 'Unable to create the topic.',
+  update_error: 'Unable to update the topic.',
+  delete_error: 'Unable to delete the topic.',
+  archive_error: 'Unable to archive the topic.',
+  restore_error: 'Unable to restore the topic.',
+}
+
+describe('TopicsController topic action failures', () => {
+  let application
+  let controller
+  let element
+
+  const mount = async (dataset = LOCALIZED) => {
+    const container = document.createElement('div')
+    container.innerHTML = `
+      <div id="topics" data-controller="comments--topics">
+        <div data-comments--topics-target="list"></div>
+      </div>
+    `
+    document.body.appendChild(container)
+
+    element = document.getElementById('topics')
+    Object.assign(element.dataset, dataset)
+
+    application = Application.start()
+    application.register('comments--topics', TopicsController)
+
+    const meta = document.createElement('meta')
+    meta.name = 'csrf-token'
+    meta.content = 'test-csrf'
+    document.head.appendChild(meta)
+
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    controller = application.getControllerForElementAndIdentifier(element, 'comments--topics')
+    controller.creativeIdValue = '42'
+    controller.loadTopics = jest.fn()
+    controller.renderTopics = jest.fn()
+    controller.restoreSelection = jest.fn()
+    controller.flushSaveLastTopic = jest.fn()
+    controller.topics = [{ id: 1, name: 'Main' }]
+    return controller
+  }
+
+  // deleteTopic/archiveTopic/unarchiveTopic read the id off event.currentTarget.
+  const eventFor = (id) => ({
+    stopPropagation: jest.fn(),
+    currentTarget: { dataset: { id: String(id) } },
+  })
+
+  const failingFetch = () => jest.fn().mockResolvedValue({ ok: false, json: async () => ({}) })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    document.head.innerHTML = ''
+    application.stop()
+    jest.clearAllMocks()
+  })
+
+  describe('with localized strings from the partial', () => {
+    beforeEach(async () => {
+      await mount()
+      confirmDialog.mockResolvedValue(true)
+    })
+
+    test('deleteTopic surfaces the localized delete error', async () => {
+      global.fetch = failingFetch()
+
+      await controller.deleteTopic(eventFor(1))
+
+      expect(alertDialog).toHaveBeenCalledWith(LOCALIZED.topicDeleteError)
+    })
+
+    test('archiveTopic surfaces the localized archive error', async () => {
+      global.fetch = failingFetch()
+
+      await controller.archiveTopic(eventFor(1))
+
+      expect(alertDialog).toHaveBeenCalledWith(LOCALIZED.topicArchiveError)
+    })
+
+    test('unarchiveTopic surfaces the localized restore error', async () => {
+      global.fetch = failingFetch()
+
+      await controller.unarchiveTopic(eventFor(1))
+
+      expect(alertDialog).toHaveBeenCalledWith(LOCALIZED.topicRestoreError)
+    })
+
+    // updateTopic additionally reloads to discard the optimistic rename.
+    test('updateTopic surfaces the localized update error and reloads', async () => {
+      global.fetch = failingFetch()
+
+      await controller.updateTopic('1', 'Renamed')
+
+      expect(alertDialog).toHaveBeenCalledWith(LOCALIZED.topicUpdateError)
+      expect(controller.loadTopics).toHaveBeenCalled()
+    })
+
+    test('createTopic surfaces the localized create error', async () => {
+      global.fetch = failingFetch()
+
+      await controller.createTopic('New topic')
+
+      expect(alertDialog).toHaveBeenCalledWith(LOCALIZED.topicCreateError)
+      // The `finally` block must clear the guard even on the failure path,
+      // otherwise blur handling stays wedged after one failed create.
+      expect(controller.creating).toBe(false)
+    })
+  })
+
+  describe('without localized strings (controller mounted bare)', () => {
+    beforeEach(async () => {
+      await mount({})
+      confirmDialog.mockResolvedValue(true)
+    })
+
+    test.each(Object.entries(ENGLISH_FALLBACK))(
+      '_i18n("%s") falls back to the English literal',
+      (key, expected) => {
+        expect(controller._i18n(key)).toBe(expected)
+      }
+    )
+
+    // An unknown key must not render as `undefined` in a dialog; returning the
+    // key itself keeps the failure legible.
+    test('_i18n returns the key itself when it is unknown', () => {
+      expect(controller._i18n('no_such_key')).toBe('no_such_key')
+    })
+  })
+
+  describe('_i18n with localized strings', () => {
+    beforeEach(async () => {
+      await mount()
+    })
+
+    test.each([
+      ['set_agent_error', LOCALIZED.topicSetAgentError],
+      ['create_error', LOCALIZED.topicCreateError],
+      ['update_error', LOCALIZED.topicUpdateError],
+      ['delete_error', LOCALIZED.topicDeleteError],
+      ['archive_error', LOCALIZED.topicArchiveError],
+      ['restore_error', LOCALIZED.topicRestoreError],
+    ])('_i18n("%s") prefers the value from the partial', (key, expected) => {
+      expect(controller._i18n(key)).toBe(expected)
+    })
+  })
+})

data/app/javascript/controllers/comments/__tests__/topics_controller_creation_container.test.js

@@ -0,0 +1,154 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+
+// The add-topic button used to be rendered as the last child of the horizontally
+// scrolling topic strip, so it drifted off-screen once enough topics existed.
+// It now lives outside the strip, left of the topic-list button, and renderTopics
+// only toggles it. These tests pin that it stays out of the strip, that the
+// permission gate still applies, and that a re-render no longer wipes a name
+// being typed.
+jest.unstable_mockModule('../../../lib/utils/dialog', () => ({
+  confirmDialog: jest.fn(),
+  alertDialog: jest.fn(),
+}))
+
+const { Application } = await import('@hotwired/stimulus')
+const TopicsController = (await import('../topics_controller')).default
+
+const TOPICS = Array.from({ length: 12 }, (_, i) => ({ id: i + 1, name: `topic-${i + 1}` }))
+
+describe('TopicsController create-button placement', () => {
+  let application
+  let container
+  let controller
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    container.innerHTML = `
+      <div id="topics" data-controller="comments--topics">
+        <div class="comment-topics-bar">
+          <div data-comments--topics-target="list" class="comment-topics-list"
+               data-new-topic-placeholder="New Topic"></div>
+          <span class="topic-creation-container"
+                data-comments--topics-target="creationContainer" hidden></span>
+          <button type="button" class="topic-list-btn"></button>
+        </div>
+      </div>
+    `
+    document.body.appendChild(container)
+
+    application = Application.start()
+    application.register('comments--topics', TopicsController)
+
+    return new Promise((resolve) => setTimeout(resolve, 0)).then(() => {
+      const element = document.getElementById('topics')
+      controller = application.getControllerForElementAndIdentifier(element, 'comments--topics')
+      controller.creativeIdValue = '42'
+      controller.loadTopics = jest.fn()
+    })
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    application.stop()
+    jest.clearAllMocks()
+  })
+
+  test('renders the create button outside the scrolling strip, left of the topic-list button', () => {
+    controller.renderTopics(TOPICS, true, true)
+
+    expect(controller.listTarget.querySelector('.add-topic-btn')).toBeNull()
+
+    const button = document.querySelector('.add-topic-btn')
+    expect(button).not.toBeNull()
+
+    const creation = button.closest('.topic-creation-container')
+    expect(creation.hidden).toBe(false)
+    expect(creation.previousElementSibling).toBe(controller.listTarget)
+    expect(creation.nextElementSibling.classList.contains('topic-list-btn')).toBe(true)
+  })
+
+  test('hides and empties the container when the user cannot create topics', () => {
+    controller.renderTopics(TOPICS, true, true)
+    controller.renderTopics(TOPICS, false, false)
+
+    const creation = controller.creationContainerTarget
+    expect(creation.hidden).toBe(true)
+    expect(creation.innerHTML).toBe('')
+    expect(document.querySelector('.add-topic-btn')).toBeNull()
+  })
+
+  test('re-shows the button when permission is regained', () => {
+    controller.renderTopics(TOPICS, false, false)
+    controller.renderTopics(TOPICS, true, true)
+
+    expect(controller.creationContainerTarget.hidden).toBe(false)
+    expect(document.querySelector('.add-topic-btn')).not.toBeNull()
+  })
+
+  // A topic broadcast used to re-render the whole strip and destroy the open input.
+  test('preserves an in-progress topic name across a re-render', () => {
+    controller.renderTopics(TOPICS, true, true)
+    controller.showInput({ preventDefault() {} })
+
+    const input = controller.creationContainerTarget.querySelector('.topic-input')
+    input.value = 'half-typed'
+
+    controller.renderTopics([...TOPICS, { id: 99, name: 'from-broadcast' }], true, true)
+
+    expect(controller.creationContainerTarget.querySelector('.topic-input')).toBe(input)
+    expect(input.value).toBe('half-typed')
+  })
+
+  // createTopic keeps `creating` set across its loadTopics() await, so the
+  // re-render it triggers must not mistake the submitted input for live typing.
+  test('restores the add button after a successful creation', async () => {
+    controller.renderTopics(TOPICS, true, true)
+    controller.showInput({ preventDefault() {} })
+
+    const input = controller.creationContainerTarget.querySelector('.topic-input')
+    input.value = 'shipped'
+
+    document.head.innerHTML = '<meta name="csrf-token" content="tok">'
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ id: 99, name: 'shipped' }),
+    })
+    controller.flushSaveLastTopic = jest.fn()
+    controller.loadTopics = jest.fn(async () => {
+      controller.renderTopics([...TOPICS, { id: 99, name: 'shipped' }], true, true)
+    })
+
+    await controller.createTopic('shipped')
+
+    expect(controller.creationContainerTarget.querySelector('.topic-input')).toBeNull()
+    expect(document.querySelector('.add-topic-btn')).not.toBeNull()
+  })
+
+  // Alt+Left/Right chat navigation switches creatives without blurring the input,
+  // so a preserved draft would otherwise be posted to the wrong creative.
+  test('drops an in-progress topic name when the creative changes', () => {
+    controller.renderTopics(TOPICS, true, true)
+    controller.showInput({ preventDefault() {} })
+    controller.creationContainerTarget.querySelector('.topic-input').value = 'for-42'
+
+    controller.creativeIdValue = '77'
+    controller.renderTopics(TOPICS, true, true)
+
+    expect(controller.creationContainerTarget.querySelector('.topic-input')).toBeNull()
+    expect(document.querySelector('.add-topic-btn')).not.toBeNull()
+  })
+
+  // The container is static markup, but rendering must not throw if a caller
+  // mounts the controller on a stripped-down strip.
+  test('no-ops when the container is absent', () => {
+    controller.creationContainerTarget.remove()
+
+    expect(() => controller.renderTopics(TOPICS, true, true)).not.toThrow()
+    expect(() => controller.showInput({ preventDefault() {} })).not.toThrow()
+    expect(controller.listTarget.querySelector('.topic-tag[data-id="12"]')).not.toBeNull()
+  })
+})

data/app/javascript/controllers/comments/__tests__/topics_controller_primary_agent.test.js

@@ -0,0 +1,146 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+
+// setTopicPrimaryAgent used to drop the PATCH response on the floor and wait for
+// the WebSocket broadcast to render the avatar, and it swallowed failures into
+// console.error. These tests pin both: the avatar renders from the response with
+// no broadcast at all, and failures reach the user.
+jest.unstable_mockModule('../../../lib/utils/dialog', () => ({
+  confirmDialog: jest.fn(),
+  alertDialog: jest.fn(),
+}))
+
+const { Application } = await import('@hotwired/stimulus')
+const TopicsController = (await import('../topics_controller')).default
+const { alertDialog } = await import('../../../lib/utils/dialog')
+
+const AGENT = {
+  id: 4,
+  name: 'GitHub PR Analyzer',
+  avatar_url: '/avatar.png',
+  default_avatar: false,
+  initial: 'G',
+}
+
+describe('TopicsController#setTopicPrimaryAgent', () => {
+  let application
+  let container
+  let controller
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    container.innerHTML = `
+      <div id="topics" data-controller="comments--topics"
+           data-topic-set-agent-error="에이전트를 지정할 수 없습니다.">
+        <div data-comments--topics-target="list"></div>
+      </div>
+    `
+    document.body.appendChild(container)
+
+    application = Application.start()
+    application.register('comments--topics', TopicsController)
+
+    const meta = document.createElement('meta')
+    meta.name = 'csrf-token'
+    meta.content = 'test-csrf'
+    document.head.appendChild(meta)
+
+    return new Promise((resolve) => setTimeout(resolve, 0)).then(() => {
+      const element = document.getElementById('topics')
+      controller = application.getControllerForElementAndIdentifier(element, 'comments--topics')
+      controller.creativeIdValue = '42'
+      controller.loadTopics = jest.fn()
+      controller.topics = [{ id: 1, name: 'Main' }]
+    })
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    document.head.innerHTML = ''
+    application.stop()
+    jest.clearAllMocks()
+  })
+
+  test('renders the agent avatar from the PATCH response without any broadcast', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ success: true, topic: { id: 1, name: 'Main', primary_agent: AGENT } }),
+    })
+
+    await controller.setTopicPrimaryAgent('1', AGENT)
+
+    const avatar = controller.listTarget.querySelector('.topic-agent-avatar')
+    expect(avatar).not.toBeNull()
+    expect(avatar.getAttribute('src')).toBe('/avatar.png')
+  })
+
+  test('surfaces the server error when the agent is rejected (422)', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: false,
+      json: async () => ({ error: 'Selected user is not an AI agent' }),
+    })
+
+    await controller.setTopicPrimaryAgent('1', AGENT)
+
+    expect(alertDialog).toHaveBeenCalledWith('Selected user is not an AI agent')
+    expect(controller.listTarget.querySelector('.topic-agent-avatar')).toBeNull()
+  })
+
+  // The fallback path has no server-supplied (already localized) error to show,
+  // so it must use the localized string handed down by the ERB partial rather
+  // than an English literal.
+  test('surfaces the localized fallback when the response body is not JSON', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: false,
+      json: async () => { throw new SyntaxError('Unexpected token <') },
+    })
+
+    await controller.setTopicPrimaryAgent('1', AGENT)
+
+    expect(alertDialog).toHaveBeenCalledWith('에이전트를 지정할 수 없습니다.')
+  })
+
+  test('surfaces the localized fallback when the request itself fails', async () => {
+    global.fetch = jest.fn().mockRejectedValue(new TypeError('Failed to fetch'))
+
+    await controller.setTopicPrimaryAgent('1', AGENT)
+
+    expect(alertDialog).toHaveBeenCalledWith('에이전트를 지정할 수 없습니다.')
+  })
+
+  // A successful response with no topic payload must not throw; the broadcast
+  // remains the fallback path in that case.
+  test('is a no-op when a successful response carries no topic', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ success: true }),
+    })
+
+    await controller.setTopicPrimaryAgent('1', AGENT)
+
+    expect(alertDialog).not.toHaveBeenCalled()
+    expect(controller.listTarget.querySelector('.topic-agent-avatar')).toBeNull()
+  })
+
+  test('does not issue a request when the controller has no creative', async () => {
+    controller.creativeIdValue = ''
+    global.fetch = jest.fn()
+
+    await controller.setTopicPrimaryAgent('1', AGENT)
+
+    expect(global.fetch).not.toHaveBeenCalled()
+    expect(alertDialog).not.toHaveBeenCalled()
+  })
+
+  test('falls back to English when the partial supplied no localized string', async () => {
+    delete document.getElementById('topics').dataset.topicSetAgentError
+    global.fetch = jest.fn().mockRejectedValue(new TypeError('Failed to fetch'))
+
+    await controller.setTopicPrimaryAgent('1', AGENT)
+
+    expect(alertDialog).toHaveBeenCalledWith('Unable to assign the agent to this topic.')
+  })
+})

data/app/javascript/controllers/comments/__tests__/topics_controller_topic_list.test.js

@@ -0,0 +1,61 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals'
+import { Application } from '@hotwired/stimulus'
+import TopicsController from '../topics_controller'
+
+describe('TopicsController#openTopicListPopup', () => {
+    let application, controller
+
+    beforeEach(() => {
+        global.requestAnimationFrame = (fn) => { fn(); return 0 }
+        document.body.innerHTML = `
+          <div id="comments-popup" data-controller="comments--topics"
+               data-topic-main-text="All Messages"
+               data-topic-search-placeholder-text="Search topics...">
+            <div data-comments--topics-target="list"></div>
+          </div>
+        `
+        application = Application.start()
+        application.register('comments--topics', TopicsController)
+        return new Promise((resolve) => setTimeout(resolve, 0)).then(() => {
+            controller = application.getControllerForElementAndIdentifier(
+                document.getElementById('comments-popup'), 'comments--topics'
+            )
+            controller.topics = [{ id: 2, name: 'Alpha' }]
+            controller.archivedTopics = [{ id: 3, name: 'Zeta' }]
+            controller.mainTopicId = null
+        })
+    })
+
+    afterEach(() => {
+        document.body.innerHTML = ''
+        application.stop()
+        jest.clearAllMocks()
+    })
+
+    test('creates the topic-list modal with the required targets', () => {
+        const btn = document.createElement('button')
+        document.body.appendChild(btn)
+        controller.openTopicListPopup({ currentTarget: btn })
+
+        const modal = document.getElementById('topic-list-modal')
+        expect(modal).not.toBeNull()
+        expect(modal.dataset.controller).toBe('topic-list')
+        expect(modal.querySelector('[data-topic-list-target="input"]')).not.toBeNull()
+        expect(modal.querySelector('[data-topic-list-target="list"]')).not.toBeNull()
+        expect(modal.querySelector('[data-topic-list-target="close"]')).not.toBeNull()
+        expect(modal.querySelector('input').placeholder).toBe('Search topics...')
+    })
+
+    test('appends the modal inside the chat box so it is caged within it', () => {
+        const btn = document.createElement('button')
+        document.body.appendChild(btn)
+        controller.openTopicListPopup({ currentTarget: btn })
+
+        const modal = document.getElementById('topic-list-modal')
+        // Bounded to the chat popup, not body-level.
+        expect(modal.parentElement).toBe(document.getElementById('comments-popup'))
+    })
+})

data/app/javascript/controllers/comments/form_controller.js

@@ -884,6 +884,9 @@ export default class extends Controller {
         if (quote.id === store.activeId) {
           const commentEl = document.querySelector(`[data-comment-id="${quote.commentId}"]`)
           if (commentEl) {
+            // Programmatic list scroll — drop the prev-message anchor so the next
+            // previous-message click resolves from the quoted comment now in view.
+            this.listController?.notifyProgrammaticScroll()
             commentEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
             commentEl.classList.add('comment-highlight')
             setTimeout(() => commentEl.classList.remove('comment-highlight'), 2000)