@riosst100/pwa-marketplace 1.2.3 → 1.2.5

package/src/components/SellerReview/sellerReview.js

@@ -6,8 +6,8 @@ import { Star1 } from 'iconsax-react';
 const SellerReview = () => {
     return (
         <>
-            <div className='w-full flex items-start gap-[30px] '>
-                <div className="w-full max-w-[300px] px-[25px] py-10 rounded-md border border-gray-200 flex-col justify-start items-start gap-[25px] inline-flex">
+            <div className='w-full flex items-start xs_flex-col lg_flex-row gap-[30px] '>
+                <div className="w-full xs_max-w-full lg_max-w-[300px] px-[25px] py-10 rounded-md border border-gray-200 flex-col justify-start items-start gap-[25px] inline-flex">
                     <div className="justify-start items-end gap-[15px] inline-flex">
                         <div className="text-center text-zinc-900 text-[40px] font-semibold leading-10">4.7</div>
                         <div className="flex-col justify-start items-start gap-[9px] inline-flex">
@@ -31,94 +31,94 @@ const SellerReview = () => {
                             <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">(26 Reviews)</div>
                         </div>
                     </div>
-                    <div className="flex-col items-start gap-2 flex">
-                        <div className="flex gap-3 items-center">
-                            <div className="gap-2.5 flex items-center">
+                    <div className="w-full flex-col items-start gap-2 flex">
+                        <div className="flex xs_w-full lg_w-fit gap-3 items-center">
+                            <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
                                 <div className="gap-[5px] flex items-center">
                                     <div className="w-3.5 h-3.5 relative">
                                         <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
                                     </div>
                                     <div className="gap-2.5 flex">
-                                        <div className="text-center text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">5</div>
+                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">5</div>
                                     </div>
                                 </div>
-                                <div className="w-40 h-[6px] relative">
+                                <div className="xs_w-full lg_w-40 h-[6px] relative">
                                     <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
                                     <div className="w-full h-[6px] absolute bg-[#4E31DB] rounded" />
                                 </div>
                             </div>
-                            <div className="w-10 text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">12</div>
+                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">12</div>
                         </div>
-                        <div className="flex gap-3 items-center">
-                            <div className="gap-2.5 flex items-center">
+                        <div className="flex xs_w-full lg_w-fit gap-3 items-center">
+                            <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
                                 <div className="gap-[5px] flex items-center">
                                     <div className="w-3.5 h-3.5 relative">
                                         <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
                                     </div>
                                     <div className="gap-2.5 flex">
-                                        <div className="text-center text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">4</div>
+                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">4</div>
                                     </div>
                                 </div>
-                                <div className="w-40 h-[6px] relative">
+                                <div className="xs_w-full lg_w-40 h-[6px] relative">
                                     <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
                                     <div className="w-[80%] h-[6px] absolute bg-[#4E31DB] rounded" />
                                 </div>
                             </div>
-                            <div className="w-10 text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">8</div>
+                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">8</div>
                         </div>
-                        <div className="flex gap-3 items-center">
-                            <div className="gap-2.5 flex items-center">
+                        <div className="flex xs_w-full lg_w-fit gap-3 items-center">
+                            <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
                                 <div className="gap-[5px] flex items-center">
                                     <div className="w-3.5 h-3.5 relative">
                                         <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
                                     </div>
                                     <div className="gap-2.5 flex">
-                                        <div className="text-center text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">3</div>
+                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">3</div>
                                     </div>
                                 </div>
-                                <div className="w-40 h-[6px] relative">
+                                <div className="xs_w-full lg_w-40 h-[6px] relative">
                                     <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
                                     <div className="w-[45%] h-[6px] absolute bg-[#4E31DB] rounded" />
                                 </div>
                             </div>
-                            <div className="w-10 text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">5</div>
+                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">5</div>
                         </div>
-                        <div className="flex gap-3 items-center">
-                            <div className="gap-2.5 flex items-center">
+                        <div className="flex xs_w-full lg_w-fit gap-3 items-center">
+                            <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
                                 <div className="gap-[5px] flex items-center">
                                     <div className="w-3.5 h-3.5 relative">
                                         <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
                                     </div>
                                     <div className="gap-2.5 flex">
-                                        <div className="text-center text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">2</div>
+                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">2</div>
                                     </div>
                                 </div>
-                                <div className="w-40 h-[6px] relative">
+                                <div className="xs_w-full lg_w-40 h-[6px] relative">
                                     <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
                                     <div className="w-[1%] h-[6px] absolute bg-[#4E31DB] rounded" />
                                 </div>
                             </div>
-                            <div className="w-10 text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">1</div>
+                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">1</div>
                         </div>
-                        <div className="flex gap-3 items-center">
-                            <div className="gap-2.5 flex items-center">
+                        <div className="flex xs_w-full lg_w-fit gap-3 items-center">
+                            <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
                                 <div className="gap-[5px] flex items-center">
                                     <div className="w-3.5 h-3.5 relative">
                                         <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
                                     </div>
                                     <div className="gap-2.5 flex">
-                                        <div className="text-center text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">1</div>
+                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">1</div>
                                     </div>
                                 </div>
-                                <div className="w-40 h-[6px] relative">
+                                <div className="xs_w-full lg_w-40 h-[6px] relative">
                                     <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
                                     <div className="w-[0%] h-[6px] absolute bg-[#4E31DB] rounded" />
                                 </div>
                             </div>
-                            <div className="w-10 text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">0</div>
+                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">0</div>
                         </div>
                     </div>
-                    <div className="self-stretch px-[30px] py-2.5 bg-white rounded-[30px] border border-indigo-600 justify-center items-center gap-2.5 inline-flex">
+                    <div className="xs_self-end lg_self-stretch px-[30px] py-2.5 bg-white rounded-[30px] border border-indigo-600 justify-center items-center gap-2.5 inline-flex">
                         <div className="text-indigo-600 text-base font-medium leading-tight">Write a review</div>
                     </div>
                 </div>

package/src/components/SellerReviewItem/sellerReviewItem.js

@@ -9,16 +9,16 @@ const SellerReviewItem = () => {
                     <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
                         <div class="inline-flex items-center gap-[15px] relative flex-[0_0_auto]">
                             <div class="flex w-[40px] h-[40px] items-center justify-around gap-[10px] p-[10px] relative bg-[#4e31db] rounded-[30px]">
-                                <div class="relative w-fit [font-family:'Noto_Sans',Helvetica] font-semibold text-white text-[16px] text-center tracking-[0] leading-[18px] whitespace-nowrap">JD</div>
+                                <div class="relative w-fit font-semibold text-white text-[16px] text-center tracking-[0] leading-[18px] whitespace-nowrap">JD</div>
                             </div>
                             <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
-                                <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-medium text-[14px] text-center tracking-[0] leading-[18px] whitespace-nowrap">John Doe</div>
-                                <div class="relative w-fit [font-family:'Noto_Sans',Helvetica] font-medium text-[#999999] text-[12px] text-center tracking-[0] leading-[18px] whitespace-nowrap">18 January 2024</div>
+                                <div class="relative w-fit mt-[-1.00px] font-medium text-[14px] text-center tracking-[0] leading-[18px] whitespace-nowrap">John Doe</div>
+                                <div class="relative w-fit font-medium text-[#999999] text-[12px] text-center tracking-[0] leading-[18px] whitespace-nowrap">18 January 2024</div>
                             </div>
                         </div>
-                        <div class="inline-flex items-start gap-[20px] relative flex-[0_0_auto]">
+                        <div class="flex xs_flex-col sm_flex-row items-start xs_gap-1 sm_gap-[20px] relative flex-[0_0_auto]">
                             <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
-                                <div class="relative w-fit [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Price</div>
+                                <div class="relative w-fit font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Price</div>
                                 <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
                                     <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
                                     <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
@@ -28,7 +28,7 @@ const SellerReviewItem = () => {
                                 </div>
                             </div>
                             <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
-                                <div class="relative w-[37px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[18px]">Value</div>
+                                <div class="relative w-[37px] font-normal text-[14px] tracking-[0] leading-[18px]">Value</div>
                                 <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
                                     <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
                                     <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
@@ -38,7 +38,7 @@ const SellerReviewItem = () => {
                                 </div>
                             </div>
                             <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
-                                <div class="relative w-fit [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Quality</div>
+                                <div class="relative w-fit font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Quality</div>
                                 <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
                                     <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
                                     <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
@@ -49,7 +49,7 @@ const SellerReviewItem = () => {
                             </div>
                         </div>
                     </div>
-                    <p class="relative self-stretch [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[18px]">
+                    <p class="relative self-stretch font-normal text-[14px] tracking-[0] leading-[18px]">
                         Got item at a great price. Arrived way quicker than expected, extremely well packaged and exactly as described. Highly recommend the seller.
                     </p>
                 </div>

package/src/components/SortBy/index.js

@@ -1,13 +1,21 @@
 import React from 'react';
-import { ArrowDown2 } from 'iconsax-react';
+import { ArrowDown2, Filter } from 'iconsax-react';
 
 const Sort = () => {
     return (
         <>
-            <div class="inline-flex flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-[#e6e9ea]">
-                <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
-                    <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Most relevant</div>
-                    <ArrowDown2 color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
+            <div className='x-container xs_flex xs_justify-between xs_w-full xl_w-fit'>
+                <div class="xs_flex xl_hidden flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-gray-100">
+                    <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
+                        <Filter color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
+                        <div class="relative w-fit text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Filter</div>
+                    </div>
+                </div>
+                <div class="inline-flex flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-gray-100">
+                    <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
+                        <div class="relative w-fit text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Most relevant</div>
+                        <ArrowDown2 color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
+                    </div>
                 </div>
             </div>
         </>

package/src/components/commons/Slider/index.js

@@ -2,11 +2,11 @@ import React from 'react';
 import cx from 'classnames';
 
 const Slider = (props) => {
-    const { rootClassname = '' } = props
+    const { rootClassname = '', seller } = props
     const rootClass = cx('slider-container', rootClassname)
     return (
         <div className={rootClass}>
-            <img src="https://cdn.animaapp.com/projects/65c70e0e1dd7109c524e43af/releases/65c70e2bc3e635b310da0a17/img/rectangle-87.png" />
+            <img src={seller ? seller.image : ''} />
         </div>
     )
 }

package/src/components/commons/Tabs/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import cn from 'classnames';
 
 const Tabs = (props) => {
     const {
@@ -11,14 +11,16 @@ const Tabs = (props) => {
         tabContentContainerClassName = '',
         tabContentWrapperClassName = '',
         tabActiveClassName = '',
+        tabWrapperClassName = '',
     } = props
 
     const [activeTabs, setActiveTabs] = React.useState(0);
-    const rootClass = cx('mb-4 border-b border-gray-200 dark:border-gray-700', rootClassName);
-    const tabTitleClass = cx('inline-block p-4 rounded-t-lg', tabTitleClassName);
-    const tabContainerClass = cx('tab-content-container', tabContentContainerClassName);
-    const tabContentWrapperClass = cx('tab-content-wrapper', tabContentWrapperClassName);
-    const tabActiveClass = cx('border-solid border-b-2', tabActiveClassName)
+    const rootClass = cn('mb-4 border-b border-gray-100', rootClassName);
+    const tabTitleClass = cn('inline-block p-[10px] rounded-t-lg text-[16px] font-semibold', tabTitleClassName);
+    const tabContainerClass = cn('tab-content-container', tabContentContainerClassName);
+    const tabContentWrapperClass = cn('tab-content-wrapper', tabContentWrapperClassName);
+    const tabActiveClass = cn('border-solid border-b-2', tabActiveClassName);
+    const tabWrapperClass = cn('flex flex-wrap -mb-px text-sm font-medium text-center gap-4', tabWrapperClassName);
 
     const handleSwicthTab = (index) => {
         setActiveTabs(index);
@@ -27,11 +29,11 @@ const Tabs = (props) => {
     return (
         <>
             <div className={rootClass}>
-                <ul className='flex flex-wrap -mb-px text-sm font-medium text-center' role='tablist'>
+                <ul className={tabWrapperClass} role='tablist'>
                     {data.map((item, index) => (
                         <li className='me-2' role='presentation'>
                             <button
-                                className={cx(tabTitleClass, index === activeTabs ? tabActiveClass : '')}
+                                className={cn(tabTitleClass, index === activeTabs ? tabActiveClass : '')}
                                 id={item.id}
                                 role='tab'
                                 aria-controls={`${item.id}-tab`}
@@ -50,7 +52,7 @@ const Tabs = (props) => {
             {hasContent ? (
                 <div className={tabContainerClass}>
                     {data.map((item, index) => (
-                        <div className={cx(index !== activeTabs ? 'hidden' : '', tabContentWrapperClass)} role='tabpanel' aria-labelledby={`${item.id}-tab`}>
+                        <div className={cn(index !== activeTabs ? 'hidden' : '', tabContentWrapperClass)} role='tabpanel' aria-labelledby={`${item.id}-tab`}>
                             {item.content}
                         </div>
                     ))}

package/src/overwrites/venia-ui/lib/components/Header/header.js

@@ -19,8 +19,9 @@ import BecomeSellerLink from '@riosst100/pwa-marketplace/src/components/BecomeSe
 import MegaMenu from '@magento/venia-ui/lib/components/MegaMenu';
 import PageLoadingIndicator from '@magento/venia-ui/lib/components/PageLoadingIndicator';
 import { useIntl } from 'react-intl';
-
-const SearchBar = React.lazy(() => import('@magento/venia-ui/lib/components/SearchBar'));
+import cn from 'classnames';
+// const SearchBar = React.lazy(() => import('@magento/venia-ui/lib/components/SearchBar'));
+const SearchBar = React.lazy(() => import('@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/SearchBar'));
 
 const Header = props => {
     const {
@@ -45,19 +46,20 @@ const Header = props => {
             </div>
         </div>
     );
-    const searchBar = isSearchOpen ? (
-        <Suspense fallback={searchBarFallback}>
-            <Route>
-                <SearchBar isOpen={isSearchOpen} ref={searchRef} />
-            </Route>
-        </Suspense>
-    ) : null;
+    // const searchBar = isSearchOpen ? (
+    //     <Suspense fallback={searchBarFallback}>
+    //         <Route>
+    //             <SearchBar isOpen={true} ref={searchRef} />
+    //         </Route>
+    //     </Suspense>
+    // ) : null;
 
     const { formatMessage } = useIntl();
     const title = formatMessage({ id: 'logo.title', defaultMessage: 'Venia' });
 
     return (
         <Fragment>
+            <PageLoadingIndicator absolute />
             <div className={classes.switchersContainer}>
                 <div className={classes.switchers} data-cy="Header-switchers">
                     <BecomeSellerLink />
@@ -66,33 +68,43 @@ const Header = props => {
                     <CurrencySwitcher />
                 </div>
             </div>
-            <header className={rootClass} data-cy="Header-root">
-                <div className={classes.toolbar}>
-                    <div className={classes.primaryActions}>
-                        <NavTrigger />
-                    </div>
-
-                    <Link
-                        aria-label={title}
-                        to={resourceUrl('/')}
-                        className={classes.logoContainer}
-                        data-cy="Header-logoContainer"
-                    >
-                        <div><b>TCG Collective</b></div>
-                        <small>Toys | Card | Games</small>
-                    </Link>
-                    <MegaMenu />
-                    <div className={classes.secondaryActions}>
-                        <SearchTrigger
-                            onClick={handleSearchTriggerClick}
-                            ref={searchTriggerRef}
-                        />
-                        <AccountTrigger />
-                        <CartTrigger />
+            <header className={cn(rootClass, '!flex flex-col !px-0 border-gray-100 ')} data-cy="Header-root">
+                <div className={cn('middle-header border-b border-gray-100')}>
+                    <div className={cn('w-full max-w-[1210px] px-[15px] py-[20px] mx-[auto] flex justify-between items-center')}>
+                        <div className='flex'>
+                            <NavTrigger />
+                            <Link
+                                aria-label={title}
+                                to={resourceUrl('/')}
+                                className={''}
+                                data-cy="Header-logoContainer"
+                            >
+                                <div><b>TCG Collective</b></div>
+                                <small>Toys | Card | Games</small>
+                            </Link>
+                        </div>
+                        <div className='flex'>
+                            <Suspense fallback={searchBarFallback}>
+                                <Route>
+                                    <SearchBar isOpen={true} ref={searchRef} />
+                                </Route>
+                            </Suspense>
+                        </div>
+                        <div className={classes.secondaryActions}>
+                            {/* <SearchTrigger
+                                onClick={handleSearchTriggerClick}
+                                ref={searchTriggerRef}
+                            /> */}
+                            <AccountTrigger />
+                            <CartTrigger />
+                        </div>
                     </div>
                 </div>
-                {searchBar}
-                <PageLoadingIndicator absolute />
+                <MegaMenu
+                    rootClassName={cn('nav-menu w-full max-w-[1210px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
+                    megaMenuItemClassname={cn('px-0 py-[15px] leading-[20px]')}
+                    titleClassName={cn('font-medium leading-[20px]')}
+                />
             </header>
             <OnlineIndicator
                 hasBeenOffline={hasBeenOffline}

package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/MegaMenu.spec.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import { createTestInstance } from '@magento/peregrine';
+import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
+
+import MegaMenu from '../megaMenu';
+
+jest.mock('@magento/venia-ui/lib/classify');
+jest.mock('@magento/peregrine/lib/hooks/useIsInViewport');
+jest.mock('@magento/peregrine/lib/talons/MegaMenu/useMegaMenu', () => ({
+    useMegaMenu: jest.fn().mockReturnValue({
+        megaMenuData: {
+            id: 1,
+            name: 'Clothing',
+            children: [
+                {
+                    id: 2,
+                    name: 'Women',
+                    url_path: 'women',
+                    children: [
+                        {
+                            id: 5,
+                            name: 'Bottoms',
+                            url_path: 'bottoms',
+                            isActive: true,
+                            children: []
+                        }
+                    ]
+                },
+                {
+                    id: 3,
+                    name: 'Men',
+                    url_path: 'men',
+                    children: []
+                },
+                {
+                    id: 4,
+                    name: 'Gear',
+                    url_path: 'gear',
+                    children: []
+                }
+            ]
+        },
+        activeCategoryId: 5,
+        categoryUrlSuffix: '.html',
+        useOutsideAlerter: () => {}
+    })
+}));
+
+describe('#MegaMenu', () => {
+    test('useEffect', () => {
+        const useEffect = jest.spyOn(React, 'useEffect');
+
+        const mockUseEffect = () => {
+            useEffect.mockImplementationOnce(mockFunction => mockFunction());
+        };
+
+        mockUseEffect();
+    });
+
+    test('not resetting the menu', () => {
+        const handleClickOutside = jest.fn();
+
+        expect(handleClickOutside).toHaveBeenCalledTimes(0);
+    });
+
+    it('renders empty div if not in viewport', () => {
+        useIsInViewport.mockReturnValue(false);
+
+        const instance = createTestInstance(
+            <MemoryRouter>
+                <MegaMenu />
+            </MemoryRouter>
+        );
+
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders menu if in viewport', () => {
+        useIsInViewport.mockReturnValue(true);
+
+        const instance = createTestInstance(
+            <MemoryRouter>
+                <MegaMenu />
+            </MemoryRouter>
+        );
+
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+});

package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/MegaMenuItem.spec.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { act } from 'react-test-renderer';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import MegaMenuItem from '../megaMenuItem';
+
+jest.mock('../../../classify');
+jest.mock('../../Icon', () => props => <mock-Icon {...props} />);
+jest.mock('../submenu', () => props => <mock-Submenu {...props} />);
+jest.mock('react', () => {
+    const React = jest.requireActual('react');
+    const memoSpy = jest.spyOn(React, 'useMemo');
+
+    return Object.assign(React, {
+        useMemo: memoSpy
+    });
+});
+
+const mockHandleKeyDown = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+    Link: jest.fn(() => props => <mock-Link {...props} />)
+}));
+
+jest.mock('@magento/peregrine/lib/talons/MegaMenu/useMegaMenuItem', () => ({
+    useMegaMenuItem: jest.fn(() => {
+        return {
+            isFocused: false,
+            isActive: false,
+            handleMenuItemFocus: jest.fn(),
+            handleCloseSubMenu: jest.fn(),
+            isMenuActive: false,
+            handleKeyDown: mockHandleKeyDown
+        };
+    })
+}));
+
+let inputProps = {};
+
+const Component = () => {
+    return <MegaMenuItem {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        activeCategoryId: 1,
+        category: {
+            id: 1,
+            name: 'Women',
+            url_path: 'women',
+            isActive: true,
+            children: [
+                {
+                    id: 2,
+                    name: 'Bottoms',
+                    url_path: 'bottoms',
+                    children: []
+                },
+                {
+                    id: 3,
+                    name: 'Tops',
+                    url_path: 'tops',
+                    isActive: false,
+                    children: []
+                }
+            ]
+        },
+        rootCategoryName: 'Clothing',
+        categoryUrlSuffix: '.html',
+        mainNavWidth: 200,
+        subMenuState: 'test',
+        disableFocus: false
+    };
+};
+
+describe('Mega menu item renders correctly', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
+
+    test('it renders correctly', () => {
+        const instance = createTestInstance(<Component />);
+
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+
+    test('it marks the active category', () => {
+        const { root } = createTestInstance(<Component />);
+
+        expect(root.findByType(Link).props.className).toEqual('megaMenuLink');
+        expect(root.findByType(Link).props.to).toEqual('/women.html');
+        expect(root.findByType(Link).props.children[0]).toEqual('Women');
+    });
+
+    it('should call a11yClick', () => {
+        const { root } = createTestInstance(<Component />);
+
+        act(() => {
+            root.findByType(Link).props.onKeyDown();
+        });
+
+        expect(mockHandleKeyDown).toHaveBeenCalled();
+    });
+
+    test('it does not render submenu when item does not have children', () => {
+        const categoryWithoutChildren = {
+            id: 3,
+            name: 'Tops',
+            url_path: 'tops',
+            isActive: false,
+            children: []
+        };
+
+        const instance = createTestInstance(
+            <Component category={categoryWithoutChildren} />
+        );
+
+        expect(instance.toJSON().children.length).toEqual(1);
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+});