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

83.67

/src/utils/mediaQueryUtils.ts

/**
 * Media query utility functions for handling responsive behaviors
 */

/**
 * Creates and returns a MediaQueryList object
 * @param query - CSS media query string (e.g. '(max-width: 768px)')
 * @returns MediaQueryList object or null if browser doesn't support matchMedia
 */
export function createMediaQuery(query: string): MediaQueryList | null {
  if (typeof window === 'undefined') return null;

  try {
    return window.matchMedia(query);
  } catch (error) {
    console.error('Error creating media query:', error);
    return null;
  }
}

/**
 * Adds change and resize listeners for the provided media query
 * @param currentMedia - MediaQueryList object to attach listeners to
 * @param handleMediaChange - Callback function for media query changes
 * @param handleResize - Callback function for window resize events
 */
export function addMediaListeners(
  currentMedia: MediaQueryList | null,
  handleMediaChange: (event: MediaQueryListEvent | MediaQueryList) => void,
  handleResize: () => void,
): void {
  if (!currentMedia || typeof window === 'undefined') return;

  try {
    currentMedia.addEventListener('change', handleMediaChange);
    window.addEventListener('resize', handleResize);
  } catch (error) {
    console.error('Error adding media listeners:', error);
  }
}

/**
 * Removes change and resize listeners to prevent memory leaks
 * @param currentMedia - MediaQueryList object to detach listeners from
 * @param handleMediaChange - Callback function to remove from media query changes
 * @param handleResize - Callback function to remove from window resize events
 */
export function removeMediaListeners(
  currentMedia: MediaQueryList | null,
  handleMediaChange: (event: MediaQueryListEvent | MediaQueryList) => void,
  handleResize: () => void,
): void {
  if (typeof window === 'undefined') return;

  try {
    if (currentMedia) {
      currentMedia.removeEventListener('change', handleMediaChange);
    }
    window.removeEventListener('resize', handleResize);
  } catch (error) {
    console.error('Error removing media listeners:', error);
  }
}

1	/**
2	* Media query utility functions for handling responsive behaviors
3	*/
4
5	/**
6	* Creates and returns a MediaQueryList object
7	* @param query - CSS media query string (e.g. '(max-width: 768px)')
8	* @returns MediaQueryList object or null if browser doesn't support matchMedia
9	*/
10	export function createMediaQuery(query: string): MediaQueryList \| null {	1✔
11	if (typeof window === 'undefined') return null;	15!
12
13	try {	15✔
14	return window.matchMedia(query);	15✔
15	} catch (error) {	15✔
16	console.error('Error creating media query:', error);	1✔
17	return null;	1✔
18	}	1✔
19	}	15✔
20
21	/**
22	* Adds change and resize listeners for the provided media query
23	* @param currentMedia - MediaQueryList object to attach listeners to
24	* @param handleMediaChange - Callback function for media query changes
25	* @param handleResize - Callback function for window resize events
26	*/
27	export function addMediaListeners(	1✔
28	currentMedia: MediaQueryList \| null,	10✔
29	handleMediaChange: (event: MediaQueryListEvent \| MediaQueryList) => void,	10✔
30	handleResize: () => void,	10✔
31	): void {	10✔
32	if (!currentMedia \|\| typeof window === 'undefined') return;	10✔
33
34	try {	9✔
35	currentMedia.addEventListener('change', handleMediaChange);	9✔
36	window.addEventListener('resize', handleResize);	9✔
37	} catch (error) {	10!
UNCOV 38	console.error('Error adding media listeners:', error);	×
UNCOV 39	}	×
40	}	10✔
41
42	/**
43	* Removes change and resize listeners to prevent memory leaks
44	* @param currentMedia - MediaQueryList object to detach listeners from
45	* @param handleMediaChange - Callback function to remove from media query changes
46	* @param handleResize - Callback function to remove from window resize events
47	*/
48	export function removeMediaListeners(	1✔
49	currentMedia: MediaQueryList \| null,	10✔
50	handleMediaChange: (event: MediaQueryListEvent \| MediaQueryList) => void,	10✔
51	handleResize: () => void,	10✔
52	): void {	10✔
53	if (typeof window === 'undefined') return;	10!
54
55	try {	10✔
56	if (currentMedia) {	10✔
57	currentMedia.removeEventListener('change', handleMediaChange);	9✔
58	}	9✔
59	window.removeEventListener('resize', handleResize);	10✔
60	} catch (error) {	10!
UNCOV 61	console.error('Error removing media listeners:', error);	×
UNCOV 62	}	×
63	}	10✔

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