From 70c0cc07712795a5f4268b82356f2a85888cc915 Mon Sep 17 00:00:00 2001 From: yashb196 <113057400+yashb196@users.noreply.github.com> Date: Mon, 4 Dec 2023 12:20:13 -0600 Subject: [PATCH] All test cases are now passing result of using moxios and stubs which was missing while initially implementing the test cases --- app/__tests__/search_bar.test.tsx | 76 +++++++++++++++---------------- app/__tests__/sidebar.test.tsx | 22 +++++++-- 2 files changed, 56 insertions(+), 42 deletions(-) diff --git a/app/__tests__/search_bar.test.tsx b/app/__tests__/search_bar.test.tsx index 0535d0ec..2892e754 100644 --- a/app/__tests__/search_bar.test.tsx +++ b/app/__tests__/search_bar.test.tsx @@ -1,68 +1,66 @@ +import React from 'react'; import SearchBar from '../lib/components/search_bar'; // Make sure to adjust the import path import "@testing-library/jest-dom"; import { render, fireEvent } from '@testing-library/react'; +describe('SearchBar Component', () => { + let originalConsoleError: jest.Mock; + let mockOnSearch: jest.Mock; -test('renders the SearchBar component', () => { - render(); -}); -; + beforeEach(() => { + // Mock console.error + originalConsoleError = console.error; + console.error = jest.fn(); + + // Create a mock function for onSearch + mockOnSearch = jest.fn(); + }); + + afterEach(() => { + // Restore original console.error + console.error = originalConsoleError; + }); + + test('renders the SearchBar component', () => { + render(); + }); -test('updates the search input when the user types', () => { - const { getByPlaceholderText } = render(); + test('updates the search input when the user types', () => { + const { getByPlaceholderText } = render(); const searchInput = getByPlaceholderText('Search...'); // Assuming 'Search...' is the placeholder text - - // Simulate user input + fireEvent.change(searchInput, { target: { value: 'Sample Query' } }); - - // Check if the search input value updates correctly expect(searchInput).toHaveValue('Sample Query'); + expect(mockOnSearch).toHaveBeenCalledWith('Sample Query'); }); test('triggers search on pressing Enter key', () => { - const { getByPlaceholderText, getByTestId, queryByText } = render(); + const { getByPlaceholderText } = render(); const searchInput = getByPlaceholderText('Search...'); // Assuming 'Search...' is the placeholder text - const searchButton = getByTestId('search-button'); // Use your custom Test ID here - - // Enter a search query + fireEvent.change(searchInput, { target: { value: 'Sample Query' } }); - - // Press the Enter key fireEvent.keyPress(searchInput, { key: 'Enter', code: 'Enter', charCode: 13 }); - + expect(mockOnSearch).toHaveBeenCalledWith('Sample Query'); }); test('handles large amount of search input', () => { - const { getByPlaceholderText, getByTestId, queryByText } = render(); + const { getByPlaceholderText } = render(); const searchInput = getByPlaceholderText('Search...'); // Assuming 'Search...' is the placeholder text - const searchButton = getByTestId('search-button'); // Use your custom Test ID here - - // Enter a large amount of text in the search input const largeText = 'Lorem ipsum '.repeat(1000); // Creating a large text - + fireEvent.change(searchInput, { target: { value: largeText } }); - - // Press the Enter key fireEvent.keyPress(searchInput, { key: 'Enter', code: 'Enter', charCode: 13 }); - - // Check if the search is aborted or if the component handles it gracefully - // You can check if there are any performance issues - expect(queryByText('Sample Query')).not.toBeInTheDocument(); + expect(mockOnSearch).toHaveBeenCalledWith(largeText); }); test('handles search input with special characters', () => { - const { getByPlaceholderText, getByTestId, queryByText } = render(); + const { getByPlaceholderText } = render(); const searchInput = getByPlaceholderText('Search...'); // Assuming 'Search...' is the placeholder text - const searchButton = getByTestId('search-button'); // Use your custom Test ID here - - // Enter a search query with special characters const specialCharacters = '!@#$%^&*()'; - + fireEvent.change(searchInput, { target: { value: specialCharacters } }); - - // Press the Enter key fireEvent.keyPress(searchInput, { key: 'Enter', code: 'Enter', charCode: 13 }); - - // Check if the search is handled correctly or if any special characters are sanitized - expect(queryByText('Sample Query')).not.toBeInTheDocument(); - }); \ No newline at end of file + expect(mockOnSearch).toHaveBeenCalledWith(specialCharacters); + }); + +}); diff --git a/app/__tests__/sidebar.test.tsx b/app/__tests__/sidebar.test.tsx index fcaee888..1f5bb2b5 100644 --- a/app/__tests__/sidebar.test.tsx +++ b/app/__tests__/sidebar.test.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import { render, screen, fireEvent } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { useRouter } from 'next/router'; import Sidebar from '../lib/components/side_bar'; // Update the path to your Sidebar component accordingly +import moxios from 'moxios'; jest.mock('next/router', () => ({ useRouter: jest.fn(), @@ -9,12 +10,28 @@ jest.mock('next/router', () => ({ describe('Sidebar Component', () => { let mockPush: jest.Mock; + let originalConsoleError: jest.Mock; beforeEach(() => { + // Install Moxios before each test + moxios.install(); + mockPush = jest.fn(); (useRouter as jest.Mock).mockImplementation(() => ({ push: mockPush, })); + + // Mock console.error + originalConsoleError = console.error; + console.error = jest.fn(); + }); + + afterEach(() => { + // Uninstall Moxios after each test + moxios.uninstall(); + + // Restore original console.error + console.error = originalConsoleError; }); it('renders the sidebar correctly', () => { @@ -34,7 +51,6 @@ describe('Sidebar Component', () => { expect(linkElement).toBeInTheDocument(); }); - - + // ... any other tests ... });