fix loading performance #81
mawburnAnnotations
9 errors
|
Run Tests
Process completed with exit code 1.
|
|
app/__tests__/utils/markdown.test.ts > markdownToHtml > handles complex markdown with multiple elements:
app/__tests__/utils/markdown.test.ts#L100
AssertionError: expected '<h1>Blog Post Title</h1>\n<p>This is …' to contain '<a href="https://example.com">link</a>'
- Expected
+ Received
- <a href="https://example.com">link</a>
+ <h1>Blog Post Title</h1>
+ <p>This is a <strong>paragraph</strong> with <em>emphasis</em> and a <a href="https://example.com" target="_blank" rel="noopener noreferrer">link</a>.</p>
+ <h2>Code Example</h2>
+ <p>Here’s some code:</p>
+ <pre><code class="language-javascript">function greet(name) {
+ return `Hello, ${name}!`;
+ }
+ </code></pre>
+ <p>And here’s a list:</p>
+ <ul>
+ <li>Item one</li>
+ <li>Item two with <code>inline code</code></li>
+ <li>Item three</li>
+ </ul>
+ <blockquote>
+ <p>Quote of the day</p>
+ </blockquote>
+
❯ app/__tests__/utils/markdown.test.ts:100:18
|
|
app/__tests__/utils/markdown.test.ts > markdownToHtml > converts basic markdown elements:
app/__tests__/utils/markdown.test.ts#L17
AssertionError: expected '<p><a href="https://github.com" targe…' to contain '<a href="https://github.com">GitHub</…'
- Expected
+ Received
- <a href="https://github.com">GitHub</a>
+ <p><a href="https://github.com" target="_blank" rel="noopener noreferrer">GitHub</a></p>
+
❯ app/__tests__/utils/markdown.test.ts:17:60
|
|
app/__tests__/routes/blog.test.tsx > Blog Route > Blog Component > should render blog listing page correctly:
app/__tests__/routes/blog.test.tsx#L157
TestingLibraryElementError: Unable to find an element with the text: react. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body>
<div>
<div
class="min-h-screen bg-white dark:bg-[oklch(25%_0.015_260)] transition-colors flex flex-col"
>
<div
class="container mx-auto max-w-4xl px-4 py-8"
>
<div
class="flex justify-between items-start mb-6"
>
<div>
<h1
class="text-4xl font-bold text-gray-900 dark:text-white mb-2"
>
<span
class="text-gray-900 dark:text-white"
>
Blog
</span>
</h1>
<div
class="w-16 h-1 bg-gradient-to-r from-black dark:from-white to-transparent"
/>
</div>
<a
class="flex items-center gap-2 text-gray-900 hover:text-gray-700 dark:text-gray-100 dark:hover:text-gray-300 transition-colors"
href="/rss.xml"
title="RSS Feed"
>
<svg
fill="none"
height="26"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="26"
>
<path
d="M4 11a9 9 0 0 1 9 9"
/>
<path
d="M4 4a16 16 0 0 1 16 16"
/>
<circle
cx="5"
cy="19"
r="1"
/>
</svg>
<span
class="text-sm font-medium"
>
RSS
</span>
</a>
</div>
<div
class="text-gray-700 dark:text-gray-300"
>
<p
class="text-sm text-gray-600 dark:text-gray-400 mb-12"
>
All posts are written by me, though AI helps with proofreading and editing.
</p>
<div
class="space-y-6"
>
<article
class="border-b border-gray-200 dark:border-gray-700 pb-8 mb-8 last:mb-0"
>
<a
class="block hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg p-4 -m-4 transition-colors"
href="/blog/test-post-1"
prefetch="intent"
>
<h2
class="text-2xl font-semibold text-gray-900 dark:text-white mb-2 hover:text-fuchsia-600 dark:hover:text-fuchsia-400 transition-colors"
>
Test Post 1
</h2>
<div
class="flex items-center text-sm text-gray-700 dark:text-gray-200 mb-3 space-x-2"
>
<time
datetime="2025-01-01"
>
January 1, 2025
</time>
<span>
•
</span>
<span>
5
min read
</span>
</div>
<p
class="text-gray-600 dark:text-gray-300 mb-3"
>
This is a test excerpt for post 1
</p>
<div
class="flex flex-wrap gap-2"
>
<span
class="inline-block font-bold text-gray-700 dark:text-gray-200 text-xs whitespace-nowrap"
>
Tags:
</span>
<span
class="inline-block text-gray-700 dark:text-gray-400 text-xs whitespace-nowrap"
>
react, typescript
</span>
</div>
</a>
</article>
</div>
</div>
|
|
app/__tests__/routes/blog.post.test.tsx > BlogPost Route > BlogPost Component > should render blog post correctly:
app/__tests__/routes/blog.post.test.tsx#L126
TestingLibraryElementError: Unable to find an element with the text: react. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body>
<div>
<div
class="min-h-screen bg-white dark:bg-[oklch(25%_0.015_260)] transition-colors flex flex-col"
>
<div
class="container mx-auto max-w-3xl px-4 py-8"
>
<div
class="flex justify-between items-center mb-8"
>
<a
class="inline-flex items-center text-blue-600 dark:text-blue-200 hover:text-blue-800 dark:hover:text-blue-100 transition-colors"
href="/blog"
>
<svg
class="w-4 h-4 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
d="M10 19l-7-7m0 0l7-7m-7 7h18"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
Back to Blog
</a>
<a
class="flex items-center gap-2 text-gray-900 hover:text-gray-700 dark:text-gray-100 dark:hover:text-gray-300 transition-colors"
href="/rss.xml"
title="RSS Feed"
>
<svg
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
>
<path
d="M4 11a9 9 0 0 1 9 9"
/>
<path
d="M4 4a16 16 0 0 1 16 16"
/>
<circle
cx="5"
cy="19"
r="1"
/>
</svg>
<span
class="text-sm font-medium"
>
RSS
</span>
</a>
</div>
<article
class="prose prose-gray dark:prose-invert max-w-none"
>
<header
class="mb-8"
>
<h1
class="text-4xl font-bold text-gray-900 dark:text-white mb-4"
style="font-size: 2.25rem;"
>
Test Blog Post
</h1>
<div
class="flex items-center text-gray-700 dark:text-gray-200 mb-4 space-x-2"
>
<span>
January 1, 2025
</span>
<span>
•
</span>
<span>
5
min read
</span>
</div>
<div
class="flex flex-wrap gap-2 mb-6"
>
<span
class="inline-block font-bold text-gray-700 dark:text-gray-200 text-xs"
>
Tags:
</span>
<span
class="text-gray-600 dark:text-gray-400 text-xs"
>
react, testing
</span>
</div>
<div
class="flex items-center gap-3"
>
<span
class="text-gray-700 dark:text-gray-200 font-medium"
>
Share:
</span>
<div
class="flex flex-wrap gap-2"
>
<button
aria-label="Share on Reddit"
class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors cursor-pointer"
>
<svg
class="w-5 h-5"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
>
<path
d="M12 0A12
|
|
app/__tests__/components/ShareButtons.test.tsx > ShareButtons > renders all share buttons and handles clipboard functionality:
app/__tests__/components/ShareButtons.test.tsx#L35
TestingLibraryElementError: Unable to find an element with the text: Copied!. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body>
<div>
<div
class="flex flex-wrap gap-2"
>
<button
aria-label="Share on Reddit"
class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors cursor-pointer"
>
<svg
class="w-5 h-5"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
>
<path
d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"
/>
</svg>
</button>
<button
aria-label="Share on LinkedIn"
class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors cursor-pointer"
>
<svg
class="w-5 h-5"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
>
<path
d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
/>
</svg>
</button>
<button
aria-label="Share on Bluesky"
class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors cursor-pointer"
>
<svg
class="w-5 h-5"
fill="currentColor"
height="24"
viewBox="0 0 600 530"
width="24"
>
<path
d="M135.7 44c66.5 50 138 151.2 164.3 205.5C326.3 195.2 397.8 94 464.3 44 512.3 8 590-19.9 590 68.8c0 17.7-10.2 148.8-16.1 170-20.7 74-96.2 93-163.3 81.5 117.3 20 147.2 86.1 82.7 152.2C371 598.1 317.4 441 303.7 400.8c-2.5-7.4-3.7-10.9-3.7-8 0-2.9-1.2.6-3.7 8C282.6 441 229 598 106.7 472.5c-64.5-66-34.6-132.2 82.7-152.2C122.2 331.7 46.8 313 26 239 20.1 217.6 10 86.5 10 68.9 10-20 87.7 8 135.7 44z"
/>
</svg>
</button>
<button
aria-label="Share on Twitter"
class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors cursor-pointer"
>
<svg
class="w-5 h-5"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
>
<path
|
|
app/__tests__/components/MarkdownContent.test.tsx > MarkdownContent > renders HTML content with default styling and accepts props:
app/__tests__/components/MarkdownContent.test.tsx#L20
Error: expect(element).toHaveClass("text-gray-800 dark:text-gray-200 leading-relaxed mb-12 custom-class")
Expected the element to have class:
text-gray-800 dark:text-gray-200 leading-relaxed mb-12 custom-class
Received:
text-gray-800 dark:text-gray-200 font-inter text-lg [&_p]:mb-8 [&_a]:text-blue-600 [&_a]:dark:text-blue-400 [&_a]:underline [&_a]:underline-offset-2 [&_a]:decoration-1 [&_a]:hover:text-blue-800 [&_a]:hover:dark:text-blue-300 [&_a]:transition-colors [&_h1]:text-4xl [&_h1]:font-bold [&_h1]:mb-6 [&_h1]:mt-10 [&_h1]:[font-size:2.25rem] [&_h2]:text-3xl [&_h2]:font-semibold [&_h2]:mb-5 [&_h2]:mt-8 [&_h2]:[font-size:1.875rem] [&_h3]:text-2xl [&_h3]:font-semibold [&_h3]:mb-4 [&_h3]:mt-6 [&_h3]:[font-size:1.5rem] [&_h4]:text-xl [&_h4]:font-semibold [&_h4]:mb-3 [&_h4]:mt-4 [&_h4]:[font-size:1.25rem] [&_h5]:text-lg [&_h5]:font-semibold [&_h5]:mb-2 [&_h5]:mt-3 [&_h5]:[font-size:1.125rem] [&_h6]:text-base [&_h6]:font-semibold [&_h6]:mb-2 [&_h6]:mt-3 [&_h6]:[font-size:1rem] [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-6 [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-6 [&_li]:mb-2 [&_blockquote]:border-l-4 [&_blockquote]:border-gray-300 [&_blockquote]:dark:border-gray-600 [&_blockquote]:pl-4 [&_blockquote]:mb-4 [&_blockquote]:italic [&_blockquote]:font-inter [&_blockquote]:text-gray-700/75 [&_blockquote]:dark:text-gray-200/75 mb-12 custom-class
❯ app/__tests__/components/MarkdownContent.test.tsx:20:17
|
|
app/__tests__/root.test.tsx > Root Layout > should load correct fonts based on route:
app/__tests__/root.test.tsx#L97
AssertionError: expected 6 to be 4 // Object.is equality
- Expected
+ Received
- 4
+ 6
❯ app/__tests__/root.test.tsx:97:30
|
|
app/__tests__/root.test.tsx > Root Layout > should load only Lexend fonts for blog routes:
app/__tests__/root.test.tsx#L65
AssertionError: expected '/fonts/Inter_18pt-Regular.woff2' to match /Lexend/
- Expected:
/Lexend/
+ Received:
"/fonts/Inter_18pt-Regular.woff2"
❯ app/__tests__/root.test.tsx:65:20
❯ app/__tests__/root.test.tsx:63:15
|