feat: update recently read books widget to use image CDN

package.json

@@ -6,6 +6,8 @@
   ],
   "scripts": {
     "develop": "yarn workspace www.chrisvogt.me develop:https",
+    "test": "yarn workspace gatsby-theme-chrisvogt test",
+    "test:watch": "yarn workspace gatsby-theme-chrisvogt test:watch",
     "postinstall": "node index.js",
     "prettier:format": "prettier --write ."
   },

theme/jest-shim.js

@@ -1,10 +1,10 @@
-import { ArrayBuffer, TextDecoder, TextEncoder, Uint8Array } from 'util';
+// import { ArrayBuffer, TextDecoder, TextEncoder, Uint8Array } from 'util';
 
-global.TextEncoder = TextEncoder;
-global.TextDecoder = TextDecoder;
-global.ArrayBuffer = ArrayBuffer;
-global.Uint8Array = Uint8Array;
+// global.TextEncoder = TextEncoder;
+// global.TextDecoder = TextDecoder;
+// global.ArrayBuffer = ArrayBuffer;
+// global.Uint8Array = Uint8Array;
 
 global.___loader = {
-    enqueue: jest.fn()
-  }
+  enqueue: jest.fn()
+}

theme/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-theme-chrisvogt",
   "description": "My personal blog and website.",
-  "version": "0.28.0",
+  "version": "0.28.1",
   "author": "Chris Vogt <[email protected]> (https://www.chrisvogt.me)",
   "main": "index.js",
   "license": "MIT",
@@ -39,6 +39,9 @@
     "@babel/core": "^7.22.10",
     "@babel/plugin-transform-react-jsx": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "babel-jest": "^29.6.2",

theme/src/components/artwork/__snapshots__/book.spec.js.snap

@@ -65,6 +65,7 @@ exports[`Book matches the snapshot 1`] = `
     }
   >
     <image
+      data-testid="book-preview-thumbnail"
       height="190"
       transform="translate(14.53 -3.68) scale(0.5)"
       width="128"

theme/src/components/artwork/book.js

@@ -35,7 +35,13 @@ const Book = ({ thumbnailURL, title }) => (
         clipPath: `url(#ec3c1a72-0104-4d8a-830f-57d2245cb2f4)`
       }}
     >
-      <image width='128' height='190' transform='translate(14.53 -3.68) scale(0.5)' xlinkHref={thumbnailURL} />
+      <image
+        data-testid='book-preview-thumbnail'
+        width='128'
+        height='190'
+        transform='translate(14.53 -3.68) scale(0.5)'
+        xlinkHref={thumbnailURL}
+      />
     </g>
   </svg>
 )

theme/src/components/widgets/goodreads/__snapshots__/book-link.spec.js.snap

@@ -70,6 +70,7 @@ exports[`BookLink matches the snapshot 1`] = `
       }
     >
       <image
+        data-testid="book-preview-thumbnail"
         height="190"
         transform="translate(14.53 -3.68) scale(0.5)"
         width="128"

theme/src/components/widgets/goodreads/__snapshots__/goodreads-widget.spec.js.snap

@@ -199,7 +199,7 @@ exports[`Goodreads Widget matches the loading state snapshot 1`] = `
         className="css-qnzjfx-RecentlyReadBooks"
       >
         <div
-          className="rect-shape css-b3ph2j"
+          className="rect-shape css-1ncz0al"
           style={
             {
               "backgroundColor": "#efefef",
@@ -210,7 +210,7 @@ exports[`Goodreads Widget matches the loading state snapshot 1`] = `
           }
         />
         <div
-          className="rect-shape css-b3ph2j"
+          className="rect-shape css-1ncz0al"
           style={
             {
               "backgroundColor": "#efefef",
@@ -221,7 +221,7 @@ exports[`Goodreads Widget matches the loading state snapshot 1`] = `
           }
         />
         <div
-          className="rect-shape css-b3ph2j"
+          className="rect-shape css-1ncz0al"
           style={
             {
               "backgroundColor": "#efefef",
@@ -232,7 +232,7 @@ exports[`Goodreads Widget matches the loading state snapshot 1`] = `
           }
         />
         <div
-          className="rect-shape css-b3ph2j"
+          className="rect-shape css-1ncz0al"
           style={
             {
               "backgroundColor": "#efefef",
@@ -243,7 +243,7 @@ exports[`Goodreads Widget matches the loading state snapshot 1`] = `
           }
         />
         <div
-          className="rect-shape css-b3ph2j"
+          className="rect-shape css-1ncz0al"
           style={
             {
               "backgroundColor": "#efefef",
@@ -254,7 +254,7 @@ exports[`Goodreads Widget matches the loading state snapshot 1`] = `
           }
         />
         <div
-          className="rect-shape css-b3ph2j"
+          className="rect-shape css-1ncz0al"
           style={
             {
               "backgroundColor": "#efefef",
@@ -265,7 +265,7 @@ exports[`Goodreads Widget matches the loading state snapshot 1`] = `
           }
         />
         <div
-          className="rect-shape css-b3ph2j"
+          className="rect-shape css-1ncz0al"
           style={
             {
               "backgroundColor": "#efefef",
@@ -276,7 +276,7 @@ exports[`Goodreads Widget matches the loading state snapshot 1`] = `
           }
         />
         <div
-          className="rect-shape css-b3ph2j"
+          className="rect-shape css-1ncz0al"
           style={
             {
               "backgroundColor": "#efefef",
@@ -287,7 +287,7 @@ exports[`Goodreads Widget matches the loading state snapshot 1`] = `
           }
         />
         <div
-          className="rect-shape css-b3ph2j"
+          className="rect-shape css-1ncz0al"
           style={
             {
               "backgroundColor": "#efefef",
@@ -298,7 +298,7 @@ exports[`Goodreads Widget matches the loading state snapshot 1`] = `
           }
         />
         <div
-          className="rect-shape css-b3ph2j"
+          className="rect-shape css-1ncz0al"
           style={
             {
               "backgroundColor": "#efefef",
@@ -309,7 +309,7 @@ exports[`Goodreads Widget matches the loading state snapshot 1`] = `
           }
         />
         <div
-          className="rect-shape css-b3ph2j"
+          className="rect-shape css-1ncz0al"
           style={
             {
               "backgroundColor": "#efefef",
@@ -320,7 +320,7 @@ exports[`Goodreads Widget matches the loading state snapshot 1`] = `
           }
         />
         <div
-          className="rect-shape css-b3ph2j"
+          className="rect-shape css-1ncz0al"
           style={
             {
               "backgroundColor": "#efefef",

theme/src/components/widgets/goodreads/recently-read-books.js

@@ -7,6 +7,9 @@ import { Themed } from '@theme-ui/mdx'
 
 import BookLink from './book-link'
 
+export const HEADLINE ='Books'
+export const BODY_TEXT = 'The last 12 books I read and finished.'
+
 const RecentlyReadBooks = ({ books = [], isLoading }) => (
   <div className='gallery'>
     <div sx={{ mb: 4 }}>
@@ -17,10 +20,12 @@ const RecentlyReadBooks = ({ books = [], isLoading }) => (
           fontSize: [3, 4]
         }}
       >
-        Books
+        {HEADLINE}
       </Heading>
 
-      <Themed.p>The last 12 books I read and finished.</Themed.p>
+      <Themed.p>
+        {BODY_TEXT}
+      </Themed.p>
 
       <div
         sx={{
@@ -33,13 +38,25 @@ const RecentlyReadBooks = ({ books = [], isLoading }) => (
           Array(12)
             .fill()
             .map((item, idx) => (
-              <RectShape color='#efefef' key={idx} sx={{ boxShadow: `md`, width: `100%`, minHeight: `140px` }} />
+              <RectShape
+                color='#efefef'
+                key={idx}
+                sx={{
+                  boxShadow: `md`,
+                  minHeight: `140px`,
+                  width: `100%`,
+                }}
+              />
             ))}
         {!isLoading &&
-          books.map(book => {
-            const { infoLink, smallThumbnail: thumbnailURL, title } = book
-            return <BookLink key={kebabCase(title)} infoLink={infoLink} thumbnailURL={thumbnailURL} title={title} />
-          })}
+          books.map(book => (
+            <BookLink
+              infoLink={book.infoLink}
+              key={book.id}
+              thumbnailURL={`${book.cdnMediaURL}?fm=webp`}
+              title={book.title}
+            />
+          ))}
       </div>
     </div>
   </div>

theme/src/components/widgets/goodreads/recently-read-books.spec.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import RecentlyReadBooks, { HEADLINE, BODY_TEXT } from './recently-read-books'
+import goodreadsMock from '../../../../__mocks__/goodreads-widget.mock.json'
+
+const mockBooks = goodreadsMock.payload.collections.recentlyReadBooks
+
+describe('Widget/Goodreads/RecentlyReadBooks', () => {
+  describe('loading state', () => {
+    it('renders a placeholder for each book expected to render', () => {
+      const { container } = render(<RecentlyReadBooks books={[]} isLoading={true} />)
+      expect(container.querySelectorAll('.rect-shape')).toHaveLength(12)
+    })
+  })
+
+  describe('success sate', () => {
+    it('renders a headline and paragraph text for the widget', () => {
+      render(<RecentlyReadBooks books={mockBooks} isLoading={false} />)
+      expect(screen.getByText(HEADLINE)).toBeInTheDocument()
+      expect(screen.getByText(HEADLINE)).toHaveTextContent(HEADLINE)
+      expect(screen.getByText(BODY_TEXT)).toBeInTheDocument()
+      expect(screen.getByText(BODY_TEXT)).toHaveTextContent(BODY_TEXT)
+    })
+
+    it('renders thumbnails using the image cdn urls', () => {
+      render(<RecentlyReadBooks books={mockBooks} isLoading={false} />)
+      const images = screen.getAllByTestId('book-preview-thumbnail')
+      expect(images).toHaveLength(mockBooks.length)
+      images.forEach((image, idx) => {
+        expect(image).toHaveAttribute('xlink:href', `${mockBooks[idx].cdnMediaURL}?fm=webp`)
+      })
+    })
+  })
+})