collavre 0.24.0 → 0.25.0

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

@@ -0,0 +1,221 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+import CommentsListController from '../list_controller'
+
+const streamEvent = ({ action = 'append', target = 'comments-list', html = '' } = {}) => {
+  const template = document.createElement('template')
+  template.innerHTML = html
+  return {
+    preventDefault: jest.fn(),
+    target: { action, target, templateContent: template.content },
+  }
+}
+
+const comment = (topicId, commentId = 9) =>
+  `<div id="comment_${commentId}" class="comment-item" data-comment-id="${commentId}" data-topic-id="${topicId}">hello</div>`
+
+// currentTopicId "" is the All Messages view. archivedIds stands in for the
+// topics controller's archived_topics, which is what the real lookup reads.
+const buildController = ({ currentTopicId = '', archivedIds = [], withPopup = true, searchQuery = null } = {}) => {
+  const controller = Object.create(CommentsListController.prototype)
+  controller.manualSearchQuery = searchQuery
+  controller.currentTopicId = currentTopicId
+  controller.allNewerLoaded = true
+  controller.markCommentsRead = jest.fn()
+
+  // popupController is a prototype getter reaching into this.application; an
+  // own property shadows it without standing up a Stimulus application.
+  Object.defineProperty(controller, 'popupController', {
+    value: withPopup
+      ? {
+          topicsController: {
+            isArchivedTopic: (id) => archivedIds.some((a) => String(a) === String(id)),
+          },
+        }
+      : null,
+  })
+
+  return controller
+}
+
+describe('CommentsListController archived streams in All Messages', () => {
+  let badgeEvents
+  const onBadge = (e) => badgeEvents.push(e.detail)
+
+  beforeEach(() => {
+    badgeEvents = []
+    window.addEventListener('comments--topics:new-message', onBadge)
+  })
+
+  afterEach(() => {
+    window.removeEventListener('comments--topics:new-message', onBadge)
+  })
+
+  // CommentsController#index excludes archived-topic comments from All Messages,
+  // so appending one live would show a message that disappears on reload.
+  test('blocks an archived-topic message and badges the topic instead', () => {
+    const controller = buildController({ archivedIds: [7] })
+    const event = streamEvent({ html: comment(7) })
+
+    controller.handleStreamRender(event)
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1)
+    expect(badgeEvents).toEqual([{ topicId: '7' }])
+  })
+
+  test('lets a live topic message through', () => {
+    const controller = buildController({ archivedIds: [7] })
+    const event = streamEvent({ html: comment(2) })
+
+    controller.handleStreamRender(event)
+
+    expect(event.preventDefault).not.toHaveBeenCalled()
+    expect(badgeEvents).toEqual([])
+    expect(controller.markCommentsRead).toHaveBeenCalledTimes(1)
+  })
+
+  test('extends the rendered All Messages watermark for a visible live append', () => {
+    const controller = buildController()
+    controller.renderedAllTopicIds = ['2']
+    controller.renderedAllTopicWatermarks = { 2: 8 }
+
+    controller.handleStreamRender(streamEvent({ html: comment(2, 9) }))
+
+    expect(controller.renderedAllTopicWatermarks).toEqual({ 2: 9 })
+    expect(controller.markCommentsRead).toHaveBeenCalledTimes(1)
+  })
+
+  test('starts a watermark for an initially active topic omitted from the list window', () => {
+    const controller = buildController()
+    controller.renderedAllTopicIds = ['2', '3']
+    controller.renderedAllTopicWatermarks = { 2: 8 }
+
+    controller.handleStreamRender(streamEvent({ html: comment(3, 9) }))
+
+    expect(controller.renderedAllTopicWatermarks).toEqual({ 2: 8, 3: 9 })
+    expect(controller.markCommentsRead).toHaveBeenCalledTimes(1)
+  })
+
+  test('does not add a topic absent from the rendered All Messages snapshot', () => {
+    const controller = buildController()
+    controller.renderedAllTopicIds = ['2']
+    controller.renderedAllTopicWatermarks = { 2: 8 }
+
+    controller.handleStreamRender(streamEvent({ html: comment(3, 9) }))
+
+    expect(controller.renderedAllTopicWatermarks).toEqual({ 2: 8 })
+  })
+
+  test('blocks a restored topic absent from the rendered All Messages snapshot', () => {
+    const controller = buildController({ archivedIds: [] })
+    controller.renderedAllTopicIds = ['2']
+    const event = streamEvent({ html: comment(3, 9) })
+
+    controller.handleStreamRender(event)
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1)
+    expect(badgeEvents).toEqual([{ topicId: '3' }])
+    expect(controller.markCommentsRead).not.toHaveBeenCalled()
+  })
+
+  test('does not mark a foreign message read', () => {
+    const controller = buildController({ currentTopicId: '2' })
+    const event = streamEvent({ html: comment(5) })
+
+    controller.handleStreamRender(event)
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1)
+    expect(controller.markCommentsRead).not.toHaveBeenCalled()
+  })
+
+  test('lets a topic-less comment through without consulting the topics controller', () => {
+    const controller = buildController({ archivedIds: [7], withPopup: false })
+    const event = streamEvent({ html: comment('') })
+
+    controller.handleStreamRender(event)
+
+    expect(event.preventDefault).not.toHaveBeenCalled()
+    expect(badgeEvents).toEqual([])
+  })
+
+  // The archived section may not have loaded yet on a docked chat; a missing
+  // topics controller must not break live appends.
+  test('appends normally when the topics controller is unavailable', () => {
+    const controller = buildController({ archivedIds: [7], withPopup: false })
+    const event = streamEvent({ html: comment(7) })
+
+    controller.handleStreamRender(event)
+
+    expect(event.preventDefault).not.toHaveBeenCalled()
+  })
+
+  test('still blocks a foreign topic when viewing a specific topic', () => {
+    const controller = buildController({ currentTopicId: '2', archivedIds: [] })
+    const event = streamEvent({ html: comment(5) })
+
+    controller.handleStreamRender(event)
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1)
+    expect(badgeEvents).toEqual([{ topicId: '5' }])
+  })
+
+  test('appends a message for the archived topic the user is actually viewing', () => {
+    const controller = buildController({ currentTopicId: '7', archivedIds: [7] })
+    const event = streamEvent({ html: comment(7) })
+
+    controller.handleStreamRender(event)
+
+    expect(event.preventDefault).not.toHaveBeenCalled()
+    expect(badgeEvents).toEqual([])
+  })
+
+  // An active search blocks every append, so the badge is the only thing left
+  // that can report traffic in a topic the user cannot see. It has to survive
+  // the search block, not be swallowed by it.
+  describe('while a search filter is active', () => {
+    test('badges an archived topic even though the append is blocked', () => {
+      const controller = buildController({ archivedIds: [7], searchQuery: 'deploy' })
+      const event = streamEvent({ html: comment(7) })
+
+      controller.handleStreamRender(event)
+
+      expect(event.preventDefault).toHaveBeenCalledTimes(1)
+      expect(badgeEvents).toEqual([{ topicId: '7' }])
+    })
+
+    test('badges a foreign topic while searching inside a specific topic', () => {
+      const controller = buildController({ currentTopicId: '2', searchQuery: 'deploy' })
+      const event = streamEvent({ html: comment(5) })
+
+      controller.handleStreamRender(event)
+
+      expect(event.preventDefault).toHaveBeenCalledTimes(1)
+      expect(badgeEvents).toEqual([{ topicId: '5' }])
+    })
+
+    // The search block still owns everything the topic routing lets past: the
+    // result set is a server-side match and a live append carries no verdict.
+    test('still blocks a message for the topic in view, without badging it', () => {
+      const controller = buildController({ currentTopicId: '2', searchQuery: 'deploy' })
+      const event = streamEvent({ html: comment(2) })
+
+      controller.handleStreamRender(event)
+
+      expect(event.preventDefault).toHaveBeenCalledTimes(1)
+      expect(badgeEvents).toEqual([])
+    })
+
+    test('still blocks a live-topic message in All Messages, without badging it', () => {
+      const controller = buildController({ archivedIds: [7], searchQuery: 'deploy' })
+      const event = streamEvent({ html: comment(2) })
+
+      controller.handleStreamRender(event)
+
+      expect(event.preventDefault).toHaveBeenCalledTimes(1)
+      expect(badgeEvents).toEqual([])
+    })
+  })
+})

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

@@ -0,0 +1,104 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+import CommentsListController from '../list_controller'
+
+// Builds the shape handleStreamRender reads off a turbo:before-stream-render
+// event: the <turbo-stream> element plus a preventDefault spy.
+const streamEvent = ({ action = 'append', target = 'comments-list', html = '' } = {}) => {
+  const template = document.createElement('template')
+  template.innerHTML = html
+  return {
+    preventDefault: jest.fn(),
+    target: { action, target, templateContent: template.content },
+  }
+}
+
+const buildController = ({ manualSearchQuery = null, currentTopicId = null } = {}) => {
+  const controller = Object.create(CommentsListController.prototype)
+  controller.manualSearchQuery = manualSearchQuery
+  controller.currentTopicId = currentTopicId
+  controller.allNewerLoaded = true
+  return controller
+}
+
+describe('CommentsListController live appends during search', () => {
+  test('blocks a live comment while a search is active', () => {
+    const controller = buildController({ manualSearchQuery: 'invoice' })
+    const event = streamEvent({
+      html: '<div id="comment_9" class="comment-item" data-topic-id="">unrelated chatter</div>',
+    })
+
+    controller.handleStreamRender(event)
+
+    // The server decides what matches; an append carries no such verdict, so it
+    // must not land in the result set (nor clear #no-search-results with it).
+    expect(event.preventDefault).toHaveBeenCalledTimes(1)
+  })
+
+  test('blocks it even when the message would match the query', () => {
+    // Deliberate: matching client-side would have to reimplement the
+    // controller's multi-word LOWER(content) LIKE filter over raw markdown.
+    // The snapshot stays consistent instead of half-refreshed.
+    const controller = buildController({ manualSearchQuery: 'invoice' })
+    const event = streamEvent({
+      html: '<div id="comment_9" class="comment-item" data-topic-id="">the invoice is ready</div>',
+    })
+
+    controller.handleStreamRender(event)
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1)
+  })
+
+  test('lets live comments through when no search is active', () => {
+    const controller = buildController({ manualSearchQuery: null })
+    const event = streamEvent({
+      html: '<div id="comment_9" class="comment-item" data-topic-id="">hello</div>',
+    })
+
+    controller.handleStreamRender(event)
+
+    expect(event.preventDefault).not.toHaveBeenCalled()
+  })
+
+  test('still applies edits and deletions to comments inside the results', () => {
+    // Only appends are filtered. A replace/remove targets a comment already in
+    // the result set, so suppressing it would leave stale text on screen.
+    const controller = buildController({ manualSearchQuery: 'invoice' })
+
+    const replace = streamEvent({ action: 'replace' })
+    const remove = streamEvent({ action: 'remove' })
+    controller.handleStreamRender(replace)
+    controller.handleStreamRender(remove)
+
+    expect(replace.preventDefault).not.toHaveBeenCalled()
+    expect(remove.preventDefault).not.toHaveBeenCalled()
+  })
+
+  test('ignores streams aimed at another target', () => {
+    const controller = buildController({ manualSearchQuery: 'invoice' })
+    const event = streamEvent({ target: 'topic-list' })
+
+    controller.handleStreamRender(event)
+
+    expect(event.preventDefault).not.toHaveBeenCalled()
+  })
+
+  test('resetState clears the filter so live comments resume', () => {
+    const controller = buildController({ manualSearchQuery: 'invoice' })
+    controller.selection = new Set()
+    controller.notifySelectionChange = jest.fn()
+
+    controller.resetState()
+
+    const event = streamEvent({
+      html: '<div id="comment_9" class="comment-item" data-topic-id="">hello</div>',
+    })
+    controller.handleStreamRender(event)
+
+    expect(controller.manualSearchQuery).toBeNull()
+    expect(event.preventDefault).not.toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,79 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application } from '@hotwired/stimulus'
+import PlaceholderController from '../placeholder_controller'
+
+describe('PlaceholderController', () => {
+  let application
+  let list
+
+  // The two empty-list states rendered by collavre/comments/_list.html.erb.
+  const PLACEHOLDERS = [
+    { id: 'no-comments', label: 'discovery cards' },
+    { id: 'no-search-results', label: 'no-search-results notice' },
+  ]
+
+  const mount = (id) => {
+    list = document.createElement('div')
+    list.id = 'comments-list'
+    list.innerHTML = `<div id="${id}" class="comments-placeholder" data-controller="comments--placeholder"><p>empty</p></div>`
+    document.body.appendChild(list)
+  }
+
+  const appendComment = () => {
+    const comment = document.createElement('div')
+    comment.className = 'comment-item'
+    list.appendChild(comment)
+    return new Promise((r) => setTimeout(r, 0))
+  }
+
+  beforeEach(() => {
+    application = Application.start()
+    application.register('comments--placeholder', PlaceholderController)
+  })
+
+  afterEach(() => {
+    application.stop()
+    document.body.innerHTML = ''
+  })
+
+  PLACEHOLDERS.forEach(({ id, label }) => {
+    test(`removes the ${label} when a comment is appended by a Turbo Stream`, async () => {
+      // Comment#broadcast_create appends straight into #comments-list; nothing
+      // on that path calls comments--form#removePlaceholder.
+      mount(id)
+      await new Promise((r) => setTimeout(r, 0))
+
+      await appendComment()
+
+      expect(list.querySelector(`#${id}`)).toBeNull()
+    })
+  })
+
+  test('stays put when a non-comment node is appended to the list', async () => {
+    mount('no-comments')
+    await new Promise((r) => setTimeout(r, 0))
+
+    list.appendChild(document.createElement('div'))
+    await new Promise((r) => setTimeout(r, 0))
+
+    expect(list.querySelector('#no-comments')).not.toBeNull()
+  })
+
+  test('stops observing once disconnected', async () => {
+    mount('no-comments')
+    await new Promise((r) => setTimeout(r, 0))
+
+    const placeholder = list.querySelector('#no-comments')
+    placeholder.removeAttribute('data-controller')
+    await new Promise((r) => setTimeout(r, 0))
+
+    await appendComment()
+
+    // Detached from its controller, the element is left alone — proving the
+    // observer is torn down rather than leaking past disconnect().
+    expect(list.querySelector('#no-comments')).not.toBeNull()
+  })
+})