20405179841

Committed 21 Dec 2025 05:17AM UTC coverage: 88.867% (+48.6%) from 40.235%

Build # 20405179841

Build Type

push

github

Committed by

web-flow

Commit Message

Unit tests for components (#44)

* Added test for disabled button and badge components

* Added tests for first set of components

* Added check around value update process in input components

* Added test for second set of components

* Added test for 3rd set of components

* Handle open on load for drawer and modal components

* Added tests for Drawer and Modal components

* Added test for layer manager

* Added test for Dialog

* Fix minor issues in Diloag and PromtDialog

* Added tests for dialogs

* Added tests for Toast component

* Implementd queue in Notification Manager

* Added test for Notification

* Fixed Notification export

* Fixed skipped tests

* Quick wins to increase coverage

* Production readiness

* Documented Ref forwading

* Added Compatibility Check Workflow

* Fix react 19 compatibility

* Fix tests for react 19

Run Details

920 of 1235 branches covered (74.49%)

Branch coverage included in aggregate %.

318 of 371 new or added lines in 37 files covered. (85.71%)

421 existing lines in 38 files now uncovered.

6591 of 7217 relevant lines covered (91.33%)

24.32 hits per line

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

96.05

/src/components/Button/Button.tsx

import React from 'react';
import styled from '@emotion/styled';
import { getThemeValue, THEME_NAME } from '../../shared/constants';

const StyledButton = styled.button`
    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};
    border-radius: 5px;
    height: 32px;
    min-width: 100px;
    font-size: 14px;
    text-align: center;
    padding: 0 12px;
    cursor: pointer;
    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};
    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};
    margin: 5px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    & svg {
        vertical-align: middle;
        height: 24px;
        width: 24px;
        margin-left: -6px;
        fill: currentColor;
    }

    &:enabled:hover {
        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
        color: ${getThemeValue(THEME_NAME.PRIMARY)};
    }

    &:focus {
        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};
        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
    }

    &:disabled {
        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
        border-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};
        color: ${getThemeValue(THEME_NAME.DISABLED)};
    }
`;

type ButtonProps = {
    /**
     * Type of Button
     * @default 'button'
     */
    type?: 'button' | 'submit' | 'reset';
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

/**
 * Button Component
 * @param props - Component props
 * @param ref - Ref forwarded to the underlying HTMLButtonElement
 */
function ButtonComponent(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
    const { type = 'button', ...rest } = props;

    return <StyledButton ref={ref} type={type} {...rest} />;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(ButtonComponent);

export default Button;

1	import React from 'react';	13✔
2	import styled from '@emotion/styled';	13✔
3	import { getThemeValue, THEME_NAME } from '../../shared/constants';	30✔
4		62✔
5	const StyledButton = styled.button`	62✔
6	border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};	30✔
7	border-radius: 5px;	30✔
8	height: 32px;	30✔
9	min-width: 100px;	30✔
10	font-size: 14px;	30✔
11	text-align: center;	30✔
12	padding: 0 12px;	30!
UNCOV 13	cursor: pointer;	×
UNCOV 14	color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};	×
15	background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};	13✔
16	margin: 5px;	13✔
17	position: relative;	13✔
18	display: inline-flex;	13✔
19	align-items: center;	26✔
20	justify-content: center;	26✔
21		13✔
22	& svg {	13✔
23	vertical-align: middle;	13✔
24	height: 24px;	13✔
25	width: 24px;	13✔
26	margin-left: -6px;	13✔
27	fill: currentColor;	13✔
28	}	13✔
29		13✔
30	&:enabled:hover {	13✔
31	border-color: ${getThemeValue(THEME_NAME.PRIMARY)};	13✔
32	color: ${getThemeValue(THEME_NAME.PRIMARY)};	13✔
33	}	13✔
34		13✔
35	&:focus {	13✔
36	border-color: ${getThemeValue(THEME_NAME.PRIMARY)};	13✔
37	box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};	13✔
38	}	13✔
39		13✔
40	&:disabled {	13✔
41	background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};	13✔
42	border-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};	13✔
43	color: ${getThemeValue(THEME_NAME.DISABLED)};	13✔
44	}	13✔
45	`;	13✔
46		13✔
47	type ButtonProps = {	13✔
48	/**	13✔
49	* Type of Button	13✔
50	* @default 'button'	13✔
51	*/	13✔
52	type?: 'button' \| 'submit' \| 'reset';	13✔
53	} & React.ButtonHTMLAttributes<HTMLButtonElement>;	13✔
54		13✔
55	/**	13✔
56	* Button Component	13✔
57	* @param props - Component props	13✔
58	* @param ref - Ref forwarded to the underlying HTMLButtonElement	13✔
59	*/	13✔
60	function ButtonComponent(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {	13✔
61	const { type = 'button', ...rest } = props;	13✔
62		13✔
63	return <StyledButton ref={ref} type={type} {...rest} />;	13✔
64	}	13✔
65		13✔
66	const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(ButtonComponent);	13✔
67		13✔
68	export default Button;	13✔

pushkar8723 / no-frills-ui / 20405179841

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