From e180c93ada726c8972a295c7e63ff730bb55d7ab Mon Sep 17 00:00:00 2001
From: Colin Diem <me@colindiem.com>
Date: Tue, 26 Apr 2022 00:01:11 -0400
Subject: [PATCH] Chapter 6 - Building a Component the Redwood Way - Testing

---
 web/src/components/Article/Article.test.js    | 30 +++++++++++++------
 web/src/components/Comment/Comment.js         | 21 +++++++++++++
 web/src/components/Comment/Comment.stories.js | 15 ++++++++++
 web/src/components/Comment/Comment.test.js    | 14 +++++++++
 4 files changed, 71 insertions(+), 9 deletions(-)
 create mode 100644 web/src/components/Comment/Comment.js
 create mode 100644 web/src/components/Comment/Comment.stories.js
 create mode 100644 web/src/components/Comment/Comment.test.js

diff --git a/web/src/components/Article/Article.test.js b/web/src/components/Article/Article.test.js
index c1295cd..9f2f339 100644
--- a/web/src/components/Article/Article.test.js
+++ b/web/src/components/Article/Article.test.js
@@ -2,17 +2,29 @@ import { render, screen } from '@redwoodjs/testing'
 
 import Article from './Article'
 
+const ARTICLE = {
+  id: 1,
+  title: 'First post',
+  body: `Neutra tacos hot chicken prism raw denim, put a bird on it enamel pin post-ironic vape cred DIY. Street art next level umami squid. Hammock hexagon glossier 8-bit banjo. Neutra la croix mixtape echo park four loko semiotics kitsch forage chambray. Semiotics salvia selfies jianbing hella shaman. Letterpress helvetica vaporware cronut, shaman butcher YOLO poke fixie hoodie gentrify woke heirloom.`,
+  createdAt: new Date().toISOString(),
+}
+
 describe('Article', () => {
   it('renders a blog post', () => {
-    const article = {
-      id: 1,
-      title: 'First post',
-      body: `Neutra tacos hot chicken prism raw denim, put a bird on it enamel pin post-ironic vape cred DIY. Street art next level umami squid. Hammock hexagon glossier 8-bit banjo. Neutra la croix mixtape echo park four loko semiotics kitsch forage chambray. Semiotics salvia selfies jianbing hella shaman. Letterpress helvetica vaporware cronut, shaman butcher YOLO poke fixie hoodie gentrify woke heirloom.`,
-      createdAt: new Date().toISOString(),
-    }
-    render(<Article article={article} />)
+    render(<Article article={ARTICLE} />)
 
-    expect(screen.getByText(article.title)).toBeInTheDocument()
-    expect(screen.getByText(article.body)).toBeInTheDocument()
+    expect(screen.getByText(ARTICLE.title)).toBeInTheDocument()
+    expect(screen.getByText(ARTICLE.body)).toBeInTheDocument()
+  })
+
+  it('renders a summary of a blog post', () => {
+    render(<Article article={ARTICLE} summary={true} />)
+
+    expect(screen.getByText(ARTICLE.title)).toBeInTheDocument()
+    expect(
+      screen.getByText(
+        'Neutra tacos hot chicken prism raw denim, put a bird on it enamel pin post-ironic vape cred DIY. Str...'
+      )
+    ).toBeInTheDocument()
   })
 })
diff --git a/web/src/components/Comment/Comment.js b/web/src/components/Comment/Comment.js
new file mode 100644
index 0000000..3552dea
--- /dev/null
+++ b/web/src/components/Comment/Comment.js
@@ -0,0 +1,21 @@
+const formattedDate = (datetime) => {
+  const parsedDate = new Date(datetime)
+  const month = parsedDate.toLocaleString('default', { month: 'long' })
+  return `${parsedDate.getDate()} ${month} ${parsedDate.getFullYear()}`
+}
+
+const Comment = ({ comment }) => {
+  return (
+    <div className="bg-gray-200 p-8 rounded-lg">
+      <header className="flex justify-between">
+        <h2 className="font-semibold text-gray-700">{comment.name}</h2>
+        <time className="text-xs text-gray-500" dateTime={comment.createdAt}>
+          {comment.createdAt}
+        </time>
+      </header>
+      <p className="text-sm mt-2">{comment.body}</p>
+    </div>
+  )
+}
+
+export default Comment
diff --git a/web/src/components/Comment/Comment.stories.js b/web/src/components/Comment/Comment.stories.js
new file mode 100644
index 0000000..5919c8e
--- /dev/null
+++ b/web/src/components/Comment/Comment.stories.js
@@ -0,0 +1,15 @@
+import Comment from './Comment'
+
+export const generated = () => {
+  return (
+    <Comment
+      comment={{
+        name: 'Rob Cameron',
+        body: 'This is the first comment!',
+        createdAt: '2022-04-25T23:53:34Z',
+      }}
+    />
+  )
+}
+
+export default { title: 'Components/Comment' }
diff --git a/web/src/components/Comment/Comment.test.js b/web/src/components/Comment/Comment.test.js
new file mode 100644
index 0000000..a1bc6f8
--- /dev/null
+++ b/web/src/components/Comment/Comment.test.js
@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import Comment from './Comment'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('Comment', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<Comment />)
+    }).not.toThrow()
+  })
+})