Skip to content

Commit

Permalink
Merge pull request #2967 from NationalSecurityAgency/t#2928/improve-m…
Browse files Browse the repository at this point in the history 
…essaging

Refs/heads/t#2928/improve messaging
  • Loading branch information
@sudo-may
sudo-may authored Nov 13, 2024
2 parents d1460b5 + c8f0b2e commit b46a5b3
Show file tree
Hide file tree
Showing 4 changed files with 139 additions and 9 deletions.
19 changes: 19 additions & 0 deletions dashboard/src/skills-display/components/progress/SkillVideo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ import { useSkillsDisplayAttributesState } from '@/skills-display/stores/UseSkil
import SkillsButton from '@/components/utils/inputForm/SkillsButton.vue';
import SkillsSpinner from '@/components/utils/SkillsSpinner.vue';
import SkillsOverlay from '@/components/utils/SkillsOverlay.vue';
import {useNumberFormat} from "@/common-components/filter/UseNumberFormat.js";
import {useTimeUtils} from "@/common-components/utilities/UseTimeUtils.js";
const VideoPlayer = defineAsyncComponent(() =>
import('@/common-components/video/VideoPlayer.vue')
Expand All @@ -39,6 +41,9 @@ const props = defineProps({
isLocked: Boolean,
})
const numFormat = useNumberFormat()
const timeUtils = useTimeUtils()
const emit = defineEmits(['points-earned'])
const router = useRouter()
const announcer = useSkillsAnnouncer()
Expand All @@ -63,6 +68,7 @@ const transcript = ref({
const showPercent = ref(true);
const isFirstTime = ref(true);
const transcriptReadCert = ref(false);
const isMotivationalSkill = computed(() => props.skill && props.skill.isMotivationalSkill)
const isAlreadyAchieved = computed(() => {
return props.skill.points > 0;
Expand Down Expand Up @@ -189,6 +195,19 @@ const loadTranscript = () => {
</SkillsOverlay>
<div v-if="!videoCollapsed && !isLocked">
<video-player :options="videoConf" @watched-progress="updateVideoProgress" />
<Message v-if="isSelfReportTypeVideo && isMotivationalSkill && skill.expirationDate">
<template #container>
<div class="flex gap-2 p-3 align-content-center">
<div>
<i class="fas fa-user-shield text-2xl" aria-hidden="true"></i>
</div>
<div class="flex-1 font-italic pt-1" data-cy="videoAlert">
This skill's achievement expires <span class="font-semibold">{{ timeUtils.relativeTime(skill.expirationDate) }}</span>, but your <span class="font-size-1">
<Tag severity="info">{{ numFormat.pretty(skill.totalPoints) }}</Tag></span> points can be retained by watching the video again.
</div>
</div>
</template>
</Message>
<Message v-if="isSelfReportTypeVideo && (!isAlreadyAchieved || justAchieved)"
class="mt-2"
:severity="justAchieved ? 'success' : 'info'"
Expand Down
6 changes: 5 additions & 1 deletion dashboard/src/skills-display/components/skill/QuizFooter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,12 +92,16 @@ const viewResultsBtnLabel = computed(() => {
<div>
<i class="fas fa-user-check text-2xl" aria-hidden="true"></i>
</div>
<div class="flex-1" data-cy="quizAlert">{{ completionWord }} the<span
<div class="flex-1" data-cy="quizAlert" v-if="!isCompleted">{{ completionWord }} the<span
v-if="hasQuestions">&nbsp;{{ selfReporting.numQuizQuestions }}-question</span>&nbsp;<b>{{
selfReporting.quizName
}}</b>&nbsp;{{ typeWord }} and earn <span class="font-size-1"><Tag
severity="info">{{ numFormat.pretty(skill.totalPoints) }}</Tag></span> points!
</div>
<div class="flex-1" data-cy="quizAlert" v-else-if="isCompleted && isMotivationalSkill">
This skill's achievement expires <span class="font-semibold">{{ timeUtils.relativeTime(skill.expirationDate) }}</span>, but your <span class="font-size-1">
<Tag severity="info">{{ numFormat.pretty(skill.totalPoints) }}</Tag></span> points can be retained by completing the {{ typeWord }} again.
</div>
<SkillsButton
:label="isQuizSkill ? 'Take Quiz' : 'Complete Survey'"
icon="far fa-arrow-alt-circle-right"
Expand Down
1 change: 1 addition & 0 deletions dashboard/src/skills-display/components/skill/SkillOverviewFooter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const isCompleted = computed(() => skillInternal.value.points === skillInternal.
const selfReportDisabled = computed(() => (isCompleted.value && !isMotivationalSkill.value) || isPendingApproval())
const isHonorSystem = computed(() => skillInternal.value.selfReporting && skillInternal.value.selfReporting.type === 'HonorSystem')
const isApprovalRequired = computed(() => skillInternal.value.selfReporting && skillInternal.value.selfReporting.type === 'Approval')
const isVideo = computed(() => skillInternal.value.selfReporting.type === 'Video')
const isJustificationRequired = computed(() => skillInternal.value.selfReporting && skillInternal.value.selfReporting.justificationRequired)
const isRejected = computed(() => skillInternal.value.selfReporting && skillInternal.value.selfReporting.rejectedOn !== null && skillInternal.value.selfReporting.rejectedOn !== undefined)
const isMotivationalSkill = computed(() => skillInternal.value && skillInternal.value.isMotivationalSkill)
Expand Down
122 changes: 114 additions & 8 deletions e2e-tests/cypress/e2e/client-display/client-display-skill-expiration_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@ describe('Client Display Expiration Tests', () => {
Cypress.env('disabledUILoginProp', true);
cy.createProject(1);
cy.createSubject(1, 1);

cy.createQuizDef(1);
cy.createQuizQuestionDef(1, 1);
cy.createSurveyDef(2);
cy.createSurveyMultipleChoiceQuestionDef(2, 1);

cy.createSkill(1, 1, 1, {
selfReportingType: 'HonorSystem',
pointIncrement: 50,
Expand All @@ -46,6 +52,28 @@ describe('Client Display Expiration Tests', () => {
pointIncrementInterval: 0,
numPerformToCompletion: 1,
});
cy.createSkill(1, 1, 5, {
selfReportingType: 'Quiz',
quizId: 'quiz1',
pointIncrement: '150',
numPerformToCompletion: 1
});
cy.createSkill(1, 1, 6, {
selfReportingType: 'Quiz',
quizId: 'quiz2',
pointIncrement: '150',
numPerformToCompletion: 1
});
cy.createSkill(1, 1, 7, { numPerformToCompletion: 1, description: 'blah blah' })

const vidAttr = { file: 'create-subject.webm', transcript: 'another' }
cy.saveVideoAttrs(1, 7, vidAttr)

cy.createSkill(1, 1, 7, {
numPerformToCompletion: 1,
description: 'blah blah',
selfReportingType: 'Video'
});
});

it('expiration date shows when it should', () => {
Expand Down Expand Up @@ -314,10 +342,6 @@ describe('Client Display Expiration Tests', () => {
});

it('expiring honor system skills have a different message', () => {
let expirationDate = moment.utc().add(30, 'day');
if (expirationDate.hour() >= 1) {
expirationDate = expirationDate.add(1, 'day')
}
cy.configureExpiration(1, 0, 1, 'DAILY');
cy.cdVisit('/');
cy.cdClickSubj(0);
Expand Down Expand Up @@ -360,10 +384,6 @@ describe('Client Display Expiration Tests', () => {
});

it('expiring approval skills have a different message', () => {
let expirationDate = moment.utc().add(30, 'day');
if (expirationDate.hour() >= 1) {
expirationDate = expirationDate.add(1, 'day')
}
cy.configureExpiration(4, 1, 1, 'DAILY');
cy.cdVisit('/');
cy.cdClickSubj(0);
Expand All @@ -385,4 +405,90 @@ describe('Client Display Expiration Tests', () => {

cy.get('[data-cy="requestApprovalAlert"]').contains('This skill\'s achievement expires in a day, but your 50 points can be retained by submitting another approval request.');
});

it('expiring quiz skills have a different message', () => {
cy.cdVisit('/');
cy.cdClickSubj(0);

cy.get(`[data-cy="skillProgress_index-0"] [data-cy="expirationDate"]`)
.should('not.exist');
cy.get(`[data-cy="skillProgress_index-1"] [data-cy="expirationDate"]`)
.should('not.exist');
cy.cdClickSkill(4);

cy.runQuizForTheCurrentUser(1, [{selectedIndex: [0]}]);

cy.visit('test-skills-display/proj1/subjects/subj1/skills/skill5');
cy.get('[data-cy="quizAlert"]').should('not.exist');

cy.configureExpiration(5, 0, 1, 'DAILY');

cy.visit('test-skills-display/proj1/subjects/subj1/skills/skill5');

cy.get('[data-cy="skillProgress-ptsOverProgressBard"]').contains('150 / 150 Points');

cy.get('[data-cy="quizAlert"]').contains('This skill\'s achievement expires in a day, but your 150 points can be retained by completing the Quiz again.');

});

it('expiring survey skills have a different message', () => {
cy.cdVisit('/');
cy.cdClickSubj(0);

cy.get(`[data-cy="skillProgress_index-0"] [data-cy="expirationDate"]`)
.should('not.exist');
cy.get(`[data-cy="skillProgress_index-1"] [data-cy="expirationDate"]`)
.should('not.exist');

cy.cdClickSkill(5);

cy.get('[data-cy="quizAlert"]').contains('Complete the 1-question This is survey 2 Survey and earn 150 points!');

cy.runQuizForTheCurrentUser(2, [{selectedIndex: [0]}]);

cy.visit('test-skills-display/proj1/subjects/subj1/skills/skill6');

cy.get('[data-cy="skillProgress-ptsOverProgressBard"]').contains('150 / 150 Points');
cy.get('[data-cy="quizAlert"]').should('not.exist');

cy.configureExpiration(6, 0, 1, 'DAILY');

cy.visit('test-skills-display/proj1/subjects/subj1/skills/skill6');

cy.get('[data-cy="skillProgress-ptsOverProgressBard"]').contains('150 / 150 Points');
cy.get('[data-cy="quizAlert"]').contains('This skill\'s achievement expires in a day, but your 150 points can be retained by completing the Survey again.');

});

it('expiring video skills have a different message', () => {
cy.cdVisit('/');
cy.cdClickSubj(0);

cy.get(`[data-cy="skillProgress_index-0"] [data-cy="expirationDate"]`)
.should('not.exist');
cy.get(`[data-cy="skillProgress_index-1"] [data-cy="expirationDate"]`)
.should('not.exist');

cy.cdClickSkill(6);

cy.get('[data-cy="watchVideoMsg"]').contains('Earn 100 points for the skill by watching this Video.');

cy.get('[data-cy="skillVideo-skill7"] [data-cy="videoPlayer"] [title="Play Video"]').click()
cy.wait(8000)
cy.get('[data-cy="watchVideoAlert"] [data-cy="watchVideoMsg"]').contains('You just earned 100 points')

cy.visit('test-skills-display/proj1/subjects/subj1/skills/skill7');

cy.get('[data-cy="skillProgress-ptsOverProgressBard"]').contains('100 / 100 Points');
cy.get('[data-cy="watchVideoMsg"]').should('not.exist');
cy.get('[data-cy="videoAlert"]').should('not.exist');

cy.configureExpiration(7, 0, 1, 'DAILY');

cy.visit('test-skills-display/proj1/subjects/subj1/skills/skill7');

cy.get('[data-cy="skillProgress-ptsOverProgressBard"]').contains('100 / 100 Points');
cy.get('[data-cy="videoAlert"]').contains('This skill\'s achievement expires in a day, but your 100 points can be retained by watching the video again.');

});
});

0 comments on commit b46a5b3

Please sign in to comment.