fix: added basic testing for new badge composable, consolidated tier …

…date fixing
kiva · Oct 28, 2024 · 9e31b28 · 9e31b28
1 parent 48be875
commit 9e31b28
Show file tree

Hide file tree

Showing 4 changed files with 9,616 additions and 37 deletions.
diff --git a/src/components/MyKiva/BadgeModalContentJourney.vue b/src/components/MyKiva/BadgeModalContentJourney.vue
@@ -154,8 +154,7 @@ const positions = ref(getTierPositions());
 const tierCaption = index => {
 	const tier = sortedTiers.value[index];
 	if (tier.completedDate) {
-		// Date is in format "2024-10-22T18:49:21Z[UTC]"
-		return format(new Date(tier.completedDate.replace('[UTC]', '')), 'MMMM do, yyyy');
+		return format(new Date(tier.completedDate), 'MMMM do, yyyy');
 	}
 	if (tier.target) {
 		return `${props.badge.totalProgressToAchievement} of ${tier.target} loans`;

diff --git a/src/composables/useBadgeData.js b/src/composables/useBadgeData.js
@@ -7,19 +7,28 @@ import logReadQueryError from '#src/util/logReadQueryError';
  * Utilities for loading and combining tiered badge data
  *
  * @param apollo The current Apollo client instance
- * @returns Cleaned up tiered badge data
+ * @returns Badge data and utilities
  */
 export default function useBadgeData(apollo) {
 	const badgeAchievementData = ref();
 	const badgeContentfulData = ref();
 
+	/**
+	 * Gets a cleaned up version of Contentful badge data
+	 *
+	 * @param entry The Contentful entry
+	 * @returns The cleaned up Contentful badge data
+	 */
 	const getContentfulLevelData = entry => ({
 		id: entry?.fields?.key?.replace(/-level-\d+/, '') ?? '',
 		level: +(entry?.fields?.key?.replace(/\D/g, '') ?? ''),
 		levelName: entry?.fields?.challengeName ?? '',
 		imageUrl: entry?.fields?.badgeImage?.fields?.file?.url ?? '',
 	});
 
+	/**
+	 * Calls Apollo to get the badge achievement service data
+	 */
 	const fetchAchievementData = () => {
 		apollo.query({ query: userAchievementProgressQuery })
 			.then(result => {
@@ -29,6 +38,9 @@ export default function useBadgeData(apollo) {
 			});
 	};
 
+	/**
+	 * Calls Apollo to get the badge Contentful data
+	 */
 	const fetchContentfulData = () => {
 		apollo.query({
 			query: contentfulEntriesQuery,
@@ -46,42 +58,20 @@ export default function useBadgeData(apollo) {
 	};
 
 	/**
-	 * {
-	 *   "contentfulData": [
-	 *     {
-	 *       "id": "",
-	 *       "level": 1,
-	 *       "levelName": "",
-	 *       "imageUrl": ""
-	 *     },
-	 *     ...
-	 *   ],
-	 *   "achievementData": {
-	 *     "id": "",
-	 *     "totalProgressToAchievement": 0,
-	 *     "tiers": [
-	 *       {
-	 *         "target": 1,
-	 *         "tierStatement": "",
-	 *         "completedDate": null,
-	 *         "learnMoreURL": "",
-	 *         "level": 1
-	 *       },
-	 *       ...
-	 *     ]
-	 *   },
-	 *   "hasStarted": false,
-	 *   "level": undefined
-	 * }
+	 * Combines the badge data into a more usable form
+	 *
+	 * @param allAchievementData All of the data for the user from the achievement service
+	 * @param allContentfulData All of the badge data from Contentful
+	 * @returns Combined and cleaned up badge data
 	 */
-	const badgeData = computed(() => {
+	const combineBadgeData = (allAchievementData, allContentfulData) => {
 		const badges = [];
 
 		// Ensure data loaded from both achievement service and Contentful
-		if (badgeAchievementData.value && badgeContentfulData.value) {
+		if (allAchievementData && allContentfulData) {
 			// Currently only targeting specific tiered badges
-			badgeAchievementData.value.forEach(achievementData => {
-				const contentfulData = badgeContentfulData.value.filter(entry => entry.id === achievementData.id);
+			allAchievementData.forEach(achievementData => {
+				const contentfulData = allContentfulData.filter(entry => entry.id === achievementData.id);
 
 				// Ensure badges are defined in both locations
 				if (achievementData && contentfulData) {
@@ -105,21 +95,62 @@ export default function useBadgeData(apollo) {
 						contentfulData,
 						achievementData: {
 							...achievementData,
-							tiers: sortedTiers,
+							tiers: sortedTiers.map(t => ({
+								...t,
+								// Date is in format "2024-10-22T18:49:21Z[UTC]"
+								completedDate: t.completedDate?.replace('[UTC]', ''),
+							})),
 						},
 						hasStarted,
 						level,
 					});
 				}
 			});
 		}
+
 		return badges;
-	});
+	};
+
+	/**
+	 * {
+	 *   "contentfulData": [
+	 *     {
+	 *       "id": "",
+	 *       "level": 1,
+	 *       "levelName": "",
+	 *       "imageUrl": ""
+	 *     },
+	 *     ...
+	 *   ],
+	 *   "achievementData": {
+	 *     "id": "",
+	 *     "totalProgressToAchievement": 0,
+	 *     "tiers": [
+	 *       {
+	 *         "target": 1,
+	 *         "tierStatement": "",
+	 *         "completedDate": null,
+	 *         "learnMoreURL": "",
+	 *         "level": 1
+	 *       },
+	 *       ...
+	 *     ]
+	 *   },
+	 *   "hasStarted": false,
+	 *   "level": undefined
+	 * }
+	 */
+	const badgeData = computed(() => combineBadgeData(badgeAchievementData.value, badgeContentfulData.value));
 
 	onMounted(() => {
 		fetchAchievementData();
 		fetchContentfulData();
 	});
 
-	return { badgeAchievementData, badgeData };
+	return {
+		combineBadgeData,
+		getContentfulLevelData,
+		badgeAchievementData,
+		badgeData
+	};
 }