From 69cf47895948a974dbb95c6a55059f08c86af6b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?N=C3=A4ser?= <sebastien.naser@gmail.com>
Date: Fri, 10 Feb 2023 10:03:25 +0100
Subject: [PATCH] test: fix unit tests

---
 .../blog-pagination/blog-pagination.spec.tsx  | 14 +++++++++--
 .../blog-pagination/blog-pagination.tsx       | 12 ++++++---
 .../blog-search/blog-search.spec.tsx          | 25 +++++++++++++++++--
 .../card-blog-details.spec.tsx                |  4 +--
 .../card-blog-details/card-blog-details.tsx   |  4 +--
 .../home-section-blog/home-section-blog.tsx   |  2 +-
 package-lock.json                             | 15 +++++++++++
 package.json                                  |  1 +
 8 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/apps/website/components/blog-pagination/blog-pagination.spec.tsx b/apps/website/components/blog-pagination/blog-pagination.spec.tsx
index f4cca7b..3ed60b3 100644
--- a/apps/website/components/blog-pagination/blog-pagination.spec.tsx
+++ b/apps/website/components/blog-pagination/blog-pagination.spec.tsx
@@ -1,10 +1,20 @@
-import { render } from '@testing-library/react';
+import {render} from '@testing-library/react';
 
 import BlogPagination from './blog-pagination';
 
+jest.mock("next/router", () => ({
+  useRouter() {
+    return {
+      route: "/",
+      pathname: "",
+      query: "",
+      asPath: "",
+    };
+  },
+}));
 describe('BlogPagination', () => {
   it('should render successfully', () => {
-    const { baseElement } = render(<BlogPagination />);
+    const {baseElement} = render(<BlogPagination paginator={{pagination: {}}} />);
     expect(baseElement).toBeTruthy();
   });
 });
diff --git a/apps/website/components/blog-pagination/blog-pagination.tsx b/apps/website/components/blog-pagination/blog-pagination.tsx
index 0593cd1..07f97a1 100644
--- a/apps/website/components/blog-pagination/blog-pagination.tsx
+++ b/apps/website/components/blog-pagination/blog-pagination.tsx
@@ -6,7 +6,7 @@ export interface BlogPaginationProps {
   paginator: any;
 }
 
-export function BlogPagination({paginator}: BlogPaginationProps) {
+export function BlogPagination({paginator = {pagination: {}}}: BlogPaginationProps) {
   const router = useRouter();
   const {total, pageCount, page} = paginator.pagination;
   const isOnlyOne = pageCount > 0 && pageCount === 1;
@@ -41,7 +41,10 @@ export function BlogPagination({paginator}: BlogPaginationProps) {
             hover:bg-gray-900
             disabled:bg-gray-500 disabled:hover:bg-gray-500
             dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
-            <svg aria-hidden="true" className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20"
+            <svg aria-hidden="true"
+                 className="w-5 h-5 mr-2"
+                 fill="currentColor"
+                 viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg">
               <path fillRule="evenodd"
                     d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
@@ -58,7 +61,10 @@ export function BlogPagination({paginator}: BlogPaginationProps) {
             disabled:bg-gray-500 disabled:hover:bg-gray-500
             dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
             Next
-            <svg aria-hidden="true" className="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20"
+            <svg aria-hidden="true"
+                 className="w-5 h-5 ml-2"
+                 fill="currentColor"
+                 viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg">
               <path fillRule="evenodd"
                     d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
diff --git a/apps/website/components/blog-search/blog-search.spec.tsx b/apps/website/components/blog-search/blog-search.spec.tsx
index 3f665ab..6554aba 100644
--- a/apps/website/components/blog-search/blog-search.spec.tsx
+++ b/apps/website/components/blog-search/blog-search.spec.tsx
@@ -1,10 +1,31 @@
-import { render } from '@testing-library/react';
+import {render} from '@testing-library/react';
+import configureStore from "redux-mock-store";
 
 import BlogSearch from './blog-search';
+import {Provider} from "react-redux";
+
+jest.mock("next/router", () => ({
+  useRouter() {
+    return {
+      route: "/",
+      pathname: "",
+      query: "",
+      asPath: "",
+    };
+  },
+}));
 
 describe('BlogSearch', () => {
+  const initialState = {results: []};
+  const mockStore = configureStore();
+  let store;
+
   it('should render successfully', () => {
-    const { baseElement } = render(<BlogSearch />);
+    store = mockStore(initialState);
+    const {baseElement} = render(
+      <Provider store={store}>
+        <BlogSearch />
+      </Provider>);
     expect(baseElement).toBeTruthy();
   });
 });
diff --git a/apps/website/components/card-blog-details/card-blog-details.spec.tsx b/apps/website/components/card-blog-details/card-blog-details.spec.tsx
index 75c020e..d4b20ea 100644
--- a/apps/website/components/card-blog-details/card-blog-details.spec.tsx
+++ b/apps/website/components/card-blog-details/card-blog-details.spec.tsx
@@ -1,10 +1,10 @@
-import { render } from '@testing-library/react';
+import {render} from '@testing-library/react';
 
 import CardBlogDetails from './card-blog-details';
 
 describe('CardBlogDetails', () => {
   it('should render successfully', () => {
-    const { baseElement } = render(<CardBlogDetails />);
+    const {baseElement} = render(<CardBlogDetails item={{}} />);
     expect(baseElement).toBeTruthy();
   });
 });
diff --git a/apps/website/components/card-blog-details/card-blog-details.tsx b/apps/website/components/card-blog-details/card-blog-details.tsx
index 732da5d..ccb92e6 100644
--- a/apps/website/components/card-blog-details/card-blog-details.tsx
+++ b/apps/website/components/card-blog-details/card-blog-details.tsx
@@ -21,8 +21,8 @@ export interface CardBlogDetailsProps {
   item: any;
 }
 
-export function CardBlogDetails({item}: CardBlogDetailsProps) {
-  const {width, height} = item.image.data.attributes;
+export function CardBlogDetails({item = {}}: CardBlogDetailsProps) {
+  const {width = 0, height = 0} = delve(item, 'image.data.attributes', {});
   const {title} = item;
   const shareUrl = getPostUrl(item);
   return (
diff --git a/apps/website/components/home-section-blog/home-section-blog.tsx b/apps/website/components/home-section-blog/home-section-blog.tsx
index 1ece372..58ef6c9 100644
--- a/apps/website/components/home-section-blog/home-section-blog.tsx
+++ b/apps/website/components/home-section-blog/home-section-blog.tsx
@@ -10,7 +10,7 @@ export interface HomeSectionBlogProps {
   posts: object[];
 }
 
-export function HomeSectionBlog({posts}: HomeSectionBlogProps) {
+export function HomeSectionBlog({posts = []}: HomeSectionBlogProps) {
   const firstArticle = posts.length > 0 ? posts.slice(0, 1) : [];
   const otherArticles = posts.length > 0 ? posts.slice(1, posts.length) : [];
   const [width, height] = getStrapiImageSize(firstArticle[0]);
diff --git a/package-lock.json b/package-lock.json
index 2a560fe..248a53c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9748,6 +9748,12 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -11440,6 +11446,15 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "redux-mock-store": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/redux-mock-store/-/redux-mock-store-1.5.4.tgz",
+      "integrity": "sha512-xmcA0O/tjCLXhh9Fuiq6pMrJCwFRaouA8436zcikdIpYWWCjU76CRk+i2bHx8EeiSiMGnB85/lZdU3wIJVXHTA==",
+      "dev": true,
+      "requires": {
+        "lodash.isplainobject": "^4.0.6"
+      }
+    },
     "redux-thunk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
diff --git a/package.json b/package.json
index 70ddf1a..cf6d120 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
     "postcss": "8.4.19",
     "prettier": "2.6.2",
     "react-test-renderer": "18.2.0",
+    "redux-mock-store": "^1.5.4",
     "sass": "1.55.0",
     "ts-jest": "28.0.5",
     "ts-node": "10.9.1",