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

78.98

/src/components/timeline/timeline-popover-elements.tsx

import { FunctionComponent, useMemo } from 'react';
import { useStableContext, useDynamicContext } from '../contexts';
import { List } from '../elements/list/list';
import PopOver from '../elements/popover';
import { ArrowDownIcon, LayoutIcon, ParaIcon } from '../icons';
import {
  ChangeDensityProp,
  LayoutSwitcherProp,
  QuickJumpProp,
} from './timeline-popover.model';

const LayoutSwitcher: FunctionComponent<LayoutSwitcherProp> = ({
  onUpdateTimelineMode,
  theme,
  mode,
  isDarkMode,
  position,
  isMobile,
}: LayoutSwitcherProp) => {
  const { memoizedButtonTexts: buttonTexts } = useStableContext();
  const { horizontalAll: showAllCardsHorizontal } = useDynamicContext();

  const LayoutIconMemo = useMemo(() => <LayoutIcon />, []);

  const activeTimelineMode = useMemo(
    () => mode,
    [showAllCardsHorizontal, mode],
  );

  const layoutOptions = useMemo(
    () => ({
      alternating: buttonTexts?.changeLayoutOptions.alternating,
      horizontal: buttonTexts?.changeLayoutOptions.horizontal,
      horizontal_all: buttonTexts?.changeLayoutOptions.horizontal_all,
      vertical: buttonTexts?.changeLayoutOptions.vertical,
    }),
    [],
  );

  const verticalItems = useMemo(
    () => [
      {
        description: layoutOptions.vertical.helpText,
        id: 'VERTICAL',
        onSelect: () => onUpdateTimelineMode('VERTICAL'),
        selected: activeTimelineMode === 'VERTICAL',
        title: layoutOptions.vertical.text,
      },
      {
        description: layoutOptions.alternating.helpText,
        id: 'VERTICAL_ALTERNATING',
        onSelect: () => onUpdateTimelineMode('VERTICAL_ALTERNATING'),
        selected: activeTimelineMode === 'VERTICAL_ALTERNATING',
        title: layoutOptions.alternating.text,
      },
    ],
    [activeTimelineMode],
  );

  // horizontal list OF options when the mode is `HORIZONTAL`
  const horizontalItems = useMemo(
    () => [
      {
        description: layoutOptions.horizontal.helpText,
        id: 'HORIZONTAL',
        onSelect: () => {
          onUpdateTimelineMode('HORIZONTAL');
        },
        selected: activeTimelineMode === 'HORIZONTAL',
        title: layoutOptions.horizontal.text,
      },
      {
        description: layoutOptions.horizontal_all.helpText,
        id: 'HORIZONTAL_ALL',
        onSelect: () => {
          onUpdateTimelineMode('HORIZONTAL_ALL');
        },
        selected: activeTimelineMode === 'HORIZONTAL_ALL',
        title: layoutOptions.horizontal.text,
      },
    ],
    [activeTimelineMode],
  );

  return (
    <PopOver
      placeholder={buttonTexts.changeLayout}
      position={position}
      theme={theme}
      isDarkMode={isDarkMode}
      icon={LayoutIconMemo}
      $isMobile={isMobile}
    >
      <List
        items={
          mode === 'HORIZONTAL' || mode === 'HORIZONTAL_ALL'
            ? horizontalItems
            : verticalItems
        }
        theme={theme}
        multiSelectable
      />
    </PopOver>
  );
};

const QuickJump: FunctionComponent<QuickJumpProp> = ({
  activeItem,
  items,
  theme,
  onActivateItem,
  isDarkMode,
  position,
  isMobile,
}: QuickJumpProp) => {
  const { memoizedButtonTexts: buttonTexts } = useStableContext();

  const ArrowDownIconMemo = useMemo(() => <ArrowDownIcon />, []);

  return (
    <PopOver
      placeholder={buttonTexts.jumpTo}
      position={position}
      theme={theme}
      width={400}
      isDarkMode={isDarkMode}
      $isMobile={isMobile}
      icon={ArrowDownIconMemo}
    >
      <List
        items={items.map((item, index) => ({
          active: index === activeItem,
          description: item.description,
          id: item.id,
          label: item.title,
          onSelect: () => {},
          title: item.title ?? `Item ${index + 1}`,
        }))}
        theme={theme}
        onClick={onActivateItem}
      />
    </PopOver>
  );
};

const ChangeDensity: FunctionComponent<ChangeDensityProp> = ({
  onChange,
  selectedDensity,
  theme,
  isDarkMode,
  position,
  isMobile,
}) => {
  const { memoizedButtonTexts: buttonTexts } = useStableContext();

  const ParaIconMemo = useMemo(() => <ParaIcon />, []);

  const items = useMemo(
    () => [
      {
        description: 'Show less text',
        id: 'LOW',
        onSelect: () => onChange('LOW'),
        selected: selectedDensity === 'LOW',
        title: 'Low',
      },
      {
        description: 'Show more text',
        id: 'HIGH',
        onSelect: () => onChange('HIGH'),
        selected: selectedDensity === 'HIGH',
        title: 'High',
      },
    ],
    [selectedDensity],
  );

  return (
    <PopOver
      placeholder={buttonTexts.changeDensity}
      theme={theme}
      isDarkMode={isDarkMode}
      position={position}
      $isMobile={isMobile}
      width={300}
      icon={ParaIconMemo}
    >
      <List items={items} theme={theme} multiSelectable />
    </PopOver>
  );
};

export { ChangeDensity, LayoutSwitcher, QuickJump };

1	import { FunctionComponent, useMemo } from 'react';	1✔
2	import { useStableContext, useDynamicContext } from '../contexts';	1✔
3	import { List } from '../elements/list/list';	1✔
4	import PopOver from '../elements/popover';	1✔
5	import { ArrowDownIcon, LayoutIcon, ParaIcon } from '../icons';	1✔
6	import {
7	ChangeDensityProp,
8	LayoutSwitcherProp,
9	QuickJumpProp,
10	} from './timeline-popover.model';
11
12	const LayoutSwitcher: FunctionComponent<LayoutSwitcherProp> = ({	1✔
13	onUpdateTimelineMode,	2✔
14	theme,	2✔
15	mode,	2✔
16	isDarkMode,	2✔
17	position,	2✔
18	isMobile,	2✔
19	}: LayoutSwitcherProp) => {	2✔
20	const { memoizedButtonTexts: buttonTexts } = useStableContext();	2✔
21	const { horizontalAll: showAllCardsHorizontal } = useDynamicContext();	2✔
22
23	const LayoutIconMemo = useMemo(() => <LayoutIcon />, []);	2✔
24
25	const activeTimelineMode = useMemo(	2✔
26	() => mode,	2✔
27	[showAllCardsHorizontal, mode],	2✔
28	);	2✔
29
30	const layoutOptions = useMemo(	2✔
31	() => ({	2✔
32	alternating: buttonTexts?.changeLayoutOptions.alternating,	2✔
33	horizontal: buttonTexts?.changeLayoutOptions.horizontal,	2✔
34	horizontal_all: buttonTexts?.changeLayoutOptions.horizontal_all,	2✔
35	vertical: buttonTexts?.changeLayoutOptions.vertical,	2✔
36	}),	2✔
37	[],	2✔
38	);	2✔
39
40	const verticalItems = useMemo(	2✔
41	() => [	2✔
42	{	2✔
43	description: layoutOptions.vertical.helpText,	2✔
44	id: 'VERTICAL',	2✔
45	onSelect: () => onUpdateTimelineMode('VERTICAL'),	2✔
46	selected: activeTimelineMode === 'VERTICAL',	2✔
47	title: layoutOptions.vertical.text,	2✔
48	},	2✔
49	{	2✔
50	description: layoutOptions.alternating.helpText,	2✔
51	id: 'VERTICAL_ALTERNATING',	2✔
52	onSelect: () => onUpdateTimelineMode('VERTICAL_ALTERNATING'),	2✔
53	selected: activeTimelineMode === 'VERTICAL_ALTERNATING',	2✔
54	title: layoutOptions.alternating.text,	2✔
55	},	2✔
56	],	2✔
57	[activeTimelineMode],	2✔
58	);	2✔
59
60	// horizontal list OF options when the mode is `HORIZONTAL`
61	const horizontalItems = useMemo(	2✔
62	() => [	2✔
63	{	2✔
64	description: layoutOptions.horizontal.helpText,	2✔
65	id: 'HORIZONTAL',	2✔
66	onSelect: () => {	2✔
67	onUpdateTimelineMode('HORIZONTAL');	×
UNCOV 68	},	×
69	selected: activeTimelineMode === 'HORIZONTAL',	2✔
70	title: layoutOptions.horizontal.text,	2✔
71	},	2✔
72	{	2✔
73	description: layoutOptions.horizontal_all.helpText,	2✔
74	id: 'HORIZONTAL_ALL',	2✔
75	onSelect: () => {	2✔
76	onUpdateTimelineMode('HORIZONTAL_ALL');	×
UNCOV 77	},	×
78	selected: activeTimelineMode === 'HORIZONTAL_ALL',	2✔
79	title: layoutOptions.horizontal.text,	2✔
80	},	2✔
81	],	2✔
82	[activeTimelineMode],	2✔
83	);	2✔
84
85	return (	2✔
86	<PopOver	2✔
87	placeholder={buttonTexts.changeLayout}	2✔
88	position={position}	2✔
89	theme={theme}	2✔
90	isDarkMode={isDarkMode}	2✔
91	icon={LayoutIconMemo}	2✔
92	$isMobile={isMobile}	2✔
93	>
94	<List	2✔
95	items={	2✔
96	mode === 'HORIZONTAL' \|\| mode === 'HORIZONTAL_ALL'	2✔
97	? horizontalItems	1✔
98	: verticalItems	1✔
99	}
100	theme={theme}	2✔
101	multiSelectable	2✔
102	/>	2✔
103	</PopOver>	2✔
104	);
105	};	2✔
106
107	const QuickJump: FunctionComponent<QuickJumpProp> = ({	1✔
108	activeItem,	×
109	items,	×
110	theme,	×
111	onActivateItem,	×
112	isDarkMode,	×
113	position,	×
114	isMobile,	×
115	}: QuickJumpProp) => {	×
UNCOV 116	const { memoizedButtonTexts: buttonTexts } = useStableContext();	×
117
UNCOV 118	const ArrowDownIconMemo = useMemo(() => <ArrowDownIcon />, []);	×
119
120	return (	×
121	<PopOver	×
122	placeholder={buttonTexts.jumpTo}	×
123	position={position}	×
124	theme={theme}	×
125	width={400}	×
126	isDarkMode={isDarkMode}	×
127	$isMobile={isMobile}	×
UNCOV 128	icon={ArrowDownIconMemo}	×
129	>
130	<List	×
131	items={items.map((item, index) => ({	×
132	active: index === activeItem,	×
133	description: item.description,	×
134	id: item.id,	×
135	label: item.title,	×
136	onSelect: () => {},	×
137	title: item.title ?? `Item ${index + 1}`,	×
138	}))}	×
139	theme={theme}	×
140	onClick={onActivateItem}	×
141	/>	×
UNCOV 142	</PopOver>	×
143	);
UNCOV 144	};	×
145
146	const ChangeDensity: FunctionComponent<ChangeDensityProp> = ({	1✔
147	onChange,	7✔
148	selectedDensity,	7✔
149	theme,	7✔
150	isDarkMode,	7✔
151	position,	7✔
152	isMobile,	7✔
153	}) => {	7✔
154	const { memoizedButtonTexts: buttonTexts } = useStableContext();	7✔
155
156	const ParaIconMemo = useMemo(() => <ParaIcon />, []);	7✔
157
158	const items = useMemo(	7✔
159	() => [	7✔
160	{	6✔
161	description: 'Show less text',	6✔
162	id: 'LOW',	6✔
163	onSelect: () => onChange('LOW'),	6✔
164	selected: selectedDensity === 'LOW',	6✔
165	title: 'Low',	6✔
166	},	6✔
167	{	6✔
168	description: 'Show more text',	6✔
169	id: 'HIGH',	6✔
170	onSelect: () => onChange('HIGH'),	6✔
171	selected: selectedDensity === 'HIGH',	6✔
172	title: 'High',	6✔
173	},	6✔
174	],	6✔
175	[selectedDensity],	7✔
176	);	7✔
177
178	return (	7✔
179	<PopOver	7✔
180	placeholder={buttonTexts.changeDensity}	7✔
181	theme={theme}	7✔
182	isDarkMode={isDarkMode}	7✔
183	position={position}	7✔
184	$isMobile={isMobile}	7✔
185	width={300}	7✔
186	icon={ParaIconMemo}	7✔
187	>
188	<List items={items} theme={theme} multiSelectable />	7✔
189	</PopOver>	7✔
190	);
191	};	7✔
192
193	export { ChangeDensity, LayoutSwitcher, QuickJump };

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