Add components tests

Author: loq24

src/components/Header.tsx

@@ -12,19 +12,26 @@ const Header: React.FC<HeaderProps> = ({ currentUser, unAuthUser }) => {
 	return (
 		<Navbar bg='dark' className='navbar-dark'>
 			<Link to='/'>
-				<Navbar.Brand>WP React with Typescript</Navbar.Brand>
+				<Navbar.Brand data-test='tagline'>
+					WP React with Typescript
+				</Navbar.Brand>
 			</Link>
 			<Navbar.Collapse className='justify-content-end'>
 				<Navbar.Text>
 					Signed in as:{' '}
-					<Link to='/account'>{currentUser ? currentUser.name : '...'}</Link>
+					<Link to='/account'>
+						<span data-test='current-user-name'>
+							{currentUser ? currentUser.name : '...'}
+						</span>
+					</Link>
 				</Navbar.Text>
 				<Navbar.Text className='ml-3'>
 					<Button
 						onClick={() => unAuthUser()}
 						title='Sign Out'
 						variant='outline-light'
 						className='logout-btn'
+						data-test='logout-btn'
 					>
 						<i className='fa fa-fw fa-sign-out' />
 					</Button>

src/components/Placeholder.tsx

@@ -1,11 +1,23 @@
-import React from "react";
+import React from 'react';
 
 const Placeholder: React.FC = () => (
 	<>
-		<div className="shimmer-effect item-placeholder" />
-		<div className="shimmer-effect item-placeholder" />
-		<div className="shimmer-effect item-placeholder" />
-		<div className="shimmer-effect item-placeholder" />
+		<div
+			className='shimmer-effect item-placeholder'
+			data-test='shimmer-effect'
+		/>
+		<div
+			className='shimmer-effect item-placeholder'
+			data-test='shimmer-effect'
+		/>
+		<div
+			className='shimmer-effect item-placeholder'
+			data-test='shimmer-effect'
+		/>
+		<div
+			className='shimmer-effect item-placeholder'
+			data-test='shimmer-effect'
+		/>
 	</>
 );
 

src/components/SidebarNav.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { Nav } from "react-bootstrap";
-import { Link } from "react-router-dom";
+import React from 'react';
+import { Nav } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
 
 type SidebarNavProps = {
 	pathName: string;
@@ -9,37 +9,41 @@ type SidebarNavProps = {
 
 const SidebarNav: React.FC<SidebarNavProps> = ({ pathName, basePath }) => {
 	return (
-		<div className="sidebar-nav">
-			<Nav variant="pills" className="flex-column">
+		<div className='sidebar-nav'>
+			<Nav variant='pills' className='flex-column'>
 				<Link
 					to={basePath}
 					className={pathName === basePath ? `nav-link active` : `nav-link`}
+					data-test='dashboard-link'
 				>
-					<i className="fa fa-fw fa-dashboard" /> <span>Dashboard</span>
+					<i className='fa fa-fw fa-dashboard' /> <span>Dashboard</span>
 				</Link>
 				<Link
 					to={`${basePath}posts`}
 					className={
 						pathName === `${basePath}posts` ? `nav-link active` : `nav-link`
 					}
+					data-test='posts-link'
 				>
-					<i className="fa fa-fw fa-newspaper-o" /> <span>Posts</span>
+					<i className='fa fa-fw fa-newspaper-o' /> <span>Posts</span>
 				</Link>
 				<Link
 					to={`${basePath}add-new`}
 					className={
 						pathName === `${basePath}add-new` ? `nav-link active` : `nav-link`
 					}
+					data-test='add-new-link'
 				>
-					<i className="fa fa-fw fa-file" /> <span>Add New</span>
+					<i className='fa fa-fw fa-file' /> <span>Add New</span>
 				</Link>
 				<Link
 					to={`${basePath}account`}
 					className={
 						pathName === `${basePath}account` ? `nav-link active` : `nav-link`
 					}
+					data-test='account-link'
 				>
-					<i className="fa fa-fw fa-info" /> <span>Account Info</span>
+					<i className='fa fa-fw fa-info' /> <span>Account Info</span>
 				</Link>
 			</Nav>
 		</div>

src/components/__tests__/Header.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Header from '../Header';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { User } from '../../actions';
+
+describe('Header Component', () => {
+	let wrapper: ShallowWrapper;
+	let mockUser: User = {
+		id: 1,
+		name: 'Test User',
+		description: 'This is a test user',
+		url: 'https://lougiequisel.com'
+	};
+	beforeEach(() => {
+		wrapper = shallow(<Header currentUser={mockUser} unAuthUser={() => {}} />);
+	});
+
+	it('has tagline', () => {
+		expect(wrapper.find('[data-test="tagline"]')).toHaveLength(1);
+	});
+
+	it('has current user name', () => {
+		expect(wrapper.find('[data-test="current-user-name"]').text()).toEqual(
+			mockUser.name
+		);
+	});
+
+	it('has sign out button', () => {
+		expect(wrapper.find('[data-test="logout-btn"]')).toHaveLength(1);
+	});
+});

src/components/__tests__/Placeholder.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import Placeholder from '../Placeholder';
+
+describe('Placeholder component', () => {
+	let wrapper: ShallowWrapper;
+
+	beforeEach(() => {
+		wrapper = shallow(<Placeholder />);
+	});
+
+	it('shows 4 shimmer div elements', () => {
+		expect(wrapper.find('div[data-test="shimmer-effect"]')).toHaveLength(4);
+	});
+});

src/components/__tests__/SidebarNav.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import SidebarNav from '../SidebarNav';
+
+describe('SidebarNav component', () => {
+	let wrapper: ShallowWrapper;
+
+	beforeEach(() => {
+		wrapper = shallow(<SidebarNav basePath='/' pathName='/' />);
+	});
+
+	it('shows an active menu', () => {
+		expect(
+			wrapper.find('[data-test="dashboard-link"]').props().className
+		).toContain('active');
+	});
+
+	it('shows posts menu', () => {
+		expect(wrapper.find('[data-test="posts-link"]')).toHaveLength(1);
+	});
+
+	it('shows an add new menu', () => {
+		expect(wrapper.find('[data-test="add-new-link"]')).toHaveLength(1);
+	});
+
+	it('shows an account menu', () => {
+		expect(wrapper.find('[data-test="account-link"]')).toHaveLength(1);
+	});
+});