Merge branch 'main' of https://github.com/koitoror/Full-Stack-Next-App

koitoror · Dec 20, 2023 · bd93757 · bd93757
2 parents 59821b3 + d2763ce
commit bd93757
Show file tree

Hide file tree

Showing 14 changed files with 760 additions and 64 deletions.
diff --git a/.github/workflows/build-test.yml b/.github/workflows/build-test.yml
@@ -28,9 +28,9 @@ jobs:
         key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
         restore-keys: |
           ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
-    - run: rm -rf node_modules package-lock.json
+    # - run: rm -rf node_modules package-lock.json
     # - run: npm cache clean --force
-    - run: npm install
+    # - run: npm install
     - run: npm ci
     - run: npm run build --if-present
     - run: npm test
diff --git a/.jest/setupDomTests.ts b/.jest/setupDomTests.ts
@@ -0,0 +1,16 @@
+// Dummy import so that the linter won't complain
+import { render } from '@testing-library/react'
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query: any) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => {},
+  })
+});
diff --git a/.jest/setupTests.ts b/.jest/setupTests.ts
@@ -0,0 +1,7 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
+// import '@testing-library/jest-dom/extend-expect';
+import './setupDomTests';
diff --git a/__tests__/components/layout/__snapshots__/Footer.test.tsx.snap b/__tests__/components/layout/__snapshots__/Footer.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`check the snapshot 1`] = `
 <DocumentFragment>
   <footer
-    class="ant-layout-footer footer"
+    class="ant-layout-footer footer css-dev-only-do-not-override-1g853jt"
   >
     Copyright © 2023
   </footer>

diff --git a/__tests__/components/layout/__snapshots__/Header.test.tsx.snap b/__tests__/components/layout/__snapshots__/Header.test.tsx.snap
@@ -3,31 +3,31 @@
 exports[`Header check the snapshot 1`] = `
 <DocumentFragment>
   <header
-    class="ant-layout-header header"
+    class="ant-layout-header header css-dev-only-do-not-override-1g853jt"
   >
     <div
-      class="ant-row"
+      class="ant-row css-dev-only-do-not-override-1g853jt"
     >
       <div
-        class="ant-col logo"
+        class="ant-col logo css-dev-only-do-not-override-1g853jt"
         style="flex: 0 0 100px;"
       >
         <div>
           Todos
         </div>
       </div>
       <div
-        class="ant-col"
+        class="ant-col css-dev-only-do-not-override-1g853jt"
         style="flex-basis: auto;"
       >
         <div
-          class="ant-row ant-row-space-between"
+          class="ant-row ant-row-space-between css-dev-only-do-not-override-1g853jt"
         >
           <div
-            class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-24"
+            class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-24 css-dev-only-do-not-override-1g853jt"
           >
             <ul
-              class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
+              class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark css-dev-only-do-not-override-1g853jt"
               data-menu-list="true"
               role="menu"
               tabindex="0"
@@ -143,19 +143,19 @@ exports[`Header check the snapshot 1`] = `
             />
           </div>
           <div
-            class="ant-col ant-col-xs-4 ant-col-xs-offset-20 ant-col-sm-3 ant-col-sm-offset-21 ant-col-md-0"
+            class="ant-col ant-col-xs-4 ant-col-xs-offset-20 ant-col-sm-3 ant-col-sm-offset-21 ant-col-md-0 css-dev-only-do-not-override-1g853jt"
           >
             <div
-              class="hamburger__Button-sc-1cfzf5o-0 ZPuhh"
+              class="sc-bdfCDU gcCQLz hamburger"
             >
               <div
-                class="hamburger__Line1-sc-1cfzf5o-1 jGomaN"
+                class="sc-gsTDqH cThqpc"
               />
               <div
-                class="hamburger__Line2-sc-1cfzf5o-2 iCtxxV"
+                class="sc-dlfmHC hGXgQp"
               />
               <div
-                class="hamburger__Line3-sc-1cfzf5o-3 eqZccE"
+                class="sc-hKgKIp jnEZPG"
               />
             </div>
           </div>

diff --git a/__tests__/components/layout/__snapshots__/Layout.test.tsx.snap b/__tests__/components/layout/__snapshots__/Layout.test.tsx.snap
@@ -2,35 +2,35 @@
 
 exports[`Layout check the snapshot 1`] = `
 <DocumentFragment>
-  <section
-    class="ant-layout layout"
+  <div
+    class="ant-layout layout css-dev-only-do-not-override-1g853jt"
   >
     <header
-      class="ant-layout-header header"
+      class="ant-layout-header header css-dev-only-do-not-override-1g853jt"
     >
       <div
-        class="ant-row"
+        class="ant-row css-dev-only-do-not-override-1g853jt"
       >
         <div
-          class="ant-col logo"
+          class="ant-col logo css-dev-only-do-not-override-1g853jt"
           style="flex: 0 0 100px;"
         >
           <div>
             Todos
           </div>
         </div>
         <div
-          class="ant-col"
+          class="ant-col css-dev-only-do-not-override-1g853jt"
           style="flex-basis: auto;"
         >
           <div
-            class="ant-row ant-row-space-between"
+            class="ant-row ant-row-space-between css-dev-only-do-not-override-1g853jt"
           >
             <div
-              class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-24"
+              class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-24 css-dev-only-do-not-override-1g853jt"
             >
               <ul
-                class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
+                class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark css-dev-only-do-not-override-1g853jt"
                 data-menu-list="true"
                 role="menu"
                 tabindex="0"
@@ -146,19 +146,19 @@ exports[`Layout check the snapshot 1`] = `
               />
             </div>
             <div
-              class="ant-col ant-col-xs-4 ant-col-xs-offset-20 ant-col-sm-3 ant-col-sm-offset-21 ant-col-md-0"
+              class="ant-col ant-col-xs-4 ant-col-xs-offset-20 ant-col-sm-3 ant-col-sm-offset-21 ant-col-md-0 css-dev-only-do-not-override-1g853jt"
             >
               <div
-                class="hamburger__Button-sc-1cfzf5o-0 ZPuhh"
+                class="sc-bdfCDU gcCQLz hamburger"
               >
                 <div
-                  class="hamburger__Line1-sc-1cfzf5o-1 jGomaN"
+                  class="sc-gsTDqH cThqpc"
                 />
                 <div
-                  class="hamburger__Line2-sc-1cfzf5o-2 iCtxxV"
+                  class="sc-dlfmHC hGXgQp"
                 />
                 <div
-                  class="hamburger__Line3-sc-1cfzf5o-3 eqZccE"
+                  class="sc-hKgKIp jnEZPG"
                 />
               </div>
             </div>
@@ -167,13 +167,13 @@ exports[`Layout check the snapshot 1`] = `
       </div>
     </header>
     <main
-      class="ant-layout-content content"
+      class="ant-layout-content content css-dev-only-do-not-override-1g853jt"
     />
     <footer
-      class="ant-layout-footer footer"
+      class="ant-layout-footer footer css-dev-only-do-not-override-1g853jt"
     >
-      Copyright © 2021
+      Copyright © 2023
     </footer>
-  </section>
+  </div>
 </DocumentFragment>
 `;
diff --git a/__tests__/components/navbar/Menu.test.tsx b/__tests__/components/navbar/Menu.test.tsx
@@ -1,4 +1,5 @@
-import { render } from '@testing-library/react';
+// import { render } from '@testing-library/react';
+import { fireEvent, render, screen } from "@testing-library/react";
 import Menu from '../../../components/navbar/menu';
 import { MenuItems } from '../../../components/navbar/menu'; 
 
@@ -8,16 +9,32 @@ describe('Menu', () => {
     const mode = 'horizontal';
     const onClick = jest.fn();
     const selectedKeys = ['home'];
+    // const items: MenuItems = {
+    //   leftMenu: [
+    //     { key: 'home', text: 'Home', path: '/' },
+    //     { key: 'about', text: 'About', path: '/about' }
+    //   ],
+    //   rightMenu: [
+    //     { key: 'register', text: 'Register', path: '/register' },
+    //     { key: 'sign-in', text: 'Sign In', path: '/sign-in' }
+    //   ]
+    // };
+
     const items: MenuItems = {
       leftMenu: [
-        { key: 'home', text: 'Home', path: '/' },
-        { key: 'about', text: 'About', path: '/about' }
-      ],
+            { key: 'home', text: 'Home', path: '/' },
+            { key: 'about', text: 'About', path: '/about' }
+          ],
       rightMenu: [
         { key: 'register', text: 'Register', path: '/register' },
         { key: 'sign-in', text: 'Sign In', path: '/sign-in' }
-      ]
+      ],
+      length: 2, // Update length based on menu items
+      pop: () => ({ key: 'removed', text: 'Removed', path: '' }), // Implement or mock function
+      push: (menuItem) => { /* Implement or mock function */ return 3; }, // Update return value
+      concat: (menuItems) => ({ ...items, leftMenu: [...items.leftMenu, ...menuItems] }), // Implement or mock function
     };
+
     const { asFragment } = render(
       <Menu
         theme={theme}

diff --git a/__tests__/components/navbar/__snapshots__/Hamburger.test.tsx.snap b/__tests__/components/navbar/__snapshots__/Hamburger.test.tsx.snap
@@ -3,16 +3,16 @@
 exports[`Hamburger check the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="hamburger__Button-sc-1cfzf5o-0 ZPuhh"
+    class="sc-bdfCDU gcCQLz"
   >
     <div
-      class="hamburger__Line1-sc-1cfzf5o-1 jGomaN"
+      class="sc-gsTDqH cThqpc"
     />
     <div
-      class="hamburger__Line2-sc-1cfzf5o-2 iCtxxV"
+      class="sc-dlfmHC hGXgQp"
     />
     <div
-      class="hamburger__Line3-sc-1cfzf5o-3 eqZccE"
+      class="sc-hKgKIp jnEZPG"
     />
   </div>
 </DocumentFragment>

diff --git a/__tests__/components/navbar/__snapshots__/Menu.test.tsx.snap b/__tests__/components/navbar/__snapshots__/Menu.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Menu check the snapshot 1`] = `
 <DocumentFragment>
   <ul
-    class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
+    class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark css-dev-only-do-not-override-1g853jt"
     data-menu-list="true"
     role="menu"
     tabindex="0"

diff --git a/__tests__/pages/__snapshots__/index.test.tsx.snap b/__tests__/pages/__snapshots__/index.test.tsx.snap
@@ -3,13 +3,15 @@
 exports[`Home check the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="ant-row"
+    class="ant-row css-dev-only-do-not-override-1g853jt"
   >
     <div
-      class="ant-col ant-col-xs-22 ant-col-xs-offset-1 ant-col-sm-20 ant-col-sm-offset-2 ant-col-md-18 ant-col-md-offset-3 ant-col-lg-12 ant-col-lg-offset-6"
+      class="ant-col ant-col-xs-22 ant-col-xs-offset-1 ant-col-sm-20 ant-col-sm-offset-2 ant-col-md-18 ant-col-md-offset-3 ant-col-lg-12 ant-col-lg-offset-6 css-dev-only-do-not-override-1g853jt"
     >
       <div
-        class="ant-spin ant-spin-lg ant-spin-spinning"
+        aria-busy="true"
+        aria-live="polite"
+        class="ant-spin ant-spin-lg ant-spin-spinning css-dev-only-do-not-override-1g853jt"
         style="display: flex; justify-content: center; margin-top: 25vh;"
       >
         <span

diff --git a/jest.config.js b/jest.config.js
@@ -1,4 +1,15 @@
-module.exports = {
+const nextJest = require("next/jest");
+const createJestConfig = nextJest({
+  dir: "./",
+});
+const customJestConfig = {
+  roots: ['<rootDir>'],
+  transform: {
+    '^.+\\.ts?$': 'ts-jest'
+  },
+  // testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.ts?$',
+  moduleFileExtensions: ['ts', 'js', 'tsx', 'jsx', 'json', 'node'],
+  clearMocks: true,
   coverageDirectory: 'coverage',
   collectCoverage: true,
   collectCoverageFrom: [
@@ -12,10 +23,20 @@ module.exports = {
     '!<rootDir>/src/templates/**/*.{js,jsx,ts,tsx}',
     '!<rootDir>/node_modules/',
   ],
+  testPathIgnorePatterns: ['/node_modules/', '/.next/', '/.out/', '/public/'],
 
-  testEnvironment: 'jsdom',
+  preset: 'ts-jest',
   testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[tj]s?(x)'],
-  testPathIgnorePatterns: ['/node_modules/', '/.next/', '/.out/', '/public/'],
+  setupFilesAfterEnv: ['<rootDir>/.jest/setupTests.ts'],
+  moduleDirectories: ["node_modules", "<rootDir>/"],
+  // testEnvironment: "jest-environment-jsdom",
+  testEnvironment: 'jsdom',
+  // testEnvironment: 'node',
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|less)$': 'identity-obj-proxy',
+  },
 
-  setupFilesAfterEnv: ['<rootDir>/.jest/setup-tests.js'],
-};
+};
+module.exports = createJestConfig(customJestConfig);