mirror of
https://github.com/kikootwo/ReadMeABook.git
synced 2026-06-03 04:40:09 +00:00
Extract title tags & per-row chevron expand
Add parsing and UX for bracketed title metadata and per-row title expansion. Introduces extractTitleTags (src/lib/utils/title-tags.ts) to pull bracketed tags from result titles (de-duplicated, slash-split) and useIsTruncated (src/lib/hooks/useIsTruncated.ts) to detect horizontal overflow. Refactors InteractiveTorrentSearchModal to a ResultRow component that renders title chips (slate chips) for parsed tags (filtered vs displayFormat), shows a chevron disclosure only when the title is truncated (or while expanded), toggles expansion per GUID, and resets expansion state when the modal closes. Tests added/updated for the component, hook, and parser; documentation updated to reflect behavior.
This commit is contained in:
@@ -0,0 +1,45 @@
|
||||
/**
|
||||
* Component: useIsTruncated Hook Tests
|
||||
* Documentation: documentation/frontend/components.md
|
||||
*/
|
||||
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import React, { useRef } from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { useIsTruncated } from '@/lib/hooks/useIsTruncated';
|
||||
|
||||
function Probe({ scrollWidth, clientWidth }: { scrollWidth: number; clientWidth: number }) {
|
||||
const ref = useRef<HTMLSpanElement | null>(null);
|
||||
const attach = (el: HTMLSpanElement | null) => {
|
||||
ref.current = el;
|
||||
if (el) {
|
||||
Object.defineProperty(el, 'scrollWidth', { configurable: true, value: scrollWidth });
|
||||
Object.defineProperty(el, 'clientWidth', { configurable: true, value: clientWidth });
|
||||
}
|
||||
};
|
||||
const truncated = useIsTruncated(ref);
|
||||
return (
|
||||
<span ref={attach} data-testid="probe" data-truncated={truncated ? 'yes' : 'no'}>
|
||||
probe
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
describe('useIsTruncated', () => {
|
||||
it('returns false when scrollWidth fits inside clientWidth', () => {
|
||||
const { getByTestId } = render(<Probe scrollWidth={80} clientWidth={120} />);
|
||||
expect(getByTestId('probe').getAttribute('data-truncated')).toBe('no');
|
||||
});
|
||||
|
||||
it('returns false when scrollWidth equals clientWidth', () => {
|
||||
const { getByTestId } = render(<Probe scrollWidth={100} clientWidth={100} />);
|
||||
expect(getByTestId('probe').getAttribute('data-truncated')).toBe('no');
|
||||
});
|
||||
|
||||
it('returns true when scrollWidth exceeds clientWidth', () => {
|
||||
const { getByTestId } = render(<Probe scrollWidth={400} clientWidth={120} />);
|
||||
expect(getByTestId('probe').getAttribute('data-truncated')).toBe('yes');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user