Chapter 5 - Testing Article

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>
   )
 }

web/src/components/Article/Article.stories.js

@@ -1,17 +1,17 @@
 import Article from './Article'
 
-export const generated = () => {
-  return (
-    <Article
-      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: '2020-01-01T12:34:56Z',
-      }}
-    />
-  )
+  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' }

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>
   )

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()
+    })
   })
 })