import { afterEach, describe, expect, it, vi } from 'vitest' import { mount } from '@vue/test-utils' import uiPlugin from '@nuxt/ui/vue-plugin' import SaveStatus from '../SaveStatus.vue' afterEach(() => { vi.useRealTimers() }) describe('Saved within the hour', () => { it('reads "Saved at HH:MM"', () => { vi.useFakeTimers() vi.setSystemTime(new Date('2026-09-26T11:10:00Z')) const wrapper = mount(SaveStatus, { props: { state: 'saved', savedAt: new Date('2026-09-26T11:02:00Z'), }, global: { plugins: [uiPlugin] }, }) expect(wrapper.text()).toContain('Saved at 11:02') }) }) describe('Saved over an hour ago', () => { it('reads "Saved n min ago"', () => { vi.useFakeTimers() vi.setSystemTime(new Date('2026-09-26T12:32:00Z')) const wrapper = mount(SaveStatus, { props: { state: 'saved', savedAt: new Date('2026-09-26T11:02:00Z'), }, global: { plugins: [uiPlugin] }, }) expect(wrapper.text()).toContain('Saved 90 min ago') }) }) describe('Dirty', () => { it('reads "Unsaved changes"', () => { const wrapper = mount(SaveStatus, { props: { state: 'dirty' }, global: { plugins: [uiPlugin] }, }) expect(wrapper.text()).toContain('Unsaved changes') }) }) describe('Saving', () => { it('reads "Saving…"', () => { const wrapper = mount(SaveStatus, { props: { state: 'saving' }, global: { plugins: [uiPlugin] }, }) expect(wrapper.text()).toContain('Saving…') }) }) describe('Error', () => { it('reads "Save failed" and emits retry from the Retry button', async () => { const wrapper = mount(SaveStatus, { props: { state: 'error' }, global: { plugins: [uiPlugin] }, }) expect(wrapper.text()).toContain('Save failed') await wrapper.find('button').trigger('click') expect(wrapper.emitted('retry')).toHaveLength(1) }) }) describe('Offline', () => { it('reads "Waiting for connection"', () => { const wrapper = mount(SaveStatus, { props: { state: 'offline' }, global: { plugins: [uiPlugin] }, }) expect(wrapper.text()).toContain('Waiting for connection') }) })