From 44cb60d329e7a9e94c3d51b0ff9ef52592de4246 Mon Sep 17 00:00:00 2001
From: Chamindu <cudakara@gmail.com>
Date: Wed, 20 Sep 2023 23:34:30 +0530
Subject: [PATCH 1/4] Add react testing libraries

---
 package-lock.json | 59 ++++++++++-------------------------------------
 package.json      |  2 +-
 2 files changed, 13 insertions(+), 48 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ec0a055..0d7d7a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,6 @@
         "@stripe/react-stripe-js": "^2.1.2",
         "@stripe/stripe-js": "^2.0.0",
         "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^29.5.3",
         "@types/react": "^18.2.20",
@@ -53,6 +52,7 @@
       },
       "devDependencies": {
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+        "@testing-library/react": "^14.0.0",
         "@types/redux-logger": "^3.0.9",
         "babel-eslint": "^10.1.0",
         "babel-plugin-macros": "^3.1.0",
@@ -5398,7 +5398,6 @@
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz",
       "integrity": "sha512-0DGPd9AR3+iDTjGoMpxIkAsUihHZ3Ai6CneU6bRRrffXMgzCdlNk43jTrD2/5LT6CBb3MWTP8v510JzYtahD2w==",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -5447,40 +5446,23 @@
       }
     },
     "node_modules/@testing-library/react": {
-      "version": "13.4.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz",
-      "integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.0.0.tgz",
+      "integrity": "sha512-S04gSNJbYE30TlIMLTzv6QCTzt9AqIF5y6s6SzVFILNcNvbV/jU96GeiTPillGQo+Ny64M/5PV7klNYYgv5Dfg==",
+      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@testing-library/dom": "^8.5.0",
+        "@testing-library/dom": "^9.0.0",
         "@types/react-dom": "^18.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=14"
       },
       "peerDependencies": {
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
       }
     },
-    "node_modules/@testing-library/react/node_modules/@testing-library/dom": {
-      "version": "8.20.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz",
-      "integrity": "sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==",
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.1.3",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@testing-library/user-event": {
       "version": "13.5.0",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
@@ -26517,7 +26499,6 @@
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz",
       "integrity": "sha512-0DGPd9AR3+iDTjGoMpxIkAsUihHZ3Ai6CneU6bRRrffXMgzCdlNk43jTrD2/5LT6CBb3MWTP8v510JzYtahD2w==",
-      "peer": true,
       "requires": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -26557,30 +26538,14 @@
       }
     },
     "@testing-library/react": {
-      "version": "13.4.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz",
-      "integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.0.0.tgz",
+      "integrity": "sha512-S04gSNJbYE30TlIMLTzv6QCTzt9AqIF5y6s6SzVFILNcNvbV/jU96GeiTPillGQo+Ny64M/5PV7klNYYgv5Dfg==",
+      "dev": true,
       "requires": {
         "@babel/runtime": "^7.12.5",
-        "@testing-library/dom": "^8.5.0",
+        "@testing-library/dom": "^9.0.0",
         "@types/react-dom": "^18.0.0"
-      },
-      "dependencies": {
-        "@testing-library/dom": {
-          "version": "8.20.1",
-          "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz",
-          "integrity": "sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==",
-          "requires": {
-            "@babel/code-frame": "^7.10.4",
-            "@babel/runtime": "^7.12.5",
-            "@types/aria-query": "^5.0.1",
-            "aria-query": "5.1.3",
-            "chalk": "^4.1.0",
-            "dom-accessibility-api": "^0.5.9",
-            "lz-string": "^1.5.0",
-            "pretty-format": "^27.0.2"
-          }
-        }
       }
     },
     "@testing-library/user-event": {
diff --git a/package.json b/package.json
index 561d110..65959a1 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,6 @@
     "@stripe/react-stripe-js": "^2.1.2",
     "@stripe/stripe-js": "^2.0.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^29.5.3",
     "@types/react": "^18.2.20",
@@ -80,6 +79,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@testing-library/react": "^14.0.0",
     "@types/redux-logger": "^3.0.9",
     "babel-eslint": "^10.1.0",
     "babel-plugin-macros": "^3.1.0",

From bbf732d9f3f30d61b2e7b0239c1d4183b7f1c5e8 Mon Sep 17 00:00:00 2001
From: Chamindu <cudakara@gmail.com>
Date: Wed, 20 Sep 2023 23:49:07 +0530
Subject: [PATCH 2/4] Add test cases for Button component

---
 .../button/__tests__/button.component.test.js | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/button/__tests__/button.component.test.js

diff --git a/src/components/button/__tests__/button.component.test.js b/src/components/button/__tests__/button.component.test.js
new file mode 100644
index 0000000..9c4134b
--- /dev/null
+++ b/src/components/button/__tests__/button.component.test.js
@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import Button, { BUTTON_TYPE_CLASSES } from '../button.component';
+
+describe('Button tests', () => {
+
+    test('should render base button when nothing is passed', () => {
+        render(<Button />);
+
+        const buttonElement = screen.getByRole('button');
+        expect(buttonElement).toHaveStyle('background-color: ButtonFace;');
+    });
+
+    test('should render google button when google is passed', () => {
+        render(<Button buttonType={BUTTON_TYPE_CLASSES.google} />);
+
+        const buttonElement = screen.getByRole('button');
+        expect(buttonElement).toHaveStyle('background-color: ButtonFace;');
+    });
+
+    test('should render inverted button when inverted is passed', () => {
+        render(<Button buttonType={BUTTON_TYPE_CLASSES.inverted} />);
+
+        const buttonElement = screen.getByRole('button');
+        expect(buttonElement).toHaveStyle('background-color: ButtonFace;');
+    });
+
+    test('should be disabled if isLoading is true', () => {
+        render(<Button isLoading={true} />);
+
+        const buttonElement = screen.getByRole('button');
+        expect(buttonElement).toBeDisabled();
+    });
+
+});
\ No newline at end of file

From 077a15f19d9a9367f8d643c91da9fac131cb2810 Mon Sep 17 00:00:00 2001
From: Chamindu <cudakara@gmail.com>
Date: Thu, 21 Sep 2023 00:04:22 +0530
Subject: [PATCH 3/4] Add test cases for Cart-Item component

---
 src/App.test.js                               |  8 -----
 .../__tests__/cart-icon.component.test.js     | 29 +++++++++++++++++++
 src/utils/test/test.utils.js                  | 23 +++++++++++++++
 3 files changed, 52 insertions(+), 8 deletions(-)
 delete mode 100644 src/App.test.js
 create mode 100644 src/components/cart-icon/__tests__/cart-icon.component.test.js
 create mode 100644 src/utils/test/test.utils.js

diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afe..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/components/cart-icon/__tests__/cart-icon.component.test.js b/src/components/cart-icon/__tests__/cart-icon.component.test.js
new file mode 100644
index 0000000..e6c4e07
--- /dev/null
+++ b/src/components/cart-icon/__tests__/cart-icon.component.test.js
@@ -0,0 +1,29 @@
+import { screen } from "@testing-library/react";
+import { renderWithProviders } from "../../../utils/test/test.utils";
+import CartIcon from "../cart-icon.component";
+
+describe('Cart-Icon tests', () => {
+
+    test('Uses preloaded state to render', () => {
+        const preloadedState = [
+            {
+                id: 1,
+                imageUrl: 'https://i.ibb.co/0jqHpnp/sneakers.png',
+                name: 'Sneakers',
+                price: 100,
+                quantity: 1
+            }
+        ];
+
+        renderWithProviders(<CartIcon />, {
+            preloadedState:
+            {
+                cart: {
+                    cartItems: preloadedState
+                }
+            }
+        });
+        const cartIconElement = screen.getByText('1');
+        expect(cartIconElement).toBeInTheDocument();
+    });
+});
\ No newline at end of file
diff --git a/src/utils/test/test.utils.js b/src/utils/test/test.utils.js
new file mode 100644
index 0000000..58d1533
--- /dev/null
+++ b/src/utils/test/test.utils.js
@@ -0,0 +1,23 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import { rootReducer } from "../../store/root-reducer";
+
+export function renderWithProviders(
+    ui,
+    {
+        preloadedState = {},
+        store = createStore(rootReducer, preloadedState),
+        ...renderOptions
+    } = {}
+) {
+    const Wrapper = ({ children }) => {
+        return (
+            <Provider store={store}>
+                {children}
+            </Provider>
+        );
+    }
+    return render(ui, { wrapper: Wrapper, ...renderOptions });
+};
\ No newline at end of file

From 1ec27012451fd087250db2881f6fd5e00e8580ca Mon Sep 17 00:00:00 2001
From: Chamindu <cudakara@gmail.com>
Date: Thu, 21 Sep 2023 00:23:09 +0530
Subject: [PATCH 4/4] Add test cases for Navigation route component

---
 .../__tests__/navigation.component.test.js    | 71 +++++++++++++++++++
 .../navigation/navigation.component.tsx       |  2 +-
 src/utils/test/test.utils.js                  |  5 +-
 3 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/navigation/__tests__/navigation.component.test.js

diff --git a/src/routes/navigation/__tests__/navigation.component.test.js b/src/routes/navigation/__tests__/navigation.component.test.js
new file mode 100644
index 0000000..803ed30
--- /dev/null
+++ b/src/routes/navigation/__tests__/navigation.component.test.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import * as reactRedux from 'react-redux';
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithProviders } from '../../../utils/test/test.utils';
+import { SignOutStart } from '../../../store/user/user.action';
+import Navigation from '../navigation.component';
+
+describe('Navigation tests', () => {
+
+    test('It should render a Sign In link if there is no currentUser', () => {
+        renderWithProviders(<Navigation />, {
+            preloadedState: {
+                user: {
+                    currentUser: null,
+                },
+            },
+        });
+
+        expect(screen.getByText('SIGN IN')).toBeInTheDocument();
+    });
+
+    test('It should not render Sign In if there is a currentUser', () => {
+        renderWithProviders(<Navigation />, {
+            preloadedState: {
+                user: {
+                    currentUser: {},
+                },
+            },
+        });
+
+        expect(screen.queryByText('SIGN IN')).toBeNull();
+    });
+
+    test('It should render Sign Out if there is a currentUser', () => {
+        renderWithProviders(<Navigation />, {
+            preloadedState: {
+                user: {
+                    currentUser: {},
+                },
+            },
+        });
+
+        expect(screen.getByText('SIGN OUT')).toBeInTheDocument();
+    });
+
+    test('It should render cart dropdown if isCartOpen is true', () => {
+        renderWithProviders(<Navigation />, {
+            preloadedState: {
+                cart: {
+                    isCartOpen: true,
+                    cartItems: [],
+                },
+            },
+        });
+
+        expect(screen.getByText('Your cart is empty')).toBeInTheDocument();
+    });
+
+    test('It should not render a cart dropdown if isCartOpen is false', () => {
+        renderWithProviders(<Navigation />, {
+            preloadedState: {
+                cart: {
+                    isCartOpen: false,
+                    cartItems: [],
+                },
+            },
+        });
+
+        expect(screen.queryByText('Your cart is empty')).toBeNull();
+    });
+});
\ No newline at end of file
diff --git a/src/routes/navigation/navigation.component.tsx b/src/routes/navigation/navigation.component.tsx
index 860bd49..b23218e 100644
--- a/src/routes/navigation/navigation.component.tsx
+++ b/src/routes/navigation/navigation.component.tsx
@@ -36,7 +36,7 @@ const Navigation = () => {
                                 SIGN OUT
                             </NavLink>
                         ) : <NavLink to="/auth">
-                            SIGN-IN
+                            SIGN IN
                         </NavLink>
                     }
                     <CartIcon />
diff --git a/src/utils/test/test.utils.js b/src/utils/test/test.utils.js
index 58d1533..a26f57a 100644
--- a/src/utils/test/test.utils.js
+++ b/src/utils/test/test.utils.js
@@ -3,6 +3,7 @@ import { render, screen } from "@testing-library/react";
 import { Provider } from "react-redux";
 import { createStore } from "redux";
 import { rootReducer } from "../../store/root-reducer";
+import { BrowserRouter } from "react-router-dom";
 
 export function renderWithProviders(
     ui,
@@ -15,7 +16,9 @@ export function renderWithProviders(
     const Wrapper = ({ children }) => {
         return (
             <Provider store={store}>
-                {children}
+                <BrowserRouter>
+                    {children}
+                </BrowserRouter>
             </Provider>
         );
     }