From 5d9a23422bf960e2e63c824f2cf29519cca62a0f Mon Sep 17 00:00:00 2001
From: Colin Diem <me@colindiem.com>
Date: Mon, 25 Apr 2022 23:27:47 -0400
Subject: [PATCH] Chapter 5 - Testing Article

---
 web/src/components/Article/Article.js         | 10 ++++++--
 web/src/components/Article/Article.stories.js | 24 +++++++++----------
 .../components/ArticlesCell/ArticlesCell.js   |  2 +-
 .../ArticlesCell/ArticlesCell.test.js         | 16 +++++++++----
 4 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/web/src/components/Article/Article.js b/web/src/components/Article/Article.js
index 05205df..092f957 100644
--- a/web/src/components/Article/Article.js
+++ b/web/src/components/Article/Article.js
@@ -1,6 +1,10 @@
 import { Link, routes } from '@redwoodjs/router'
 
-const Article = ({ article }) => {
+const truncate = (text, length) => {
+  return text.substring(0, length) + '...'
+}
+
+const Article = ({ article, summary = false }) => {
   return (
     <article>
       <header>
@@ -8,7 +12,9 @@ const Article = ({ article }) => {
           <Link to={routes.article({ id: article.id })}>{article.title}</Link>
         </h2>
       </header>
-      <div className="mt-2 text-gray-900 font-light">{article.body}</div>
+      <div className="mt-2 text-gray-900 font-light">
+        {summary ? truncate(article.body, 100) : article.body}
+      </div>
     </article>
   )
 }
diff --git a/web/src/components/Article/Article.stories.js b/web/src/components/Article/Article.stories.js
index 27c251f..9bbd1e0 100644
--- a/web/src/components/Article/Article.stories.js
+++ b/web/src/components/Article/Article.stories.js
@@ -1,17 +1,17 @@
 import Article from './Article'
 
-export const generated = () => {
-  return (
-    <Article
-      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: '2020-01-01T12:34:56Z',
-      }}
-    />
-  )
+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.',
+}
+
+export const full = () => {
+  return <Article article={ARTICLE} />
+}
+
+export const summart = () => {
+  return <Article article={ARTICLE} summary={true} />
 }
 
 export default { title: 'Components/Article' }
diff --git a/web/src/components/ArticlesCell/ArticlesCell.js b/web/src/components/ArticlesCell/ArticlesCell.js
index 9b11d2d..b4960b5 100644
--- a/web/src/components/ArticlesCell/ArticlesCell.js
+++ b/web/src/components/ArticlesCell/ArticlesCell.js
@@ -21,7 +21,7 @@ export const Success = ({ articles }) => {
   return (
     <div className="space-y-10">
       {articles.map((article) => (
-        <Article article={article} key={article.id} />
+        <Article article={article} key={article.id} summary={true} />
       ))}
     </div>
   )
diff --git a/web/src/components/ArticlesCell/ArticlesCell.test.js b/web/src/components/ArticlesCell/ArticlesCell.test.js
index dde32fd..a92dc97 100644
--- a/web/src/components/ArticlesCell/ArticlesCell.test.js
+++ b/web/src/components/ArticlesCell/ArticlesCell.test.js
@@ -1,4 +1,4 @@
-import { render, screen } from '@redwoodjs/testing'
+import { render, screen, within } from '@redwoodjs/testing'
 import { Loading, Empty, Failure, Success } from './ArticlesCell'
 import { standard } from './ArticlesCell.mock'
 
@@ -25,9 +25,15 @@ describe('ArticlesCell', () => {
     const articles = standard().articles
     render(<Success articles={articles} />)
 
-    expect(screen.getByText(articles[0].title)).toBeInTheDocument()
-    expect(screen.getByText(articles[0].body)).toBeInTheDocument()
-    expect(screen.getByText(articles[1].title)).toBeInTheDocument()
-    expect(screen.getByText(articles[1].body)).toBeInTheDocument()
+    articles.forEach((article) => {
+      const truncatedBody = article.body.substring(0, 10)
+      const matchedBody = screen.getByText(truncatedBody, { exact: false })
+      const ellipsis = within(matchedBody).getByText('...', { exact: false })
+
+      expect(screen.getByText(article.title)).toBeInTheDocument()
+      expect(screen.queryByText(article.body)).not.toBeInTheDocument()
+      expect(matchedBody).toBeInTheDocument()
+      expect(ellipsis).toBeInTheDocument()
+    })
   })
 })