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

90.54

/src/components/Button/ActionButton.tsx

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

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

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

    &:enabled:hover {
        box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};
    }

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

    &:disabled {
        border: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};
        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
        color: ${getThemeValue(THEME_NAME.DISABLED)};
    }
`;

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

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

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

const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(ActionButtonComponent);

export default ActionButton;

1	import React from 'react';	13✔
2	import styled from '@emotion/styled';	13✔
3	import { THEME_NAME, getThemeValue } from '../../shared/constants';	23✔
4		44✔
5	const StyledActionButton = styled.button`	44✔
6	border: 1px solid ${getThemeValue(THEME_NAME.PRIMARY)};	23✔
7	background-color: ${getThemeValue(THEME_NAME.PRIMARY)};	23✔
8	color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};	23!
9	border-radius: 5px;	×
UNCOV 10	height: 32px;	×
UNCOV 11	min-width: 100px;	×
UNCOV 12	font-size: 14px;	×
UNCOV 13	text-align: center;	×
UNCOV 14	padding: 0 12px;	×
15	cursor: pointer;	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	fill: currentColor;	13✔
27	margin-left: -6px;	13✔
28	}	13✔
29		13✔
30	&:enabled:hover {	13✔
31	box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};	13✔
32	}	13✔
33		13✔
34	&:focus {	13✔
35	box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};	13✔
36	}	13✔
37		13✔
38	&:disabled {	13✔
39	border: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};	13✔
40	background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};	13✔
41	color: ${getThemeValue(THEME_NAME.DISABLED)};	13✔
42	}	13✔
43	`;	13✔
44		13✔
45	type ActionButtonProps = {	13✔
46	/**	13✔
47	* Type of Action Button	13✔
48	* @default 'button'	13✔
49	*/	13✔
50	type?: 'button' \| 'submit' \| 'reset';	13✔
51	} & React.ButtonHTMLAttributes<HTMLButtonElement>;	13✔
52		13✔
53	/**	13✔
54	* ActionButton Component	13✔
55	* @param props - Component props	13✔
56	* @param ref - Ref forwarded to the underlying HTMLButtonElement	13✔
57	*/	13✔
58	function ActionButtonComponent(props: ActionButtonProps, ref: React.Ref<HTMLButtonElement>) {	13✔
59	const { type = 'button', ...rest } = props;	13✔
60		13✔
61	return <StyledActionButton ref={ref} type={type} {...rest} />;	13✔
62	}	13✔
63		13✔
64	const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(ActionButtonComponent);	13✔
65		13✔
66	export default ActionButton;	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