Unit tests and code coverage #82 (#83)

* Refactor Jest configuration and add test coverage

* Add test coverage workflow

* Refactor animationStyles.test.js: Add tests for getAnimationStyles function

* Refactor Nav component PropTypes

* Remove test script until tests are added

* Revert

* Multiple tests added

* Refactor of how ids are given to menu items

* Refactor of how ids are given to menu items

* https example added

* https example added

* Menu and test optimized

* Refactor switch to if/else

* Optimize rmm__menu

* MenuContext tests WIP

* MenuContext WIP

* Refactor MenuContext and optimize code

* Refactor stateMachine function to use a switch statement for better readability and maintainability

* Update package version to 2.2.0

Author: jasonrundell

.babelrc.json

@@ -13,5 +13,5 @@
     ],
     "@babel/preset-react"
   ],
-  "plugins": []
+  "plugins": ["istanbul"]
 }

.eslintrc.cjs

@@ -1,21 +1,15 @@
 module.exports = {
   env: {
     browser: true,
-    es2021: true
+    es2021: true,
+    jest: true
   },
-  extends: [
-    'plugin:react/recommended',
-    'standard'
-  ],
-  overrides: [
-  ],
+  extends: ['plugin:react/recommended', 'standard'],
+  overrides: [],
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module'
   },
-  plugins: [
-    'react'
-  ],
-  rules: {
-  }
+  plugins: ['react'],
+  rules: {}
 }

.github/workflows/test-coverage.yml

@@ -0,0 +1,31 @@
+name: Test Coverage
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test-coverage:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests with coverage
+        run: npm test -- --coverage
+
+      - name: Upload coverage report
+        uses: actions/upload-artifact@v3
+        with:
+          name: coverage-report
+          path: coverage

demo/src/App.tsx

@@ -4,6 +4,7 @@ import { Menu } from '@jasonrundell/react-mega-menu'
 import './App.css'
 
 export interface MenuItem {
+  id: string
   label: string
   type: string
   url: string
@@ -44,60 +45,70 @@ const menuConfig: MenuConfig = {
   menu: {
     items: [
       {
+        id: 'home',
         label: 'Home',
         type: 'main',
         url: '/'
       },
       {
+        id: 'about',
         label: 'About',
         type: 'main',
         url: '/about/'
       },
       {
+        id: 'store',
         label: 'Store',
         type: 'mega',
         url: '/store/',
         items: [
           {
+            id: 'store-deals',
             label: 'Deals',
             type: 'link',
             url: '/store/deals/',
             description:
               "Three lined small description that accompanies link in the React Mega Menu project. This maybe too much text? Who's to say, really. We'll leave it to fate to decide."
           },
           {
+            id: 'store-kitchen',
             label: 'Kitchen',
             type: 'link',
             url: '/store/kitchen/',
             description:
               "Three lined small description that accompanies link in the React Mega Menu project. This maybe too much text? Who's to say, really. We'll leave it to fate to decide."
           },
           {
+            id: 'store-outdoors',
             label: 'Outdoors',
             type: 'sub',
             url: '/store/outdoors/',
             description:
               "Three lined small description that accompanies link in the React Mega Menu project. This maybe too much text? Who's to say, really. We'll leave it to fate to decide.",
             items: [
               {
+                id: 'store-outdoors-tools',
                 label: 'Tools',
                 type: 'link',
                 url: '/store/outdoors/tools/',
                 description: 'Single line description that accompanies link'
               },
               {
+                id: 'store-outdoors-plants',
                 label: 'Plants',
                 type: 'link',
                 url: '/store/outdoors/plants/',
                 description: 'Single line description that accompanies link'
               },
               {
+                id: 'store-outdoors-patio',
                 label: 'Patio',
                 type: 'link',
                 url: '/store/outdoors/patio/',
                 description: 'Single line description that accompanies link'
               },
               {
+                id: 'store-outdoors-decking',
                 label: 'Decking',
                 type: 'link',
                 url: '/store/outdoors/decking/',
@@ -106,33 +117,38 @@ const menuConfig: MenuConfig = {
             ]
           },
           {
+            id: 'store-bedroom',
             label: 'Bedroom',
             type: 'sub',
             url: '/store/bedroom/',
             description:
               "Three lined small description that accompanies link in the React Mega Menu project. This maybe too much text? Who's to say, really. We'll leave it to fate to decide.",
             items: [
               {
+                id: 'store-bedroom-beds',
                 label: 'Beds',
                 type: 'link',
                 url: '/store/bedroom/beds/',
                 description: 'Single line description that accompanies link'
               },
               {
+                id: 'store-bedroom-dressers',
                 label: 'Dressers',
                 type: 'link',
                 url: '/store/bedroom/dressers/',
                 description:
                   'Double lined small description that accompanies link in the React Mega Menu project'
               },
               {
+                id: 'store-bedroom-nightstands',
                 label: 'Nightstands',
                 type: 'link',
                 url: '/store/bedroom/nightstands/',
                 description:
                   'Double lined small description that accompanies link in the React Mega Menu project'
               },
               {
+                id: 'store-bedroom-benches',
                 label: 'Benches',
                 type: 'link',
                 url: '/store/bedroom/benches/',
@@ -144,38 +160,45 @@ const menuConfig: MenuConfig = {
         ]
       },
       {
+        id: 'blog',
         label: 'Blog',
         type: 'mega',
         url: '/blog/',
         items: [
           {
+            id: 'blog-latest-post-title',
             label: 'Latest Post Title',
             type: 'link',
             url: '/blog/posts/latest-post-title/',
             description:
               'Double lined small description that accompanies link in the React Mega Menu project'
           },
           {
+            id: 'blog-categories',
             label: 'Categories',
             type: 'sub',
             url: '/blog/categories/',
             items: [
               {
+                id: 'blog-news',
                 label: 'News',
                 type: 'link',
                 url: '/blog/news/'
               },
               {
+                id: 'blog-recipes',
                 label: 'Recipes',
                 type: 'link',
                 url: '/blog/recipes/'
               },
               {
+                id: 'blog-health',
                 label: 'Health',
                 type: 'link',
                 url: '/blog/health/'
               },
               {
+                id: 'blog-diet',
                 label: 'Diet',
                 type: 'link',
                 url: '/blog/diet/'
@@ -185,17 +208,28 @@ const menuConfig: MenuConfig = {
         ]
       },
       {
+        id: 'help',
         label: 'Help',
         type: 'mega',
         url: '/help/',
         items: [
           {
+            id: 'help-react-mega-menu',
+            label: 'React Mega Menu',
+            type: 'link',
+            url: 'https://github.com/jasonrundell/react-mega-menu',
+            description:
+              'A React project which aims to be an accessible, responsive, boilerplate top navigation menu with a "Mega Menu"!'
+          },
+          {
+            id: 'help-faq',
             label: 'FAQ',
             type: 'link',
             url: '/help/faq/',
             description: 'Single line description that accompanies link'
           },
           {
+            id: 'help-knowledge-base',
             label: 'Knowledge Base',
             type: 'link',
             url: '/help/knowledge-base/',
@@ -205,64 +239,75 @@ const menuConfig: MenuConfig = {
         ]
       },
       {
+        id: 'settings',
         label: 'Settings',
         type: 'mega',
         url: '/settings/',
         items: [
           {
+            id: 'settings-profile',
             label: 'Profile',
             type: 'link',
             url: '/settings/profile/',
             description: 'Single line description that accompanies link'
           },
           {
+            id: 'settings-billing',
             label: 'Billing',
             type: 'link',
             url: '/settings/billing/',
             description: 'Single line description that accompanies link'
           },
           {
+            id: 'settings-theme',
             label: 'Theme',
             type: 'sub',
-            url: '/?theme',
+            url: '#',
             description: 'Change the React Mega Menu theme',
             items: [
               {
+                id: 'settings-theme-light',
                 label: 'Light',
                 type: 'link',
                 url: '/?theme=light'
               },
               {
+                id: 'settings-theme-dark',
                 label: 'Dark',
                 type: 'link',
                 url: '/?theme=dark'
               },
               {
+                id: 'settings-theme-monokai',
                 label: 'Monokai',
                 type: 'link',
                 url: '/?theme=monokai'
               },
               {
+                id: 'settings-theme-retro',
                 label: 'Retro',
                 type: 'link',
                 url: '/?theme=retro'
               },
               {
+                id: 'settings-theme-synthwave',
                 label: 'Synthwave',
                 type: 'link',
                 url: '/?theme=synthwave'
               }
             ]
           },
           {
+            id: 'settings-logout',
             label: 'Logout',
             type: 'link',
-            url: '/?logout',
+            url: '/settings/logout/',
             description: 'Single line description that accompanies link'
           }
         ]
       },
       {
+        id: 'contact',
         label: 'Contact',
         type: 'main',
         url: '#contact'

demo/src/themes/dark.css

@@ -13,7 +13,7 @@
 }
 
 .rmm__theme--dark[class*='css-'],
-.rmm__theme--dark[class*='css-'] .rmm__topbar,
+.rmm__theme--dark[class*='css-'] #rmm__topbar,
 .rmm__theme--dark[class*='css-'] .rmm__nav,
 .rmm__theme--dark[class*='css-'] .rmm__mega-list,
 .rmm__theme--dark[class*='css-'] .rmm__nav-list,
@@ -24,7 +24,7 @@
   font-family: Arial, Helvetica, sans-serif;
 }
 
-.rmm__theme--dark[class*='css-'] .rmm__topbar {
+.rmm__theme--dark[class*='css-'] #rmm__topbar {
   height: 2rem;
   padding: var(--menu-padding-left);
 }
@@ -43,7 +43,7 @@
   background-color: var(--dark-text-color);
 }
 
-.rmm__theme--dark[class*='css-'] .rmm__menu {
+.rmm__theme--dark[class*='css-'] #rmm__nav {
   border-top: var(--menu-border-width) solid var(--dark-border-color);
   border-bottom: var(--menu-border-width) solid var(--dark-border-color);
   top: var(--menu-top-spacing);
@@ -103,7 +103,7 @@
 }
 
 .rmm__theme--dark[class*='css-'] h1,
-.rmm__theme--dark[class*='css-'] .rmm__title,
+.rmm__theme--dark[class*='css-'] #rmm__title,
 .rmm__theme--dark[class*='css-'] .rmm__main-nav-item-link,
 .rmm__theme--dark[class*='css-'] .rmm__nav-item-description {
   color: var(--dark-text-color);
@@ -114,7 +114,7 @@
 }
 
 .rmm__theme--dark[class*='css-'] .rmm__main-nav-item,
-.rmm__theme--dark[class*='css-'] .rmm__menu {
+.rmm__theme--dark[class*='css-'] #rmm__nav {
   background-color: var(--dark-bg-color);
 }
 
@@ -127,12 +127,12 @@
 }
 
 @media (min-width: 64rem) {
-  .rmm__theme--dark[class*='css-'] .rmm__topbar {
+  .rmm__theme--dark[class*='css-'] #rmm__topbar {
     border-top: none;
     border-right: none;
   }
 
-  .rmm__theme--dark[class*='css-'] .rmm__menu {
+  .rmm__theme--dark[class*='css-'] #rmm__nav {
     top: 4rem;
     height: auto;
     border-top: var(--menu-border-width) solid var(--dark-border-color);