feat: suggestion test cases

Author: yaslam-dev

src/components/Sugggestion/Header/index.spec.tsx

@@ -0,0 +1,47 @@
+import { render } from '@testing-library/react';
+import { Header } from './index';
+
+describe('Header', () => {
+  it('renders category and description', () => {
+    const category = 'Category';
+    const description = 'Description';
+    const { getByTestId } = render(<Header category={category} description={description} />);
+
+    expect(getByTestId('category')).toBeInTheDocument();
+    expect(getByTestId('category')).toHaveTextContent('Problem Category:');
+    expect(getByTestId('category')).toHaveTextContent('Category');
+
+    expect(getByTestId('description')).toBeInTheDocument();
+    expect(getByTestId('description')).toHaveTextContent('Problem Description:');
+    expect(getByTestId('description')).toHaveTextContent('Description');
+  });
+
+  it('renders only category', () => {
+    const category = 'Category';
+    const { getByTestId, queryByTestId } = render(<Header category={category} />);
+
+    expect(getByTestId('category')).toBeInTheDocument();
+    expect(getByTestId('category')).toHaveTextContent('Problem Category:');
+    expect(getByTestId('category')).toHaveTextContent('Category');
+
+    expect(queryByTestId('description')).toBeNull();
+  });
+
+  it('renders only description', () => {
+    const description = 'Description';
+    const { getByTestId, queryByTestId } = render(<Header description={description} />);
+
+    expect(queryByTestId('category')).toBeNull();
+
+    expect(getByTestId('description')).toBeInTheDocument();
+    expect(getByTestId('description')).toHaveTextContent('Problem Description:');
+    expect(getByTestId('description')).toHaveTextContent('Description');
+  });
+
+  it('does not render anything when neither category nor description is provided', () => {
+    const { queryByTestId } = render(<Header />);
+
+    expect(queryByTestId('category')).toBeNull();
+    expect(queryByTestId('description')).toBeNull();
+  });
+});

src/components/Sugggestion/Header/index.tsx

@@ -9,7 +9,7 @@ export const Header = ({ category, description }: HeaderProps): JSX.Element => {
   return (
     <>
       {category && (
-        <Box width='100%'>
+        <Box width='100%' data-testid='category'>
           <Typography component='span' variant='subtitle1' color='whitesmoke' fontWeight={600}>
             Problem Category:
           </Typography>{' '}
@@ -20,7 +20,7 @@ export const Header = ({ category, description }: HeaderProps): JSX.Element => {
       )}
 
       {description && (
-        <Box width='100%'>
+        <Box width='100%' data-testid='description'>
           <Typography variant='subtitle1' component='span' fontWeight={600} color='whitesmoke'>
             Problem Description:
           </Typography>{' '}

src/components/Sugggestion/Pagination/index.spec.tsx

@@ -0,0 +1,92 @@
+import { fireEvent, render } from '@testing-library/react';
+import { RecommendationPagination, RecommendationPaginationProps } from './index';
+
+describe('RecommendationPagination', () => {
+  it('renders pagination buttons when shouldRenderPagination is true', () => {
+    const props: RecommendationPaginationProps = {
+      gotoNextPage: jest.fn(),
+      gotoPreviousPage: jest.fn(),
+      handleApplyRecommendation: jest.fn(),
+      shouldRenderPagination: true,
+      currentPage: 1,
+      totalPages: 5,
+    };
+    const { getByTestId } = render(<RecommendationPagination {...props} />);
+    const applyButton = getByTestId('apply-button');
+    const gotoPreviousButton = getByTestId('goto-previous-button');
+    const gotoNextButton = getByTestId('goto-next-button');
+
+    expect(applyButton).toBeInTheDocument();
+    expect(gotoPreviousButton).toBeInTheDocument();
+    expect(gotoNextButton).toBeInTheDocument();
+  });
+
+  it('does not render pagination buttons when shouldRenderPagination is false', () => {
+    const props: RecommendationPaginationProps = {
+      gotoNextPage: jest.fn(),
+      gotoPreviousPage: jest.fn(),
+      handleApplyRecommendation: jest.fn(),
+      shouldRenderPagination: false,
+      currentPage: 1,
+      totalPages: 5,
+    };
+
+    const { getByTestId, queryByTestId } = render(<RecommendationPagination {...props} />);
+
+    expect(getByTestId('apply-button')).toBeInTheDocument();
+    expect(queryByTestId('goto-previous-button')).toBeNull();
+    expect(queryByTestId('goto-next-button')).toBeNull();
+  });
+
+  it('calls gotoNextPage when Next Page button is clicked', () => {
+    const gotoNextPageMock = jest.fn();
+    const props: RecommendationPaginationProps = {
+      gotoNextPage: gotoNextPageMock,
+      gotoPreviousPage: jest.fn(),
+      handleApplyRecommendation: jest.fn(),
+      shouldRenderPagination: true,
+      currentPage: 1,
+      totalPages: 5,
+    };
+    const { getByTestId } = render(<RecommendationPagination {...props} />);
+
+    const gotoNextButton = getByTestId('goto-next-button');
+    fireEvent.click(gotoNextButton);
+    expect(gotoNextPageMock).toHaveBeenCalled();
+  });
+
+  it('calls gotoPreviousPage when Previous Page button is clicked', () => {
+    const gotoPreviousPageMock = jest.fn();
+    const props: RecommendationPaginationProps = {
+      gotoNextPage: jest.fn(),
+      gotoPreviousPage: gotoPreviousPageMock,
+      handleApplyRecommendation: jest.fn(),
+      shouldRenderPagination: true,
+      currentPage: 1,
+      totalPages: 5,
+    };
+    const { getByTestId } = render(<RecommendationPagination {...props} />);
+
+    const gotoPreviousButton = getByTestId('goto-previous-button');
+    fireEvent.click(gotoPreviousButton);
+    expect(gotoPreviousPageMock).toHaveBeenCalled();
+  });
+
+  it('calls handleApplyRecommendation when Apply button is clicked', () => {
+    const handleApplyRecommendationMock = jest.fn();
+    const props: RecommendationPaginationProps = {
+      gotoNextPage: jest.fn(),
+      gotoPreviousPage: jest.fn(),
+      handleApplyRecommendation: handleApplyRecommendationMock,
+      shouldRenderPagination: true,
+      currentPage: 1,
+      totalPages: 5,
+    };
+
+    const { getByTestId } = render(<RecommendationPagination {...props} />);
+
+    const applyButton = getByTestId('apply-button');
+    fireEvent.click(applyButton);
+    expect(handleApplyRecommendationMock).toHaveBeenCalled();
+  });
+});

src/components/Sugggestion/Pagination/index.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, ButtonGroup, SxProps } from '@mui/material';
 import { useMemo } from 'react';
 
-interface RecommendationPaginationProps {
+export interface RecommendationPaginationProps {
   gotoNextPage: () => void;
   gotoPreviousPage: () => void;
   handleApplyRecommendation: () => void;
@@ -65,6 +65,7 @@ export const RecommendationPagination = ({
             }}
           >
             <Button
+              data-testid='goto-previous-button'
               color='primary'
               onClick={gotoPreviousPage}
               disabled={isLeftArrowDisabled}
@@ -84,6 +85,7 @@ export const RecommendationPagination = ({
               </svg>
             </Button>
             <Button
+              data-testid='goto-next-button'
               color='primary'
               onClick={gotoNextPage}
               disabled={isRightArrowDisabled}
@@ -106,6 +108,7 @@ export const RecommendationPagination = ({
         )}
 
         <Button
+          data-testid='apply-button'
           variant='contained'
           sx={{
             justifyContent: 'flex-end',

src/components/Sugggestion/Recommendation/Skeleton.spec.tsx

@@ -0,0 +1,24 @@
+import { RenderResult, render } from '@testing-library/react';
+import { RecommendationSkeletonLoader } from './Skeleton';
+
+describe('RecommendationSkeletonLoader', () => {
+  it('renders without crashing', () => {
+    const { getByTestId }: RenderResult = render(<RecommendationSkeletonLoader />);
+    const skeletonElement = getByTestId('recommendation-skeleton');
+    expect(skeletonElement).toBeInTheDocument();
+  });
+
+  it('renders a Skeleton component with 100% width', () => {
+    const { getByTestId }: RenderResult = render(<RecommendationSkeletonLoader />);
+    const skeletonElement = getByTestId('recommendation-skeleton');
+    expect(skeletonElement).toBeInTheDocument();
+    expect(skeletonElement).toHaveStyle('width: 100%');
+  });
+
+  it('renders a Skeleton component with 100px height', () => {
+    const { getByTestId }: RenderResult = render(<RecommendationSkeletonLoader />);
+    const skeletonElement = getByTestId('recommendation-skeleton');
+    expect(skeletonElement).toBeInTheDocument();
+    expect(skeletonElement).toHaveStyle('height: 100px');
+  });
+});

src/components/Sugggestion/Recommendation/Skeleton.tsx

@@ -2,8 +2,6 @@ import { Skeleton } from '@mui/material';
 
 export const RecommendationSkeletonLoader = (): JSX.Element => {
   return (
-    <>
-      <Skeleton variant='rounded' width='100%' height='100px' />
-    </>
+    <Skeleton data-testid='recommendation-skeleton' variant='rounded' width='100%' height='100px' />
   );
 };

src/components/Sugggestion/Recommendation/index.spec.tsx

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import { Recommendation } from './index';
+
+describe('Recommendation', () => {
+  it('renders without crashing', () => {
+    const text = 'This is a sample text';
+    const { getByText } = render(<Recommendation text={text} />);
+    const textElement = getByText(text);
+    expect(textElement).toBeInTheDocument();
+  });
+
+  it('renders Markdown text correctly', () => {
+    const text = 'This is a sample text';
+    const { getByTestId } = render(<Recommendation text={text} />);
+    const markdownTextElement = getByTestId('markdown-text');
+    expect(markdownTextElement).toBeInTheDocument();
+    expect(markdownTextElement).toHaveTextContent(`~~~${text}~~~`);
+  });
+
+  it('renders SyntaxHighlighter for code blocks', () => {
+    const codeText = 'console.log("Hello, world!")';
+    const { getByTestId } = render(<Recommendation text={codeText} />);
+    const codeBlockElement = getByTestId('code-block');
+    expect(codeBlockElement).toBeInTheDocument();
+    expect(codeBlockElement).toHaveTextContent(codeText);
+  });
+});

src/components/Sugggestion/Recommendation/index.tsx

@@ -21,14 +21,15 @@ export const Recommendation = ({ text }: RecommendationProps): JSX.Element => {
 
             return !inline && match ? (
               <SyntaxHighlighter
+                data-testid='code-block'
                 {...props}
                 children={String(children).replace(/\n$/, '')}
                 style={dark}
                 language={match[1]}
                 PreTag='div'
               />
             ) : (
-              <code {...props} className={className}>
+              <code data-testid='markdown-text' {...props} className={className}>
                 {children}
               </code>
             );