#127 Add opt-out to component, fix tests

NationalSecurityAgency · Jan 15, 2025 · 14e6401 · 14e6401
1 parent e4a29a2
commit 14e6401
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 10 deletions.
diff --git a/dashboard/src/skills-display/components/UserProgressCard.vue b/dashboard/src/skills-display/components/UserProgressCard.vue
@@ -24,11 +24,9 @@ const props = defineProps({
     required: true,
   },
   userAchieved: {
-    type: String,
     required: true,
   },
   totalAvailable: {
-    type: String,
     required: true,
   },
   unit: {
@@ -46,6 +44,15 @@ const props = defineProps({
   isSummaryOnly: {
     type: Boolean,
     required: false,
+  },
+  optedOut: {
+    type: Boolean,
+    required: false,
+  },
+  loading: {
+    type: Boolean,
+    required: false,
+    default: false,
   }
 })
 </script>
@@ -58,15 +65,22 @@ const props = defineProps({
       </div>
     </template>
     <template #content>
-      <div class="fa-stack skills-icon user-rank-stack text-blue-300 flex flex-wrap align-items-center">
+      <div class="fa-stack skills-icon user-rank-stack text-blue-300 flex flex-wrap align-items-center" v-if="!loading">
         <i :class="`${icon} fa-stack-2x watermark-icon`" />
 
-        <div class="fa-stack-1x user-rank-text sd-theme-primary-color font-bold text-blue-700 text-lg">
+        <div v-if="optedOut" class="text-danger fa-stack-1x user-rank-text sd-theme-primary-color font-bold text-blue-700 text-lg" data-cy="optedOutMessage">
+          <div>Opted-Out</div>
+          <div style="font-size: 0.8rem; line-height: 1rem;" class="mb-2">
+            Your position would be <b style="font-size: 0.9rem;" class="badge badge-danger">{{ userAchieved }}</b> if you opt-in!
+          </div>
+        </div>
+        <div class="fa-stack-1x user-rank-text sd-theme-primary-color font-bold text-blue-700 text-lg" v-else>
           <div class="text-3xl" style="line-height: 1.2em" :data-cy="`${componentName}Position`">{{ userAchieved }}</div>
           <div class="mt-1">out of</div>
           <div>{{ totalAvailable }} {{ unit }}</div>
         </div>
       </div>
+      <skills-spinner :is-loading="loading"/>
     </template>
     <template #footer v-if="!isSummaryOnly">
       <router-link

diff --git a/dashboard/src/skills-display/components/rank/MyRank.vue b/dashboard/src/skills-display/components/rank/MyRank.vue
@@ -30,6 +30,7 @@ const route = useRoute()
 
 const position = computed(() => numberFormat.pretty(progress.userRanking.position))
 const totalUsers = computed(() => numberFormat.pretty(progress.userRanking.numUsers))
+const optedOut = computed(() => progress.userRanking.optedOut)
 onMounted(() => {
   progress.loadUserSkillsRanking(route.params.subjectId)
 })
@@ -52,7 +53,9 @@ const toRankDetailsPage = computed(() => {
       unit="users"
       icon="fa fa-users"
       :route="toRankDetailsPage"
-      :is-summary-only="attributes.isSummaryOnly" />
+      :is-summary-only="attributes.isSummaryOnly"
+      :loading="progress.loadingUserSkillsRanking"
+      :opted-out="optedOut" />
 </template>
 
 <style scoped>

diff --git a/e2e-tests/cypress/e2e/accessibility/client-display_accessibility_spec.js b/e2e-tests/cypress/e2e/accessibility/client-display_accessibility_spec.js
@@ -272,8 +272,8 @@ describe('Client Display Accessibility tests', () => {
             cy.cdVisit('/?isSummaryOnly=true');
             cy.injectAxe();
 
-            cy.get('[data-cy=myBadges]')
-              .contains('0 Badges');
+            cy.get('[data-cy=myBadgesPosition]')
+              .contains('0');
             cy.wait(4000); //need to wait on the pointHistoryChart to complete rendering before running a11y
 
             cy.customA11y();

diff --git a/e2e-tests/cypress/e2e/client-display/client-display_leaderboard_sharedData_spec.js b/e2e-tests/cypress/e2e/client-display/client-display_leaderboard_sharedData_spec.js
@@ -295,10 +295,10 @@ describe('Client Display Leaderboard (with shared data) Tests', () => {
         }]);
 
         cy.cdVisit('/[email protected]');
-        cy.get('[data-cy="myRank"]')
+        cy.get('[data-cy="optedOutMessage"]')
           .contains('Opted-Out');
-        cy.get('[data-cy="myRank"]')
-          .contains('Your position would be 13 if you opt-in');
+        cy.get('[data-cy="optedOutMessage"]')
+          .contains('Your position would be #13 if you opt-in');
         cy.wait(2000)
         cy.matchSnapshotImageForElement('[data-cy="myRank"]', {
             name: 'my-rank-opted-out',