collavre 0.24.0 → 0.25.0

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

@@ -0,0 +1,256 @@
+/**
+ * @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, confirmDialog } = 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="에이전트를 지정할 수 없습니다."
+           data-topic-clear-agent-confirm="%{name} 할당을 해제할까요?">
+        <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.')
+  })
+
+  // Releasing the assignment is what keeps a topic primary agent from being a
+  // one-way door: the pin silences every other agent's ambient routing, so the
+  // avatar has to be able to come back off.
+  describe('release', () => {
+    const clearEvent = (topicId) => ({
+      preventDefault: jest.fn(),
+      stopPropagation: jest.fn(),
+      currentTarget: { dataset: { id: topicId } },
+    })
+
+    beforeEach(() => {
+      controller.topics = [{ id: 1, name: 'Main', primary_agent: AGENT }]
+    })
+
+    test('renders the assigned avatar as a release control for managers', () => {
+      controller.renderTopics(controller.topics, true, true)
+
+      const wrapper = controller.listTarget.querySelector('.topic-agent-avatar-wrapper')
+      expect(wrapper.classList.contains('topic-agent-avatar-releasable')).toBe(true)
+      expect(wrapper.dataset.action).toContain('comments--topics#clearTopicPrimaryAgent')
+      expect(wrapper.dataset.id).toBe('1')
+    })
+
+    test('renders a plain avatar for users who cannot manage topics', () => {
+      controller.renderTopics(controller.topics, false, false, false)
+
+      const wrapper = controller.listTarget.querySelector('.topic-agent-avatar-wrapper')
+      expect(wrapper.classList.contains('topic-agent-avatar-releasable')).toBe(false)
+      expect(wrapper.dataset.action).toBeUndefined()
+    })
+
+    // set_primary_agent is authorized at :write while can_manage means :admin.
+    // A write collaborator can pin an agent by dropping it on the topic, so
+    // gating the release on can_manage would make that a one-way door.
+    test('renders the release control for a write collaborator who cannot manage', () => {
+      controller.renderTopics(controller.topics, false, true, true)
+
+      const wrapper = controller.listTarget.querySelector('.topic-agent-avatar-wrapper')
+      expect(wrapper.classList.contains('topic-agent-avatar-releasable')).toBe(true)
+      expect(wrapper.dataset.action).toContain('comments--topics#clearTopicPrimaryAgent')
+      expect(wrapper.dataset.id).toBe('1')
+    })
+
+    // On an agent session topic the primary agent is session identity, not a
+    // routing pin, and the server refuses to change it — so a manager must not
+    // be offered a release control that can only fail.
+    test('renders a plain avatar on a locked session topic even for managers', () => {
+      controller.topics = [{ id: 1, name: 'Main', primary_agent: AGENT, agent_locked: true }]
+
+      controller.renderTopics(controller.topics, true, true)
+
+      const wrapper = controller.listTarget.querySelector('.topic-agent-avatar-wrapper')
+      expect(wrapper.querySelector('.topic-agent-avatar')).not.toBeNull()
+      expect(wrapper.classList.contains('topic-agent-avatar-releasable')).toBe(false)
+      expect(wrapper.dataset.action).toBeUndefined()
+    })
+
+    test('PATCHes a null agent_id and drops the avatar once confirmed', async () => {
+      confirmDialog.mockResolvedValue(true)
+      global.fetch = jest.fn().mockResolvedValue({
+        ok: true,
+        json: async () => ({ success: true, topic: { id: 1, name: 'Main', primary_agent: null } }),
+      })
+
+      await controller.clearTopicPrimaryAgent(clearEvent('1'))
+
+      expect(confirmDialog).toHaveBeenCalledWith('GitHub PR Analyzer 할당을 해제할까요?')
+      expect(JSON.parse(global.fetch.mock.calls[0][1].body)).toEqual({ agent_id: null })
+      expect(controller.listTarget.querySelector('.topic-agent-avatar')).toBeNull()
+    })
+
+    test('does nothing when the confirmation is declined', async () => {
+      confirmDialog.mockResolvedValue(false)
+      global.fetch = jest.fn()
+
+      await controller.clearTopicPrimaryAgent(clearEvent('1'))
+
+      expect(global.fetch).not.toHaveBeenCalled()
+    })
+
+    // The avatar sits inside the topic tag, whose own click handler selects the
+    // topic. Releasing must not double as a selection.
+    test('stops the click from reaching the topic tag', async () => {
+      confirmDialog.mockResolvedValue(false)
+      const event = clearEvent('1')
+
+      await controller.clearTopicPrimaryAgent(event)
+
+      expect(event.stopPropagation).toHaveBeenCalled()
+    })
+  })
+
+  // Dropping an agent on the create-topic target now gets a 422 when the agent
+  // has no feedback access on the creative. Without surfacing it the drop looks
+  // like it silently did nothing.
+  describe('createTopicWithAgent', () => {
+    test('surfaces the server error when the agent cannot be assigned', async () => {
+      global.fetch = jest.fn().mockResolvedValue({
+        ok: false,
+        status: 422,
+        json: async () => ({ errors: ['Outsider has no feedback access here.'] }),
+      })
+
+      await controller.createTopicWithAgent(AGENT)
+
+      expect(alertDialog).toHaveBeenCalledWith('Outsider has no feedback access here.')
+    })
+  })
+})

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

@@ -0,0 +1,182 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application } from '@hotwired/stimulus'
+import { jest } from '@jest/globals'
+import TopicsController from '../topics_controller'
+
+describe('TopicsController topic strip scrolling', () => {
+    let application
+    let controller
+    let list
+    let activeTopic
+    let frames
+    let nextFrameId
+
+    beforeEach(async () => {
+        document.body.innerHTML = `
+          <div data-controller="comments--topics">
+            <div data-comments--topics-target="list">
+              <span class="topic-tag active" data-id="1"></span>
+            </div>
+          </div>
+        `
+        frames = new Map()
+        nextFrameId = 1
+        global.requestAnimationFrame = jest.fn(callback => {
+            const frameId = nextFrameId++
+            frames.set(frameId, callback)
+            return frameId
+        })
+        global.cancelAnimationFrame = jest.fn(frameId => frames.delete(frameId))
+        jest.spyOn(performance, 'now').mockReturnValue(0)
+        application = Application.start()
+        application.register('comments--topics', TopicsController)
+        await new Promise(resolve => setTimeout(resolve, 0))
+
+        const element = document.querySelector('[data-controller="comments--topics"]')
+        controller = application.getControllerForElementAndIdentifier(element, 'comments--topics')
+        list = controller.listTarget
+        activeTopic = list.querySelector('.active')
+        Object.defineProperties(list, {
+            scrollLeft: { configurable: true, value: 0, writable: true },
+            scrollWidth: { configurable: true, value: 1_000 },
+            clientWidth: { configurable: true, value: 200 },
+        })
+        list.getBoundingClientRect = jest.fn(() => ({ left: 100, width: 200 }))
+        activeTopic.getBoundingClientRect = jest.fn(() => ({ left: 800, width: 100 }))
+    })
+
+    afterEach(() => {
+        application.stop()
+        document.body.innerHTML = ''
+        jest.restoreAllMocks()
+        delete global.requestAnimationFrame
+        delete global.cancelAnimationFrame
+    })
+
+    test.each(['wheel', 'touchstart'])(
+        'cancels a smooth active-topic scroll when the user starts a %s gesture',
+        eventName => {
+            controller.scrollToActiveTopic()
+            const firstFrameId = controller._topicScrollFrame
+            const firstFrame = frames.get(firstFrameId)
+            frames.delete(firstFrameId)
+            firstFrame(50)
+            const pendingFrameId = controller._topicScrollFrame
+            const interruptedAt = list.scrollLeft
+
+            list.dispatchEvent(new Event(eventName, { bubbles: true }))
+
+            expect(cancelAnimationFrame).toHaveBeenCalledWith(pendingFrameId)
+            expect(controller._topicScrollFrame).toBeNull()
+            expect(frames.has(pendingFrameId)).toBe(false)
+            expect(list.scrollLeft).toBe(interruptedAt)
+
+            requestAnimationFrame.mockClear()
+            controller.scrollToActiveTopic()
+
+            expect(requestAnimationFrame).not.toHaveBeenCalled()
+            expect(list.scrollLeft).toBe(interruptedAt)
+        },
+    )
+
+    test('does not resume scrolling for a non-user pick', () => {
+        list.dispatchEvent(new Event('wheel', { bubbles: true }))
+
+        controller.updateSelectionUI('1', { pick: true, persist: false })
+
+        expect(requestAnimationFrame).not.toHaveBeenCalled()
+        expect(controller._topicScrollInterrupted).toBe(true)
+    })
+
+    test('allows a new active-topic scroll after an explicit user pick', () => {
+        list.dispatchEvent(new Event('wheel', { bubbles: true }))
+
+        controller.updateSelectionUI('1', {
+            pick: true,
+            persist: false,
+            userInitiated: true,
+        })
+
+        expect(requestAnimationFrame).toHaveBeenCalledTimes(1)
+        expect(controller._topicScrollInterrupted).toBe(false)
+    })
+
+    test('marks branch-icon navigation as user initiated', () => {
+        activeTopic.dataset.sourceTopicId = '2'
+        activeTopic.innerHTML = '<span class="topic-branch-icon"></span>'
+        const selectTopic = jest.spyOn(controller, 'selectTopic').mockImplementation(() => {})
+
+        controller.select({
+            target: activeTopic.querySelector('.topic-branch-icon'),
+            currentTarget: activeTopic,
+        })
+
+        expect(selectTopic).toHaveBeenCalledWith('2', { userInitiated: true })
+    })
+
+    test('finishes the active-topic scroll at the centered position', () => {
+        controller.scrollToActiveTopic()
+        const frame = frames.get(controller._topicScrollFrame)
+
+        frame(250)
+
+        expect(list.scrollLeft).toBe(650)
+        expect(controller._topicScrollFrame).toBeNull()
+    })
+
+    test('does not schedule a scroll when the topic is already centered', () => {
+        list.scrollLeft = 650
+        activeTopic.getBoundingClientRect.mockReturnValue({ left: 150, width: 100 })
+
+        controller.scrollToActiveTopic()
+
+        expect(requestAnimationFrame).not.toHaveBeenCalled()
+        expect(controller._topicScrollFrame).toBeNull()
+    })
+
+    test('cancels an active-topic scroll when the popup closes', () => {
+        controller.scrollToActiveTopic()
+        const pendingFrameId = controller._topicScrollFrame
+
+        controller.onPopupClosed()
+
+        expect(cancelAnimationFrame).toHaveBeenCalledWith(pendingFrameId)
+        expect(controller._topicScrollFrame).toBeNull()
+
+        requestAnimationFrame.mockClear()
+        controller.scrollToActiveTopic()
+
+        expect(requestAnimationFrame).not.toHaveBeenCalled()
+    })
+
+    test('allows All Messages to scroll into view after moving the selected topic away', () => {
+        controller.creativeIdValue = '42'
+        controller.serverLastTopicId = '1'
+        controller._topicScrollInterrupted = true
+        const interruptionStatesAtLoad = []
+        controller.loadTopics = jest.fn(() => {
+            interruptionStatesAtLoad.push(controller._topicScrollInterrupted)
+        })
+
+        controller.handleTopicMoved({ detail: { sourceCreativeId: '42', topicId: '1' } })
+
+        expect(interruptionStatesAtLoad).toEqual([false])
+    })
+
+    test('preserves the user scroll lock when moving an inactive topic away', () => {
+        controller.creativeIdValue = '42'
+        controller.serverLastTopicId = '1'
+        controller._topicScrollInterrupted = true
+        const interruptionStatesAtLoad = []
+        controller.loadTopics = jest.fn(() => {
+            interruptionStatesAtLoad.push(controller._topicScrollInterrupted)
+        })
+
+        controller.handleTopicMoved({ detail: { sourceCreativeId: '42', topicId: '2' } })
+
+        expect(interruptionStatesAtLoad).toEqual([true])
+    })
+})