10065696284

Committed 23 Jul 2024 08:10PM UTC coverage: 90.801% (+0.02%) from 90.782%

Build # 10065696284

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #77 from atlp-rwanda/fix-category-issues

Fix-category-banner-issues

Run Details

1089 of 1370 branches covered (79.49%)

Branch coverage included in aggregate %.

84 of 97 new or added lines in 8 files covered. (86.6%)

42 existing lines in 6 files now uncovered.

11437 of 12425 relevant lines covered (92.05%)

12.36 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

82.67

/src/components/Navbar/Navbar.tsx

import React, { useEffect, useState } from 'react';
import { Search } from 'lucide-react';
import knightsLogo from '../../images/logo.png';
import cart from '../../images/cart.png';
import user from '../../images/user.png';
import notificationBell from '../../images/bell.png';
import menuIcon from '../../assets/Menu.svg';
import closeIcon from '../../assets/Close.svg';
import { useDispatch, useSelector } from 'react-redux';
import { Link, useNavigate } from 'react-router-dom';
import DesktopMenu from '../Menu/DesktopMenu';
import Login from './loginComponent';
import CategoriesMenu from '../Menu/CategoriesMenu';
import { RootState, AppDispatch } from '../../redux/store';
import { fetchCart } from '../../redux/actions/cartAction';
import { setOpenNotification } from '../../redux/reducers/notification';
import NotificationLayout from '../Notification/NotificationLayout';

function Navbar() {
  const { userToken } = useSelector((state: RootState) => state.auth);
  const [showDesktopMenu, setShowDesktopMenu] = useState(false);
  const [showMenu, setShowMenu] = useState(false);
  const { openNotification, unreadNotifications } = useSelector((state: RootState) => state.notification);
  const [searchTerm, setSearchTerm] = useState('');
  const navigate = useNavigate();

  useEffect(() => {
    setShowDesktopMenu(false);
  }, [userToken]);

  const desktopMenuHandler = () => {
    setShowDesktopMenu((prevData) => !prevData);
  };

  const handleSearchInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(event.target.value);
  };

  const handleSearchSubmit = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Enter') {
      navigate(`/search?query=${encodeURIComponent(searchTerm)}`);
    }
  };
  const handleSearch = () => {
    navigate(`/search?query=${encodeURIComponent(searchTerm)}`);
  };
  const dispatch = useDispatch<AppDispatch>();

  const handleNotificationPopup = () => {
    dispatch(setOpenNotification(!openNotification));
  };

  useEffect(() => {
    dispatch(fetchCart());
  }, [dispatch]);

  //cart state
  const { cartItems } = useSelector((state: RootState) => state.cart);

  return (
    <nav
      className={`relative z-50 w-full min-h-[10vh] h-auto flex items-center ${userToken ? 'justify-center flex-col gap-4' : 'justify-between'} xmd:flex-row xmd:justify-between bg-white px-6 lg:px-12 py-5 sticky top-0 shadow-navbar text-baseBlack`}
      data-testid="navbar"
    >
      <h1
        data-testid="homePage"
        onClick={() => {
          navigate('/');
        }}
        className="cursor-pointer flex items-center justify-start gap-x-2 text-primary capitalize font-medium text-xl"
      >
        <img src={knightsLogo} alt="Knights Store Logo" />
        KNIGHTS STORE
      </h1>

      <NotificationLayout />

      {!userToken && (
        <div className="xmd:hidden flex gap-5" data-testid="userIcon">
          <Search strokeWidth={1.5} className="w-10 h-9 text-black" />
          <img
            onClick={() => setShowMenu((prevState) => !prevState)}
            src={menuIcon}
            className="w-9 h-9"
            alt="Menu Icon"
            data-testid="menuIcon"
          />
        </div>
      )}

      {userToken && (
        <div className="xmd:hidden flex justify-between w-[100%]" data-testid="userIcon">
          <Search strokeWidth={1.5} className="w-[25px] h-[25px] text-black" />
          <div onClick={handleNotificationPopup} className="relative cursor-pointer">
            <img src={notificationBell} className="w-[25px] h-[25px]" alt="Notification Bell" />
            {unreadNotifications > 0 && (
              <span className="absolute min-w-5 h-5 top-1 right-[14px] mt-[-10px] mr-[-15px] bg-orange text-white text-[.7rem] font-semibold flex items-center justify-center rounded-full leading-none p-1">
                {unreadNotifications}
              </span>
            )}
          </div>
          <a href="/cart" className="relative cursor-pointer">
            <img src={cart} alt="Cart Icon" className="w-[25px] h-[25px]" />
            <span className="absolute min-w-5 h5 top-1 right-[6px] mt-[-10px] mr-[-15px] bg-orange text-white text-xs flex items-center justify-center rounded-full leading-none p-1">
              {cartItems.length}
            </span>
          </a>
          <img
            src={user}
            onClick={desktopMenuHandler}
            alt="User Icon"
            className="w-[25px] h-[25px]"
            data-testid="userIcon"
          />
          <img
            onClick={() => setShowMenu((prevState) => !prevState)}
            src={menuIcon}
            className="w-[25px] h-[25px]"
            alt="Menu Icon"
            data-testid="menuIcon"
          />
        </div>
      )}

      {showMenu && (
        <div
          className={`absolute ${userToken ? 'top-32' : 'top-20'} left-0 w-[100%] bg-slate-100 h-[500px] p-6 flex flex-col gap-6`}
          data-testid="mobileMenu"
        >
          <div className={`flex ${userToken ? 'justify-end' : 'justify-between'}`}>
            {!userToken && (
              <div onClick={() => setShowMenu(false)}>
                <Link to="/login">
                  <Login data-testid="loginLink" />
                </Link>
              </div>
            )}
            <img onClick={() => setShowMenu(false)} src={closeIcon} alt="Close Icon" />
          </div>
          <div className="flex flex-col gap-3 items-center">
            <CategoriesMenu setShowMenu={setShowMenu} />
          </div>
        </div>
      )}

      <div className=" hidden lg:w-[40%] xmd:w-[40%] min-h-10 xmd:flex items-center justify-between gap-x-1 px-4 py-2 border border-neutrals500 bg-white rounded-3xl">
        <input
          className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-base placeholder-grey2"
          type="text"
          id="searchInput"
          placeholder="search for anything"
          value={searchTerm}
          onChange={handleSearchInputChange}
          onKeyDown={handleSearchSubmit}
          data-testid="searchInput"
        />
        <Search onClick={handleSearch} strokeWidth={1.5} className="text-orange cursor-pointer" />
      </div>

      <div className="hidden xmd:flex items-center justify-end sm:gap-x-5 lg:gap-x-10">
        {!userToken && (
          <Link to="/login" data-testid="loginLink">
            <Login />
          </Link>
        )}
        {userToken && (
          <div onClick={handleNotificationPopup} className="relative cursor-pointer">
            <img src={notificationBell} alt="Notification Bell" className="w-7 h-7" />
            {unreadNotifications > 0 && (
              <span className="absolute min-w-5 h-5 top-1 right-[12px] mt-[-10px] mr-[-15px] bg-orange text-white text-sm flex items-center justify-center rounded-full leading-none p-1">
                {unreadNotifications}
              </span>
            )}
          </div>
        )}
        <a href="/cart" className="relative cursor-pointer" data-testid="cart">
          <img src={cart} alt="Cart Icon" className="w-7 h-7" />
          <span className="absolute min-w-5 h-5 top-1 right-[5px] mt-[-10px] mr-[-15px] bg-orange text-white text-sm flex items-center justify-center rounded-full leading-none p-1">
            {cartItems.length}
          </span>
        </a>
        {userToken && (
          <div onClick={desktopMenuHandler} className="relative cursor-pointer" data-testid="desktopMenuIcon">
            <img src={user} alt="User Icon" className="w-7 h-7" data-testid="userIcon" />
          </div>
        )}
      </div>
      {userToken && showDesktopMenu && (
        <div
          className="absolute top-[130px] right-[25%] xmd:right-6 xmd:top-[12vh]"
          onClick={() => setShowDesktopMenu(false)}
        >
          <DesktopMenu />
        </div>
      )}
    </nav>
  );
}

export default Navbar;

1	import React, { useEffect, useState } from 'react';	1✔
2	import { Search } from 'lucide-react';	1✔
3	import knightsLogo from '../../images/logo.png';	1✔
4	import cart from '../../images/cart.png';	1✔
5	import user from '../../images/user.png';	1✔
6	import notificationBell from '../../images/bell.png';	1✔
7	import menuIcon from '../../assets/Menu.svg';	1✔
8	import closeIcon from '../../assets/Close.svg';	1✔
9	import { useDispatch, useSelector } from 'react-redux';	1✔
10	import { Link, useNavigate } from 'react-router-dom';	1✔
11	import DesktopMenu from '../Menu/DesktopMenu';	1✔
12	import Login from './loginComponent';	1✔
13	import CategoriesMenu from '../Menu/CategoriesMenu';	1✔
14	import { RootState, AppDispatch } from '../../redux/store';	1✔
15	import { fetchCart } from '../../redux/actions/cartAction';	1✔
16	import { setOpenNotification } from '../../redux/reducers/notification';	1✔
17	import NotificationLayout from '../Notification/NotificationLayout';	1✔
18		1✔
19	function Navbar() {	23✔
20	const { userToken } = useSelector((state: RootState) => state.auth);	23✔
21	const [showDesktopMenu, setShowDesktopMenu] = useState(false);	23✔
22	const [showMenu, setShowMenu] = useState(false);	23✔
23	const { openNotification, unreadNotifications } = useSelector((state: RootState) => state.notification);	23✔
24	const [searchTerm, setSearchTerm] = useState('');	23✔
25	const navigate = useNavigate();	23✔
26		23✔
27	useEffect(() => {	23✔
28	setShowDesktopMenu(false);	23✔
29	}, [userToken]);	23✔
30		8✔
31	const desktopMenuHandler = () => {	23✔
32	setShowDesktopMenu((prevData) => !prevData);	23✔
33	};	23✔
34		×
35	const handleSearchInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {	×
36	setSearchTerm(event.target.value);	23✔
37	};	23✔
38		1✔
39	const handleSearchSubmit = (event: React.KeyboardEvent<HTMLInputElement>) => {	1✔
40	if (event.key === 'Enter') {	23✔
41	navigate(`/search?query=${encodeURIComponent(searchTerm)}`);	23✔
42	}	1✔
43	};	1✔
44	const handleSearch = () => {	1✔
45	navigate(`/search?query=${encodeURIComponent(searchTerm)}`);	1✔
46	};	23✔
UNCOV 47	const dispatch = useDispatch<AppDispatch>();	×
UNCOV 48		×
49	const handleNotificationPopup = () => {	23✔
50	dispatch(setOpenNotification(!openNotification));	23✔
51	};	23✔
52		×
53	useEffect(() => {	×
54	dispatch(fetchCart());	23✔
55	}, [dispatch]);	23✔
56		8✔
57	//cart state	23✔
58	const { cartItems } = useSelector((state: RootState) => state.cart);	23✔
59		23✔
60	return (	23✔
61	<nav	23✔
62	className={`relative z-50 w-full min-h-[10vh] h-auto flex items-center ${userToken ? 'justify-center flex-col gap-4' : 'justify-between'} xmd:flex-row xmd:justify-between bg-white px-6 lg:px-12 py-5 sticky top-0 shadow-navbar text-baseBlack`}	23✔
63	data-testid="navbar"	23✔
64	>	23✔
65	<h1	23✔
66	data-testid="homePage"	23✔
67	onClick={() => {	23✔
68	navigate('/');	23✔
69	}}	23✔
70	className="cursor-pointer flex items-center justify-start gap-x-2 text-primary capitalize font-medium text-xl"	1✔
71	>	1✔
72	<img src={knightsLogo} alt="Knights Store Logo" />	23✔
73	KNIGHTS STORE	23✔
74	</h1>	23✔
75		23✔
76	<NotificationLayout />	23✔
77		23✔
78	{!userToken && (	23✔
79	<div className="xmd:hidden flex gap-5" data-testid="userIcon">	23✔
80	<Search strokeWidth={1.5} className="w-10 h-9 text-black" />	23✔
81	<img	19✔
82	onClick={() => setShowMenu((prevState) => !prevState)}	19✔
83	src={menuIcon}	19✔
84	className="w-9 h-9"	19✔
85	alt="Menu Icon"	19✔
86	data-testid="menuIcon"	19✔
87	/>	19✔
88	</div>	19✔
89	)}	19✔
90		19✔
91	{userToken && (	23✔
92	<div className="xmd:hidden flex justify-between w-[100%]" data-testid="userIcon">	23✔
93	<Search strokeWidth={1.5} className="w-[25px] h-[25px] text-black" />	23✔
94	<div onClick={handleNotificationPopup} className="relative cursor-pointer">	3✔
95	<img src={notificationBell} className="w-[25px] h-[25px]" alt="Notification Bell" />	3✔
96	{unreadNotifications > 0 && (	3✔
97	<span className="absolute min-w-5 h-5 top-1 right-[14px] mt-[-10px] mr-[-15px] bg-orange text-white text-[.7rem] font-semibold flex items-center justify-center rounded-full leading-none p-1">	3✔
98	{unreadNotifications}	3!
99	</span>	×
100	)}	×
101	</div>	×
102	<a href="/cart" className="relative cursor-pointer">	3✔
103	<img src={cart} alt="Cart Icon" className="w-[25px] h-[25px]" />	3✔
104	<span className="absolute min-w-5 h5 top-1 right-[6px] mt-[-10px] mr-[-15px] bg-orange text-white text-xs flex items-center justify-center rounded-full leading-none p-1">	3✔
105	{cartItems.length}	3✔
106	</span>	3✔
107	</a>	3✔
108	<img	3✔
109	src={user}	3✔
110	onClick={desktopMenuHandler}	3✔
111	alt="User Icon"	3✔
112	className="w-[25px] h-[25px]"	3✔
113	data-testid="userIcon"	3✔
114	/>	3✔
115	<img	3✔
116	onClick={() => setShowMenu((prevState) => !prevState)}	3✔
117	src={menuIcon}	3✔
118	className="w-[25px] h-[25px]"	3✔
119	alt="Menu Icon"	3✔
120	data-testid="menuIcon"	3✔
121	/>	3✔
122	</div>	3✔
123	)}	3✔
124		3✔
125	{showMenu && (	23✔
126	<div	23✔
127	className={`absolute ${userToken ? 'top-32' : 'top-20'} left-0 w-[100%] bg-slate-100 h-[500px] p-6 flex flex-col gap-6`}	23!
128	data-testid="mobileMenu"	×
129	>	×
130	<div className={`flex ${userToken ? 'justify-end' : 'justify-between'}`}>	×
131	{!userToken && (	×
132	<div onClick={() => setShowMenu(false)}>	×
133	<Link to="/login">	×
134	<Login data-testid="loginLink" />	×
135	</Link>	×
136	</div>	×
137	)}	×
138	<img onClick={() => setShowMenu(false)} src={closeIcon} alt="Close Icon" />	×
139	</div>	×
140	<div className="flex flex-col gap-3 items-center">	×
141	<CategoriesMenu setShowMenu={setShowMenu} />	×
142	</div>	×
143	</div>	×
144	)}	×
145		×
146	<div className=" hidden lg:w-[40%] xmd:w-[40%] min-h-10 xmd:flex items-center justify-between gap-x-1 px-4 py-2 border border-neutrals500 bg-white rounded-3xl">	23✔
147	<input	23✔
148	className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-base placeholder-grey2"	23✔
149	type="text"	23✔
150	id="searchInput"	23✔
151	placeholder="search for anything"	23✔
152	value={searchTerm}	23✔
153	onChange={handleSearchInputChange}	23✔
154	onKeyDown={handleSearchSubmit}	23✔
155	data-testid="searchInput"	23✔
156	/>	23✔
157	<Search onClick={handleSearch} strokeWidth={1.5} className="text-orange cursor-pointer" />	23✔
158	</div>	23✔
159		23✔
160	<div className="hidden xmd:flex items-center justify-end sm:gap-x-5 lg:gap-x-10">	23✔
161	{!userToken && (	23✔
162	<Link to="/login" data-testid="loginLink">	23✔
163	<Login />	23✔
164	</Link>	19✔
165	)}	19✔
166	{userToken && (	19✔
167	<div onClick={handleNotificationPopup} className="relative cursor-pointer">	23✔
168	<img src={notificationBell} alt="Notification Bell" className="w-7 h-7" />	23✔
169	{unreadNotifications > 0 && (	3✔
170	<span className="absolute min-w-5 h-5 top-1 right-[12px] mt-[-10px] mr-[-15px] bg-orange text-white text-sm flex items-center justify-center rounded-full leading-none p-1">	3✔
171	{unreadNotifications}	3!
172	</span>	×
173	)}	×
174	</div>	×
175	)}	3✔
176	<a href="/cart" className="relative cursor-pointer" data-testid="cart">	3✔
177	<img src={cart} alt="Cart Icon" className="w-7 h-7" />	23✔
178	<span className="absolute min-w-5 h-5 top-1 right-[5px] mt-[-10px] mr-[-15px] bg-orange text-white text-sm flex items-center justify-center rounded-full leading-none p-1">	23✔
179	{cartItems.length}	23✔
180	</span>	23✔
181	</a>	23✔
182	{userToken && (	23✔
183	<div onClick={desktopMenuHandler} className="relative cursor-pointer" data-testid="desktopMenuIcon">	23✔
184	<img src={user} alt="User Icon" className="w-7 h-7" data-testid="userIcon" />	23✔
185	</div>	3✔
186	)}	3✔
187	</div>	3✔
188	{userToken && showDesktopMenu && (	3✔
189	<div	3✔
190	className="absolute top-[130px] right-[25%] xmd:right-6 xmd:top-[12vh]"	3✔
191	onClick={() => setShowDesktopMenu(false)}	3✔
192	>	23✔
193	<DesktopMenu />	23✔
194	</div>	23✔
195	)}	×
196	</nav>	×
197	);	×
198	}	×
199		×
200	export default Navbar;	×

atlp-rwanda / knights-ecomm-fe / 10065696284

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous