✨ finish https://redwoodjs.com/docs/tutorial/chapter5/first-test#addi…

…ng-the-test

web/src/components/ArticlesCell/ArticlesCell.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen, within } from '@redwoodjs/testing'
+
+import { Loading, Empty, Failure, Success } from './ArticlesCell'
+import { standard } from './ArticlesCell.mock'
+
+describe('ArticlesCell', () => {
+  test('Loading renders successfully', () => {
+    expect(() => {
+      render(<Loading />)
+    }).not.toThrow()
+  })
+
+  test('Empty renders successfully', async () => {
+    expect(() => {
+      render(<Empty />)
+    }).not.toThrow()
+  })
+
+  test('Failure renders successfully', async () => {
+    expect(() => {
+      render(<Failure error={new Error('Oh no')} />)
+    }).not.toThrow()
+  })
+
+  test('Success renders successfully', async () => {
+    const articles = standard().articles
+    render(<Success articles={articles} />)
+
+    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()
+      // The full body of the post body is not present
+      expect(screen.queryByText(article.body)).not.toBeInTheDocument()
+      // But, at least the first couple of words of the post are present
+      expect(matchedBody).toBeInTheDocument()
+      // The text that is shown ends in "..."
+      expect(ellipsis).toBeInTheDocument()
+    })
+  })
+})