Skip to content

Commit 7920cb9

Browse files
argaenargaen
authored
Minor improvements (#244)
1 parent 88873a8 commit 7920cb9

File tree

15 files changed

+312
-269
lines changed

15 files changed

+312
-269
lines changed

‎package.json

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,15 @@
1212
},
1313
"dependencies": {
1414
"@fontsource/inter": "^5.0.15",
15-
"eslint": "8.53.0",
15+
"eslint": "8.56.0",
1616
"eslint-config-next": "13.4.18",
1717
"luxon": "^3.4.4",
1818
"next": "14.1.0",
1919
"octokit": "^3.1.2",
2020
"react": "18.2.0",
2121
"react-dom": "18.2.0",
2222
"rehype-code-titles": "^1.2.0",
23+
"rehype-external-links": "^3.0.0",
2324
"rehype-prism-plus": "^1.6.3",
2425
"rehype-raw": "^6.1.1",
2526
"rehype-slug": "^6.0.0",
@@ -39,13 +40,13 @@
3940
"devDependencies": {
4041
"@octokit/types": "^12.3.0",
4142
"@tailwindcss/typography": "^0.5.10",
42-
"@testing-library/react": "^14.1.0",
43+
"@testing-library/react": "^14.1.2",
4344
"@types/jest": "^29.5.8",
44-
"@types/luxon": "^3.3.4",
45-
"@types/node": "20.9.1",
45+
"@types/luxon": "^3.4.2",
46+
"@types/node": "20.11.10",
4647
"@types/react": "18.2.37",
47-
"@types/react-dom": "18.2.15",
48-
"@types/remark-prism": "^1.3.4",
48+
"@types/react-dom": "18.2.18",
49+
"@types/remark-prism": "^1.3.7",
4950
"autoprefixer": "^10.4.16",
5051
"eslint-config-airbnb": "^19.0.4",
5152
"eslint-config-airbnb-typescript": "^17.1.0",

‎src/__tests__/app/about/__snapshots__/page.test.tsx.snap

Lines changed: 0 additions & 84 deletions
This file was deleted.

‎src/__tests__/app/about/page.test.tsx

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/__tests__/components/PostDetail.test.tsx

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ jest.mock('@/components/TableOfContents', () => jest.fn(
88
() => <div data-testid="TableOfContents" />,
99
));
1010

11-
jest.mock('@/components/Tag', () => jest.fn(
12-
() => <div data-testid="Tag" />,
11+
jest.mock('@/components/TagsWidget', () => jest.fn(
12+
() => <div data-testid="TagsWidget" />,
1313
));
1414

1515
describe('PostDetailTest', () => {
16-
it('renders post with content and title', async () => {
16+
it('renders post as expected', async () => {
1717
const post = {
1818
content: '<div>Content</div>',
1919
slug: 'my-blog-post',
@@ -31,4 +31,23 @@ describe('PostDetailTest', () => {
3131

3232
expect(container).toMatchSnapshot();
3333
});
34+
35+
it('renders doc as expected', async () => {
36+
const post = {
37+
content: '<div>Content</div>',
38+
slug: 'my-doc',
39+
summary: 'Doc summary TODO',
40+
tags: ['docs'],
41+
reading_time: '1 min',
42+
title: 'My Doc',
43+
date: DateTime.fromISO('2023-01-01'),
44+
author: {
45+
name: 'Name',
46+
avatar: 'https://avatar.image',
47+
},
48+
} as Post;
49+
const { container } = render(<PostDetail post={post} />);
50+
51+
expect(container).toMatchSnapshot();
52+
});
3453
});

‎src/__tests__/components/TagsWidget.test.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { render } from '@testing-library/react';
2+
3+
import Tag from '@/components/Tag';
4+
import TagsWidget from '@/components/TagsWidget';
5+
6+
jest.mock('@/components/Tag', () => jest.fn(
7+
() => <div data-testid="Tag" />,
8+
));
9+
10+
describe('TagsWidget', () => {
11+
it('is empty when no tags', () => {
12+
render(<TagsWidget tags={[]} />);
13+
expect(Tag).toBeCalledTimes(0);
14+
});
15+
16+
it('is empty when "docs" in the tags', () => {
17+
render(<TagsWidget tags={['a', 'b', 'docs']} />);
18+
expect(Tag).toBeCalledTimes(0);
19+
});
20+
21+
it('renders as expected when valid tags', () => {
22+
const { container } = render(<TagsWidget tags={['a', 'b']} />);
23+
expect(Tag).toBeCalledTimes(2);
24+
expect(container).toMatchSnapshot();
25+
});
26+
});

‎src/__tests__/components/__snapshots__/PostDetail.test.tsx.snap

Lines changed: 75 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,90 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`PostDetailTest renders post with content and title 1`] = `
3+
exports[`PostDetailTest renders doc as expected 1`] = `
44
<div>
55
<article>
66
<div
77
class="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700"
88
>
99
<header
10-
class="pt-6 xl:pb-6"
10+
class="text-center pt-6 xl:pb-6"
11+
>
12+
<h1
13+
class="heading"
14+
>
15+
My Doc
16+
</h1>
17+
</header>
18+
<div
19+
class="pb-8 xl:grid xl:grid-cols-4 xl:gap-x-6"
20+
style="grid-template-rows: auto 1fr;"
1121
>
1222
<div
13-
class="space-y-1 text-center"
23+
class="sidenav"
1424
>
15-
<div>
16-
<h1
17-
class="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14"
25+
<div
26+
class="nav-section"
27+
>
28+
<h2
29+
class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400"
1830
>
19-
My Blog Post
20-
</h1>
31+
Table of contents
32+
</h2>
33+
<div
34+
data-testid="TableOfContents"
35+
/>
36+
</div>
37+
<div
38+
class="nav-section"
39+
>
40+
<div
41+
data-testid="TagsWidget"
42+
/>
2143
</div>
2244
</div>
45+
<div
46+
class="xl:col-span-3 xl:row-span-2 xl:pb-0"
47+
>
48+
<div
49+
class="prose prose-img:mx-auto max-w-none pt-10 pb-8 dark:prose-dark"
50+
>
51+
<div>
52+
<div>
53+
Content
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
</article>
61+
</div>
62+
`;
63+
64+
exports[`PostDetailTest renders post as expected 1`] = `
65+
<div>
66+
<article>
67+
<div
68+
class="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700"
69+
>
70+
<header
71+
class="text-center pt-6 xl:pb-6"
72+
>
73+
<h1
74+
class="heading"
75+
>
76+
My Blog Post
77+
</h1>
2378
</header>
2479
<div
25-
class="divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0"
80+
class="pb-8 xl:grid xl:grid-cols-4 xl:gap-x-6"
2681
style="grid-template-rows: auto 1fr;"
2782
>
2883
<div
29-
class="sticky top-14 prose border-r-[1px] divide-gray-200 dark:divide-gray-700 mt-10 pt-4 pb-8"
84+
class="sidenav"
3085
>
3186
<div
32-
class="text-sm font-medium leading-5 xl:col-start-1 xl:row-start-2"
87+
class="nav-section"
3388
>
3489
<h2
3590
class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400"
@@ -41,42 +96,24 @@ exports[`PostDetailTest renders post with content and title 1`] = `
4196
/>
4297
</div>
4398
<div
44-
class="divide-gray-200 text-sm font-medium leading-5 dark:divide-gray-700 xl:col-start-1 xl:row-start-2 xl:divide-y"
99+
class="nav-section"
45100
>
46101
<div
47-
class="py-4 xl:py-8"
48-
>
49-
<h2
50-
class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400"
51-
>
52-
Tags
53-
</h2>
54-
<div
55-
class="flex flex-wrap"
56-
>
57-
<div
58-
data-testid="Tag"
59-
/>
60-
</div>
61-
</div>
102+
data-testid="TagsWidget"
103+
/>
62104
</div>
63105
<div
64-
class="divide-gray-200 font-medium leading-5 dark:divide-gray-700 xl:col-start-1 xl:row-start-2 xl:divide-y"
106+
class="nav-section pt-4 xl:pt-8"
65107
>
66-
<div
67-
class="pt-4 xl:pt-8"
108+
<a
109+
href="/"
68110
>
69-
<a
70-
class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
71-
href="/"
72-
>
73-
← Back to the blog
74-
</a>
75-
</div>
111+
← Back to the blog
112+
</a>
76113
</div>
77114
</div>
78115
<div
79-
class="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0"
116+
class="xl:col-span-3 xl:row-span-2 xl:pb-0"
80117
>
81118
<div
82119
class="prose prose-img:mx-auto max-w-none pt-10 pb-8 dark:prose-dark"

‎src/__tests__/components/__snapshots__/TagsWidget.test.tsx.snap

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`TagsWidget renders as expected when valid tags 1`] = `
4+
<div>
5+
<div>
6+
<div
7+
class="py-4 xl:py-8"
8+
>
9+
<h2
10+
class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400"
11+
>
12+
Tags
13+
</h2>
14+
<div
15+
class="flex flex-wrap"
16+
>
17+
<div
18+
data-testid="Tag"
19+
/>
20+
<div
21+
data-testid="Tag"
22+
/>
23+
</div>
24+
</div>
25+
</div>
26+
</div>
27+
`;

‎src/__tests__/lib/markdownToHtml.test.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,16 @@ describe('markdownToHtml', () => {
4040
);
4141
});
4242

43+
it('adds target blank to full URLs', async () => {
44+
const parsed = await markdownToHtml(
45+
'[a](https://a.com) [b](/b)',
46+
);
47+
48+
expect(parsed.content).toEqual(
49+
'<p><a href="https://a.com" rel="nofollow" target="_blank">a</a> <a href="/b">b</a></p>',
50+
);
51+
});
52+
4353
it('parses frontmatter metadata in toml', async () => {
4454
const parsed = await markdownToHtml(
4555
'+++\n'

0 commit comments

Comments
 (0)