feat(communication): add chat reactions emojis and images

frontend/tests/chat-media.test.cjs

@@ -0,0 +1,91 @@
+const { test } = require('node:test')
+const assert = require('node:assert/strict')
+const fs = require('node:fs')
+const vm = require('node:vm')
+const vue = require('vue')
+const settle = () => new Promise(setImmediate)
+const deferred = () => { let resolve; return { promise: new Promise(done => { resolve = done }), resolve: value => resolve(value) } }
+
+function setup(component, values, extra = {}) {
+  const props = vue.reactive(values), events = [], scope = vue.effectScope()
+  let unmount = () => {}
+  const source = fs.readFileSync(`${__dirname}/../components/${component}.vue`, 'utf8').match(/<script setup>([\s\S]*?)<\/script>/)[1].replace(/^import .*$/mg, '')
+  const context = vm.createContext({ ref: vue.ref, computed: vue.computed, watch: vue.watch, nextTick: vue.nextTick,
+    defineProps: () => props, defineEmits: () => (name, value) => {
+      events.push({ name, value })
+      if (name === 'update:modelValue') props.modelValue = value
+      if (name === 'update:image') props.image = value
+    }, onMounted: () => {}, onBeforeUnmount: handler => { unmount = handler }, clearInterval: () => {}, document: { hidden: false }, ...extra })
+  scope.run(() => vm.runInContext(source, context))
+  return { props, events, run: code => vm.runInContext(code, context), close: () => { unmount(); scope.stop() } }
+}
+
+test('composer inserts emoji at selection and sends image-only messages while respecting disabled state', async t => {
+  const ui = setup('ChatComposer', { modelValue: 'Hallo Welt', image: null, busy: false, disabled: false }, { prepareChatImage: async file => ({ dataUrl: 'data:image/webp;base64,AAAA', name: file.name }) })
+  t.after(ui.close)
+  ui.run('textarea.value = { selectionStart: 6, selectionEnd: 10, focus() {}, setSelectionRange() {} }')
+  await ui.run('insertEmoji("👋")')
+  assert.equal(ui.props.modelValue, 'Hallo 👋')
+  ui.props.modelValue = ''
+  ui.run('send()')
+  assert.equal(ui.events.some(e => e.name === 'send'), false)
+  await ui.run('attach({ name: "Bild.png" })')
+  ui.run('send()')
+  assert.equal(ui.events.filter(e => e.name === 'send').length, 1)
+  ui.props.disabled = true
+  ui.run('send()')
+  assert.equal(ui.events.filter(e => e.name === 'send').length, 1)
+})
+
+test('a late image conversion cannot attach a draft after the room unmounts', async () => {
+  const pending = deferred()
+  const ui = setup('ChatComposer', { modelValue: '', image: null, busy: false, disabled: false }, { prepareChatImage: () => pending.promise })
+  const attaching = ui.run('attach({ name: "Bild.png" })')
+  assert.equal(ui.run('preparing.value'), true)
+  ui.close()
+  pending.resolve({ dataUrl: 'private image', name: 'Bild.png' })
+  await attaching
+  assert.equal(ui.props.image, null)
+  assert.equal(ui.events.length, 0)
+})
+
+test('reaction refresh batches messages and stale poll results cannot overwrite an own reaction', async t => {
+  const pending = deferred(), calls = []
+  let delay = false
+  const ui = setup('ChatReactions', { endpoint: '/room/a', messages: [{ id: 1 }, { id: 2, pending: true }], disabled: false,
+    api: async (url, options) => {
+      calls.push({ url, options })
+      if (options?.method === 'PUT') return { reactions: { 1: [{ emoji: '👍', count: 1, own: true }] } }
+      if (delay) return pending.promise
+      return { reactions: {} }
+    } })
+  t.after(ui.close)
+  await settle()
+  assert.equal(calls[0].url, '/room/a/reactions?ids=1')
+  delay = true
+  const polling = ui.run('refresh()')
+  await ui.run('react(1, "👍")')
+  pending.resolve({ reactions: {} })
+  await polling
+  assert.equal(ui.run('reactions.value[1][0].own'), true)
+  assert.equal(calls.find(c => c.options?.method === 'PUT').options.body.active, true)
+  ui.props.disabled = true
+  const count = calls.length
+  await ui.run('react(1, "👍")')
+  assert.equal(calls.length, count)
+})
+
+test('image display rejects external URLs and ignores responses after a room change', async t => {
+  const pending = deferred()
+  const ui = setup('ChatImage', { endpoint: '/room/a', message: { id: 1 }, api: () => pending.promise })
+  t.after(ui.close)
+  ui.props.endpoint = '/room/b'
+  await vue.nextTick()
+  pending.resolve({ dataUrl: 'https://tracking.example/image.png' })
+  await settle()
+  assert.equal(ui.run('dataUrl.value'), '')
+  assert.equal(ui.run('error.value'), 'Bild derzeit nicht verfügbar.')
+  ui.props.api = async () => ({ dataUrl: 'data:image/webp;base64,AAAA' })
+  await ui.run('load()')
+  assert.equal(ui.run('dataUrl.value'), 'data:image/webp;base64,AAAA')
+})