diff --git a/tests/e2e/relative-time.test.e2e.ts b/tests/e2e/relative-time.test.e2e.ts new file mode 100644 index 0000000000..ab8bbc19de --- /dev/null +++ b/tests/e2e/relative-time.test.e2e.ts @@ -0,0 +1,35 @@ +// Copyright 2025 The Forgejo Authors. All rights reserved. +// SPDX-License-Identifier: GPL-3.0-or-later + +// @watch start +// templates/admin/dashboard.tmpl +// web_src/js/webcomponents/relative-time.js +// @watch end + +import {expect} from '@playwright/test'; +import {test} from './utils_e2e.ts'; + +test.use({user: 'user1'}); + +test('Relative time after htmx swap', async ({page}, workerInfo) => { + test.skip( + workerInfo.project.name !== 'firefox' && workerInfo.project.name !== 'Mobile Chrome', + 'This is a really slow test, so limit to a subset of client.', + ); + await page.goto('/admin'); + + const relativeTime = page.locator('.admin-dl-horizontal > dd:nth-child(2) > relative-time'); + await expect(relativeTime).toContainText('ago'); + + const body = page.locator('body'); + await body.evaluate( + (element) => + new Promise((resolve) => + element.addEventListener('htmx:afterSwap', () => { + resolve(); + }), + ), + ); + + await expect(relativeTime).toContainText('ago'); +}); diff --git a/web_src/js/webcomponents/relative-time.js b/web_src/js/webcomponents/relative-time.js index a97814d2fd..5a126fd625 100644 --- a/web_src/js/webcomponents/relative-time.js +++ b/web_src/js/webcomponents/relative-time.js @@ -141,4 +141,10 @@ function UpdateAllRelativeTimes() { for (const object of document.querySelectorAll('relative-time')) UpdateRelativeTime(object); } -document.addEventListener('DOMContentLoaded', UpdateAllRelativeTimes); +document.addEventListener('DOMContentLoaded', () => { + UpdateAllRelativeTimes(); + // Also update relative-time DOM elements after htmx swap events. + document.body.addEventListener('htmx:afterSwap', () => { + for (const object of document.querySelectorAll('relative-time')) DoUpdateRelativeTime(object); + }); +});