diff --git a/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.test.js b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.test.js new file mode 100644 index 000000000..11060513f --- /dev/null +++ b/client/src/components/_common/HighlightSearchTerm/HighlightSearchTerm.test.js @@ -0,0 +1,57 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { + toBeInTheDocument, + toHaveClass, + toBeNull, +} from '@testing-library/jest-dom'; + +import HighlightSearchTerm from './HighlightSearchTerm'; + +describe('HighlightSearchTerm Component', () => { + it('renders content when searchTerm is not provided', () => { + const { getByText } = render(); + expect(getByText('Lorem ipsum')).toBeInTheDocument(); + }); + + it('renders without highlighting when searchTerm in content do not match', () => { + const { getByText } = render( + + ); + expect(getByText('Lorem ipsum dolor sit amet')).toBeInTheDocument(); + expect(document.querySelector('.highlight')).toBeNull(); + }); + + it('renders content when searchTerm is not provided', () => { + const { getByText } = render(); + expect(getByText('Lorem ipsum')).toBeInTheDocument(); + }); + + it('renders content with searchTerm highlighted', () => { + const { getByText } = render( + + ); + const highlightedText = getByText('ipsum'); + expect(highlightedText).toHaveClass('highlight'); + }); + + it('renders content with multiple searchTerm occurrences highlighted', () => { + const { getAllByText } = render( + + ); + const highlightedText = getAllByText('ipsum'); + expect(highlightedText.length).toBe(5); + highlightedText.forEach((element) => { + expect(element).toHaveClass('highlight'); + }); + }); +});