fix: fixing few buggy things and pushing the code now for it to be merged into the development

Author: TaariqMansurie

.env.development

@@ -0,0 +1,5 @@
+# Development environment settings
+REACT_APP_APIENDPOINT="http://localhost:4500/api"
+SKIP_PREFLIGHT_CHECK=true
+DISABLE_ESLINT_PLUGIN=true
+REACT_APP_DEF_PWD=123Welcome!

.gitignore

@@ -10,12 +10,17 @@
 
 # misc
 .DS_Store
+
+# Environment files
 .env
 .env.local
+.env.development
 .env.development.local
 .env.test.local
 .env.production.local
 
+
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

eslint.config.js

@@ -31,7 +31,6 @@ module.exports = [
       // Ignore test files inside /src/components
       'src/components/Reports/PeopleReport/components/PeopleTasksPieChart.test.jsx',
       // Ignore entire component folders
-      'src/components/Badge/**',
     ],
   },
 

src/components/Badge/AssignBadge.jsx

@@ -63,6 +63,7 @@ function AssignBadge(props) {
       }
       setError(null);
     } catch (err) {
+      /* eslint-disable no-console */
       console.error('Error filtering users:', err);
       setError(err.message);
       setFilteredUsers([]);

src/components/Badge/AssignBadgePopup.jsx

@@ -23,8 +23,12 @@ function AssignBadgePopup(props) {
     );
   };
 
+  const { submit: submitCallback } = props;
+
   const handleSubmit = () => {
-    props.submit();
+    if (typeof submitCallback === 'function') {
+      submitCallback();
+    }
     dispatch(clearSelected());
   };
 
@@ -48,15 +52,16 @@ function AssignBadgePopup(props) {
               <th>Badge</th>
               <th>Name</th>
               <th>
-                <i className="fa fa-info-circle" id="SelectInfo" />
+                <i className="fa fa-info-circle" id="SelectInfo" data-testid="select-info-icon" />
                 <UncontrolledTooltip
                   placement="right"
                   target="SelectInfo"
                   className="bg-secondary text-light"
                 >
                   <p className="badge_info_icon_text">
                     Check those boxes to select the badges you wish to assign a person. Click the
-                    "Confirm" button at the bottom when you've selected all you wish to add.
+                    &quot;Confirm&quot; button at the bottom when you&apos;ve selected all you wish
+                    to add.
                   </p>
                   <p className="badge_info_icon_text">
                     Want to assign multiple of the same badge to a person? Repeat the process!

src/components/Badge/Badge.jsx

@@ -97,7 +97,8 @@ function Badge(props) {
               id="badgesearned"
             >
               <CardHeader tag="h3" onClick={toggleTypes} role="button" tabIndex={0}>
-                Badges <i className="fa fa-info-circle" id="BadgeInfo" />
+                Badges{' '}
+                <i className="fa fa-info-circle" id="BadgeInfo" data-testid="badge-info-icon" />
               </CardHeader>
               <CardBody>
                 <NewBadges
@@ -123,7 +124,7 @@ function Badge(props) {
                     props.userProfile.badgeCollection,
                     props.userProfile.personalBestMaxHrs,
                   )}
-                  <i className="fa fa-info-circle" id="CountInfo" />
+                  <i className="fa fa-info-circle" id="CountInfo" data-testid="count-info-icon" />
                 </CardText>
                 <BadgeSummaryViz badges={props.userProfile.badgeCollection} dashboard />
               </CardBody>

src/components/Badge/BadgeDevelopmentTable.jsx

@@ -163,7 +163,6 @@ function BadgeDevelopmentTable(props) {
   };
 
   const handleSortName = () => {
-    console.log('here sort name');
     setSortRankState('default');
     setSortNameState(prevState => {
       // change the icon
@@ -187,7 +186,6 @@ function BadgeDevelopmentTable(props) {
 
   const handleSortRank = () => {
     setSortNameState('default');
-    console.log('sort rank');
     setSortRankState(prevState => {
       // Change the icon state
       let newState = 'ascending';
@@ -228,6 +226,7 @@ function BadgeDevelopmentTable(props) {
             toggleCheckbox(badgeValue._id);
             props.updateBadge(badgeValue._id, updatedValue);
           }}
+          data-testid={`report-checkbox-${badgeValue._id}`}
           style={{
             display: 'inline-block',
             width: '20px',
@@ -288,7 +287,12 @@ function BadgeDevelopmentTable(props) {
             <tr key={value._id}>
               <td className="badge_image_sm">
                 {' '}
-                <img src={value.imageUrl} id={`popover_${value._id}`} alt="" />
+                <img
+                  src={value.imageUrl}
+                  id={`popover_${value._id}`}
+                  alt=""
+                  data-testid={`badge-image-${value._id}`}
+                />
                 <UncontrolledPopover trigger="hover" target={`popover_${value._id}`}>
                   <Card className={`text-center ${darkMode ? 'bg-space-cadet text-light' : ''}`}>
                     <CardImg className="badge_image_lg" src={value?.imageUrl} />

src/components/Badge/BadgeHistory.jsx

@@ -5,9 +5,11 @@ function BadgeHistory({ badges, personalBestMaxHrs }) {
   const filterBadges = allBadges => {
     if (!Array.isArray(allBadges)) return [];
 
-    const filteredList = allBadges.filter(value => 
-      value && value.lastModified && 
-      (Date.now() - new Date(value.lastModified).getTime() > WEEK_DIFF)
+    const filteredList = allBadges.filter(
+      value =>
+        value &&
+        value.lastModified &&
+        Date.now() - new Date(value.lastModified).getTime() > WEEK_DIFF,
     );
 
     filteredList.sort((a, b) => {
@@ -30,7 +32,7 @@ function BadgeHistory({ badges, personalBestMaxHrs }) {
 
   return (
     <div className="badge_history_container">
-      {filteredBadges.map((value, index) => (
+      {filteredBadges.map((value, index) =>
         value && value.badge ? (
           <BadgeImage
             personalBestMaxHrs={personalBestMaxHrs}
@@ -40,10 +42,10 @@ function BadgeHistory({ badges, personalBestMaxHrs }) {
             index={index}
             key={value.badge._id || index}
           />
-        ) : null
-      ))}
+        ) : null,
+      )}
     </div>
   );
 }
 
-export default BadgeHistory;
+export default BadgeHistory;

src/components/Badge/BadgeTableHeader.jsx

@@ -8,8 +8,14 @@ function BadgeTableHeader({ darkMode }) {
       <th className="d-xl-table-cell d-none">Description</th>
       <th>Type</th>
       <th className="d-xl-table-cell d-none">Details</th>
-      <th>Ranking{' '}
-        <i className="fa fa-info-circle" id="SortRankingInfo" style={{ marginLeft: '5px' }} />
+      <th>
+        Ranking{' '}
+        <i
+          className="fa fa-info-circle"
+          id="SortRankingInfo"
+          data-testid="sort-ranking-info-icon"
+          style={{ marginLeft: '5px' }}
+        />
         <UncontrolledTooltip
           placement="right"
           target="SortRankingInfo"
@@ -34,4 +40,4 @@ function BadgeTableHeader({ darkMode }) {
   );
 }
 
-export default BadgeTableHeader;
+export default BadgeTableHeader;

src/components/Badge/NewBadges.jsx

@@ -26,7 +26,8 @@ function NewBadges(props) {
 
       return filteredList;
     } catch (error) {
-      console.log(error);
+      // Swallow errors from invalid data to keep UI resilient in tests
+      return [];
     }
   };