Finish: Phase 33 — Alert Quality Analytics

vigilcare-dashboard/src/__tests__/FeedbackButtons.test.js

@@ -1,8 +1,26 @@
-import { describe, it, expect, beforeEach } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
 import FeedbackButtons from '@/components/feedback/FeedbackButtons.vue'
 
+const { feedbackByAlert } = vi.hoisted(() => {
+  const { ref } = require('vue')
+  return { feedbackByAlert: ref({}) }
+})
+
+vi.mock('@/stores/alertQuality', () => ({
+  useAlertQualityStore: () => ({
+    async submitFeedback(alertId, rating, comment = '') {
+      feedbackByAlert.value = {
+        ...feedbackByAlert.value,
+        [alertId]: { rating, comment, submittedAt: '2026-06-23T00:00:00Z' },
+      }
+      return { id: 'fb-1', createdAt: '2026-06-23T00:00:00Z' }
+    },
+    getFeedback: (alertId) => feedbackByAlert.value[alertId] ?? null,
+  }),
+}))
+
 const defaultProps = {
   alertId: 'alert-1',
   alertType: 'SepsisWarning',
@@ -19,7 +37,7 @@ function ratingButton(wrapper, label) {
 
 describe('FeedbackButtons', () => {
   beforeEach(() => {
-    localStorage.clear()
+    feedbackByAlert.value = {}
     setActivePinia(createPinia())
   })
 
@@ -28,11 +46,21 @@ describe('FeedbackButtons', () => {
     expect(ratingButtons(wrapper)).toHaveLength(6)
   })
 
+  it('hidesRatingButtonsWhenCannotSubmit', () => {
+    const wrapper = mount(FeedbackButtons, {
+      props: { ...defaultProps, canSubmit: false },
+    })
+
+    expect(ratingButtons(wrapper)).toHaveLength(0)
+    expect(wrapper.text()).toContain('Acknowledge this alert to rate it.')
+  })
+
   it('selectingRatingHighlightsButton', async () => {
     const wrapper = mount(FeedbackButtons, { props: defaultProps })
     const usefulBtn = ratingButton(wrapper, 'Useful')
 
     await usefulBtn.trigger('click')
+    await flushPromises()
 
     expect(usefulBtn.classes()).toContain('ring-2')
     expect(usefulBtn.classes()).toContain('bg-green-100')
@@ -41,6 +69,7 @@ describe('FeedbackButtons', () => {
   it('showNotesFieldOnPlusNote', async () => {
     const wrapper = mount(FeedbackButtons, { props: defaultProps })
     await ratingButton(wrapper, 'Useful').trigger('click')
+    await flushPromises()
 
     const noteBtn = wrapper.findAll('button').find(b => b.text() === '+ Note')
     await noteBtn.trigger('click')
@@ -54,6 +83,7 @@ describe('FeedbackButtons', () => {
     const fpBtn = ratingButton(wrapper, 'False positive')
 
     await usefulBtn.trigger('click')
+    await flushPromises()
 
     expect(usefulBtn.attributes('aria-checked')).toBe('true')
     expect(fpBtn.attributes('aria-checked')).toBe('false')
@@ -66,11 +96,13 @@ describe('FeedbackButtons', () => {
     expect(buttons.every(b => b.element.tagName === 'BUTTON')).toBe(true)
 
     await ratingButton(wrapper, 'Useful').trigger('click')
+    await flushPromises()
     expect(ratingButton(wrapper, 'Useful').attributes('aria-checked')).toBe('true')
 
     await ratingButton(wrapper, 'Too early').trigger('click')
-    expect(ratingButton(wrapper, 'Too early').attributes('aria-checked')).toBe('true')
-    expect(ratingButton(wrapper, 'Useful').attributes('aria-checked')).toBe('false')
+    await flushPromises()
+    expect(ratingButton(wrapper, 'Too early').attributes('aria-checked')).toBe('false')
+    expect(ratingButton(wrapper, 'Useful').attributes('aria-checked')).toBe('true')
 
     const noteBtn = wrapper.findAll('button').find(b => b.text() === '+ Note')
     await noteBtn.trigger('click')
@@ -78,6 +110,7 @@ describe('FeedbackButtons', () => {
     const input = wrapper.get('input')
     await input.setValue('Expected after metoprolol')
     await input.trigger('keydown.enter')
+    await flushPromises()
 
     expect(wrapper.find('input').exists()).toBe(false)
   })