diff --git a/stats/src/components/vocabulary/FrequencyRankTable.test.tsx b/stats/src/components/vocabulary/FrequencyRankTable.test.tsx new file mode 100644 index 00000000..50f0d113 --- /dev/null +++ b/stats/src/components/vocabulary/FrequencyRankTable.test.tsx @@ -0,0 +1,40 @@ +import assert from 'node:assert/strict'; +import test from 'node:test'; +import { renderToStaticMarkup } from 'react-dom/server'; +import { FrequencyRankTable } from './FrequencyRankTable'; +import type { VocabularyEntry } from '../../types/stats'; + +function makeEntry(over: Partial): VocabularyEntry { + return { + wordId: 1, + headword: '日本語', + word: '日本語', + reading: 'にほんご', + frequency: 5, + frequencyRank: 100, + animeCount: 1, + partOfSpeech: null, + firstSeen: 0, + lastSeen: 0, + ...over, + } as VocabularyEntry; +} + +test('renders headword and reading inline in a single column (no separate Reading header)', () => { + const entry = makeEntry({}); + const markup = renderToStaticMarkup( + , + ); + assert.ok(!markup.includes('>Reading<'), 'should not have a Reading column header'); + assert.ok(markup.includes('日本語'), 'should include the headword'); + assert.ok(markup.includes('にほんご'), 'should include the reading inline'); +}); + +test('omits reading when reading equals headword', () => { + const entry = makeEntry({ headword: 'カレー', word: 'カレー', reading: 'カレー' }); + const markup = renderToStaticMarkup( + , + ); + assert.ok(markup.includes('カレー'), 'should include the headword'); + assert.ok(!markup.includes('【カレー】'), 'should not render reading in brackets when equal to headword'); +}); diff --git a/stats/src/components/vocabulary/FrequencyRankTable.tsx b/stats/src/components/vocabulary/FrequencyRankTable.tsx index a7fec63c..c6488908 100644 --- a/stats/src/components/vocabulary/FrequencyRankTable.tsx +++ b/stats/src/components/vocabulary/FrequencyRankTable.tsx @@ -113,7 +113,6 @@ export function FrequencyRankTable({ words, knownWords, onSelectWord }: Frequenc Rank Word - Reading POS Seen @@ -128,9 +127,17 @@ export function FrequencyRankTable({ words, knownWords, onSelectWord }: Frequenc #{w.frequencyRank!.toLocaleString()} - {w.headword} - - {fullReading(w.headword, w.reading) || w.headword} + + {w.headword} + {(() => { + const reading = fullReading(w.headword, w.reading); + if (!reading || reading === w.headword) return null; + return ( + + 【{reading}】 + + ); + })()} {w.partOfSpeech && }