From 6404883ac24befc71f71b802eb01584267cb417d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EB=B9=9B=EB=82=98?= Date: Tue, 16 Jan 2024 20:28:40 +0900 Subject: [PATCH] =?UTF-8?q?refactor=20:=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/__test__/index.test.js | 243 +++++++++++++++++++----------- 1 file changed, 155 insertions(+), 88 deletions(-) diff --git a/src/router/__test__/index.test.js b/src/router/__test__/index.test.js index a46c1c2..c3bc9ae 100644 --- a/src/router/__test__/index.test.js +++ b/src/router/__test__/index.test.js @@ -31,124 +31,191 @@ class NotFound extends Component { } } -describe('router test', () => { +describe('임시 라우터 기능 테스트', () => { const target = document.body; const router = new Router(target); - beforeAll(() => { - router - .addRoute({ - path: '/', - page: Home, - }) - .addRoute({ - path: '/posts', - page: Posts, - }) - .addRoute({ - path: '/posts/:id', - page: Post, - }) - .addRoute({ - path: '*', - page: NotFound, + describe('4개의 테스트 라우트를 생성하고', () => { + beforeAll(() => { + router + .addRoute({ + path: '/', + page: Home, + }) + .addRoute({ + path: '/posts', + page: Posts, + }) + .addRoute({ + path: '/posts/:id', + page: Post, + }) + .addRoute({ + path: '*', + page: NotFound, + }); + }); + + describe('addRoute 기능 테스트', () => { + test('생성된 라우터의 갯수가 4인지 확인', () => { + expect(router.routes.length).toBe(4); }); - }); - test('should verify that the addRoute function works properly', () => { - expect(router.routes.length).toBe(4); - expect(router.routes.length).not.toBe(3); - expect(router.routes[0].path).toBe('/'); - expect(router.routes[0].path).not.toBe('/posts'); - expect(router.routes[0].path).not.toBe('/hello'); - }); + test('생성된 라우터의 갯수가 3이 아닌지 확인', () => { + expect(router.routes.length).not.toBe(3); + }); + }); - test('should verify that the pathToRegex function works properly', () => { - const regex = pathToRegex('/posts'); - const regex2 = pathToRegex('/posts/:id'); + describe('pathToRegex 테스트', () => { + const regex = pathToRegex('/posts'); + const regex2 = pathToRegex('/posts/:id'); - expect(regex.test('/posts')).toBeTruthy(); - expect(regex.test('/posts/3')).toBeFalsy(); + test('/posts 정규표현식 테스트', () => { + expect(regex.test('/posts')).toBeTruthy(); + expect(regex.test('/posts/3')).toBeFalsy(); + }); - expect(regex2.test('/posts/3')).toBeTruthy(); - expect(regex2.test('/posts')).toBeFalsy(); - }); + test('/posts/:id 정규표현식 테스트', () => { + expect(regex2.test('/posts/3')).toBeTruthy(); + expect(regex2.test('/posts')).toBeFalsy(); + }); + }); - test('should return correct params when the getParams function works properly', () => { - const pathname = '/posts/1'; - const targetRoute = router._findRoute(pathname); + describe('getParams 기능 테스트', () => { + const pathname = '/posts/1'; + test('id가 1인지 확인', () => { + const targetRoute = router._findRoute(pathname); - expect(getParams(targetRoute)).toEqual({ id: '1' }); - expect(getParams(targetRoute).id).not.toBe(2); - expect(getParams(targetRoute)).not.toEqual({ no: '1' }); - }); + expect(getParams(targetRoute)).toEqual({ id: '1' }); + }); + test('id가 2가 아닌지 확인', () => { + const targetRoute = router._findRoute(pathname); - test('should return correct queryParams when the getQueryParams function works properly', () => { - const url = 'https://www.google.com?a=1&b=2'; - const url2 = 'https://www.google.com?a=1b=2'; + expect(getParams(targetRoute).id).not.toBe({ id: '2' }); + }); + test('params 가 id 인지 확인', () => { + const targetRoute = router._findRoute(pathname); - expect(getQueryParams(url)).toEqual({ a: '1', b: '2' }); - expect(getQueryParams(url)).not.toEqual({ a: '1', b: '3' }); - expect(getQueryParams(url2)).not.toEqual({ a: '1', b: '2' }); - }); + expect(getParams(targetRoute)).not.toEqual({ no: '1' }); + }); + }); - test('should verify that the findRoute function works properly', () => { - let matchedRoutePah = router._findRoute('/posts/3').route.path; - expect(matchedRoutePah).toBe('/posts/:id'); - expect(matchedRoutePah).not.toBe('*'); + describe('getQueryParams 기능 테스트', () => { + const url = 'https://www.google.com?a=1&b=2'; + const url2 = 'https://www.google.com?a=1b=2'; - matchedRoutePah = router._findRoute('/404').route.path; - expect(matchedRoutePah).toBe('*'); - expect(matchedRoutePah).not.toBe('/posts/:id'); + test('url의 query가 {a:"1",b:"2"} 확인', () => { + expect(getQueryParams(url)).toEqual({ a: '1', b: '2' }); + }); - matchedRoutePah = router._findRoute('/hello/3').route.path; - expect(matchedRoutePah).toBe('*'); - expect(matchedRoutePah).not.toBe('/posts/:id'); - }); + test('url의 query가 {a:"1",b:"3"} 아닌지 확인', () => { + expect(getQueryParams(url)).not.toEqual({ a: '1', b: '3' }); + }); + + test('url2의 query가 url의 query와 다른지 확인', () => { + expect(getQueryParams(url2)).not.toEqual({ a: '1', b: '2' }); + }); + }); + + describe('findRoute 기능 테스트', () => { + test('/posts/3에 매칭되는 라우트가 /posts/:id인지 확인', () => { + const matchedRoutePah = router._findRoute('/posts/3').route.path; + expect(matchedRoutePah).toBe('/posts/:id'); + expect(matchedRoutePah).not.toBe('*'); + }); + + test('/404에 매칭되는 라우트가 /404인지 확인', () => { + const matchedRoutePah = router._findRoute('/404').route.path; + expect(matchedRoutePah).toBe('*'); + expect(matchedRoutePah).not.toBe('/posts/:id'); + }); + + test('/hello/3에 매칭되는 라우트가 *인지 확인', () => { + const matchedRoutePah = router._findRoute('/hello/3').route.path; + expect(matchedRoutePah).toBe('*'); + expect(matchedRoutePah).not.toBe('/posts/:id'); + }); + }); + + describe('navigateTo 및 renderRoute 기능 테스트', () => { + test('/posts 이동 시 list 페이지 랜더링', () => { + router._navigateTo('/posts'); + + expect(target.innerHTML).toContain('

list

'); + }); + + test('/posts 이동 시 detail 페이지 비랜더링', () => { + router._navigateTo('/posts'); - test('should render the target page when the navigateTo function works properly', () => { - router._navigateTo('/posts'); + expect(target.innerHTML).not.toContain('

detail

'); + }); - expect(target.innerHTML).toContain('

list

'); - expect(target.innerHTML).not.toContain('

detail

'); + test('/hello 이동 시 404 페이지 비랜더링', () => { + router._navigateTo('/hello'); + + expect(target.innerHTML).toContain('

404

'); + }); - router._navigateTo('/hello'); - expect(target.innerHTML).not.toContain('

list

'); - expect(target.innerHTML).toContain('

404

'); + test('/hello(404) 이동 시 list 페이지 비랜더링', () => { + router._navigateTo('/hello'); + + expect(target.innerHTML).not.toContain('

list

'); + }); + }); }); }); -describe('toss-tech page router test', () => { +describe('실제 페이지 라우터 기능 테스트', () => { const target = document.body; const router = new Router(target); - beforeAll(() => { - router - .addRoute({ - path: '/', - page: ArticlesPage, - }) - .addRoute({ - path: '/design', - page: DesignPage, - }) - .addRoute({ - path: '*', - page: NotFoundPage, + describe('3개의 라우트를 생성하고', () => { + beforeAll(() => { + router + .addRoute({ + path: '/', + page: ArticlesPage, + }) + .addRoute({ + path: '/design', + page: DesignPage, + }) + .addRoute({ + path: '*', + page: NotFoundPage, + }); + }); + + describe('navigateTo 및 renderRoute 기능 테스트', () => { + test('/ 이동 시 개발 페이지 랜더링', () => { + router._navigateTo('/'); + + expect(target.innerHTML).toContain('개발'); }); - }); - test('should render the target page when the navigateTo function works properly', () => { - router._navigateTo('/'); + test('/design 이동 시 개발 페이지 비랜더링', () => { + router._navigateTo('/design'); - expect(target.innerHTML).toContain('개발'); + expect(target.innerHTML).not.toContain('

개발

'); + }); - router._navigateTo('/design'); + test('/design 이동 시 디자인 페이지 랜더링', () => { + router._navigateTo('/design'); - expect(target.innerHTML).toContain('디자인'); + expect(target.innerHTML).not.toContain('

디자인

'); + }); - router._navigateTo('/hello'); + test('/hello(404) 이동 시 디자인 페이지 비랜더링', () => { + router._navigateTo('/hello'); - expect(target.innerHTML).toContain('이 페이지를 찾을 수 없습니다.'); + expect(target.innerHTML).not.toContain('

디자인

'); + }); + + test('/hello(404) 이동 시 404 페이지 랜더링', () => { + router._navigateTo('/hello'); + + expect(target.innerHTML).toContain('이 페이지를 찾을 수 없습니다.'); + }); + }); }); });