feat: article editor core

web/src/components/__tests__/SaveStatus.spec.ts

@@ -0,0 +1,87 @@
+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')
+	})
+})