fix: "save X min ago" only min to min/hours/days
This commit is contained in:
1 parent
c40522a09f
commit
65ced64568
3 files changed
+26
-8
No files matched your search
@@ -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)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -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')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user