-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Gregg Setzer
committed
Jul 15, 2024
1 parent
ddd72db
commit bcaab54
Showing
8 changed files
with
256 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,41 @@ | ||
import { render, screen } from '@testing-library/react'; | ||
import { fireEvent, render, screen } from '@testing-library/react'; | ||
import React from 'react'; | ||
import Button from '../../src/components/Button'; | ||
|
||
describe('Button', () => { | ||
describe('Button Component', () => { | ||
test('Renders a button', () => { | ||
render(<Button label="Test" onClick={() => {}} />); | ||
|
||
const buttonElement = screen.getByRole('button', { name: 'Test' }); | ||
|
||
expect(buttonElement).toBeInTheDocument(); | ||
}); | ||
test('Renders a button with primary styling applied', () => { | ||
render(<Button label="Test" primary={true} onClick={() => {}} />); | ||
|
||
const buttonElement = screen.getByRole('button', { name: 'Test' }); | ||
|
||
// Regex allows for the background color to change, and ensuring the test is less brittle. | ||
expect(buttonElement.className).toMatch(/bg-\w+-\d+/); | ||
}); | ||
|
||
test('Renders a button with non-primary styling applied', () => { | ||
render(<Button label="Test" primary={false} onClick={() => {}} />); | ||
|
||
const buttonElement = screen.getByRole('button', { name: 'Test' }); | ||
|
||
expect(buttonElement.className).toMatch(/bg-gray-300/); | ||
}); | ||
|
||
test('Calls the onClick handler', () => { | ||
const handleOnClick = jest.fn(); | ||
|
||
render(<Button label="Test" onClick={handleOnClick} />); | ||
|
||
const buttonElement = screen.getByRole('button', { name: 'Test' }); | ||
|
||
fireEvent.click(buttonElement); | ||
|
||
expect(handleOnClick).toHaveBeenCalledTimes(1); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
import { render, screen } from '@testing-library/react'; | ||
import ImageCard from '../../src/components/ImageCard'; | ||
import React from 'react'; | ||
|
||
const renderElement = (newBrowserTab = false) => { | ||
return ( | ||
<ImageCard | ||
alt="Alt Text" | ||
description="Description" | ||
title="Title" | ||
imgSrc="Image Src" | ||
linkUrl="https://www.react.dev" | ||
newBrowserTab={newBrowserTab} | ||
/> | ||
) | ||
} | ||
|
||
describe('ImageCard Component', () => { | ||
test('Renders an ImageCard', () => { | ||
render(renderElement()); | ||
|
||
const linkElements = screen.getAllByRole('link'); | ||
expect(linkElements.length).toBe(2); | ||
|
||
const imageElement = screen.getByAltText('Alt Text'); | ||
expect(imageElement).toBeInTheDocument(); | ||
|
||
const titleElement = screen.getByText('Title'); | ||
expect(titleElement).toBeInTheDocument(); | ||
|
||
const descriptionElement = screen.getByText('Description'); | ||
expect(descriptionElement).toBeInTheDocument(); | ||
}); | ||
|
||
test('Renders an ImageCard with links that open in the same browser tab', () => { | ||
render(renderElement()); | ||
|
||
const [imageLinkElement, titleLinkElement] = screen.getAllByRole('link'); | ||
|
||
expect(imageLinkElement).toBeInTheDocument(); | ||
expect(imageLinkElement).toHaveAttribute('href', 'https://www.react.dev'); | ||
expect(imageLinkElement).not.toHaveAttribute('rel'); | ||
|
||
expect(titleLinkElement).toBeInTheDocument(); | ||
expect(titleLinkElement).toHaveAttribute('href', 'https://www.react.dev'); | ||
expect(imageLinkElement).not.toHaveAttribute('rel'); | ||
}); | ||
|
||
test('Renders an ImageCard with links that open in a new browser tab', () => { | ||
render(renderElement(true)); | ||
|
||
const [imageLinkElement, titleLinkElement] = screen.getAllByRole('link'); | ||
|
||
expect(imageLinkElement).toBeInTheDocument(); | ||
expect(imageLinkElement).toHaveAttribute('href', 'https://www.react.dev'); | ||
expect(imageLinkElement).toHaveAttribute('rel', 'noopener noreferrer'); | ||
|
||
expect(titleLinkElement).toBeInTheDocument(); | ||
expect(titleLinkElement).toHaveAttribute('href', 'https://www.react.dev'); | ||
expect(imageLinkElement).toHaveAttribute('rel', 'noopener noreferrer'); | ||
}); | ||
}); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,99 @@ | ||
import { cleanup, fireEvent, render, screen } from '@testing-library/react'; | ||
import Input from '../../src/components/Input'; | ||
import Select, { Option } from '../../src/components/Select'; | ||
import React from 'react'; | ||
|
||
const labelName = 'Select an Option' | ||
const options: Option[] = [ | ||
{ label: 'Option 1', value: '1', inactive: false }, | ||
{ label: 'Option 2', value: '2', inactive: false }, | ||
{ label: 'Option 3', value: '3', inactive: true }, | ||
]; | ||
|
||
const renderElement = (onChange = () => {}) => { | ||
return ( | ||
<Select | ||
id="testId" | ||
name="testName" | ||
label={labelName} | ||
value="1" | ||
onChange={onChange} | ||
options={options} | ||
/> | ||
); | ||
} | ||
|
||
describe('Select Component', () => { | ||
afterEach(cleanup); | ||
|
||
test('Renders a select input field with the correct attributes', () => { | ||
render(renderElement()); | ||
|
||
const element = screen.getByLabelText(labelName); | ||
|
||
expect(element).toBeInTheDocument(); | ||
expect(element).toHaveAttribute('id', 'testId'); | ||
expect(element).toHaveAttribute('name', 'testName'); | ||
|
||
expect(screen.getAllByRole('option')).toHaveLength(options.length); | ||
}); | ||
|
||
test('Renders a select input field with the correct options', () => { | ||
render(renderElement()); | ||
|
||
const optionElements = screen.getAllByRole('option'); | ||
options.forEach((option, index) => { | ||
expect(optionElements[index]).toHaveTextContent(option.label); | ||
expect(optionElements[index]).toHaveAttribute('value', option.value); | ||
if (option.inactive) { | ||
expect(optionElements[index]).toBeDisabled(); | ||
} | ||
}); | ||
}); | ||
|
||
test('Calls the onChange handler when the value changes', () => { | ||
const handleChange = jest.fn(); | ||
|
||
render(renderElement(handleChange)); | ||
|
||
const element = screen.getByLabelText(labelName); | ||
|
||
fireEvent.change(element, { target: { value: '2' } }); | ||
|
||
expect(handleChange).toHaveBeenCalledTimes(1); | ||
}); | ||
|
||
test('Applies the custom hero css treatment', () => { | ||
render( | ||
<Select | ||
id="labelId" | ||
name="labelName" | ||
label="Label" | ||
value="1" | ||
onChange={() => {}} | ||
options={options} | ||
hero={true} | ||
/> | ||
); | ||
|
||
const element = screen.getByRole('combobox'); | ||
expect(element).toHaveClass('custom-select'); | ||
}); | ||
|
||
test('Hides label when hideLabel is true', () => { | ||
render( | ||
<Select | ||
id="hiddenLabelId" | ||
name="hiddenLabelName" | ||
label="Hidden label" | ||
value="3" | ||
onChange={() => {}} | ||
options={options} | ||
hideLabel={true} | ||
/> | ||
); | ||
|
||
const element = screen.getByText('Hidden label'); | ||
expect(element).toHaveClass('sr-only'); | ||
}); | ||
}); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { render, screen } from '@testing-library/react'; | ||
import Skeleton from '../../src/components/Skeleton'; | ||
import React from 'react'; | ||
|
||
describe('Skeleton Component', () => { | ||
test('Renders the correct number of skeleton items', () => { | ||
const times = 5; | ||
render(<Skeleton times={times} />); | ||
|
||
const elements = screen.getAllByRole('presentation'); | ||
expect(elements).toHaveLength(times); | ||
}); | ||
|
||
test('Applies custom className', () => { | ||
const customClassName = 'bg-test-500'; | ||
render(<Skeleton className={customClassName} />); | ||
|
||
const skeletonItems = screen.getAllByRole('presentation'); | ||
|
||
expect(skeletonItems[0]).toHaveClass(customClassName); | ||
}); | ||
}) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import React from 'react'; | ||
import { render, screen } from '@testing-library/react'; | ||
import SkeletonGrid from '../../src/components/SkeletonGrid'; | ||
|
||
jest.mock('../../src/components/Skeleton', () => { | ||
return function DummySkeleton(props: { className: string; times: number }) { | ||
return <div data-testid="skeleton" className={props.className}>Skeleton</div>; | ||
}; | ||
}); | ||
|
||
describe('SkeletonGrid', () => { | ||
test('Renders the correct number of Skeleton components', () => { | ||
const count = 5; | ||
render(<SkeletonGrid count={count} />); | ||
|
||
// Check if the correct number of Skeleton components are rendered | ||
const skeletonItems = screen.getAllByTestId('skeleton'); | ||
expect(skeletonItems).toHaveLength(count); | ||
}); | ||
|
||
test('Renders default number of Skeleton components when count is not provided', () => { | ||
render(<SkeletonGrid />); | ||
|
||
const skeletonItems = screen.getAllByTestId('skeleton'); | ||
expect(skeletonItems).toHaveLength(4); | ||
}); | ||
}); |