Skip to content

Commit

Permalink
refactor : 라우터 테스트 코드 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@devbit4
devbit4 committed Jan 16, 2024
1 parent 98c5e61 commit 6404883
Showing 1 changed file with 155 additions and 88 deletions.
243 changes: 155 additions & 88 deletions src/router/__test__/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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('<h3>list</h3>');
});

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('<h3>detail</h3>');
});

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

expect(target.innerHTML).toContain('<h3>404</h3>');
});

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

expect(target.innerHTML).not.toContain('<h3>list</h3>');
});
});
});
});

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('<h3>개발</h3>');
});

router._navigateTo('/design');
test('/design 이동 시 디자인 페이지 랜더링', () => {
router._navigateTo('/design');

expect(target.innerHTML).toContain('디자인');
expect(target.innerHTML).not.toContain('<h3>디자인</h3>');
});

router._navigateTo('/hello');
test('/hello(404) 이동 시 디자인 페이지 비랜더링', () => {
router._navigateTo('/hello');

expect(target.innerHTML).toContain('이 페이지를 찾을 수 없습니다.');
expect(target.innerHTML).not.toContain('<h3>디자인</h3>');
});

test('/hello(404) 이동 시 404 페이지 랜더링', () => {
router._navigateTo('/hello');

expect(target.innerHTML).toContain('이 페이지를 찾을 수 없습니다.');
});
});
});
});

0 comments on commit 6404883

Please sign in to comment.