Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: es-hangul의 신뢰성을 나타낼 수 있는 문서를 만듭니다 #302

Merged
merged 9 commits into from
Jan 2, 2025
14 changes: 14 additions & 0 deletions docs/src/pages/docs/advantages/reliability.en.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
title: reliability
---

import Reliability from './reliability.tsx';

# 💯 Providing High Reliability

`es-hangul` has achieved <b>100% test coverage</b> by adopting a testing framework. This means that all features of the library have been thoroughly verified, minimizing unexpected errors. Built on high reliability, it offers stable and predictable performance, so you can confidently incorporate it into your projects. Experience a new standard in Hangul processing by utilizing `es-hangul` now!

<br />
<br />

<Reliability locale="en" />
14 changes: 14 additions & 0 deletions docs/src/pages/docs/advantages/reliability.ko.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
title: reliability
---

import Reliability from './reliability.tsx';

# 💯 높은 신뢰성 제공

`es-hangul`은 테스팅 프레임워크를 도입하여 <b>테스트 커버리지 100%</b>를 달성하였습니다. 이는 라이브러리의 모든 기능이 철저하게 검증되었음을 의미하며, 예기치 않은 오류를 최소화합니다. 높은 신뢰성을 바탕으로 안정적이고 예측 가능한 성능을 제공하므로, 안심하고 프로젝트에 도입하실 수 있습니다. 지금 `es-hangul`을 활용하여 한글 처리의 새로운 기준을 경험해 보세요!

<br />
<br />

<Reliability locale="ko" />
162 changes: 162 additions & 0 deletions docs/src/pages/docs/advantages/reliability.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
type Locale = 'ko' | 'en';

interface TypeSupportTableProps {
locale: Locale;
}

export default function Reliability({ locale }: TypeSupportTableProps) {
const isKorean = locale === 'ko';
const statements = isKorean ? '문장' : 'Statements';
const branches = isKorean ? '브랜치' : 'Branches';
const functions = isKorean ? '함수' : 'Functions';
const lines = isKorean ? '라인' : 'Lines';

return (
<div>
<div className="overflow-x-auto mb-10">
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<caption className="caption-top text-sm">
{isKorean ? 'es-hangul의 테스트 커버리지 항목' : "es-hangul's test coverage item"}
</caption>

<thead className="text-xs text-gray-700 bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="px-6 py-3">
{isKorean ? '테스트 커버리지 항목' : 'Test coverage item'}
</th>
<th scope="col" className="px-6 py-3">
{isKorean ? '커버리지 비율' : 'Coverage percentage'}
</th>
</tr>
</thead>

<tbody>
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{statements}
<br />
<span className="text-gray-500 text-xs">
ℹ️&nbsp;
{isKorean
? '코드에서 실행 가능한 모든 문장이 테스트에서 실행되었는지'
: 'Whether all executable statements in the code have been executed during testing'}
</span>
</th>
<td className="px-6 py-4">✅ (100%)</td>
</tr>

<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{branches}
<br />
<span className="text-gray-500 text-xs">
ℹ️&nbsp;
{isKorean
? '조건문(if, else, switch 등)에서 발생하는 모든 분기 경로가 테스트되었는지'
: 'Whether all branching paths in conditional statements (if, else, switch, etc.) have been tested'}
</span>
</th>
<td className="px-6 py-4">✅ (100%)</td>
</tr>

<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{functions}
<br />
<span className="text-gray-500 text-xs">
ℹ️&nbsp;
{isKorean
? '코드 내의 모든 함수가 테스트에서 호출되었는지'
: 'Whether all functions within the code have been called during testing'}
</span>
</th>
<td className="px-6 py-4">✅ (100%)</td>
</tr>

<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{lines}
<br />
<span className="text-gray-500 text-xs">
ℹ️&nbsp;
{isKorean
? '소스 코드의 각 라인이 테스트에서 실행되었는지'
: 'Whether each line of the source code has been executed during testing'}
</span>
</th>
<td className="px-6 py-4">✅ (100%)</td>
</tr>
</tbody>
</table>
</div>

<div className="overflow-x-auto">
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<caption className="caption-top text-sm">
{isKorean
? 'es-hangul의 테스트 커버리지 현황 📆 2024.12.03'
: "es-hangul's test coverage status 📆 2024.12.03"}
</caption>

<thead className="text-xs text-gray-700 bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="px-6 py-3">
API
</th>
<th scope="col" className="px-6 py-3">
{statements}
</th>
<th scope="col" className="px-6 py-3">
{branches}
</th>
<th scope="col" className="px-6 py-3">
{functions}
</th>
<th scope="col" className="px-6 py-3">
{lines}
</th>
</tr>
</thead>

<tbody>
{apiList.map(api => (
<tr key={api} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<a href={`../api/${api}`}>{api} 🔗</a>
</th>

{coverageItems.map(item => (
<td key={item} className="px-6 py-4">
✅ (100%)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

특정 상황에서는
함수의 테스트 커버리지가 100%가 되지 않는 타이밍도 있을 것 같은데요.
그러면 거짓된 정보를 제공하는것이라 좋지 않은 것 같아요.
항상 100%로 하드코딩하기보다는, 테스트 커버리지를 동적으로 받아올 수 있는 방법이 없을까요?

Copy link
Collaborator Author

@po4tion po4tion Dec 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

build 전 테스트 커버리지 파일 업데이트를 통해 '최신 커버리지 파일'을 이용하는 방식으로 변경했습니다. 파일의 무게는 13kb로 기존 빌드배포 시간에 큰 영향을 미치지 않는다고 판단하였습니다. 해당 이슈를 진행하면서 한가지 아쉬웠던 점은 es-hangul의 공식문서에서 공개하고 있는 API 리스트들을 커버리지 파일을 이용하여 가져올 수 없는지 확인을 해봤는데 실패했습니다.
그러하여, deduplicationAPIList 라는 상수를 통해 es-hangul 내에서 테스트되고 있는 파일들 중 사용자들에게 보여주고 있는 API 테스트 파일들만 필터링 했습니다. 이렇게 하지 않으면 _internal, standardizePronunciation의 transform과 관련된 테스트 값들이 불필요하게 사용자들에게 보여집니다.

그리고 docs를 build 하기 전, 배포 명령어에 "yarn test"를 넣어주실 수 있나요? 해당 명령어를 통해 coverage 파일을 최신화하고자 합니다.

</td>
))}
</tr>
))}
</tbody>
</table>
</div>
</div>
);
}

const coverageItems = ['statements', 'branches', 'functions', 'lines'] as const;

const apiList = [
'amountToHangul',
'assemble',
'canBe',
'combine',
'date',
'disassemble',
'disassembleToGroups',
'getChoseong',
'hasBatchim',
'josa',
'josa.pick',
'numberToHangul',
'numberToHangulMixed',
'removeLastCharacter',
'romanize',
'standardizePronunciation',
'susa',
] as const;
2 changes: 1 addition & 1 deletion docs/src/pages/docs/introduction.ko.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ ECMAScript Modules를 이용하여 사용하는 함수만 애플리케이션에

### 신뢰할 수 있습니다

우리는 커버리지 100%를 목표로 모든 기능을 테스트하기 위해 노력하고 있습니다.
우리는 커버리지 100%를 목표로 모든 기능을 테스트하기 위해 [노력하고 있습니다](./advantages/reliability).
[![codecov](https://codecov.io/gh/toss/es-hangul/branch/main/graph/badge.svg?token=토큰추가가필요합니다)](https://codecov.io/gh/toss/es-hangul)

### TypeScript를 지원합니다
Expand Down
Loading