feat: suggestion webview tests

Author: yaslam-dev

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

@@ -0,0 +1,40 @@
+import { render, fireEvent } from '@testing-library/react';
+import { Feedback } from './index';
+
+describe('Feedback', () => {
+  it('renders correctly', () => {
+    const handleDiscardClick = jest.fn();
+    const handleEndorseClick = jest.fn();
+    const { getByTestId } = render(
+      <Feedback handleDiscardClick={handleDiscardClick} handleEndorseClick={handleEndorseClick} />,
+    );
+    const discardButton = getByTestId('discard-button');
+    const endorseButton = getByTestId('endorse-button');
+    expect(discardButton).toBeInTheDocument();
+    expect(endorseButton).toBeInTheDocument();
+  });
+
+  it('calls handleDiscardClick on Discard button click', () => {
+    const handleDiscardClick = jest.fn();
+    const handleEndorseClick = jest.fn();
+    const { getByTestId } = render(
+      <Feedback handleDiscardClick={handleDiscardClick} handleEndorseClick={handleEndorseClick} />,
+    );
+    const discardButton = getByTestId('discard-button');
+    fireEvent.click(discardButton);
+    expect(handleDiscardClick).toHaveBeenCalledTimes(1);
+    expect(handleEndorseClick).not.toHaveBeenCalled();
+  });
+
+  it('calls handleEndorseClick on Endorse button click', () => {
+    const handleDiscardClick = jest.fn();
+    const handleEndorseClick = jest.fn();
+    const { getByTestId } = render(
+      <Feedback handleDiscardClick={handleDiscardClick} handleEndorseClick={handleEndorseClick} />,
+    );
+    const endorseButton = getByTestId('endorse-button');
+    fireEvent.click(endorseButton);
+    expect(handleEndorseClick).toHaveBeenCalledTimes(1);
+    expect(handleDiscardClick).not.toHaveBeenCalled();
+  });
+});

src/components/Sugggestion/Feedback/index.tsx

@@ -1,7 +1,7 @@
 import { Button, ButtonGroup } from '@mui/material';
 import React from 'react';
 
-interface FeedbackProps {
+export interface FeedbackProps {
   handleDiscardClick: React.MouseEventHandler<HTMLButtonElement>;
   handleEndorseClick: React.MouseEventHandler<HTMLButtonElement>;
 }
@@ -13,6 +13,7 @@ export const Feedback = ({
     <>
       <ButtonGroup variant='outlined' size='large' aria-label='large button group'>
         <Button
+          data-testid='discard-button'
           onClick={handleDiscardClick}
           variant='contained'
           color='primary'
@@ -21,6 +22,7 @@ export const Feedback = ({
           Discard
         </Button>
         <Button
+          data-testid='endorse-button'
           onClick={handleEndorseClick}
           variant='contained'
           color='primary'

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

@@ -89,4 +89,40 @@ describe('RecommendationPagination', () => {
     fireEvent.click(applyButton);
     expect(handleApplyRecommendationMock).toHaveBeenCalled();
   });
+
+  it('gotoNextPage Button is Disabled', () => {
+    const handleApplyRecommendationMock = jest.fn();
+    const props: RecommendationPaginationProps = {
+      gotoNextPage: jest.fn(),
+      gotoPreviousPage: jest.fn(),
+      handleApplyRecommendation: handleApplyRecommendationMock,
+      shouldRenderPagination: true,
+      currentPage: 5,
+      totalPages: 5,
+    };
+
+    const { getByTestId } = render(<RecommendationPagination {...props} />);
+
+    const gotoNextButton = getByTestId('goto-next-button');
+    expect(gotoNextButton).toBeInTheDocument();
+    expect(gotoNextButton).toHaveAttribute('disabled');
+  });
+
+  it('gotoPrevPage Button is Disabled', () => {
+    const handleApplyRecommendationMock = jest.fn();
+    const props: RecommendationPaginationProps = {
+      gotoNextPage: jest.fn(),
+      gotoPreviousPage: jest.fn(),
+      handleApplyRecommendation: handleApplyRecommendationMock,
+      shouldRenderPagination: true,
+      currentPage: 0,
+      totalPages: 5,
+    };
+
+    const { getByTestId } = render(<RecommendationPagination {...props} />);
+
+    const gotoPreviousButton = getByTestId('goto-previous-button');
+    expect(gotoPreviousButton).toBeInTheDocument();
+    expect(gotoPreviousButton).toHaveAttribute('disabled');
+  });
 });

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

@@ -3,25 +3,9 @@ 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);
+    const textElement = getByTestId('code-block');
+    expect(textElement).toBeInTheDocument();
   });
 });

src/layout/Layout.spec.tsx

@@ -1,15 +1,22 @@
 import { render, fireEvent } from '@testing-library/react';
-import { RecoilRoot } from 'recoil';
+import { RecoilRoot, useRecoilValue } from 'recoil';
 
 // Manually mock vscode
 jest.mock('vscode');
 import vscode from '../__mocks__/vscode';
 import { Layout } from './Layout';
 import * as State from '../state';
 import { ApplicationWebviewState } from '../types';
+import { useEffect } from 'react';
 
 (global as any).vscode = vscode;
 
+export const RecoilObserver = ({ node, onChange }: any) => {
+  const value = useRecoilValue(node);
+  useEffect(() => onChange(value), [onChange, value]);
+  return null;
+};
+
 describe('Layout component', () => {
   test('renders correctly', () => {
     const { getByText, getByTestId } = render(
@@ -50,4 +57,25 @@ describe('Layout component', () => {
       },
     });
   });
+
+  test('back button click switches to analyze mode', () => {
+    const onChange = jest.fn();
+
+    const { getByTestId, queryByTestId } = render(
+      <RecoilRoot
+        initializeState={({ set }) =>
+          set(State.applicationState, ApplicationWebviewState.SUGGESTION_MODE)
+        }
+      >
+        <RecoilObserver node={State.applicationState} onChange={onChange} />
+        <Layout>
+          <div>Child component</div>
+        </Layout>
+      </RecoilRoot>,
+    );
+
+    expect(queryByTestId('analyze-mode-back-button')).toBeDefined();
+    fireEvent.click(getByTestId('analyze-mode-back-button'));
+    expect(onChange).toHaveBeenCalledWith(ApplicationWebviewState.ANALYZE_MODE);
+  });
 });