diff --git a/frontend/src/dummyData/statuses.ts b/frontend/src/dummyData/statuses.ts index bcac1bd..e2fd9cb 100644 --- a/frontend/src/dummyData/statuses.ts +++ b/frontend/src/dummyData/statuses.ts @@ -4,7 +4,20 @@ import { ben, george, penny, rafael, zak } from './accounts' // Raw statuses taken directly from mastodon const mastodonRawStatuses: MastodonStatus[] = [ - generateDummyStatus("

Fine. I'll use Wildebeest!

", george), + generateDummyStatus( + ` +

Fine. I'll use Wildebeest!

+

It does look interesting: + + + blog.cloudflare.com/welcome-to + + +

`, + george + ), generateDummyStatus('We did it!', george, [ generateDummyMediaImage(`https:/loremflickr.com/640/480/victory?lock=${Math.round(Math.random() * 999999)}`), ]), diff --git a/frontend/src/utils/innerHtmlContent.scss b/frontend/src/utils/innerHtmlContent.scss index 9b06e85..b2a8198 100644 --- a/frontend/src/utils/innerHtmlContent.scss +++ b/frontend/src/utils/innerHtmlContent.scss @@ -36,6 +36,10 @@ max-width: 50%; } + .ellipsis::after { + content: "…"; + } + @screen sm { .ellipsis { display: inline; diff --git a/ui-e2e-tests/explore-page.spec.ts b/ui-e2e-tests/explore-page.spec.ts index 704fc49..ef4080a 100644 --- a/ui-e2e-tests/explore-page.spec.ts +++ b/ui-e2e-tests/explore-page.spec.ts @@ -14,3 +14,10 @@ test('Display the list of toots in the explore page', async ({ page }) => { await expect(page.locator('article').filter({ hasText: tootText })).toBeVisible() } }) + +test('Correctly displays toots with truncated urls', async ({ page }) => { + await page.goto('http://127.0.0.1:8788/explore') + + const articleLocator = page.locator('article').filter({ hasText: "Fine. I'll use Wildebeest" }) + await expect(articleLocator.getByRole('link', { name: 'blog.cloudflare.com/welcome-to…' })).toBeVisible() +})