Merge pull request #153 from GSA/mmeyer/150-acknowledgment

Mmeyer/150 acknowledgment

training-front-end/src/components/QuizIndex.vue

@@ -179,6 +179,8 @@
                 v-if="isStarted"
                 :quiz="quiz"
                 :title="title"
+                :topic="topic"
+                :audience="audience"
                 class="grid-col-8"
                 @submit-quiz="submitQuiz"
               />

training-front-end/src/components/QuizMain.vue

@@ -15,6 +15,14 @@
     'title': {
       type: String,
       required: true
+    },
+    'topic': {
+      type: String,
+      required: true
+    },
+    'audience': {
+      type: String,
+      required: true
     }
   })
 
@@ -28,6 +36,10 @@
   const is_current_unanswered = computed(() => user_answers[question_index.value] === undefined )
   const show_acknowledge = computed(() => is_quiz_complete.value && (question_index.value >= number_of_questions.value))
 
+  const user_string_lookup = {
+    "AccountHoldersApprovingOfficials": "a card/account holder or approving official",
+    "ProgramCoordinators": "an agency/organization program coordinator (A/OPC)"
+  }
  
   function exit_warning(event) {
     event.preventDefault()
@@ -95,7 +107,7 @@
       <label
         class="usa-checkbox__label"
         for="check-historical-truth"
-      >ACKNOWLEDGMENT STATEMENT<br>“I acknowledge that I’ve read and understand the policies and regulations that govern the use of the GSA SmartPay® travel account, as well as understand my role and responsibilities as a Card/Account Holder or Approving Official as outlined in this training course.” </label>
+      >ACKNOWLEDGMENT STATEMENT<br>“I acknowledge that I’ve read and understand the policies and regulations that govern the use of the GSA SmartPay® {{ topic.toLowerCase() }} card/account, as well as understand my role and responsibilities as {{ user_string_lookup[audience] }} as outlined in this training course.” </label>
     </div>
     <div class="grid-row">
       <button

training-front-end/src/components/__tests__/QuizMain.spec.js

@@ -4,7 +4,12 @@ import Quiz from '../QuizMain.vue'
 import quiz  from './fixtures/sample_quiz'
 
 
-const props = {"quiz":quiz, "title": "Astro Quiz!"}
+const props = {
+  "quiz":quiz,
+  "title": "Astro Quiz!",
+  "audience": "AccountHoldersApprovingOfficials",
+  "topic": "Fleet"
+}
 
 describe('Quiz', () => {
   afterEach(() => {
@@ -82,6 +87,71 @@ describe('Quiz', () => {
     expect(button.element.disabled).toBe(true)
   })
 
+  it('should display acknowledgement box with langauge specific to the card-holder/approving officls user', async () => {
+    const wrapper = await mount(Quiz, {props})
+    const selects = [1, 2]
+    for (const i of selects) {
+      const radioButtons = wrapper.findAll('input[type="radio"]')
+      await radioButtons[i].setChecked()
+      const button = wrapper.find('button')
+      button.trigger('click')
+      await flushPromises()
+    }
+    expect(wrapper.text()).toContain('responsibilities as a card/account holder or approving official as outlined')
+  })
+
+  it('should display acknowledgement box with langauge specific to the A/OPC user', async () => {
+    const wrapper = await mount(Quiz, {props:{...props, audience: "ProgramCoordinators" }})
+    const selects = [1, 2]
+    for (const i of selects) {
+      const radioButtons = wrapper.findAll('input[type="radio"]')
+      await radioButtons[i].setChecked()
+      const button = wrapper.find('button')
+      button.trigger('click')
+      await flushPromises()
+    }
+    expect(wrapper.text()).toContain('responsibilities as an agency/organization program coordinator (A/OPC) as outlined')
+  })
+
+  it('should display acknowledgement box with langauge specific to Travel card type', async () => {
+    const wrapper = await mount(Quiz, {props:{...props, topic: "Travel" }})
+    const selects = [1, 2]
+    for (const i of selects) {
+      const radioButtons = wrapper.findAll('input[type="radio"]')
+      await radioButtons[i].setChecked()
+      const button = wrapper.find('button')
+      button.trigger('click')
+      await flushPromises()
+    }
+    expect(wrapper.text()).toContain('GSA SmartPay® travel card/account')
+  })
+
+  it('should display acknowledgement box with langauge specific to Purchase card type', async () => {
+    const wrapper = await mount(Quiz, {props:{...props, topic: "Purchase" }})
+    const selects = [1, 2]
+    for (const i of selects) {
+      const radioButtons = wrapper.findAll('input[type="radio"]')
+      await radioButtons[i].setChecked()
+      const button = wrapper.find('button')
+      button.trigger('click')
+      await flushPromises()
+    }
+    expect(wrapper.text()).toContain('GSA SmartPay® purchase card/account')
+  })
+
+  it('should display acknowledgement box with langauge specific to Fleet card type', async () => {
+    const wrapper = await mount(Quiz, {props:{...props, topic: "Fleet" }})
+    const selects = [1, 2]
+    for (const i of selects) {
+      const radioButtons = wrapper.findAll('input[type="radio"]')
+      await radioButtons[i].setChecked()
+      const button = wrapper.find('button')
+      button.trigger('click')
+      await flushPromises()
+    }
+    expect(wrapper.text()).toContain('GSA SmartPay® fleet card/account')
+  })
+
   it('should emit answers after quiz is submitted', async () => {
     const wrapper = await mount(Quiz, {props})
     const selects = [1, 3]