test: Update test suite

e2e/__snapshots__/post/dom.spec.ts/desktop/google-adsense.html

@@ -144,4 +144,4 @@ <h2 id="수익-구조" data-heading="true"><a data-heading="true" href="#수익-
 <p>이때 수익 배분은 <a class="underline-highlight-fade" target="_blank" href="https://support.google.com/adsense/answer/180195?hl=ko" rel="noreferrer noopener">사용 중인 제품</a>에 따라 달라지는데 콘텐츠 광고는 게시자가 68%의 수익 지분을 가진다.</p>
 <h2 id="마무리" data-heading="true"><a data-heading="true" href="#마무리"><span class="icon icon-link"></span></a>마무리</h2>
 <p>이로써 AdSense 사용법을 간단하게 살펴봤다. 사용성이 좋기 때문에 특별히 어려운 부분은 없었다.</p>
-<p>이후 사이드 프로젝트에 꼭 적용해 보길 기원하면서 글을 마무리해본다.</p></div></section><a class="inline-block text-[#30ffcb] leading-[1.1] after:transition-[width] after:duration-500 ease-in-out hover:after:w-[100%] after:w-[0] after:block after:h-[1px] print:text-black print:underline after:bg-[#30ffcb] after:content-[&quot;&quot;] mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BNext.js%5D%20Google%20AdSense%20%EA%B4%91%EA%B3%A0%20%EC%A0%81%EC%9A%A9%20%EB%B0%8F%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>
+<p>이후 사이드 프로젝트에 꼭 적용해 보길 기원하면서 글을 마무리해본다.</p></div><aside class="absolute top-0 inline-block h-full break-words left-full max-xl:hidden" aria-label="index"><ul class="ml-9 sticky pl-4 top-32 w-[calc(50vw-35vw)] border-l-2 border-l-base min-[1320px]:ml-20 min-[1320px]:top-48"><li data-id="index" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Index</li><li data-id="adsense-적용-결과" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">AdSense 적용 결과</li><li data-id="google-ads-adsense-차이" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">Google Ads, AdSense 차이</li><li data-id="adsense-설정하기" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">AdSense 설정하기</li><li><ul class="ml-2.5 last:mb-2"><li data-id="사이트-등록" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">사이트 등록</li><li data-id="광고-컴포넌트-적용" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">광고 컴포넌트 적용</li><li data-id="사이트-소유권-확인" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">사이트 소유권 확인</li><li data-id="광고-컴포넌트-영역-설정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">광고 컴포넌트 영역 설정</li><li data-id="지급-정보-설정" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue before:content-['-'] before:mr-1">지급 정보 설정</li></ul></li><li data-id="수익-구조" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">수익 구조</li><li data-id="마무리" class="pt-0.5 text-base select-none cursor-pointer hover:text-sub-blue">마무리</li></ul></aside></section><a class="inline-block text-[#30ffcb] leading-[1.1] after:transition-[width] after:duration-500 ease-in-out hover:after:w-[100%] after:w-[0] after:block after:h-[1px] print:text-black print:underline after:bg-[#30ffcb] after:content-[&quot;&quot;] mt-24 [&amp;&amp;]:text-transparent bg-rainbow-water bg-clip-text bg-[length:400%_400%] animate-rainbow-water" href="https://github.com/1ilsang/dev/issues/new?labels=🧊 comment&amp;assignees=1ilsang&amp;title=[🧊] %5BNext.js%5D%20Google%20AdSense%20%EA%B4%91%EA%B3%A0%20%EC%A0%81%EC%9A%A9%20%EB%B0%8F%20%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0&amp;body=<!-- 환영합니다. 이슈 남겨주시면 빠르게 답변드리겠습니다. 🙇 -->" rel="noopener noreferrer" target="_blank">📮 이 포스트에 관심 있으신가요? 이슈를 남겨주세요! 👍</a><div class="flex items-center mt-4 mb-56"><iframe class="border-0 rounded-md cursor-pointer object-contain hover:animate-bouncing" src="https://github.com/sponsors/1ilsang/button" title="Sponsor 1ilsang" height="32" width="114"></iframe></div></section>

e2e/about.spec.ts

@@ -22,6 +22,6 @@ test.describe('about', () => {
       return link?.href ?? '';
     });
 
-    expect(faviconUrl.endsWith('/images/favicon/favicon-96x96.png')).toBe(true);
+    expect(faviconUrl.endsWith('/favicon.ico')).toBe(true);
   });
 });

src/features/shared/components/ExternalLink.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import ExternalLink from './ExternalLink';
+import ExternalLink, { highlighterClass } from './ExternalLink';
 
 describe('rendering', () => {
   it('should visible', async () => {
@@ -26,16 +26,16 @@ describe('rendering', () => {
   });
 
   it('should have default class', async () => {
-    const defaultClass = 'highlighter';
     render(<ExternalLink href="1ilsang.dev" />);
-    expect(screen.getByRole('link')).toHaveClass(defaultClass);
+    expect(screen.getByRole('link')).toHaveClass(highlighterClass);
   });
 
   it('should be able to add classes', async () => {
     const propClass = 'chul';
-    const defaultClass = 'highlighter';
     render(<ExternalLink className={propClass} href="1ilsang.dev" />);
-    expect(screen.getByRole('link')).toHaveClass(...[defaultClass, propClass]);
+    expect(screen.getByRole('link')).toHaveClass(
+      ...[highlighterClass, propClass],
+    );
   });
 });
 

src/features/shared/components/ExternalLink.tsx

@@ -8,20 +8,20 @@ type ExternalLinkProps = PropsWithChildren & {
   disableDefaultCSSTransition?: boolean;
 };
 
+export const highlighterClass =
+  'inline-block text-[#30ffcb] leading-[1.1] after:transition-[width] after:duration-500 ease-in-out hover:after:w-[100%] after:w-[0] after:block after:h-[1px] print:text-black print:underline after:bg-[#30ffcb] after:content-[""]';
+
 const ExternalLink: FunctionComponent<ExternalLinkProps> = ({
   href,
   label,
   className = '',
   children,
   disableDefaultCSSTransition = false,
 }) => {
-  const highlighter =
-    'inline-block text-[#30ffcb] leading-[1.1] after:transition-[width] after:duration-500 ease-in-out hover:after:w-[100%] after:w-[0] after:block after:h-[1px] print:text-black print:underline after:bg-[#30ffcb] after:content-[""]';
-
   return (
     <a
       className={classNames([
-        { [highlighter]: !disableDefaultCSSTransition },
+        { [highlighterClass]: !disableDefaultCSSTransition },
         className,
       ])}
       href={href}