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('