fix: prettierignore 추가

hanghae-plus · Sep 26, 2024 · 0900233 · 0900233
1 parent d836c0a
commit 0900233
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 71 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,2 @@
+**/*.test.js
+
diff --git a/src/__tests__/advanced.test.js b/src/__tests__/advanced.test.js
@@ -5,7 +5,7 @@ beforeAll(async () => {
   window.alert = vi.fn();
   document.body.innerHTML = '<div id="root"></div>';
   await import('../main.ts');
-});
+})
 
 afterAll(() => {
   // 각 테스트 전에 root 엘리먼트 초기화
@@ -16,42 +16,39 @@ afterAll(() => {
 const goTo = (path) => {
   window.history.pushState({}, '', path);
   window.dispatchEvent(new Event('popstate'));
-};
+}
+
 
 beforeEach(() => {
   goTo('/');
   document.querySelector('#logout')?.click();
-});
+})
 
 describe('심화과제 테스트', () => {
   let user;
 
   beforeEach(() => {
     user = userEvent.setup();
-  });
+  })
 
   describe('1. 라우트 가드 구현', () => {
     it('비로그인 사용자가 프로필 페이지에 접근시 로그인 페이지로 리다이렉트 한다.', async () => {
-      goTo('/profile');
+      goTo('/profile')
 
       expect(document.body.innerHTML).toContain('로그인');
     });
 
     it('로그인된 사용자가 로그인 페이지에 접근시 메인 페이지로 리다이렉트 한다.', async () => {
-      goTo('/login');
+      goTo('/login')
 
       const loginForm = document.getElementById('login-form');
 
-      await user.type(document.getElementById('username'), 'testuser');
+      await user.type(document.getElementById('username'), 'testuser')
 
-      loginForm.dispatchEvent(
-        new SubmitEvent('submit', { bubbles: true, cancelable: true })
-      );
+      loginForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
 
-      goTo('/login');
-      expect(
-        document.querySelector('nav .text-blue-600.font-bold').innerHTML
-      ).toContain('홈');
+      goTo('/login')
+      expect(document.querySelector('nav .text-blue-600.font-bold').innerHTML).toContain('홈');
     });
   });
 
@@ -61,9 +58,9 @@ describe('심화과제 테스트', () => {
 
       const firstTarget = document.querySelector('nav a[href="/login"]');
 
-      firstTarget.addEventListener('click', (e) => e.stopPropagation());
+      firstTarget.addEventListener('click', e => e.stopPropagation());
 
-      await user.click(firstTarget);
+      await user.click(firstTarget)
 
       // 클릭 이벤트 생성 및 트리거
       expect(document.body.querySelector('header')).not.toBeFalsy();
@@ -76,18 +73,14 @@ describe('심화과제 테스트', () => {
 
       const $username = document.querySelector('#username');
 
-      $username.addEventListener(
-        'input',
-        () => {
-          throw new Error('의도적인 오류입니다.');
-        },
-        { once: true }
-      );
+      $username.addEventListener('input', () => {
+        throw new Error('의도적인 오류입니다.')
+      }, { once: true });
 
       await user.type($username, '1');
 
       expect(document.body.innerHTML).toContain('오류 발생!');
       expect(document.body.innerHTML).toContain('의도적인 오류입니다.');
-    });
+    })
   });
-});
+});
diff --git a/src/__tests__/basic.test.js b/src/__tests__/basic.test.js
@@ -5,7 +5,7 @@ beforeAll(async () => {
   window.alert = vi.fn();
   document.body.innerHTML = '<div id="root"></div>';
   await import('../main.ts');
-});
+})
 
 afterAll(() => {
   // 각 테스트 전에 root 엘리먼트 초기화
@@ -16,14 +16,14 @@ afterAll(() => {
 const goTo = (path) => {
   window.history.pushState({}, '', path);
   window.dispatchEvent(new Event('popstate'));
-};
+}
 
 describe('기본과제 테스트', () => {
   let user;
 
   beforeEach(() => {
     user = userEvent.setup();
-  });
+  })
 
   describe('1. 라우팅 구현', () => {
     it('"/" 경로로 접근하면 홈 페이지가 렌더링된다', () => {
@@ -38,34 +38,32 @@ describe('기본과제 테스트', () => {
       expect(document.body.innerHTML).toContain('로그인');
     });
 
+
+
     it('로그인이 되지 않은 상태에서 "/profile" 경로로 접근하면, 로그인 페이지로 리다이렉션 된다.', () => {
       // 로그인 상태 시뮬레이션
-      goTo('/profile');
+      goTo('/profile')
 
       expect(document.body.innerHTML).toContain('로그인');
     });
 
     it('존재하지 않는 경로로 접근하면 404 페이지가 렌더링된다', () => {
-      goTo('/nonexistent');
+      goTo('/nonexistent')
       expect(document.body.innerHTML).toContain('404');
     });
   });
 
   describe('2. 사용자 관리 기능', () => {
     it('로그인 폼에서 사용자 이름을 입력하고 제출하면 로그인 되고, 로그아웃 버튼 클릭시 로그아웃 된다.', async () => {
-      goTo('/login');
+      goTo('/login')
 
       const loginForm = document.getElementById('login-form');
 
-      await user.type(document.getElementById('username'), 'testuser');
+      await user.type(document.getElementById('username'), 'testuser')
 
-      loginForm.dispatchEvent(
-        new SubmitEvent('submit', { bubbles: true, cancelable: true })
-      );
+      loginForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
 
-      expect(localStorage.getItem('user')).toEqual(
-        `{"username":"testuser","email":"","bio":""}`
-      );
+      expect(localStorage.getItem('user')).toEqual(`{"username":"testuser","email":"","bio":""}`);
 
       const logoutButton = document.getElementById('logout');
       logoutButton.click();
@@ -76,22 +74,20 @@ describe('기본과제 테스트', () => {
 
   describe('3. 프로필 페이지 구현', () => {
     beforeEach(async () => {
-      goTo('/login');
+      goTo('/login')
 
       const loginForm = document.getElementById('login-form');
 
-      await user.type(document.getElementById('username'), 'testuser');
+      await user.type(document.getElementById('username'), 'testuser')
 
-      loginForm.dispatchEvent(
-        new SubmitEvent('submit', { bubbles: true, cancelable: true })
-      );
+      loginForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
 
-      goTo('/profile');
+      goTo('/profile')
     });
 
     afterEach(() => {
       document.querySelector('#logout').click();
-    });
+    })
 
     it('로그인한 사용자의 이름과 소개가 표시된다', () => {
       expect(document.getElementById('username').value).toBe('testuser');
@@ -104,52 +100,47 @@ describe('기본과제 테스트', () => {
       const bioInput = document.getElementById('bio');
 
       bioInput.value = 'Updated bio';
-      profileForm.dispatchEvent(
-        new SubmitEvent('submit', { bubbles: true, cancelable: true })
-      );
+      profileForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
 
-      expect(localStorage.getItem('user')).toEqual(
-        `{"username":"testuser","email":"","bio":"Updated bio"}`
-      );
+      expect(localStorage.getItem('user')).toEqual(`{"username":"testuser","email":"","bio":"Updated bio"}`);
     });
   });
 
   describe('4. 컴포넌트 기반 구조 설계', () => {
+
     beforeEach(async () => {
-      goTo('/login');
+      goTo('/login')
 
       const loginForm = document.getElementById('login-form');
 
-      await user.type(document.getElementById('username'), 'testuser');
+      await user.type(document.getElementById('username'), 'testuser')
 
-      loginForm.dispatchEvent(
-        new SubmitEvent('submit', { bubbles: true, cancelable: true })
-      );
+      loginForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
 
       window.history.pushState({}, '', '/profile');
       window.dispatchEvent(new Event('popstate'));
     });
 
     it('Header, Footer 컴포넌트가 메인 페이지와 프로필 페이지에 존재하고, 로그인페이지와 에러페이지에는 존재하지 않는다.', async () => {
-      goTo('/');
+      goTo('/')
       expect(document.querySelector('header')).not.toBeFalsy();
       expect(document.querySelector('footer')).not.toBeFalsy();
       expect(document.querySelector('nav')).not.toBeFalsy();
 
-      goTo('/profile');
+      goTo('/profile')
       expect(document.querySelector('header')).not.toBeFalsy();
       expect(document.querySelector('footer')).not.toBeFalsy();
       expect(document.querySelector('nav')).not.toBeFalsy();
 
-      goTo('/404');
+      goTo('/404')
       expect(document.querySelector('header')).toBeFalsy();
       expect(document.querySelector('footer')).toBeFalsy();
       expect(document.querySelector('nav')).toBeFalsy();
 
-      goTo('/');
-      await user.click(document.querySelector('#logout'));
+      goTo('/')
+      await user.click(document.querySelector('#logout'))
 
-      goTo('/login');
+      goTo('/login')
       expect(document.querySelector('header')).toBeFalsy();
       expect(document.querySelector('footer')).toBeFalsy();
       expect(document.querySelector('nav')).toBeFalsy();
@@ -162,15 +153,14 @@ describe('기본과제 테스트', () => {
       expect(document.body.innerHTML).toContain('로그인');
 
       // 로그인
-      goTo('/login');
+      goTo('/login')
 
       const loginForm = document.getElementById('login-form');
 
-      await user.type(document.getElementById('username'), 'testuser');
+      await user.type(document.getElementById('username'), 'testuser')
+
+      loginForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
 
-      loginForm.dispatchEvent(
-        new SubmitEvent('submit', { bubbles: true, cancelable: true })
-      );
 
       // 로그인 상태
       expect(document.body.innerHTML).toContain('로그아웃');
@@ -185,4 +175,4 @@ describe('기본과제 테스트', () => {
       expect(document.body.innerHTML).toContain('페이지를 찾을 수 없습니다');
     });
   });
-});
+});
diff --git a/src/pages/login.ts b/src/pages/login.ts
@@ -20,7 +20,9 @@ export default class LoginPage extends BaseComponent {
   }
 
   private bindLoginEvent() {
-    const $loginForm = this.getElement<HTMLFormElement>(`#${ID.LOGIN_FORM}`);
+    const $loginForm = this.$root?.querySelector<HTMLFormElement>(
+      `#${ID.LOGIN_FORM}`
+    );
     if (!$loginForm) return;
 
     $loginForm.addEventListener('submit', this.handleLogin.bind(this));

diff --git a/src/shared/ui/Header.ts b/src/shared/ui/Header.ts
@@ -36,7 +36,7 @@ export class Header extends BaseComponent<Link[]> {
         const activeClass = this.isActiveLink(link)
           ? 'text-blue-600 font-bold'
           : 'text-gray-600';
-        const linkId = id ? `id=${id}` : '';
+        const linkId = id ? `id="${id}"` : '';
 
         return `<li>
                   <a href="${link}" class="${activeClass}" ${linkId}>
@@ -48,7 +48,7 @@ export class Header extends BaseComponent<Link[]> {
   }
 
   private bindLogoutEvents() {
-    const $logoutLink = this.getElement(`#${LOGOUT_ID}`);
+    const $logoutLink = this.$root?.querySelector(`#${LOGOUT_ID}`);
     if ($logoutLink) {
       $logoutLink.addEventListener('click', this.handleLogout);
     }