From 3e9db153bc39033dbd1f82398b655f2b3079e563 Mon Sep 17 00:00:00 2001
From: Savy <savy.novachez011@gmail.com>
Date: Sat, 6 May 2023 17:48:52 +0530
Subject: [PATCH] Finished Ex 5.16

---
 .../src/components/BlogForm.js                |  6 ++--
 .../bloglist-frontend/src/tests/Blog.test.js  |  2 +-
 .../src/tests/BlogForm.test.js                | 28 +++++++++++++++++++
 3 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 Part_5/bloglist-frontend/src/tests/BlogForm.test.js

diff --git a/Part_5/bloglist-frontend/src/components/BlogForm.js b/Part_5/bloglist-frontend/src/components/BlogForm.js
index b8c2846..d96e3d9 100644
--- a/Part_5/bloglist-frontend/src/components/BlogForm.js
+++ b/Part_5/bloglist-frontend/src/components/BlogForm.js
@@ -24,17 +24,17 @@ const BlogForm = ({ createBlog }) => {
 			<p>
 				Title:
 				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-				<input type="text" value={title} onChange={({ target }) => setTitle(target.value)} />
+				<input type="text" value={title} placeholder='Blog Title' onChange={({ target }) => setTitle(target.value)} />
 			</p>
 			<p>
 				Author:
 				&nbsp;
-				<input type="text" value={author} onChange={({ target }) => setAuthor(target.value)} />
+				<input type="text" value={author} placeholder='Blog Author' onChange={({ target }) => setAuthor(target.value)} />
 			</p>
 			<p>
 				URL:
 				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-				<input type="text" value={url} onChange={({ target }) => setUrl(target.value)} />
+				<input type="text" value={url} placeholder='Blog URL' onChange={({ target }) => setUrl(target.value)} />
 			</p>
 			<p><button type="submit" >Create</button></p>
 		</form>
diff --git a/Part_5/bloglist-frontend/src/tests/Blog.test.js b/Part_5/bloglist-frontend/src/tests/Blog.test.js
index 24e5ced..beb5d52 100644
--- a/Part_5/bloglist-frontend/src/tests/Blog.test.js
+++ b/Part_5/bloglist-frontend/src/tests/Blog.test.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 import userEvent from '@testing-library/user-event'
 import Blog from '../components/Blog'
diff --git a/Part_5/bloglist-frontend/src/tests/BlogForm.test.js b/Part_5/bloglist-frontend/src/tests/BlogForm.test.js
new file mode 100644
index 0000000..782ffa6
--- /dev/null
+++ b/Part_5/bloglist-frontend/src/tests/BlogForm.test.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import userEvent from '@testing-library/user-event'
+import BlogForm from '../components/BlogForm'
+
+describe('<BlogForm />', () => {
+	const mockHandler = jest.fn()
+
+	beforeEach(() => {
+		render(<BlogForm createBlog={mockHandler} />)
+	})
+
+	test('creating a note call the mockhandler with right blog details', async () => {
+		const titleInput = screen.getByPlaceholderText('Blog Title')
+		const authorInput = screen.getByPlaceholderText('Blog Author')
+		const urlInput = screen.getByPlaceholderText('Blog URL')
+		const submitButton = screen.getByText('Create')
+
+		await userEvent.type(titleInput, 'test title')
+		await userEvent.type(authorInput, 'test author')
+		await userEvent.type(urlInput, 'test url')
+		await userEvent.click(submitButton)
+
+		expect(mockHandler.mock.calls[0][0]).toEqual({ title: 'test title', author: 'test author', url: 'test url' })
+		expect(mockHandler.mock.calls).toHaveLength(1)
+	})
+})
-- 
2.51.2