Bi 27: Review 1

.github/workflows/actions.yml

@@ -6,7 +6,7 @@ on:
 jobs:
   build-project: #First Job is to check the code formatting, linting and build the project.
     if: github.event.pull_request.draft == false
-    name: Run Prettier, Lint and Build Checks
+    name: Run Formatting Checks and Tests
     runs-on: ubuntu-latest
 
     steps:
@@ -27,6 +27,9 @@ jobs:
       - name: Linting Check #Runs ESLint Script
         run: npm run lint
 
+      - name: Test #Runs Jest Script
+        run: npm run test
+
       - name: Build #Build the project
         env:
           MONGODB_URI: ${{ secrets.MONGODB_URI }}

.prettierignore

@@ -6,4 +6,9 @@
 package.json
 package-lock.json
 README.md
-tailwind.config.js
+tailwind.config.js
+jest.config.mjs
+jest.setup.js
+jsconfig.json
+next.config.js
+postcss.config.js

.prettierrc.json

@@ -3,5 +3,6 @@
   "trailingComma": "es5",
   "singleQuote": true,
   "tabWidth": 2,
-  "useTabs": false
+  "useTabs": false,
+  "printWidth": 150
 }

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   // Add those two lines:
   "editor.formatOnSave": true, // Tell VSCode to format files on save

package.json

@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test": "jest --watch",
+    "test": "jest --maxWorkers=2",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "prettier": "npx prettier . --check",
@@ -25,6 +25,7 @@
     "promises": "^0.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.11.0",
     "tailwindcss": "3.3.3"
   },
   "devDependencies": {

src/__tests__/home.test.js

@@ -2,23 +2,11 @@ import { render, screen } from '@testing-library/react'
 import Home from '../app/page.js'
 import SearchBar from '@/components/SearchBar.js'
 import '@testing-library/jest-dom'
-
-describe('Home', () => {
-  it('renders a heading', () => {
-    render(<Home />)
-
-    const heading = screen.getByRole('heading', {
-      name: /BacPac/i,
-    })
-
-    expect(heading).toBeInTheDocument()
-  })
-})
 
 it('renders a search box', () => {
-  const {getByPlaceholderText} = render(<SearchBar/>)
-  
-  const subject = getByPlaceholderText('Search Colleges...')
+  const { getByPlaceholderText } = render(<SearchBar />)
+
+  const subject = getByPlaceholderText('Search')
 
   expect(subject).toBeInTheDocument()
-})
+})

src/__tests__/searchBar.test.js

@@ -1,42 +1,33 @@
-import { render, screen, fireEvent, getByTestId, waitFor } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 import SearchBar from '@/components/SearchBar.js'
 import data from '../../data/university_data'
 import '@testing-library/jest-dom'
 
-it('renders a search box', () => {
-  const {getByPlaceholderText} = render(<SearchBar data={data}/>)
-
-  const subject = getByPlaceholderText('Search Colleges...')
-
-  expect(subject).toBeInTheDocument()
-})
-
 it('display filtered data based on input', () => {
-  const {getByPlaceholderText, queryByText} = render(<SearchBar data={data}/>)
-  const input = getByPlaceholderText('Search Colleges...')
-  
+  const { getByPlaceholderText, queryByText } = render(<SearchBar data={data} />)
+  const input = getByPlaceholderText('Search')
+
   fireEvent.change(input, { target: { value: 'Bhubaneswar' } })
-  // console.log(screen.debug()); //For Debugging: Print the rendered component to the console
 
   expect(queryByText('Indian Institute of Technology Bhubaneswar')).toBeInTheDocument()
-  expect(queryByText('Massachusetts Institute of Technology (MIT)')).toBeNull();
+  expect(queryByText('Massachusetts Institute of Technology (MIT)')).toBeNull()
 })
 
 it('handles case-insensitive filtering', () => {
-  const { getByPlaceholderText, queryByText } = render(<SearchBar data={data} />);
-  const input = getByPlaceholderText('Search Colleges...');
+  const { getByPlaceholderText, queryByText } = render(<SearchBar data={data} />)
+  const input = getByPlaceholderText('Search')
 
-  fireEvent.change(input, { target: { value: 'bhub' } });
+  fireEvent.change(input, { target: { value: 'bhub' } })
 
   expect(queryByText('Indian Institute of Technology Bhubaneswar')).toBeInTheDocument()
-  expect(queryByText('Massachusetts Institute of Technology (MIT)')).toBeNull();
-});
+  expect(queryByText('Massachusetts Institute of Technology (MIT)')).toBeNull()
+})
 
 it('should display "No results found" if no matching results are found', () => {
-  const { getByPlaceholderText, queryByText } = render(<SearchBar data={data} />);
-  const input = getByPlaceholderText('Search Colleges...');
+  const { getByPlaceholderText, queryByText } = render(<SearchBar data={data} />)
+  const input = getByPlaceholderText('Search')
+
+  fireEvent.change(input, { target: { value: 'qwertyuiop' } })
 
-  fireEvent.change(input, { target: { value: 'qwertyuiop' } });
-
-  expect(queryByText('No results found')).toBeInTheDocument();
-});
+  expect(queryByText('No results found')).toBeInTheDocument()
+})

src/app/aboutus/page.js

@@ -0,0 +1,12 @@
+import Navbar from '../components/Navbar/Navbar'
+import React from 'react'
+
+function AboutUs() {
+  return (
+    <div>
+      <Navbar />
+    </div>
+  )
+}
+
+export default AboutUs

src/app/api/graphql/route.js

@@ -1,9 +1,6 @@
 import { startServerAndCreateNextHandler } from '@as-integrations/next'
 import { ApolloServer } from '@apollo/server'
-import {
-  ApolloServerPluginLandingPageLocalDefault,
-  ApolloServerPluginLandingPageProductionDefault,
-} from '@apollo/server/plugin/landingPage/default'
+import { ApolloServerPluginLandingPageLocalDefault, ApolloServerPluginLandingPageProductionDefault } from '@apollo/server/plugin/landingPage/default'
 import { gql } from 'graphql-tag'
 import { MongoClient } from 'mongodb'
 

src/app/community/page.js

@@ -0,0 +1,12 @@
+import Navbar from '../components/Navbar/Navbar'
+import React from 'react'
+
+function Community() {
+  return (
+    <div>
+      <Navbar />
+    </div>
+  )
+}
+
+export default Community

src/app/components/CollegeResult.js

@@ -2,19 +2,10 @@ import Link from 'next/link'
 function CollegeResult(props) {
   return (
     <div className="mb-3.5">
-      <Link
-        href={{ pathname: '/college', query: { id: props.info.id } }}
-        className="border-3 border-black flex justify-center align-middle"
-      >
-        <div className="no w-1/6 flex justify-center align-middle ">
-          {props.serialNo + 1}
-        </div>
-        <div className="name w-4/5 flex justify-center align-middle">
-          {props.info.name}
-        </div>
-        <div className="score w-1/6 flex justify-center align-middle">
-          {props.info.score}
-        </div>
+      <Link href={{ pathname: '/college', query: { id: props.info.id } }} className="border-3 border-black flex justify-center align-middle">
+        <div className="no w-1/6 flex justify-center align-middle text-black">{props.serialNo + 1}</div>
+        <div className="name w-4/5 flex justify-center align-middle text-black">{props.info.name}</div>
+        <div className="score w-1/6 flex justify-center align-middle text-black">{props.info.score}</div>
       </Link>
     </div>
   )

src/app/components/Footer/Footer.css

@@ -0,0 +1,3 @@
+.footer {
+  height: 60px;
+}

src/app/components/Footer/Footer.js

@@ -0,0 +1,69 @@
+import './Footer.css'
+
+import { AiFillFacebook, AiFillInstagram, AiOutlineCopyrightCircle, AiOutlineTwitter } from 'react-icons/ai'
+
+import { BsDiscord } from 'react-icons/bs'
+import Image from 'next/image'
+import React from 'react'
+import bacpacLogo from '../../../assets/bacpacLogo.png'
+import bacpacTitle from '../../../assets/bacpacTitle.png'
+
+function Footer() {
+  const handleRedirect = (platform) => {
+    let url
+    const SocialNetwork = {
+      DISCORD: 1,
+      FACEBOOK: 2,
+      TWITTER: 3,
+      INSTAGRAM: 4,
+    }
+    switch (platform) {
+      case SocialNetwork.DISCORD:
+        url = '#'
+        break
+      case SocialNetwork.FACEBOOK:
+        url = '#'
+        break
+      case SocialNetwork.TWITTER:
+        url = '#'
+        break
+      case SocialNetwork.INSTAGRAM:
+        url = '#'
+        break
+      default:
+        return
+    }
+    window.open(url, '_blank')
+  }
+  return (
+    <div className="footer center-v bg-[#ECECEC] realtive bottom-0 left-0 ">
+      <div className="images center-v ml-24 w-1/4 h-full cursor-pointer ">
+        <div className="logo w-12 pb-1 mr-4 h-13">
+          <Image src={bacpacLogo} alt="" className="w-full h-full" />
+        </div>
+        <div className="title w-1/2">
+          <Image src={bacpacTitle} alt="" className=" w-4/6" />
+        </div>
+      </div>
+      <div className="text w-3/4  h-full center text-large text-black">
+        Copyright <AiOutlineCopyrightCircle className="ml-1 mr-1" /> 2023 Bacpac Networks
+      </div>
+      <div className="center h-full w-2/6">
+        <div className="icons instagram center" onClick={() => handleRedirect(4)}>
+          <AiFillInstagram className="icon" />
+        </div>
+        <div className="icons facebook center" onClick={() => handleRedirect(2)}>
+          <AiFillFacebook className="icon" />
+        </div>
+        <div className="icons twitter center" onClick={() => handleRedirect(3)}>
+          <AiOutlineTwitter className="icon" />
+        </div>
+        <div className="icons discord center" onClick={() => handleRedirect(1)}>
+          <BsDiscord className="icon" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Footer