test: added new test cases and added testid in side note component

Author: yaswanth-deriv

src/components/SideNote/__test__/SideNote.spec.tsx

@@ -3,6 +3,21 @@ import { render, fireEvent } from "@testing-library/react";
 import { SideNote } from "..";
 
 describe("SideNote Component", () => {
+
+  it("renders properly with default props", () => {
+    const { getByText, queryByTestId, container } = render(
+      <SideNote>
+        <div>Child content</div>
+      </SideNote>,
+    );
+    const title = queryByTestId("dt_deriv-side-note-title");
+    const content = getByText("Child content");
+    const actionButton = container.getElementsByClassName('deriv-side-note__action');
+    expect(title).not.toBeInTheDocument();
+    expect(content).toBeInTheDocument();
+    expect(actionButton).toHaveLength(0);
+  });
+
   it("renders children and title correctly", () => {
     const { getByText } = render(
       <SideNote title="Title">
@@ -52,7 +67,7 @@ describe("SideNote Component", () => {
 
   it("renders action button with default label if no actionLabel provided", () => {
     const { getByText } = render(
-      <SideNote actionClick={() => {}}>
+      <SideNote actionClick={() => { }}>
         <div>Child content</div>
       </SideNote>
     );

src/components/SideNote/index.tsx

@@ -40,7 +40,7 @@ export const SideNote = ({
 }: PropsWithChildren<SideNoteProps>) => (
     <div className={clsx("deriv-side-note", className)} {...props}>
         {title && (
-            <Text size={titleSize} align="left" weight="bold">
+            <Text data-testid="dt_deriv-side-note-title" size={titleSize} align="left" weight="bold">
                 {title}
             </Text>
         )}

src/components/Text/index.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, ElementType, ReactNode } from "react";
+import React, { CSSProperties,ComponentProps, ElementType, ReactNode } from "react";
 import clsx from "clsx";
 import "./Text.scss";
 
@@ -29,7 +29,7 @@ type TGenericSizes =
     | "xl"
     | "xs";
 
-export interface TextProps {
+export interface TextProps extends ComponentProps<ElementType> {
     align?: CSSProperties["textAlign"];
     as?: ElementType;
     children: ReactNode;
@@ -51,6 +51,7 @@ export const Text = ({
     size = "md",
     weight = "normal",
     className,
+    ...rest
 }: TextProps) => {
     const textClassNames = clsx(
         "deriv-text",
@@ -65,5 +66,5 @@ export const Text = ({
 
     const Tag = as;
 
-    return <Tag className={textClassNames}>{children}</Tag>;
+    return <Tag className={textClassNames} {...rest}>{children}</Tag>;
 };