Merge pull request #298 from cloudflare/missing-ellipsis

add ellipsis for truncated links back

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("<p>Fine. I'll use Wildebeest!</p>", george),
+	generateDummyStatus(
+		`
+		<p>Fine. I'll use Wildebeest!</p>
+		<p>It does look interesting:
+			<a href="https://blog.cloudflare.com/welcome-to-wildebeest-the-fediverse-on-cloudflare/"
+				target="_blank"
+				rel="nofollow noopener noreferrer">
+					<span class="invisible">https://</span>
+					<span class="ellipsis">blog.cloudflare.com/welcome-to</span>
+					<span class="invisible">-wildebeest-the-fediverse-on-cloudflare/</span>
+			</a>
+		</p>`,
+		george
+	),
 	generateDummyStatus('We did it!', george, [
 		generateDummyMediaImage(`https:/loremflickr.com/640/480/victory?lock=${Math.round(Math.random() * 999999)}`),
 	]),

frontend/src/utils/innerHtmlContent.scss

@@ -36,6 +36,10 @@
     max-width: 50%;
   }
 
+  .ellipsis::after {
+    content: "…";
+  }
+
   @screen sm {
     .ellipsis {
       display: inline;

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()
+})