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.

Run Details

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

94.44

/src/components/Modal/_hooks/useModalFocus.js

import { useEffect } from 'react';

export const useModalFocus = (
  autoFocus,
  dialogRef,
  primaryButtonRef,
) => {
  useEffect(
    () => {
      // Following code finds all focusable elements and among them first not disabled form
      // field element (input, textarea or select) or primary button and focuses it. This is
      // necessary to have focus on one of those elements to be able to submit the form
      // by pressing Enter key. If there are neither, it tries to focus any other focusable
      // elements. In case there are none or `autoFocus` is disabled, dialogElement
      // (Modal itself) is focused.

      const dialogElement = dialogRef.current;

      if (dialogElement == null) {
        return () => {};
      }

      const childrenFocusableElements = Array.from(
        dialogElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
      );

      const firstFocusableElement = childrenFocusableElements[0];

      if (!autoFocus || childrenFocusableElements.length === 0) {
        dialogElement.tabIndex = -1;
        dialogElement.focus();
        return () => {};
      }

      const firstFormFieldEl = childrenFocusableElements.find(
        (element) => ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.nodeName) && !element.disabled,
      );

      if (firstFormFieldEl) {
        firstFormFieldEl.focus();
        return () => {};
      }

      if (primaryButtonRef?.current != null && primaryButtonRef?.current?.disabled === false) {
        primaryButtonRef.current.focus();
        return () => {};
      }

      firstFocusableElement.focus();

      return () => {};
    },
    [
      autoFocus,
      dialogRef,
      primaryButtonRef,
    ],
  );
};

1	import { useEffect } from 'react';
2
3	export const useModalFocus = (	4✔
4	autoFocus,
5	dialogRef,
6	primaryButtonRef,
7	) => {
8	useEffect(	50✔
9	() => {
10	// Following code finds all focusable elements and among them first not disabled form
11	// field element (input, textarea or select) or primary button and focuses it. This is
12	// necessary to have focus on one of those elements to be able to submit the form
13	// by pressing Enter key. If there are neither, it tries to focus any other focusable
14	// elements. In case there are none or `autoFocus` is disabled, dialogElement
15	// (Modal itself) is focused.
16
17	const dialogElement = dialogRef.current;	50✔
18
19	if (dialogElement == null) {	50!
UNCOV 20	return () => {};	×
21	}
22
23	const childrenFocusableElements = Array.from(	50✔
24	dialogElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
25	);
26
27	const firstFocusableElement = childrenFocusableElements[0];	50✔
28
29	if (!autoFocus \|\| childrenFocusableElements.length === 0) {	50✔
30	dialogElement.tabIndex = -1;	26✔
31	dialogElement.focus();	26✔
32	return () => {};	26✔
33	}
34
35	const firstFormFieldEl = childrenFocusableElements.find(	24✔
36	(element) => ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.nodeName) && !element.disabled,	28✔
37	);
38
39	if (firstFormFieldEl) {	24✔
40	firstFormFieldEl.focus();	8✔
41	return () => {};	8✔
42	}
43
44	if (primaryButtonRef?.current != null && primaryButtonRef?.current?.disabled === false) {	16✔
45	primaryButtonRef.current.focus();	4✔
46	return () => {};	4✔
47	}
48
49	firstFocusableElement.focus();	12✔
50
51	return () => {};	12✔
52	},
53	[
54	autoFocus,
55	dialogRef,
56	primaryButtonRef,
57	],
58	);
59	};

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