prabhuignoto / react-chrono / #92

Committed 18 Jun 2025 10:08AM UTC coverage: 90.727% (+0.9%) from 89.791%

Build # #92

Build Type

push

Committed by

Commit Message

Minor cleanup and expanding test coverage (#548)

* refactor: rename project to React Chrono UI and update related files

* fix: update tsconfig to reference the correct entry file for React Chrono UI

* feat: enhance styles with vendor prefixes and improve cross-browser support

* Add tests for useNewScrollPosition hook and TimelineHorizontal component

- Implement comprehensive tests for the useNewScrollPosition hook covering horizontal, vertical, and edge cases.
- Create a new test file for the TimelineHorizontal component, ensuring it renders correctly and handles various props and states.
- Update snapshots for timeline control and vertical components to reflect recent changes in class names.
- Modify vitest configuration to include all test files in the src directory.

* refactor: simplify transform handling in timeline styles

* refactor: clean up test imports and remove unused styles in timeline components

Run Details

1783 of 2112 branches covered (84.42%)

Branch coverage included in aggregate %.

670 of 674 new or added lines in 12 files covered. (99.41%)

400 existing lines in 29 files now uncovered.

10564 of 11497 relevant lines covered (91.88%)

10.09 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

86.54

/src/components/timeline-elements/timeline-card-content/content-header.tsx

import { FunctionComponent, memo, useContext, useMemo } from 'react';
import { GlobalContext } from '../../GlobalContext';
import { SubTitleMemo } from '../memoized/subtitle-memo';
import { TitleMemo } from '../memoized/title-memo';
import { ContentHeaderProps } from './header-footer.model';
import {
  CardTitleSemantic,
  TimelineCardHeader,
} from './timeline-card-content.styles';

/**
 * ContentHeader component
 * This component renders the header of the timeline card including the title and subtitle.
 * It doesn't render the title and subtitle if the card has media.
 * The title and subtitle are memoized to prevent unnecessary re-renders.
 *
 * @property {string} title - The title of the card.
 * @property {string} url - The URL of the card.
 * @property {boolean} media - Indicates whether the card has media or not.
 * @property {string} content - The main content of the card.
 * @returns {JSX.Element} The ContentHeader component.
 */
const ContentHeader: FunctionComponent<ContentHeaderProps> = memo(
  ({ title, url, media, content, cardTitle }: ContentHeaderProps) => {
    // Using context to get global values
    const { fontSizes, classNames, theme, isMobile, semanticTags } =
      useContext(GlobalContext);

    const isNotMedia = useMemo(() => !media, [media]);

    return (
      <TimelineCardHeader>
        {/* Render title if there is no media */}

        {isMobile ? (
          <CardTitleSemantic
            as={semanticTags?.cardTitle ?? 'span'}
            $fontSize={'1.2rem'}
            theme={theme}
          >
            {cardTitle}
          </CardTitleSemantic>
        ) : null}

        {isNotMedia ? (
          <TitleMemo
            title={title}
            theme={theme}
            url={url}
            fontSize={fontSizes?.cardTitle}
            classString={classNames?.cardTitle}
          />
        ) : null}

        {/* Render subtitle if there is no media */}

        {isNotMedia ? (
          <SubTitleMemo
            content={content}
            theme={theme}
            fontSize={fontSizes?.cardSubtitle}
            classString={classNames?.cardSubTitle}
          />
        ) : null}
      </TimelineCardHeader>
    );
  },
);

// Setting display name for easier debugging
ContentHeader.displayName = 'ContentHeader';

export { ContentHeader };

1	import { FunctionComponent, memo, useContext, useMemo } from 'react';	1✔
2	import { GlobalContext } from '../../GlobalContext';	1✔
3	import { SubTitleMemo } from '../memoized/subtitle-memo';	1✔
4	import { TitleMemo } from '../memoized/title-memo';	1✔
5	import { ContentHeaderProps } from './header-footer.model';
6	import {	1✔
7	CardTitleSemantic,
8	TimelineCardHeader,
9	} from './timeline-card-content.styles';
10
11	/**
12	* ContentHeader component
13	* This component renders the header of the timeline card including the title and subtitle.
14	* It doesn't render the title and subtitle if the card has media.
15	* The title and subtitle are memoized to prevent unnecessary re-renders.
16	*
17	* @property {string} title - The title of the card.
18	* @property {string} url - The URL of the card.
19	* @property {boolean} media - Indicates whether the card has media or not.
20	* @property {string} content - The main content of the card.
21	* @returns {JSX.Element} The ContentHeader component.
22	*/
23	const ContentHeader: FunctionComponent<ContentHeaderProps> = memo(	1✔
24	({ title, url, media, content, cardTitle }: ContentHeaderProps) => {	1✔
25	// Using context to get global values
26	const { fontSizes, classNames, theme, isMobile, semanticTags } =	37✔
27	useContext(GlobalContext);	37✔
28
29	const isNotMedia = useMemo(() => !media, [media]);	37✔
30
31	return (	37✔
32	<TimelineCardHeader>	37✔
33	{/* Render title if there is no media */}
34
35	{isMobile ? (	37!
UNCOV 36	<CardTitleSemantic	×
UNCOV 37	as={semanticTags?.cardTitle ?? 'span'}	×
UNCOV 38	$fontSize={'1.2rem'}	×
UNCOV 39	theme={theme}	×
40	>
UNCOV 41	{cardTitle}	×
UNCOV 42	</CardTitleSemantic>	×
43	) : null}	37✔
44
45	{isNotMedia ? (	37✔
46	<TitleMemo	27✔
47	title={title}	27✔
48	theme={theme}	27✔
49	url={url}	27✔
50	fontSize={fontSizes?.cardTitle}	27✔
51	classString={classNames?.cardTitle}	27✔
52	/>	27✔
53	) : null}	10✔
54
55	{/* Render subtitle if there is no media */}
56
57	{isNotMedia ? (	37✔
58	<SubTitleMemo	27✔
59	content={content}	27✔
60	theme={theme}	27✔
61	fontSize={fontSizes?.cardSubtitle}	27✔
62	classString={classNames?.cardSubTitle}	27✔
63	/>	27✔
64	) : null}	10✔
65	</TimelineCardHeader>	37✔
66	);
67	},	37✔
68	);	1✔
69
70	// Setting display name for easier debugging
71	ContentHeader.displayName = 'ContentHeader';	1✔
72
73	export { ContentHeader };

prabhuignoto / react-chrono / #92

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous