13429304909

Committed 19 Feb 2025 10:41AM UTC coverage: 91.956% (+0.1%) from 91.854%

Build # 13429304909

Build Type

push

github

Committed by

bedrich-schindler

Commit Message

Replace `jsdom` with `happy-dom` testing environment to enable `Modal` tests (#461)

`happy-dom` is used due to missing HtmlDialogElement support in `jest`.
Just to mention, `happy-dom` provides partial support for dialog element,
so not all test can be implemented.

Coverage Stats

785 of 859 branches covered (91.39%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

4 existing lines in 3 files now uncovered.

724 of 782 relevant lines covered (92.58%)

72.79 hits per line

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

92.59

/src/components/Modal/_hooks/useModalScrollPrevention.js

import { useLayoutEffect } from 'react';

export const useModalScrollPrevention = (preventScrollUnderneath) => {
  useLayoutEffect(
    () => {
      if (preventScrollUnderneath === 'off') {
        return () => {};
      }

      if (preventScrollUnderneath instanceof HTMLElement) {
        const scrollableElement = preventScrollUnderneath;

        const scrollbarWidth = Math.abs(window.innerWidth - window.document.documentElement.clientWidth);
        const prevOverflow = scrollableElement.style.overflow;
        const prevPaddingRight = scrollableElement.style.paddingRight;

        scrollableElement.style.overflow = 'hidden';

        if (Number.isNaN(parseInt(prevPaddingRight, 10))) {
          scrollableElement.style.paddingRight = `${scrollbarWidth}px`;
        } else {
          scrollableElement.style.paddingRight = `calc(${prevPaddingRight} + ${scrollbarWidth}px)`;
        }

        return () => {
          scrollableElement.style.overflow = prevOverflow;
          scrollableElement.style.paddingRight = prevPaddingRight;
        };
      }

      preventScrollUnderneath?.start();

      return preventScrollUnderneath?.reset;
    },
    [preventScrollUnderneath],
  );
};

1	import { useLayoutEffect } from 'react';
2
3	export const useModalScrollPrevention = (preventScrollUnderneath) => {	4✔
4	useLayoutEffect(	50✔
5	() => {
6	if (preventScrollUnderneath === 'off') {	50✔
7	return () => {};	2✔
8	}
9
10	if (preventScrollUnderneath instanceof HTMLElement) {	48✔
11	const scrollableElement = preventScrollUnderneath;	46✔
12
13	const scrollbarWidth = Math.abs(window.innerWidth - window.document.documentElement.clientWidth);	46✔
14	const prevOverflow = scrollableElement.style.overflow;	46✔
15	const prevPaddingRight = scrollableElement.style.paddingRight;	46✔
16
17	scrollableElement.style.overflow = 'hidden';	46✔
18
19	if (Number.isNaN(parseInt(prevPaddingRight, 10))) {	46!
20	scrollableElement.style.paddingRight = `${scrollbarWidth}px`;	46✔
21	} else {
UNCOV 22	scrollableElement.style.paddingRight = `calc(${prevPaddingRight} + ${scrollbarWidth}px)`;	×
23	}
24
25	return () => {	46✔
26	scrollableElement.style.overflow = prevOverflow;	46✔
27	scrollableElement.style.paddingRight = prevPaddingRight;	46✔
28	};
29	}
30
31	preventScrollUnderneath?.start();	2✔
32
33	return preventScrollUnderneath?.reset;	2✔
34	},
35	[preventScrollUnderneath],
36	);
37	};

react-ui-org / react-ui / 13429304909

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