Resolve Console Warnings and Errors for Improved Code Quality

src/components/AuthPage/ForgotPassword/index.jsx

@@ -79,7 +79,7 @@ const ForgotPassword = ({
   const classes = useStyles();
 
   return (
-    <Card className={classes.root} data-testId="forgotPassword">
+    <Card className={classes.root} data-testid="forgotPassword">
       <Typography
         variant="h4"
         className={"mb-24 text-center " + classes.heading}
@@ -130,7 +130,7 @@ const ForgotPassword = ({
           className="mb-32"
           fullWidth
           height="10rem"
-          data-testId="forgotPasswordEmail"
+          data-testid="forgotPasswordEmail"
           startAdornment={
             <InputAdornment sposition="start">
               <MailOutlineOutlinedIcon style={{ color: "rgba(0,0,0,.25)" }} />
@@ -145,7 +145,7 @@ const ForgotPassword = ({
           className="mt-10"
           type="submit"
           fullWidth
-          data-testId="forgotPasswordButton"
+          data-testid="forgotPasswordButton"
           disabled={!isValidEmail}
         >
           {loading ? "Sending..." : "Send me the link"}

src/components/AuthPage/Login/index.jsx

@@ -119,7 +119,7 @@ const Login = ({
       raised
       className={`${classes.card}   `}
       style={{ background: background }}
-      data-testId="login"
+      data-testid="login"
     >
       <CardContent>
         <Typography
@@ -138,7 +138,7 @@ const Login = ({
             placeholder="[email protected]"
             value={email}
             onChange={onChangeEmail}
-            helperText={emailValidateError ? emailValidateErrorMessage : null}
+            helpertext={emailValidateError ? emailValidateErrorMessage : null}
             fullWidth
             autoComplete="email"
             required
@@ -156,7 +156,7 @@ const Login = ({
           <TextField
             label="Password"
             variant="outlined"
-            helperText={
+            helpertext={
               passwordValidateError ? passwordValidateErrorMessage : null
             }
             className="password"
@@ -201,7 +201,7 @@ const Login = ({
               style={{ fontFamily: "Arial, sans-serif", fontSize: "1.5vh" }}
             >
               <Link
-                data-testId="forgotPassoword"
+                data-testid="forgotPassoword"
                 to="/forgotpassword"
                 className="login-form-forgot"
                 style={{ float: "right" }}
@@ -217,7 +217,7 @@ const Login = ({
             fullWidth
             onClick={onSubmit}
             disabled={loading}
-            data-testId="loginButton"
+            data-testid="loginButton"
             className="loginButton"
             style={{
               color: "white",

src/components/AuthPage/SignUp/index.jsx

@@ -23,7 +23,7 @@ const SignUp = ({ background = "white" }) => {
     <Card
       raised
       className={classes.card}
-      data-testId="signUp"
+      data-testid="signUp"
       style={{
         background: background,
         maxWidth: "520px",
@@ -51,7 +51,7 @@ const SignUp = ({ background = "white" }) => {
           justify="center"
           alignItems="center"
           className="mt-24"
-          data-testId="signUpHaveAccount"
+          data-testid="signUpHaveAccount"
         >
           <Grid item={true} sm={12} className="center">
             Already have a{" "}

src/components/AuthPage/SignUp/signupForm.jsx

@@ -207,18 +207,18 @@ const SignupForm = () => {
         </Collapse>
       )}
 
-      <Card data-testId="signUpForm" style={{ boxShadow: "none" }}>
+      <Card data-testid="signUpForm" style={{ boxShadow: "none" }}>
         <TextField
           label="Email"
           variant="outlined"
           autoFocus
           placeholder="[email protected]"
           value={email}
           onChange={onChangeEmail}
-          helperText={emailValidateError ? emailValidateErrorMessage : null}
+          helpertext={emailValidateError ? emailValidateErrorMessage : null}
           error={emailValidateError}
           fullWidth
-          data-testId="signUpEmail"
+          data-testid="signUpEmail"
           autoComplete="email"
           required
           onFocus={onFocusEmail}
@@ -234,7 +234,7 @@ const SignupForm = () => {
         <TextField
           label="New password"
           variant="outlined"
-          helperText={
+          helpertext={
             passwordValidateError ? passwordValidateErrorMessage : null
           }
           error={passwordValidateError}
@@ -243,7 +243,7 @@ const SignupForm = () => {
           value={password}
           onFocus={onFocusPassword}
           onChange={onChangePassword}
-          data-testId="signUpPassword"
+          data-testid="signUpPassword"
           autoComplete="new-password"
           type={showPassword ? "text" : "password"}
           style={{ marginBottom: "15px" }}
@@ -269,15 +269,15 @@ const SignupForm = () => {
         <TextField
           label="Confirm password"
           variant="outlined"
-          helperText={
+          helpertext={
             confirmPasswordValidateError
               ? confirmPasswordValidateErrorMessage
               : null
           }
           error={confirmPasswordValidateError}
           fullWidth
           required
-          data-testId="signUpConfirmPassword"
+          data-testid="signUpConfirmPassword"
           value={confirmPassword}
           onFocus={onFocusConfirmPassword}
           onChange={onChangeConfirmPassword}
@@ -309,7 +309,7 @@ const SignupForm = () => {
               onChange={() => setAgreed(!agreed)}
               name="remember"
               color="primary"
-              data-testId="TnC"
+              data-testid="TnC"
               style={{}}
             />
           }
@@ -326,7 +326,7 @@ const SignupForm = () => {
           color="primary"
           fullWidth
           disabled={loading}
-          data-testId="signUpButton"
+          data-testid="signUpButton"
           onClick={onSubmit}
           style={{
             color: "white",

src/components/AuthPage/smButton/smButtons.jsx

@@ -17,7 +17,7 @@ const SmButtons = () => {
     <Grid
       container
       className={classes.root}
-      data-testId="smButtons"
+      data-testid="smButtons"
       style={{
         backgroundColor: "#EFF5F5",
         borderRadius: "30px",

src/components/Card/CardWithPicture.jsx

@@ -111,9 +111,11 @@ export default function CardWithPicture({ tutorial }) {
       <Link to={`/tutorial/${tutorial?.tutorial_id}`}>
         <CardMedia
           className={classes.media}
-          image={tutorial?.featured_image}
+          image={
+            tutorial?.featured_image || "src/assets/images/tutorialCard.png"
+          }
           title="code"
-          data-testId="Image"
+          data-testid="Image"
         />
       </Link>
       <CardHeader
@@ -133,7 +135,7 @@ export default function CardWithPicture({ tutorial }) {
               variant="h7"
               className={classes.inline}
               color="textPrimary"
-              data-testId="UserName"
+              data-testid="UserName"
             >
               {user?.displayName}
             </Typography>
@@ -145,7 +147,7 @@ export default function CardWithPicture({ tutorial }) {
                   variant="h7"
                   className={classes.inline}
                   color="textPrimary"
-                  data-testId="UserOrgName"
+                  data-testid="UserOrgName"
                 >
                   {tutorial?.owner}
                 </Typography>
@@ -157,15 +159,15 @@ export default function CardWithPicture({ tutorial }) {
       />
       <Link to={`/tutorial/${tutorial?.tutorial_id}`}>
         <CardContent className={classes.contentPadding}>
-          <Typography variant="h5" color="text.primary" data-testId="Title">
+          <Typography variant="h5" color="text.primary" data-testid="Title">
             {tutorial?.title}
           </Typography>
           <Typography
             variant="body2"
             color="textSecondary"
             component="p"
             paragraph
-            data-testId="Description"
+            data-testid="Description"
           >
             {tutorial?.summary}
           </Typography>
@@ -184,7 +186,7 @@ export default function CardWithPicture({ tutorial }) {
           variant="overline"
           display="block"
           className={classes.time}
-          data-testId="Time"
+          data-testid="Time"
         >
           {"10 min"}
         </Typography>
@@ -215,16 +217,16 @@ export default function CardWithPicture({ tutorial }) {
             <KeyboardArrowDownIcon />
           </ToggleButton>
         </ToggleButtonGroup>
-        <IconButton aria-label="share" data-testId="CommentIcon">
+        <IconButton aria-label="share" data-testid="CommentIcon">
           <ChatOutlinedIcon />
         </IconButton>
-        <IconButton aria-label="add to favorites" data-testId="ShareIcon">
+        <IconButton aria-label="add to favorites" data-testid="ShareIcon">
           <ShareOutlinedIcon />
         </IconButton>
-        <IconButton aria-label="share" data-testId="NotifIcon">
+        <IconButton aria-label="share" data-testid="NotifIcon">
           <TurnedInNotOutlinedIcon />
         </IconButton>
-        <IconButton aria-label="share" data-testId="MoreIcon">
+        <IconButton aria-label="share" data-testid="MoreIcon">
           <MoreVertOutlinedIcon />
         </IconButton>
       </CardActions>

src/components/Card/CardWithoutPicture.jsx

@@ -101,7 +101,7 @@ export default function CardWithoutPicture({ tutorial }) {
   };
 
   return (
-    <Card className={classes.root} data-testId="codelabz">
+    <Card className={classes.root} data-testid="codelabz">
       <CardHeader
         avatar={
           <Avatar className={classes.avatar}>
@@ -119,7 +119,7 @@ export default function CardWithoutPicture({ tutorial }) {
               variant="h7"
               className={classes.inline}
               color="textPrimary"
-              data-testId="UserName"
+              data-testid="UserName"
             >
               {user?.displayName}
             </Typography>
@@ -131,7 +131,7 @@ export default function CardWithoutPicture({ tutorial }) {
                   variant="h7"
                   className={classes.inline}
                   color="textPrimary"
-                  data-testId="UserOrgName"
+                  data-testid="UserOrgName"
                 >
                   {tutorial?.owner}
                 </Typography>
@@ -144,17 +144,17 @@ export default function CardWithoutPicture({ tutorial }) {
       <Link to={`/tutorial/${tutorial?.tutorial_id}`}>
         <CardContent
           className={classes.contentPadding}
-          data-testId="codelabzDetails"
+          data-testid="codelabzDetails"
         >
-          <Typography variant="h5" color="text.primary" data-testId="Title">
+          <Typography variant="h5" color="text.primary" data-testid="Title">
             {tutorial?.title}
           </Typography>
           <Typography
             variant="body2"
             color="textSecondary"
             component="p"
             paragraph
-            data-testId="Description"
+            data-testid="Description"
           >
             {tutorial?.summary}
           </Typography>
@@ -173,7 +173,7 @@ export default function CardWithoutPicture({ tutorial }) {
           variant="overline"
           display="block"
           className={classes.time}
-          data-testId="Time"
+          data-testid="Time"
         >
           {"10 min"}
         </Typography>
@@ -204,16 +204,16 @@ export default function CardWithoutPicture({ tutorial }) {
             <KeyboardArrowDownIcon />
           </ToggleButton>
         </ToggleButtonGroup>
-        <IconButton aria-label="share" data-testId="CommentIcon">
+        <IconButton aria-label="share" data-testid="CommentIcon">
           <ChatOutlinedIcon />
         </IconButton>
-        <IconButton aria-label="add to favorites" data-testId="ShareIcon">
+        <IconButton aria-label="add to favorites" data-testid="ShareIcon">
           <ShareOutlinedIcon />
         </IconButton>
-        <IconButton aria-label="share" data-testId="NotifIcon">
+        <IconButton aria-label="share" data-testid="NotifIcon">
           <TurnedInNotOutlinedIcon />
         </IconButton>
-        <IconButton aria-label="share" data-testId="MoreIcon">
+        <IconButton aria-label="share" data-testid="MoreIcon">
           <MoreVertOutlinedIcon />
         </IconButton>
       </CardActions>

src/components/CardTabs/Events/index.jsx

@@ -37,14 +37,14 @@ const EventsCard = props => {
     <div className={classes.root}>
       <Card
         className={(classes.card, classes.root)}
-        data-testId="upcomingEventCard"
+        data-testid="upcomingEventCard"
       >
         <CardContent
           style={{
             width: "100%"
           }}
         >
-          <Typography variant="h5" component="div" gutterBottom>
+          <Typography variant="h5" component="div" gutterbottom="true">
             {props.title}
           </Typography>
           {props.events.map(function (event, index) {
@@ -54,23 +54,23 @@ const EventsCard = props => {
                 container
                 direction="row"
                 spacing={2}
-                data-testId={index == 0 ? "upEventBox" : ""}
+                data-testid={index == 0 ? "upEventBox" : ""}
               >
                 <Grid item xs={3}>
                   <img
                     src={event.img[0]}
                     className={classes.logo}
-                    data-testId={index == 0 ? "upEventImg" : ""}
+                    data-testid={index == 0 ? "upEventImg" : ""}
                   />
                 </Grid>
 
                 <Grid item xs={9}>
-                  <Box data-testId={index == 0 ? "upEventName" : ""}>
+                  <Box data-testid={index == 0 ? "upEventName" : ""}>
                     <Typography>{event.name}</Typography>
                   </Box>
                   <Box
                     sx={{ fontWeight: 400, fontSize: "0.8rem" }}
-                    data-testId={index == 0 ? "upEventDate" : ""}
+                    data-testid={index == 0 ? "upEventDate" : ""}
                   >
                     <Typography>{event.date}</Typography>
                   </Box>