Merge pull request #37 from Chamindu36/ts-dev-migration

Add test cases to the components - Part 1

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",

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

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

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

src/routes/navigation/navigation.component.tsx

@@ -36,7 +36,7 @@ const Navigation = () => {
                                 SIGN OUT
                             </NavLink>
                         ) : <NavLink to="/auth">
-                            SIGN-IN
+                            SIGN IN
                         </NavLink>
                     }
                     <CartIcon />

src/utils/test/test.utils.js

@@ -0,0 +1,26 @@
+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";
+import { BrowserRouter } from "react-router-dom";
+
+export function renderWithProviders(
+    ui,
+    {
+        preloadedState = {},
+        store = createStore(rootReducer, preloadedState),
+        ...renderOptions
+    } = {}
+) {
+    const Wrapper = ({ children }) => {
+        return (
+            <Provider store={store}>
+                <BrowserRouter>
+                    {children}
+                </BrowserRouter>
+            </Provider>
+        );
+    }
+    return render(ui, { wrapper: Wrapper, ...renderOptions });
+};