118 lines
3.7 KiB
JavaScript
118 lines
3.7 KiB
JavaScript
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',
|
|
severity: 'Critical',
|
|
}
|
|
|
|
function ratingButtons(wrapper) {
|
|
return wrapper.findAll('[role="radio"]')
|
|
}
|
|
|
|
function ratingButton(wrapper, label) {
|
|
return ratingButtons(wrapper).find(b => b.text() === label)
|
|
}
|
|
|
|
describe('FeedbackButtons', () => {
|
|
beforeEach(() => {
|
|
feedbackByAlert.value = {}
|
|
setActivePinia(createPinia())
|
|
})
|
|
|
|
it('rendersAllSixRatingButtons', () => {
|
|
const wrapper = mount(FeedbackButtons, { props: defaultProps })
|
|
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')
|
|
})
|
|
|
|
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')
|
|
|
|
expect(wrapper.find('input').exists()).toBe(true)
|
|
})
|
|
|
|
it('ariaCheckedOnSelectedRating', async () => {
|
|
const wrapper = mount(FeedbackButtons, { props: defaultProps })
|
|
const usefulBtn = ratingButton(wrapper, 'Useful')
|
|
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')
|
|
})
|
|
|
|
it('keyboardNavigationWorks', async () => {
|
|
const wrapper = mount(FeedbackButtons, { props: defaultProps })
|
|
const buttons = ratingButtons(wrapper)
|
|
|
|
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')
|
|
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')
|
|
|
|
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)
|
|
})
|
|
})
|