Apply test at blog pages (#86)

* test: blog error pages (404, 500, offline))

* test: fix typo at blog error pages

* test: blog index page

* test: blog slug page

* test: blog app and document at pages

* test: blog category/[category] page

apps/blog/src/libs/api/api.ts

@@ -6,8 +6,6 @@ const cwd = process.cwd();
 // NOTE: Trinomial for test:coverage environment
 const postsDirectory = join(cwd, cwd.endsWith('blog') ? '_content' : 'apps/blog/_content');
 
-console.log(postsDirectory);
-
 function isValidCategory(value: string) {
   if (value.includes('.')) return false;
   return true;

apps/blog/src/pages/[slug].page.tsx

@@ -71,7 +71,6 @@ export async function getStaticPaths() {
 export async function getStaticProps({ params }) {
   const { slug } = params;
 
-  // 한 개만 찾는 api 만들어서 리팩토링해야함
   const allPosts = getAllPosts(['title', 'subtitle', 'date', 'category', 'content', 'slug']);
   const currentPost = allPosts.filter(post => post.slug === slug)[0];
   if (typeof currentPost === 'undefined') {

apps/blog/src/pages/__test__/404.test.tsx

@@ -0,0 +1,13 @@
+import { NotFound as CoreNotFount } from 'core';
+
+import NotFound from '../404.page';
+
+describe('blog - pages - 404', () => {
+  it('should defined', () => {
+    expect(NotFound).toBeDefined();
+  });
+
+  it('should return core NotFound component', () => {
+    expect(NotFound).toBe(CoreNotFount);
+  });
+});

apps/blog/src/pages/__test__/500.test.tsx

@@ -0,0 +1,13 @@
+import { ServerError as CoreServerError } from 'core';
+
+import ServerError from '../500.page';
+
+describe('blog - pages - 500', () => {
+  it('should defined', () => {
+    expect(ServerError).toBeDefined();
+  });
+
+  it('should return core ServerError component', () => {
+    expect(ServerError).toBe(CoreServerError);
+  });
+});

apps/blog/src/pages/__test__/[slug].test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import Slug from '../[slug].page';
+
+const MOCK_POST = {
+  slug: 'comet-land',
+  title: 'Comet-land',
+  subtitle: 'blog and resume theme',
+  date: '2022-01-01',
+  category: 'blog',
+  content: '<h2>heading</h2>',
+  ogImage: null,
+};
+
+// NOTE: prevent ResizeObserver and IntersectionObserver at PageProgressBar, TOC
+jest.spyOn(React, 'useEffect').mockImplementation(f => f());
+
+describe('blog - pages - [slug]', () => {
+  it('should defined', () => {
+    expect(Slug).toBeDefined();
+  });
+
+  it('should render main', () => {
+    render(<Slug {...MOCK_POST} />);
+
+    expect(screen.getByRole('main')).toBeInTheDocument();
+  });
+
+  it('should render one level 1 heading', () => {
+    render(<Slug {...MOCK_POST} />);
+
+    expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
+  });
+});

apps/blog/src/pages/__test__/_app.test.tsx

@@ -0,0 +1,7 @@
+import BlogApp from '../_app.page';
+
+describe('blog - pages - app', () => {
+  it('should defined', () => {
+    expect(BlogApp).toBeDefined();
+  });
+});

apps/blog/src/pages/__test__/_document.test.tsx

@@ -0,0 +1,7 @@
+import BlogDocument from '../_document.page';
+
+describe('blog - pages - document', () => {
+  it('should defined', () => {
+    expect(BlogDocument).toBeDefined();
+  });
+});

apps/blog/src/pages/__test__/_offline.test.tsx

@@ -0,0 +1,13 @@
+import { Offline as CoreOffline } from 'core';
+
+import Offline from '../_offline.page';
+
+describe('blog - pages - offline', () => {
+  it('should defined', () => {
+    expect(Offline).toBeDefined();
+  });
+
+  it('should return core NotFound component', () => {
+    expect(Offline).toBe(CoreOffline);
+  });
+});

apps/blog/src/pages/__test__/category/[category].test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+
+import Category from '../../category/[category].page';
+
+const MOCK_CATEGORY = 'mockCategory';
+const MOCK_POST = {
+  slug: 'comet-land',
+  title: 'Comet-land',
+  subtitle: 'blog and resume theme',
+  date: '2022-01-01',
+  category: 'blog',
+  content: '<h2>heading</h2>',
+};
+
+describe('blog - pages - category - [category]', () => {
+  it('should defined', () => {
+    expect(Category).toBeDefined();
+  });
+
+  it('should render main', () => {
+    render(<Category category={MOCK_CATEGORY} allPosts={[MOCK_POST]} />);
+
+    expect(screen.getByRole('main')).toBeInTheDocument();
+  });
+
+  it('should render allPosts props', () => {
+    render(<Category category={MOCK_CATEGORY} allPosts={[MOCK_POST]} />);
+
+    expect(screen.getByText(MOCK_POST.title)).toBeInTheDocument();
+    expect(screen.getByText(MOCK_POST.subtitle)).toBeInTheDocument();
+  });
+
+  it('should render category at lever 2 heading', () => {
+    render(<Category category={MOCK_CATEGORY} allPosts={[]} />);
+
+    expect(screen.getAllByRole('heading', { level: 2 }).at(-1)).toHaveTextContent(MOCK_CATEGORY);
+  });
+});

apps/blog/src/pages/__test__/index.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+
+import Index from '../index.page';
+
+const MOCK_POST = {
+  slug: 'comet-land',
+  title: 'Comet-land',
+  subtitle: 'blog and resume theme',
+  date: '2022-01-01',
+  category: 'blog',
+  content: '<h2>heading</h2>',
+};
+
+describe('blog - pages - index', () => {
+  it('should defined', () => {
+    expect(Index).toBeDefined();
+  });
+
+  it('should render main', () => {
+    render(<Index allPosts={[MOCK_POST]} />);
+
+    expect(screen.getByRole('main')).toBeInTheDocument();
+  });
+
+  it('should render post title', () => {
+    render(<Index allPosts={[MOCK_POST]} />);
+
+    expect(screen.getByText(MOCK_POST.title)).toBeInTheDocument();
+  });
+
+  it('should has one level 1 heading', () => {
+    render(<Index allPosts={[MOCK_POST]} />);
+
+    expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
+  });
+});