Merge pull request #33 from hyesungoh/#31

TOC showing text value

apps/blog/next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="jest" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

apps/blog/src/components/DateAndCategoryLink/DateAndCategoryLink.test.tsx

@@ -6,7 +6,7 @@ import DateAndCategoryLink from './DateAndCategoryLink';
 const DATE = '2022-04-14';
 const CATEGORY = 'Guide';
 
-describe('blog - component - DateAbdCategoryLink', () => {
+describe('blog - component - DateAndCategoryLink', () => {
   it('should', () => {
     render(<DateAndCategoryLink date={DATE} category={CATEGORY} />);
     expect(screen.getByText(CATEGORY)).toBeInTheDocument();

apps/blog/src/components/TOC/TOC.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import TOC from './TOC';
+
+jest.spyOn(React, 'useRef').mockImplementation(() => ({
+  current: {
+    observe: jest.fn(),
+    disconnect: jest.fn(),
+  },
+}));
+jest.spyOn(React, 'useEffect').mockImplementation(f => f());
+
+describe('blog - TOC', () => {
+  beforeAll(() => {});
+
+  it('does not render when zero headings', () => {
+    render(<TOC />);
+    expect(screen.queryByText('Contents')).not.toBeInTheDocument();
+  });
+});

apps/blog/src/components/TOC/TOC.tsx

@@ -1,13 +1,13 @@
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/router';
 import styled from '@emotion/styled';
 import { Link, NextUITheme, useTheme } from '@nextui-org/react';
 import { useMediaQuery } from 'core';
 
-import getHeadings from '../../utils/getHeadings';
+import getHeadings, { IHeading } from '../../utils/getHeadings';
 
 function TOC() {
-  const [headings, setHeadings] = useState<string[]>([]);
+  const [headings, setHeadings] = useState<IHeading[]>([]);
   const router = useRouter();
   const { theme } = useTheme();
 
@@ -16,7 +16,7 @@ function TOC() {
   }, [router]);
 
   const activeId = useScrollSpy({
-    ids: headings,
+    ids: headings.map(heading => heading.id),
     options: {
       rootMargin: '0% 0% -80% 0%',
     },
@@ -33,8 +33,13 @@ function TOC() {
         <Ul>
           {headings.map((heading, index) => (
             <Li key={index}>
-              <Anchor href={`#${heading}`} underline className={heading === activeId ? 'active' : ''} theme={theme}>
-                {heading.replaceAll('-', ' ')}
+              <Anchor
+                href={`#${heading.id}`}
+                underline
+                className={heading.id === activeId ? 'active' : ''}
+                theme={theme}
+              >
+                {heading.text}
               </Anchor>
             </Li>
           ))}
@@ -56,7 +61,7 @@ function useScrollSpy({ ids, options }: HookProps) {
   const observer = useRef<IntersectionObserver>();
 
   useEffect(() => {
-    const elements = ids.map(id => document.getElementById(id));
+    const elements = ids.map(id => document.getElementById(`${id}`));
 
     if (observer.current) {
       observer.current.disconnect();

apps/blog/src/utils/getHeadings.ts

@@ -1,7 +1,17 @@
-function getHeadings(): string[] {
+export interface IHeading {
+  id: string;
+  text: string;
+}
+
+function getHeadings() {
   if (typeof document === 'undefined') return [];
-  const headings = document.getElementsByClassName('heading') as HTMLCollection;
-  return Array.from(headings).map((e: HTMLHtmlElement) => e.id);
+
+  const headings = document.querySelectorAll<HTMLHeadingElement>('.heading');
+
+  return Array.from(headings).map(element => ({
+    id: element.id,
+    text: element.innerText,
+  }));
 }
 
 export default getHeadings;

apps/blog/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "extends": "tsconfig/config-nextjs.json",
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts", "**/*.spec.tsx", "**/*.test.tsx"]
+  // note: extending exclude must have baseUrl
 }

apps/resume/next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="jest" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

apps/resume/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "extends": "tsconfig/config-nextjs.json",
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts", "**/*.spec.tsx", "**/*.test.tsx"]
+  // note: extending exclude must have baseUrl
 }