feat: add test ids (#82)

Author: malinovic

src/components/button/button.tsx

@@ -10,9 +10,10 @@ export type ButtonProps = {
 	size: 'm' | 'l';
 	Icon?: ComponentType<IconProps>;
 	noLabel?: boolean;
+	testid?: string;
 };
 
-export const Button: FC<ButtonProps> = ({ label, onClick, color, noBorder = false, size, Icon, noLabel }) => {
+export const Button: FC<ButtonProps> = ({ label, onClick, color, noBorder = false, size, Icon, noLabel, testid }) => {
 	const baseClasses = `leading-none text-base transition-all duration-300 hover:ring active:ring-4 focus:outline-none flex items-center justify-center`;
 	const sizeClasses = size === 'l' || noLabel ? 'px-m py-s' : 'p-3';
 	const colorClasses = {
@@ -32,7 +33,8 @@ export const Button: FC<ButtonProps> = ({ label, onClick, color, noBorder = fals
 				colorClasses[color],
 				noBorder ? noBorderOverride : '',
 				noLabel ? 'rounded-full px-s' : 'w-full rounded-s',
-			)}>
+			)}
+			data-testid={testid}>
 			{!noLabel && <span className={Icon ? (size === 'l' ? 'mr-3' : 'mr-xs') : ''}>{label}</span>}
 			{Icon && <Icon size="s" color="white" />}
 		</button>

src/components/comment-button/comment-button.tsx

@@ -11,6 +11,7 @@ export type CommentButtonProps = {
 		plural: string;
 	};
 	onClick: () => void; // This should update the count and hasCommented state in the parent component
+	testid?: string;
 };
 
 const getCommentText = (count: number, labels: { zero: string; singular: string; plural: string }) => {
@@ -23,7 +24,7 @@ const getCommentText = (count: number, labels: { zero: string; singular: string;
 	}
 };
 
-export const CommentButton: React.FC<CommentButtonProps> = ({ count, hasCommented, labels, onClick }) => {
+export const CommentButton: React.FC<CommentButtonProps> = ({ count, hasCommented, labels, onClick, testid }) => {
 	const label = getCommentText(count, labels);
 
 	const handleCommentClick = () => {
@@ -43,6 +44,7 @@ export const CommentButton: React.FC<CommentButtonProps> = ({ count, hasCommente
 			icon={<ReplyIcon size="s" color="base" />}
 			hoveredIcon={<ReplyIcon size="s" color="primary" />}
 			toggledIcon={<ReplyIcon size="s" color="primary" filled={true} />}
+			testid={testid}
 		/>
 	);
 };

src/components/copy-link-button/copy-link-button.tsx

@@ -8,11 +8,12 @@ export type CopyLinkProps = {
 		active: string;
 	};
 	onClick: () => void;
+	testid?: string;
 };
 
 let timer: NodeJS.Timeout;
 
-export const CopyLinkButton: React.FC<CopyLinkProps> = ({ labels, onClick }) => {
+export const CopyLinkButton: React.FC<CopyLinkProps> = ({ labels, onClick, testid }) => {
 	const [isCopied, setIsCopied] = useState(false);
 	const [label, setLabel] = useState(labels.default);
 	const [disabled, setDisabled] = useState(false);
@@ -52,6 +53,7 @@ export const CopyLinkButton: React.FC<CopyLinkProps> = ({ labels, onClick }) =>
 			color="base"
 			disabled={disabled}
 			icon={<ShareIcon size="s" color="base" />}
+			testid={testid}
 		/>
 	);
 };

src/components/modal/modal.tsx

@@ -18,7 +18,7 @@ export interface ModalProps {
 export const Modal: FC<ModalProps> = ({ children, title, isOpen, width, onClose, onSubmit }) => {
 	return (
 		<Transition appear show={isOpen} as={Fragment}>
-			<Dialog as="div" className="relative z-30" onClose={onClose}>
+			<Dialog as="div" className="relative z-50" onClose={onClose}>
 				<Transition.Child
 					as={Fragment}
 					enter="ease-out duration-300"

src/components/toggle/toggle.tsx

@@ -12,6 +12,7 @@ export type ToggleProps = {
 	toggledIcon?: ReactElement;
 	hoveredIcon?: ReactElement;
 	disabled?: boolean;
+	testid?: string;
 };
 
 export const Toggle: FC<ToggleProps> = ({
@@ -24,6 +25,7 @@ export const Toggle: FC<ToggleProps> = ({
 	toggledIcon,
 	hoveredIcon,
 	disabled,
+	testid,
 }) => {
 	const [isHovered, setIsHovered] = useState(false);
 
@@ -67,7 +69,8 @@ export const Toggle: FC<ToggleProps> = ({
 			onClick={handleToggle}
 			onMouseOver={() => setIsHovered(!disabled && !isToggled)}
 			onMouseOut={() => setIsHovered(false)}
-			className={classnames(baseClasses, colorClasses[color], disabled ? 'cursor-default' : '')}>
+			className={classnames(baseClasses, colorClasses[color], disabled ? 'cursor-default' : '')}
+			data-testid={testid}>
 			{renderIcon()}
 			<span className={getLabelClasses()}>{label}</span>
 		</button>