#2490: added more prerequisites graph tests and resolving bugs

NationalSecurityAgency · May 8, 2024 · f079263 · f079263
1 parent e594ef1
commit f079263
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 87 deletions.
diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml
@@ -140,7 +140,7 @@ jobs:
       - name: Run Cypress tests
         run: |
           cd e2e-tests
-          ../.github/scripts/runSubsetOfCypressTests.sh -t 5 -c ${{ matrix.container }} -f 'projects_crud|/skills_table_spec|/skill_reuse_spec|quiz_creation|question_def|metrics-reUsedData_spec|quiz_and_survey|quiz_runs|quiz_skill_assignment|quiz_read|quiz_role|quiz_settings|quiz_skills-in_project_reuse|client-display_quiz_spec|client-display_quiz_theme_spec|client-display_quiz_visual_spec|client-display_run_quiz_spec|run_survey_spec|quiz_skills-catalog_spec|user_actions|/skills_spec|/users_spec|/subjects_spec|/levels_management_spec|/skills_group_spec|/skills_group_modal_spec|/move-skills/|/badges_spec|/skill-reuse/skill_reuse/|/catalog/|/project_settings_spec|/icon_manager_spec|/not_found_spec|/error_pages_spec|/learning-path/learning_path_management_spec|/learning-path/learning_path_management_validation_spec|/add_skills_to_badge_spec|/tag-skills|/settings_spec|/client-display/client-display_spec|/client-display/client-display_point_history_chart_spec|/client-display/skills-display-config-loading_spec|/client-display/client-display-features_spec|/client-display/client-display-last-seen_spec|/client-display/client-display-search-skills_spec|/client-display/client-display-self_report_skills_spec|/client-display/client-display-skill-badges_spec|client-display-skill-expiration_spec|client-display-skill-paging_spec|client-display-skill-tags_spec|client-display-skill_groups_spec|client-display_breadcrumb_spec|client-display-skills_filtering_spec|client-display_catalog_skills_spec|client-display_leaderboard|client-display-learning-path-graph_spec|skills-display-prerequisites_spec.js|skills-display-achieved-date_spec|client-display_custom-labels_spec|/copy_project_spec|/project_errors_spec|/selfReport-approvalHistory_spec|/approver_conf_skills_spec|/approver_conf_spec|/approver_conf_userTags_spec|/approver_conf_users_spec|/approver_role_project_table_spec|/approver_role_spec'
+          ../.github/scripts/runSubsetOfCypressTests.sh -t 5 -c ${{ matrix.container }} -f 'projects_crud|/skills_table_spec|/skill_reuse_spec|quiz_creation|question_def|metrics-reUsedData_spec|quiz_and_survey|quiz_runs|quiz_skill_assignment|quiz_read|quiz_role|quiz_settings|quiz_skills-in_project_reuse|client-display_quiz_spec|client-display_quiz_theme_spec|client-display_quiz_visual_spec|client-display_run_quiz_spec|run_survey_spec|quiz_skills-catalog_spec|user_actions|/skills_spec|/users_spec|/subjects_spec|/levels_management_spec|/skills_group_spec|/skills_group_modal_spec|/move-skills/|/badges_spec|/skill-reuse/skill_reuse/|/catalog/|/project_settings_spec|/icon_manager_spec|/not_found_spec|/error_pages_spec|/learning-path/learning_path_management_spec|/learning-path/learning_path_management_validation_spec|/add_skills_to_badge_spec|/tag-skills|/settings_spec|/client-display/client-display_spec|/client-display/client-display_point_history_chart_spec|/client-display/skills-display-config-loading_spec|/client-display/client-display-features_spec|/client-display/client-display-last-seen_spec|/client-display/client-display-search-skills_spec|/client-display/client-display-self_report_skills_spec|/client-display/client-display-skill-badges_spec|client-display-skill-expiration_spec|client-display-skill-paging_spec|client-display-skill-tags_spec|client-display-skill_groups_spec|client-display_breadcrumb_spec|client-display-skills_filtering_spec|client-display_catalog_skills_spec|client-display_leaderboard|client-display-learning-path-graph_spec|skills-display-prerequisites_spec.js|skills-display-achieved-date_spec|client-display-learning-path-graph-badges_spec|client-display_custom-labels_spec|/copy_project_spec|/project_errors_spec|/selfReport-approvalHistory_spec|/approver_conf_skills_spec|/approver_conf_spec|/approver_conf_userTags_spec|/approver_conf_users_spec|/approver_role_project_table_spec|/approver_role_spec'
           cd ..
         env:
           ELECTRON_EXTRA_LAUNCH_ARGS: '--disable-gpu'

diff --git a/dashboard-prime/src/router/SkillsDisplayChildRoutes.js b/dashboard-prime/src/router/SkillsDisplayChildRoutes.js
@@ -90,6 +90,13 @@ const createSkillsDisplayChildRoutes = (appendToName) => {
     meta: {
       title: `Badge ${skillPlaceholder} Details`,
     },
+  }, {
+    path: '/badges/:badgeId/crossProject/:crossProjectId/:dependentSkillId',
+    component: SkillPage,
+    name: `crossProjectSkillDetailsUnderBadge${appendToName}`,
+    meta: {
+      title: `Cross ${projectPlaceholder} ${skillPlaceholder} Details`,
+    },
   }, {
     name: `SubjectDetailsPage${appendToName}`,
     path: 'subjects/:subjectId',

diff --git a/dashboard-prime/src/skills-display/components/badges/BadgeDetailsPage.vue b/dashboard-prime/src/skills-display/components/badges/BadgeDetailsPage.vue
@@ -8,6 +8,7 @@ import SkillsProgressList from '@/skills-display/components/progress/SkillsProgr
 import { useSkillsDisplaySubjectState } from '@/skills-display/stores/UseSkillsDisplaySubjectState.js'
 import { useSkillsDisplayInfo } from '@/skills-display/UseSkillsDisplayInfo.js'
 import GlobalBadgeProjectLevels from '@/skills-display/components/badges/GlobalBadgeProjectLevels.vue'
+import Prerequisites from '@/skills-display/components/skill/prerequisites/Prerequisites.vue'
 
 const skillsDisplayService = useSkillsDisplayService()
 const route = useRoute()
@@ -55,11 +56,11 @@ const locked = computed(() => {
       <Card class="mt-3">
         <template #content>
           <badge-catalog-item :badge="badge"></badge-catalog-item>
-          <div v-if="locked" class="text-center text-muted locked-text">
-            *** Badge has <b>{{ badge.dependencyInfo.numDirectDependents }}</b> direct prerequisite(s).
+          <Message v-if="locked" icon="fas fa-lock" severity="warn" :closable="false">
+            Badge has <Tag>{{ badge.dependencyInfo.numDirectDependents }}</Tag> direct prerequisite(s).
             <span>Please see its prerequisites below.</span>
-            ***
-          </div>
+
+          </Message>
         </template>
         <template #footer v-if="badge.helpUrl">
           <a :href="badge.helpUrl" target="_blank" rel="noopener" class="btn btn-sm btn-outline-info skills-theme-btn">
@@ -68,20 +69,14 @@ const locked = computed(() => {
         </template>
       </Card>
 
-<!--      <skills-progress-list @points-earned="refreshHeader" v-if="badge" :subject="badge" :show-descriptions="showDescriptions" type="badge"-->
-<!--                            @scrollTo="scrollToLastViewedSkill" :badge-is-locked="locked"/>-->
-
       <skills-progress-list
         v-if="badge && !(skillsDisplayInfo.isGlobalBadgePage.value && !summaryAndSkillsState.subjectSummary?.skills)"
         :subject="badge"
         type="badge"
         class="mt-3"
         :badge-is-locked="locked"/>
 
-<!--      <skill-dependencies class="mt-2" v-if="dependencies && dependencies.length > 0" :dependencies="dependencies"-->
-<!--                          :skill-id="$route.params.badgeId"></skill-dependencies>-->
-
-
+      <prerequisites />
       <global-badge-project-levels :badge="badge"/>
 
     </div>

diff --git a/dashboard-prime/src/skills-display/components/skill/SkillPage.vue b/dashboard-prime/src/skills-display/components/skill/SkillPage.vue
@@ -8,7 +8,7 @@ import SkillProgress from '@/skills-display/components/progress/SkillProgress.vu
 import { useScrollSkillsIntoViewState } from '@/skills-display/stores/UseScrollSkillsIntoViewState.js'
 import { useSkillsDisplaySubjectState } from '@/skills-display/stores/UseSkillsDisplaySubjectState.js'
 import { useSkillsDisplayAttributesState } from '@/skills-display/stores/UseSkillsDisplayAttributesState.js'
-import SkillPrerequisites from '@/skills-display/components/skill/prerequisites/SkillPrerequisites.vue'
+import Prerequisites from '@/skills-display/components/skill/prerequisites/Prerequisites.vue'
 
 const attributes = useSkillsDisplayAttributesState()
 const skillsDisplayService = useSkillsDisplayService()
@@ -95,7 +95,7 @@ const isLoading = computed(() => loadingSkill.value)
         </template>
       </Card>
 
-      <skill-prerequisites />
+      <prerequisites />
     </div>
     <skills-spinner v-if="isLoading" :is-loading="isLoading" class="mt-5" />
   </div>

diff --git a/...kill/prerequisites/SkillPrerequisites.vue → ...nts/skill/prerequisites/Prerequisites.vue b/...kill/prerequisites/SkillPrerequisites.vue → ...nts/skill/prerequisites/Prerequisites.vue
@@ -62,8 +62,6 @@ onMounted(() => {
 })
 
 
-const themeTextPrimaryColor = computed(() => themeState.theme?.prerequisites?.textPrimaryColor || '')
-
 const isDependency = () => {
   const routeName = route.name
   return routeName === 'crossProjectSkillDetails' || routeName === 'crossProjectSkillDetailsUnderBadge'
@@ -72,8 +70,11 @@ const isDependency = () => {
 const loadData = () => {
   loadingData.value = true
   if (!route.params.crossProjectId) {
-    const skillId = isDependency() ? route.params.dependentSkillId : route.params.skillId
-    return skillsDisplayService.getSkillDependencies(skillId)
+    let lookupId = isDependency() ? route.params.dependentSkillId : route.params.skillId
+    if (route.params.badgeId) {
+      lookupId = route.params.badgeId
+    }
+    return skillsDisplayService.getSkillDependencies(lookupId)
       .then((res) => {
         dependenciesInternal.value = res.dependencies
         loadingData.value = false
@@ -246,6 +247,7 @@ const buildNode = (skill, isCrossProject, createdSkillIds, nodes, achievedIds, e
   if (!createdSkillIds.includes(skill.id)) {
     createdSkillIds.push(skill.id)
     const skillColor = skill.isThisSkill ? themeState.graphThisSkillColor : themeState.graphSkillColor
+    console.log(`skill color for ${skill.id} is ${skillColor}`)
     const isAchieved = achievedIds.includes(skill.id)
     let label = isCrossProject ? `Shared from\n<b>${skill.projectName}</b>\n${skill.skillName}` : skill.skillName
     if (skill.isThisSkill) {

diff --git a/dashboard-prime/src/skills-display/components/skill/prerequisites/PrerequisitesTable.vue b/dashboard-prime/src/skills-display/components/skill/prerequisites/PrerequisitesTable.vue
@@ -81,7 +81,9 @@ const getTypeIconColor = (type) => {
           <div class="flex align-items-center gap-1">
             <Avatar :icon="`fas ${getTypeIcon(slotProps.data.type)}`"
                     :style="`color: ${getTypeIconColor(slotProps.data.type)}`" />
-            <div :aria-label="`Prerequisite's type is ${slotProps.data.type}`">{{ slotProps.data.type }}</div>
+            <div :aria-label="`Prerequisite's type is ${slotProps.data.type}`" data-cy="prereqType">
+              {{ slotProps.data.type }}
+            </div>
           </div>
         </template>
       </Column>
@@ -91,14 +93,16 @@ const getTypeIconColor = (type) => {
           <i class="far fa-check-square mr-1" aria-hidden="true"></i>
         </template>
         <template #body="slotProps">
-          <div v-if="slotProps.data.achieved" class="font-weight-bold"
-               data-cy="achievedCellYes"
-               :aria-label="`${slotProps.data.skillName} ${slotProps.data.type} was achieved`"
-               :style="`color: ${themeState.graphAchievedColor}`">✓Yes
-          </div>
-          <div v-else class=""
-               data-cy="achievedCellNo"
-               :aria-label="`${slotProps.data.skillName} ${slotProps.data.type} is not achieved`">Not Yet...
+          <div data-cy="isAchievedCell">
+            <div v-if="slotProps.data.achieved" class="font-weight-bold"
+                 data-cy="achievedCellYes"
+                 :aria-label="`${slotProps.data.skillName} ${slotProps.data.type} was achieved`"
+                 :style="`color: ${themeState.graphAchievedColor}`">✓Yes
+            </div>
+            <div v-else class=""
+                 data-cy="achievedCellNo"
+                 :aria-label="`${slotProps.data.skillName} ${slotProps.data.type} is not achieved`">Not Yet...
+            </div>
           </div>
         </template>
       </Column>

diff --git a/dashboard-prime/src/skills-display/components/skill/prerequisites/UseNavToSkillUtil.js b/dashboard-prime/src/skills-display/components/skill/prerequisites/UseNavToSkillUtil.js
@@ -7,6 +7,8 @@ export const useNavToSkillUtil = () => {
   const displayInfo = useSkillsDisplayInfo()
 
   const navigateToSkill = (skillItem) => {
+    console.log(skillItem)
+
     if (skillItem && skillItem.skillId && !skillItem.isThisSkill) {
       if (skillItem.isCrossProject) {
         if (route.params.badgeId) {
@@ -39,7 +41,7 @@ export const useNavToSkillUtil = () => {
         displayInfo.routerPush(
           'badgeDetails',
           {
-            badgeDetails: skillItem.skillId
+            badgeId: skillItem.skillId
           }
         )
       }

diff --git a/dashboard-prime/src/skills-display/stores/UseSkillsDisplayThemeState.js b/dashboard-prime/src/skills-display/stores/UseSkillsDisplayThemeState.js
@@ -47,12 +47,12 @@ export const useSkillsDisplayThemeState = defineStore('skillsDisplayThemeState',
 
   const landingPageTitle = computed(() => theme.value.landingPageTitle || 'User Skills')
 
-  const graphBadgeColor = computed(() => theme.value?.prerequisites?.badgeColor || 'indigo')
-  const graphSkillColor = computed(() => theme.value?.prerequisites?.skillColor || 'orange')
-  const graphAchievedColor = computed(() => theme.value?.prerequisites?.achievedColor || 'green')
-  const graphThisSkillColor = computed(() => theme.value?.prerequisites?.thisSkillColor || '#00a4e8')
-  const graphNavButtonsColor = computed(() => theme.value?.prerequisites?.navButtonsColor || '')
-  const graphTextPrimaryColor = computed(() => theme.value?.prerequisites?.textPrimaryColor || '')
+  const graphBadgeColor = computed(() => theme?.value?.prerequisites?.badgeColor || 'indigo')
+  const graphSkillColor = computed(() => theme?.value?.prerequisites?.skillColor || 'orange')
+  const graphAchievedColor = computed(() => theme?.value?.prerequisites?.achievedColor || 'green')
+  const graphThisSkillColor = computed(() => theme?.value?.prerequisites?.thisSkillColor || '#00a4e8')
+  const graphNavButtonsColor = computed(() => theme?.value?.prerequisites?.navButtonsColor || '')
+  const graphTextPrimaryColor = computed(() => theme?.value?.prerequisites?.textPrimaryColor || '')
 
   return {
     theme,