feat: add cypress

.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

components/About/about.js

@@ -6,7 +6,7 @@ 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>
@@ -27,7 +27,7 @@ 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
 							className='flex justify-center'
 							href='https://opencollective.com/asyncapi/events/asyncapi-conference-on-tour-6b3c0aa1'

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'>

components/Buttons/button.js

@@ -1,9 +1,10 @@
 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'} flex items-center justify-center text-white h-[54px] rounded-md p-[8px] ${className}`}

components/Footer/footer.js

@@ -15,14 +15,14 @@ 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}/>
           </Link>
@@ -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

@@ -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>

components/Form/Cfp/stepTwo.js

@@ -5,7 +5,7 @@ import Button from "../../Buttons/button";
 
 function StepTwo({ setStep, setForm, data }) {
   return (
-    <form className="mt-3 w-[30rem] lg:w-[auto]" onSubmit={(e) => setStep(e, 3)}>
+    <form className="mt-3 w-[30rem] lg:w-[auto]" onSubmit={(e) => setStep(e, 3)} data-test="step-two">
       <h1 className="text-white font-bold text-4xl lg:text-3xl">
         Session Info
       </h1>
@@ -21,15 +21,19 @@ function StepTwo({ setStep, setForm, data }) {
           style={{
             border: "1px solid #E50E99",
           }}
-          onChange={(e) => setForm({ ...data, Title: e.target.value })} />
+          onChange={(e) => setForm({ ...data, Title: e.target.value })} 
+          data-test="step-two-title"
+          />
         <div className="text-dark-600 text-lg mt-4">Session Description</div>
         <textarea
           required
           className="mt-3 w-full p-4 rounded-md focus:outline-none"
           style={{
             border: "1px solid #E50E99",
           }}
-          onChange={(e) => setForm({ ...data, Description: e.target.value })} />
+          onChange={(e) => setForm({ ...data, Description: e.target.value })} 
+          data-test="step-two-description"
+          />
         <div className="float-right mt-3 lg:flex lg:flex-col-reverse lg:w-full">
           <a
             className="mr-10 text-dark-600 cursor-pointer lg:text-center lg:pl-10 lg:mt-5"
@@ -40,7 +44,8 @@ function StepTwo({ 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-3">
+            className="bg-tetiary-pink p-3 rounded-md text-white mt-3 w-36 lg:w-full lg:mt-3"
+            test="step-two-next">
             Next
             </Button>
         </div>

components/Form/paper.js

@@ -77,7 +77,7 @@ function Paper() {
   }
 
     return (
-        <div className="py-28 flex flex-col justify-center items-center" id="forms" ref={confetiRef}>
+        <div className="py-28 flex flex-col justify-center items-center" id="forms" ref={confetiRef} data-test="cfp-form">
           <div>
           <div className='lg:px-6 mt-5'>
             <h1 className="text-white font-bold text-5xl lg:text-3xl">

components/Form/select.js

@@ -33,7 +33,7 @@ const customStyles = {
   },
 };
 
-function Dropdown({ options, title, setValue, multi }) {
+function Dropdown({ options, title, setValue, multi ,dataTest}) {
   const [selectedOption, setSelectedOption] = useState(title);
   useEffect(() => {
     if (multi && Array.isArray(selectedOption)) {
@@ -49,6 +49,7 @@ function Dropdown({ options, title, setValue, multi }) {
   return (
     <div className="relative inline-block w-full">
       <Select
+      className={`${dataTest || ""}`}
         styles={customStyles}
         defaultValue={selectedOption}
         onChange={setSelectedOption}

components/Form/subscription.js

@@ -3,12 +3,12 @@ import Button from '../Buttons/button';
 
 function Subscription() {
 	return (
-		<div className='mt-0 md:mt-[106px] subscription container flex justify-center'>
+		<div className='mt-0 md:mt-[106px] subscription container flex justify-center' >
 			<div className='mt-[106px] lg:mt-0 w-[1024px] min-h-[253px] lg:py-10 lg:w-full flex flex-col items-center'>
 				<h3 className='text-[32px] text-white lg:text-center'>
 					Subscribe for AACoT’24 updates!
 				</h3>
-				<a href='https://www.asyncapi.com/newsletter' target='_blank' rel="noreferrer" className='sm:w-full'>
+				<a href='https://www.asyncapi.com/newsletter' target='_blank' rel="noreferrer" className='sm:w-full' data-test="subscribe-button">
 				<Button type='submit' className='w-full md:w-[200px] mt-8 px-10'>
 					Subscribe
 				</Button>

components/Header/header.js

@@ -18,11 +18,12 @@ function Header() {
 					<div className='flex justify-center w-full mt-32'>
 						<div className='flex flex-col justify-center items-center w-full'>
 						<div className='my-10'><Announcement /></div>
-							<div className='sm:w-full text-center'>
+							<div className='sm:w-full text-center' data-test="landing-heading">
 								<Heading
 									className='text-6xl sm:text-4xl leading-normal sm:leading-38px tracking-[-3px] sm:tracking-[-0.02em] font-extrabold text-gradient'
 									level='h1'
 									typeStyle='heading'
+
 								>
 									AsyncAPI Conf On Tour 2024
 								</Heading>

components/Navbar/navDrop.js

@@ -12,16 +12,18 @@ const NavDrop = forwardRef((props, ref)=> {
 			<div className='flex flex-col p-5 pb-8 w-full'>
 				{links.map((link) => {
 					return (
-						<Link href={link.ref} key={link.title}>
+						<Link href={link.ref || '#'} key={link.title}>
 							<div
 								className='min-h-[50px] cursor-pointer'
+								data-test={`nav-${link.title}`}
 								onClick={() =>
 									show === link.title ? setShow(null) : setShow(link.title)
 								}
 							>
 								{link.subMenu ? (
 									<div>
-										<div className='flex items-center justify-between'>
+										<div className='flex items-center justify-between' 
+										>
 											<div className='text-white'>{link.title}</div>
 											<Dropdown
 												className={`transition-transform duration-700 ${
@@ -32,8 +34,8 @@ const NavDrop = forwardRef((props, ref)=> {
 										{show && show === link.title && (
 											<div className='flex flex-col py-6 w-full'>
 												{link.subMenu.map((sub) => (
-													<Link href={sub.ref} key={sub.ref}>
-														<div
+													<Link href={sub.ref} key={sub.ref} >
+														<div data-test={`nav-sub-${sub.title}`}
 															onClick={() => setDrop(false)}
 															className='h-[40px] flex navbg items-center p-6 hover:text-black text-white cursor-pointer'
 														>

components/Navbar/navbar.js

@@ -72,21 +72,21 @@ function Navbar() {
 		<div className='flex justify-center items-center sticky top-0 z-[99] text-white'>
 			<div className='w-[1131px]'>
 				<div className='p-5 flex justify-between h-[75px] w-full items-center'>
-					<div className='flex items-center sm:justify-between sm:w-full'>
+					<div className='flex items-center sm:justify-between sm:w-full' data-test="nav-Home">
 						<Link href='/'>
 							<div className='flex items-center cursor-pointer'>
 								<Image src='/img/logo.png' alt='conference logo' width={120} height={33}  />
 							</div>
 						</Link>
 					</div>
 					{isTablet ? (
-						<div>
+						<div data-test="nav-Hamberger">
 							{drop ? (
 								<button>
 									<Cancel />
 								</button>
 							) : (
-								<button>
+								<button >
 									<Hamburger ref={svg} />
 								</button>
 							)}
@@ -98,7 +98,8 @@ function Navbar() {
 									<div
 										onMouseEnter={() => handleMouseEnter(link.title)}
 										onMouseLeave={handleMouseLeave}
-										className='ml-16 text-[14px] group cursor-pointer relative flex flex-col '
+										className='ml-16 text-[14px] group cursor-pointer relative flex flex-col'
+										data-test = {`nav-${link.title}`}
 									>
 										<div >
 											{link.subMenu ? (
@@ -123,14 +124,15 @@ function Navbar() {
 											<div
 												className='subMenu absolute z-[9] mt-8 w-[150px] rounded-md left-[-15px] gradient-bg px-2 py-1 flex flex-col justify-center space-y-0'
 												onMouseEnter={handleSubMenuEnter}
-												onMouseLeave={handleSubMenuLeave}
-											>
+												onMouseLeave={handleSubMenuLeave}>
 												{link.subMenu.map((subL) => (
 													<Link href={subL.ref} target={subL.target} key={subL.title} rel="noopener noreferrer">
-														<div className={`flex items-center ${link.subMenu.length === 1 ? "justify-center" : "justify-start"} min-h-[32px] text-[16px] hover:scale-95 hover:translate-x-1 transition-all`}>
+														<div className={`flex items-center ${link.subMenu.length === 1 ? "justify-center" : "justify-start"} min-h-[32px] text-[16px] hover:scale-95 hover:translate-x-1 transition-all`}
+														data-test={`nav-sub-${subL.title}`}>
 															{subL.title}
 														</div>
 													</Link>
+
 												))}
 											</div>
 										)}

components/Speaker/guideline.js

@@ -35,7 +35,7 @@ const faqs = [
 function Guidelines({talkDeadLine,virtual,name,cfp}) {
     const [show, setShow] = useState(null);
   return (
-      <div className='z-[9]'>
+      <div className='z-[9]' data-test="guideline-com">
         <div className='flex flex-col justify-center'>
         <Heading className='text-[30px] text-white text-center'>Speakers Guideline</Heading>
         <div className='mt-20'>

components/Speaker/speaker.js

@@ -5,6 +5,7 @@ function Speaker({details, location, className}) {
   return (
 		<div
 			className={`w-auto text-center flex flex-col items-center card h-auto rounded-md p-[27px] ${className}`}
+			data-test="speakers-section"
 		>
 			<div className='w-[300px] h-[300px] lg:w-[250px] lg:h-[250px] relative overflow-hidden  rounded-full'>
 				<Image src={details.img} alt={details.name} width={0} height={0} sizes='100vw' className='rounded-full object-cover transition-all duration-300 hover:scale-110 w-[100%] h-[100%]' />