Merge pull request #66 from cloudflare/more-ui-tests

More UI tests

frontend/src/components/Status/index.tsx

@@ -37,7 +37,7 @@ export default component$((props: Props) => {
 					</div>
 					<Link class="no-underline" href={statusUrl}>
 						<div class="text-wildebeest-500 flex items-center">
-							<i class="fa fa-xs fa-globe" />
+							<i style={{ height: '0.75rem', width: '0.75rem' }} class="fa fa-xs fa-globe w-3 h-3" />
 							<span class="ml-2 text-sm hover:underline">{formatTimeAgo(new Date(status.created_at))}</span>
 						</div>
 					</Link>

frontend/src/components/layout/RightColumn/RightColumn.tsx

@@ -23,7 +23,7 @@ export default component$(() => {
 
 		return (
 			<Link href={linkTarget} class={classList}>
-				<i class={`fa ${iconName} fa-fw md:mr-3`} />
+				<i style={{ width: '1.25rem', height: '1rem' }} class={`fa ${iconName} fa-fw md:mr-3 w-5 h-4`} />
 				<span class="hidden md:inline">{linkText}</span>
 			</Link>
 		)

frontend/src/routes/(frontend)/explore/layout.tsx

@@ -43,7 +43,7 @@ export default component$(() => {
 		<div class="explore-wrapper flex flex-col">
 			<StickyHeader>
 				<h2 class="text-reg text-md m-0 p-4 bg-wildebeest-700 xl:rounded-t">
-					<i class="fa fa-hashtag fa-fw mr-3" />
+					<i style={{ width: '1.25rem', height: '1rem' }} class="fa fa-hashtag fa-fw mr-3 w-5 h-4" />
 					<span>Explore</span>
 				</h2>
 			</StickyHeader>

frontend/src/routes/(frontend)/public/index.tsx

@@ -22,7 +22,7 @@ export default component$(() => {
 		<>
 			<StickyHeader>
 				<div class="xl:rounded-t bg-wildebeest-700 p-4 flex items-center text-white">
-					<i class="fa fa-globe fa-fw mr-3" />
+					<i style={{ width: '1.25rem', height: '1rem' }} class="fa fa-globe fa-fw mr-3 w-5 h-4" />
 					<span>Federated timeline</span>
 				</div>
 			</StickyHeader>

frontend/src/routes/(frontend)/public/local/index.tsx

@@ -21,7 +21,7 @@ export default component$(() => {
 		<>
 			<StickyHeader>
 				<div class="xl:rounded-t bg-wildebeest-700 p-4 flex items-center">
-					<i class="fa fa-users fa-fw mr-3" />
+					<i style={{ width: '1.25rem', height: '1rem' }} class="fa fa-users fa-fw mr-3 w-5 h-4" />
 					<span>Local timeline</span>
 				</div>
 			</StickyHeader>

frontend/test/posts-page.spec.ts

@@ -15,3 +15,20 @@ describe('Posts timeline page', () => {
 		expect(body).toContain("I'll be House Speaker")
 	})
 })
+
+describe('Toot details', () => {
+	it('should show an individual toot', async () => {
+		// Find a specific toot in the list
+		const exploreResponse = await fetch('http://0.0.0.0:6868/explore/')
+		const exploreBody = await exploreResponse.text()
+		const match = exploreBody.match(/href="\/(@georgetakei\/[0-9a-z-]*)"/)
+
+		// Fetch the page for it and validate the result
+		const tootPath = match?.[1]
+		expect(tootPath).toBeTruthy()
+		const response = await fetch(`http://0.0.0.0:6868/${tootPath}`)
+		expect(response.status).toBe(200)
+		const body = await response.text()
+		expect(body).toContain("I'll be House Speaker")
+	})
+})

frontend/vite.config.ts

@@ -18,12 +18,6 @@ export default defineConfig(() => {
 			qwikVite(),
 			tsconfigPaths(),
 		],
-		build: { minify: false, sourcemap: true },
-		esbuild: {
-			minifySyntax: false,
-			minifyIdentifiers: false,
-			minifyWhitespace: false,
-		},
 		preview: {
 			headers: {
 				'Cache-Control': 'public, max-age=600',