fix: "save X min ago" only min to min/hours/days

This commit is contained in:
fsylvain committed 2026-09-29 22:56:05 +02:00
1 parent c40522a09f
commit 65ced64568
3 files changed
+26 -8

No files matched your search

+15 -3
View File
@@ -8,7 +8,8 @@ const props = defineProps<{
defineEmits<{ retry: [] }>() defineEmits<{ retry: [] }>()
const HOUR_MS = 60 * 60 * 1000 const MINUTE_MS = 60 * 1000
const HOUR_MS = 60 * MINUTE_MS
const TICK_MS = 15000 const TICK_MS = 15000
const now = ref(Date.now()) const now = ref(Date.now())
@@ -32,6 +33,18 @@ function formatClock(date: Date) {
return `${hours}:${minutes}` return `${hours}:${minutes}`
} }
function formatElapsed(diffMs: number) {
const minutes = Math.floor(diffMs / MINUTE_MS)
if (minutes < 60) {
return `${minutes} min`
}
const hours = Math.floor(minutes / 60)
if (hours < 24) {
return `${hours} h`
}
return `${Math.floor(hours / 24)} d`
}
const savedText = computed(() => { const savedText = computed(() => {
if (!props.savedAt) { if (!props.savedAt) {
return 'Saved' return 'Saved'
@@ -40,8 +53,7 @@ const savedText = computed(() => {
if (diffMs < HOUR_MS) { if (diffMs < HOUR_MS) {
return `Saved at ${formatClock(props.savedAt)}` return `Saved at ${formatClock(props.savedAt)}`
} }
const minutes = Math.floor(diffMs / 60000) return `Saved ${formatElapsed(diffMs)} ago`
return minutes === 1 ? 'Saved 1 min ago' : `Saved ${minutes} min ago`
}) })
</script> </script>
@@ -24,9 +24,15 @@ describe('Saved within the hour', () => {
}) })
describe('Saved over an hour ago', () => { describe('Saved over an hour ago', () => {
it('reads "Saved n min ago"', () => { it.each([
['2026-09-26T12:02:00Z', 'Saved 1 h ago'],
['2026-09-26T12:32:00Z', 'Saved 1 h ago'],
['2026-09-26T23:02:00Z', 'Saved 12 h ago'],
['2026-09-27T11:02:00Z', 'Saved 1 d ago'],
['2026-09-29T15:00:00Z', 'Saved 3 d ago'],
])('at %s reads "%s"', (now, expected) => {
vi.useFakeTimers() vi.useFakeTimers()
vi.setSystemTime(new Date('2026-09-26T12:32:00Z')) vi.setSystemTime(new Date(now))
const wrapper = mount(SaveStatus, { const wrapper = mount(SaveStatus, {
props: { props: {
state: 'saved', state: 'saved',
@@ -35,7 +41,7 @@ describe('Saved over an hour ago', () => {
global: { plugins: [uiPlugin] }, global: { plugins: [uiPlugin] },
}) })
expect(wrapper.text()).toContain('Saved 90 min ago') expect(wrapper.text()).toContain(expected)
}) })
}) })
+2 -2
View File
@@ -302,7 +302,7 @@ describe('A successful save returns to the Saved state with the new time', () =>
}) })
describe('SaveStatus switches to a relative time after an hour', () => { describe('SaveStatus switches to a relative time after an hour', () => {
it('reads "Saved n min ago" once more than an hour has passed', async () => { it('reads "Saved n h ago" once more than an hour has passed', async () => {
const wrapper = await mountEditor({ const wrapper = await mountEditor({
'GET /v1/article/12': () => mockResponse(200, articleFixture()), 'GET /v1/article/12': () => mockResponse(200, articleFixture()),
}) })
@@ -313,7 +313,7 @@ describe('SaveStatus switches to a relative time after an hour', () => {
await vi.advanceTimersByTimeAsync(20000) await vi.advanceTimersByTimeAsync(20000)
await flushPromises() await flushPromises()
expect(wrapper.text()).toContain('Saved 90 min ago') expect(wrapper.text()).toContain('Saved 1 h ago')
}) })
}) })