Merge branch 'master' into fix/345

.github/workflows/cypress-test.yml

@@ -0,0 +1,27 @@
+name: Cypress End-to-End test
+
+on:
+  pull_request:
+    branches:
+      - master
+  push:
+    branches:
+      - master
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+            node-version: '20'
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          build: npm run build
+          start: npm start

.github/workflows/update-maintainers-trigger.yaml

@@ -0,0 +1,28 @@
+# This action is centrally managed in https://github.com/asyncapi/.github/
+# Don't make changes to this file in this repo as they will be overwritten with changes made to the same file in above mentioned repo
+
+name: Trigger MAINTAINERS.yaml file update
+
+on:
+  push:
+    branches: [ master ]
+    paths:
+      # Check all valid CODEOWNERS locations: 
+      # https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners#codeowners-file-location
+      - 'CODEOWNERS'
+      - '.github/CODEOWNERS'
+      - '.docs/CODEOWNERS'
+
+jobs:
+  trigger-maintainers-update:
+    name: Trigger updating MAINTAINERS.yaml because of CODEOWNERS change
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Repository Dispatch
+        uses: peter-evans/repository-dispatch@ff45666b9427631e3450c54a1bcbee4d9ff4d7c0 # https://github.com/peter-evans/repository-dispatch/releases/tag/v3.0.0
+        with:
+          # The PAT with the 'public_repo' scope is required
+          token: ${{ secrets.GH_TOKEN }}
+          repository: ${{ github.repository_owner }}/community
+          event-type: trigger-maintainers-update

.nvmrc

@@ -1 +1 @@
-14
+18

CODEOWNERS

@@ -5,6 +5,6 @@
 # For more details, read the following article on GitHub: https://help.github.com/articles/about-codeowners/.
 
 # The default owners are automatically added as reviewers when you open a pull request unless different owners are specified in the file.
-* @AceTheCreator @thulieblack @Mayaleeeee
+* @AceTheCreator @thulieblack @Mayaleeeee @ashmit-coder
 
-README.md @AceTheCreator @thulieblack @Mayaleeeee
+README.md @AceTheCreator @thulieblack @Mayaleeeee @ashmit-coder

components/About/about.js

@@ -6,14 +6,13 @@ import Button from '../Buttons/button';
 import Image from 'next/image';
 function About() {
     return (
-		<div className='p-24 container flex items-center justify-center w-full'>
+		<div className='p-24 container flex items-center justify-center w-full' data-test="about-section">
 			<div className='w-[1120px] lg:w-full flex lg:flex-col-reverse items-center justify-between'>
 				<div style={{'--image-url': `url('/img/about.jpeg')`}} className='lg:mt-16 bg-[image:var(--image-url)] bg-center bg-cover w-[450px] h-[550px] sm:w-[100%] sm:h-[500px] rounded-[30px]' >
 			</div>
 				<div className='w-[600px] ml-10 lg:ml-0 lg:w-full lg:text-center'>
 				<div className='flex items-center lg:justify-center'>
-					<div className='w-[40px] h-[3px] bg-blue-400' />
-						<div className='ml-4 text-lg sm:text-sm text-white font-semi-bold'>About The Event</div>
+						<div className='text-lg sm:text-sm text-white font-semi-bold border-b-2 border-blue-400 mb-1'>About The Event</div>
 					</div>
 					<Heading typeStyle='heading-md' className='text-gradient lg:mt-10'>
 					AACoT'24
@@ -28,27 +27,26 @@ function About() {
 					<Paragraph  typeStyle='body-lg' className="mt-6" textColor='text-gray-200'>
 					We are currently looking for sponsors, for more details please read our Sponsorship Prospectus.
 					</Paragraph>
-					<div className='mt-10 flex gap-4 sm:flex-col lg:justify-center'>
+					<div className='mt-10 flex gap-4 sm:flex-col lg:justify-center' data-test="prospectus-download">
 						<a
-						href='https://opencollective.com/asyncapi/events/asyncapi-conference-on-tour-6b3c0aa1'
-						target='_blank'
-						rel='noreferrer'
+							className='flex justify-center'
+							href='https://opencollective.com/asyncapi/events/asyncapi-conference-on-tour-6b3c0aa1'
+							target='_blank'
+							rel='noreferrer'
 						>
 							<Button className='w-[200px]'>Become a sponsor now</Button>
 						</a>
-						<a href='/pdf/conf-2024.pdf' download= {`conf ${new Date().getFullYear()}.pdf`} >
-						<Button overlay={true} className='w-[240px] border'>
-						<div className='flex gap-2 justify-center'>
-						<div>
-							<Image src="/img/Download_icon.png" height={20} width={20} alt='Download-icon' objectFit='contain'/>
-						</div>
-						<div>
-							Sponsorship prospectus
-						</div>
-						</div>
+						<a className='flex justify-center ' href='/pdf/conf-2024.pdf' download={`conf ${new Date().getFullYear()}.pdf`} >
+							<Button overlay={true} className='w-[240px] border'>
+								<div className='flex gap-2 justify-center items-center'>
+									<Image src="/img/Download_icon.png" height={20} width={20} alt='Download-icon' objectFit='contain'  />
+									<div>
+										Sponsorship prospectus
+									</div>
+								</div>
 							</Button>
 						</a>
-				</div>
+					</div>
 				</div>
 			</div>
 		</div>

components/Agenda/agenda.js

@@ -5,7 +5,7 @@ import Image from 'next/image'
 
 function Agenda({ city }) {
   return (
-	  <div className=''>
+	  <div className='' data-test="agenda-com">
 		  <div className='flex flex-col justify-center items-center'>
 
 			  <Heading className='text-[30px] text-white'>
@@ -28,7 +28,7 @@ function Agenda({ city }) {
 
 			  <div className='mt-[40px]'>
 				  {city.agenda.map((talk) => {
-					  return <div key={talk.session} className={`flex sm:flex-col justify-between mt-[50px] ${!talk.speaker && 'countdown-text-gradient'}`}>
+					  return <div key={talk.time} className={`flex sm:flex-col justify-between mt-[50px] ${!talk.speaker && 'countdown-text-gradient'}`}>
 						  <Paragraph typeStyle='body-md'>
 							  {talk.time}
 						  </Paragraph>
@@ -43,7 +43,7 @@ function Agenda({ city }) {
 						  </div>
 						  {talk.speaker && typeof talk.speaker === 'number' ? <div className='flex items-center lg:mt-4'>
 							  <div className='w-[94px] h-[94px]'>
-								  <Image src={city.speakers[talk.speaker - 1].img} alt={city.speakers[talk.speaker -1].name} className='object-cover rounded-full' height={'100%'} width={'100%'} />
+								  <Image src={city.speakers[talk.speaker - 1].img} alt={city.speakers[talk.speaker -1].name} width={0} height={0} className='object-cover rounded-full w-[100%] h-[100%]' />
 							  </div>
 							  <div className='ml-4 w-[300px] sm:w-[250px]'>
 								  <Heading typeStyle='heading-sm-semibold' className='text-white'>
@@ -58,7 +58,7 @@ function Agenda({ city }) {
 								  {talk.speaker.map((speak, i) => <div key={i} className='mt-6'>
 										  <div className='flex items-center lg:mt-4'>
 										  <div className='w-[94px] h-[94px]'>
-											  <Image src={city.speakers[speak - 1].img} alt={city.speakers[speak - 1].name} className='object-cover rounded-full' height={'100%'} width={'100%'} />
+											  <Image src={city.speakers[speak - 1].img} alt={city.speakers[speak - 1].name} width={0} height={0} className='object-cover rounded-full w-[100%] h-[100%]' />
 										  </div>
 										  <div className='ml-4 w-[300px] sm:w-[250px]'>
 								  <Heading typeStyle='heading-sm-semibold' className='text-white'>

components/Buttons/button.js

@@ -1,12 +1,13 @@
 import React from 'react'
 
-function Button({className, children, overlay, onClick, type, disabled}) {
+function Button({className, children, overlay, onClick, type, disabled,test}) {
   return (
 	  <button
 		  disabled={disabled}
+		  data-test={test || ""}
 		  type={type}
 		  onClick={onClick}
-			className={`${overlay ? '' : 'gradient-bg'} text-white h-[54px] rounded-md p-[8px] ${className}`}
+			className={`${overlay ? '' : 'gradient-bg'} flex items-center justify-center text-white h-[54px] rounded-md p-[8px] ${className}`}
       >{children}</button>
 	);
 }

components/Dropdown/dropdown.js

@@ -1,9 +1,22 @@
-import React, {useState} from 'react';
+import React, {useState,useRef,useEffect} from 'react';
 
 function Dropdown({ active, items, setOptions, setOptions2 }) {
     const [show, setShow] = useState(false)
+	const dropdownRef = useRef(null);
+	useEffect(() => {
+		//  This checks if the click event occurred outside the dropdown, if true we closes the dropdown. 
+		function handleClickOutside(event) {
+			if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+				setShow(false);
+			}
+		}
+		document.addEventListener('mousedown', handleClickOutside);
+		return () => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, [dropdownRef]);
 	return (
-		<div class='relative inline-block w-full'>
+		<div className='relative inline-block w-full' ref={dropdownRef}>
 			<div className='w-full'>
 				<button
 					type='button'
@@ -21,9 +34,9 @@ function Dropdown({ active, items, setOptions, setOptions2 }) {
 						aria-hidden='true'
 					>
 						<path
-							fill-rule='evenodd'
+							fillRule='evenodd'
 							d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'
-							clip-rule='evenodd'
+							clipRule='evenodd'
 						/>
 					</svg>
 				</button>
@@ -45,9 +58,9 @@ function Dropdown({ active, items, setOptions, setOptions2 }) {
 					role='menu'
 					aria-orientation='vertical'
 					aria-labelledby='menu-button'
-					tabindex='-1'
+					tabIndex='-1'
 				>
-					<div className='' role='none'>
+					<div className='rounded-md gradient-bg' role='none'>
 						{items &&
 							items.map((item) => {
 								return (
@@ -60,7 +73,7 @@ function Dropdown({ active, items, setOptions, setOptions2 }) {
 										}}
 										className={`text-white block p-4 text-md cursor-pointer navbg`}
 										role='menuitem'
-										tabindex='-1'
+										tabIndex='-1'
 										id='menu-item-0'
 									>
 										{item.city}

components/Footer/footer.js

@@ -15,16 +15,16 @@ function Footer() {
       imgUrl: "/img/Linkedln.png",
     },
     {
-      name: "Tweeter(X)",
-      href: "https://twitter.com/asyncapispec",
+      name: "Twitter(X)",
+      href: "https://x.com/asyncapispec",
       imgUrl: "/img/twitter_new.png",
     },
   ];
   return (
-    <div className="container">
-      <div className="w-full flex justify-between items-center p-4 sm:flex-col sm:gap-3">
+    <div className="container" data-test="footer">
+      <div className="w-full flex justify-between items-center p-4 sm:flex-col sm:gap-3" data-test="footer-asyncAPI-logo">
           <Link href='/'>
-            <Image className="cursor-pointer" src="/img/logo.png" alt="company logo" width={150} height={42} />
+            <Image className="cursor-pointer" src="/img/logo.png" alt="company logo" width={150} height={42}/>
           </Link>
             <div className="sm:hidden"> 
               {/* This div helps keep the text centered */}
@@ -35,6 +35,7 @@ function Footer() {
         target="_blank"
         rel="noreferrer"
         className="hover:text-sky-500 text-white duration-200 ease-in-out"
+        data-test="code-of-conduct"
         >
               Code of Conduct
             </a>
@@ -52,6 +53,7 @@ function Footer() {
                     target="_blank"
                     rel="noreferrer"
                     className="w-12 h-12 rounded-lg border-[1.5px] border-[#556061] flex items-center justify-center hover:border-[#AD20E2] duration-150 ease-in-out"
+                    data-test={`footer-${social.name}`}
                   >
                     <Image src={social.imgUrl} alt={social.name} height={32} width={32} />
                   </a>

components/Form/Cfp/stepFour.js

@@ -48,6 +48,7 @@ function StepFour({ setStep, setForm, data }) {
             border: "1px solid #E50E99",
           }}
           onChange={(e) => setForm({ ...data, AdditionalInfo: e.target.value })}
+          data-test="step-four-additional"
         />
 
         <div className="mt-6 text-dark-600 text-md">
@@ -63,7 +64,8 @@ function StepFour({ setStep, setForm, data }) {
           <Button
             type="submit"
             disabled={submitting || disabled}
-            className="bg-tetiary-pink p-3 rounded-md text-white mt-3 w-36 lg:w-full lg:mt-5">
+            className="bg-tetiary-pink p-3 rounded-md text-white mt-3 w-36 lg:w-full lg:mt-5"
+            test="step-four-next">
             {submitting ? <ActivityLoader /> : "Submit"}
             </Button>
         </div>

components/Form/Cfp/stepOne.js

@@ -4,7 +4,7 @@ import Button from "../../Buttons/button";
 
 function StepOne({ setStep, setForm, data }) {
   return (
-    <form className="mt-3 w-[30rem] lg:w-[auto]" onSubmit={(e) => setStep(e, 2)}>
+    <form className="mt-3 w-[30rem] lg:w-[auto]" onSubmit={(e) => setStep(e, 2)} data-test="step-one">
       <h1 className="text-white font-bold text-4xl lg:text-3xl">
         Let's start with your name
       </h1>
@@ -21,6 +21,7 @@ function StepOne({ setStep, setForm, data }) {
             border: "1px solid #E50E99",
           }}
           onChange={(e) => setForm({ ...data, Fullname: e.target.value })}
+          data-test="step-one-name"
         />
         <div className="text-dark-600 text-lg mt-5">Email address</div>
         <input
@@ -31,6 +32,7 @@ function StepOne({ setStep, setForm, data }) {
             border: "1px solid #E50E99",
           }}
           onChange={(e) => setForm({ ...data, Email: e.target.value })}
+          data-test="step-one-email"
         />
          <div className="text-dark-600 text-lg mt-5">Bio</div>
         <textarea
@@ -41,6 +43,7 @@ function StepOne({ setStep, setForm, data }) {
             border: "1px solid #E50E99",
           }}
           onChange={(e) => setForm({ ...data, Bio: e.target.value })}
+          data-test="step-one-bio"
         />
         <div className="text-dark-600 text-lg mt-5">Github/LinkedIn/Twitter</div>
         <input
@@ -50,11 +53,12 @@ function StepOne({ setStep, setForm, data }) {
           style={{
             border: "1px solid #E50E99",
           }}
-                  onChange={(e) => setForm({ ...data, Social: e.target.value })}
+          onChange={(e) => setForm({ ...data, Social: e.target.value })}
+          data-test="step-one-social"
         />
         <Button type="submit"
           className="bg-tetiary-pink p-3 rounded-md text-white mt-6 float-right w-36 lg:w-full lg:mt-8"
-          disabled={!data.Fullname && true}>Next</Button>
+          disabled={!data.Fullname && true} test="step-one-next">Next</Button>
       </div>
     </form>
   );

components/Form/Cfp/stepThree.js

@@ -33,7 +33,7 @@ function StepThree({ setStep, setForm, data }) {
   const [value, setValue] = useState({});
   useEffect(() => {
     setForm({ ...data, ...value});
-  }, [value]); 
+  }, [value, data, setForm]); 
   return (
     <form className="mt-3 w-[30rem] lg:w-[auto]" onSubmit={(e) => setStep(e, 4)}>
       <h1 className="text-white font-bold text-4xl lg:text-3xl">
@@ -51,13 +51,15 @@ function StepThree({ setStep, setForm, data }) {
           title="Select session format"
           setValue={(val) => setValue({...value, Format: val})}
           multi={false}
+          dataTest="step-three-format"
         />
         <div className="text-dark-600 text-lg mt-4 mb-4">Session Level</div>
         <Select
           options={options2}
           title="Select session level"
           setValue={(val) => setValue({...value, Level: val})}
           multi={false}
+          dataTest = "step-three-level"
         />
         <div className="float-right mt-3 lg:flex lg:flex-col-reverse lg:w-full">
           <a
@@ -69,7 +71,8 @@ function StepThree({ setStep, setForm, data }) {
           <Button
             type="submit"
             disabled={!data.Description || !data.Title && true}
-            className="bg-tetiary-pink p-3 rounded-md text-white mt-3 w-36 lg:w-full lg:mt-5">
+            className="bg-tetiary-pink p-3 rounded-md text-white mt-3 w-36 lg:w-full lg:mt-5"
+            test="step-three-next">
             Next
             </Button>
         </div>