Use Vocabulary VButton in the Stepper (#231)

* Use Vocabulary VButton for 'Previous' and 'Next' buttons

* Update tests

Author: obulat

src/components/Stepper.vue

@@ -54,18 +54,21 @@
                 v-if="step.status==='current'"
                 class="step-navigation"
             >
-                <a
+                <v-button
                     v-if="step.name!=='FS'"
-                    role="button"
-                    class="pagination-previous"
+                    class="is-border"
                     @click="handlePrevious(step.name)"
-                >{{ $t('stepper.nav.previous-label') }}</a>
-                <a
+                >
+                    {{ $t('stepper.nav.previous-label') }}
+                </v-button>
+                <v-button
                     v-if="step.name!=='AD'"
-                    role="button"
-                    :class="['pagination-next', nextButtonEnabledState(step.id)]"
+                    :class="['is-success', nextButtonEnabledState(step.id)]"
+                    :disabled="nextButtonEnabledState(step.id) ? 'disabled' : null"
                     @click="handleNext(step.name)"
-                >{{ $t('stepper.nav.next-label') }}</a>
+                >
+                    {{ $t('stepper.nav.next-label') }}
+                </v-button>
                 <span
                     v-else
                     class="pagination-finish"
@@ -184,10 +187,13 @@ export default {
              */
             return ['NC', 'ND', 'SA'].indexOf(stepName) > -1
         },
+        /**
+         * Checks if the Next button should be disabled. Next button is enabled only
+         * after the user has interacted with the step (selected radio or checked a checkbox)
+         * @param {number} stepId
+         * @returns {'disabled'|''} next button's disabled status
+         */
         nextButtonEnabledState(stepId) {
-            /**
-             * Disables the 'Next' button before the user interacts with the step
-             */
             return this.steps[stepId].selected === undefined
                 ? 'disabled'
                 : ''
@@ -395,39 +401,9 @@ export default {
     .step-navigation {
         margin: 13px 0;
         padding-left: 65px;
-    }
-    .step-navigation .pagination-next,
-    .step-navigation .pagination-previous {
-        font-family: Roboto Condensed,sans-serif;
-        font-style: normal;
-        font-size: 18px;
-        line-height: 24px;
-    }
-    .step-navigation,
-    .step-navigation {
-        font-weight: 500;
-    }
-    .pagination-next,
-    .pagination-previous {
-        font-weight: bold;
-    }
-    .step-navigation .pagination-previous {
-        border: 2px solid #787878;
-        color: #787878;
-    }
-    .step-navigation .pagination-next {
-        background-color: #04a635;
-        color: #fff!important;
-        border: 2px solid transparent;
-    }
-    .pagination-next.disabled {
-        background-color: #D8D8D8;
-        color: #787878 !important;
-    }
-    .pagination-next.disabled:hover,
-    .pagination-next.disabled:active {
-        box-shadow: none;
-        border: 1px solid transparent;
+        .button + .button {
+            margin-left: 1rem;
+        }
     }
     .pagination-finish{
         margin-left: 1rem;

tests/unit/specs/components/Stepper.spec.js

@@ -2,15 +2,16 @@ import Vuex from 'vuex'
 import { shallowMount, createLocalVue, config } from '@vue/test-utils'
 import Stepper from '@/components/Stepper'
 import Buefy from 'buefy'
+import VueVocabulary from '@creativecommons/vue-vocabulary/vue-vocabulary.common'
 import VueI18n from 'vue-i18n'
 import Vue from 'vue'
 import store from '@/store'
 
 function getNextButton(wrapper) {
-    return wrapper.find('.pagination-next')
+    return wrapper.findAll('v-button-stub').at(1)
 }
 function clickNext(wrapper) {
-    getNextButton(wrapper).trigger('click')
+    getNextButton(wrapper).vm.$emit('click')
 }
 function getStepId(wrapper, stepName) {
     return wrapper.vm.steps.filter((step) => { return step.name === stepName })[0].id
@@ -40,6 +41,7 @@ function setUp() {
     localVue = createLocalVue()
     localVue.use(Vuex)
     localVue.use(Buefy)
+    localVue.use(VueVocabulary)
     Vue.use(VueI18n)
     const messages = require('@/locales/en.json')
     const i18n = new VueI18n({
@@ -115,46 +117,20 @@ describe('Stepper.vue', () => {
     })
     describe('Next button', () => {
         it('becomes clickable only after selection is made', () => {
-            const nextButton = wrapper.find('.pagination-next')
-            expect(nextButton.classes('disabled')).toBe(true)
+            const nextButtonStub = wrapper.find('v-button-stub')
+            expect(nextButtonStub.classes('disabled')).toBe(true)
             setStepSelected(wrapper, 'FS', false)
-            expect(nextButton.classes('disabled')).toBe(false)
+            expect(nextButtonStub.classes('disabled')).toBe(false)
         })
         it('clicking on Next button advances the step', () => {
             setStepSelected(wrapper, 'FS', true)
-            clickNext(wrapper)
+            wrapper.find('v-button-stub').vm.$emit('click')
             const steps = wrapper.findAll('.step-container')
             expect(steps.at(0).classes('previous')).toBe(true)
             expect(steps.at(1).classes('current')).toBe(true)
         })
     })
-    describe('Previous button', () => {
-        it('AttributionDetails Step opens correct step when Previous button is clicked', () => {
-            // For BY- licenses, it should open SA step
-            advanceStep(wrapper, [
-                { stepName: 'FS', isSelected: false },
-                { stepName: 'BY', isSelected: true },
-                { stepName: 'NC', isSelected: false },
-                { stepName: 'ND', isSelected: false },
-                { stepName: 'SA', isSelected: false }])
-            wrapper.find('.pagination-previous').trigger('click')
-            expect(wrapper.find('.current').classes()).toContain('SA')
-            // for CC0 license, it should open CW step
-            wrapper.findAll('.step-header').at(1).trigger('click')
-            setStepSelected(wrapper, 'BY', false)
-            clickNext(wrapper)
-            setStepSelected(wrapper, 'CW', true)
-            clickNext(wrapper)
-            wrapper.find('.pagination-previous').trigger('click')
-            expect(wrapper.find('.current').classes()).toContain('CW')
-            // if using dropdown with a BY- license, it should open DD step
-            wrapper.findAll('.step-header').at(0).trigger('click')
-            advanceStep(wrapper, [{ stepName: 'FS', isSelected: true }])
-            advanceStep(wrapper, [{ stepName: 'DD', isSelected: true, license: 'CC BY-NC-ND 4.0' }])
-            wrapper.find('.pagination-previous').trigger('click')
-            expect(wrapper.find('.current').classes()).toContain('DD')
-        })
-    })
+
     describe('FirstStep interactions', () => {
         it('choosing Yes sets 3 steps visible: FS, Dropdown and AttributionDetails, opens DD', () => {
             advanceStep(wrapper, [
@@ -166,40 +142,15 @@ describe('Stepper.vue', () => {
         })
         it('choosing No sets 6 steps visible: FS, BY, NC, ND, SA and AttributionDetails, opens BY', () => {
             setStepSelected(wrapper, 'FS', false)
-            clickNext(wrapper)
+            const nextButton = wrapper.find('v-button-stub')
+            nextButton.vm.$emit('click')
             const steps = wrapper.findAll('.step-container')
             expect(steps.length).toEqual(6)
             expect(wrapper.vm.currentStepId).toEqual(1)
             expect(stepHeadingText(steps, 1)).toEqual(wrapper.vm.$t('stepper.BY.question'))
         })
     })
-    describe('Step interactions', () => {
-        it('BY: selecting No updates enabled steps; disables NC, ND and SA; opens CopyrightWaiverStep', () => {
-            advanceStep(wrapper, [{ stepName: 'FS', isSelected: false }])
-            setStepSelected(wrapper, 'BY', false)
-            const nextButton = getNextButton(wrapper)
-            expect(nextButton.classes('disabled')).toBe(false)
-            const steps = wrapper.findAll('.step-container')
-            const disabledSteps = wrapper.findAll('.disabled')
-            expect(disabledSteps.length).toEqual(3)
-            expect(steps.length).toEqual(7)
-            clickNext(wrapper)
-            expect(wrapper.find('.current').classes()).toContain('CW')
-        })
-        it('ND: selecting ND license updates enabled steps; disables SA step; opens AttributionDetailsStep', () => {
-            advanceStep(wrapper, [
-                { stepName: 'FS', isSelected: false },
-                { stepName: 'BY', isSelected: true },
-                { stepName: 'NC', isSelected: false }])
-            setStepSelected(wrapper, 'ND', true)
-            const steps = wrapper.findAll('.step-container')
-            const disabledSteps = wrapper.findAll('.disabled')
-            expect(disabledSteps.length).toEqual(1)
-            expect(steps.length).toEqual(6)
-            clickNext(wrapper)
-            expect(wrapper.find('.current').classes()).toContain('AD')
-        })
-    })
+
     describe('DropdownStep interactions', () => {
         beforeEach(() => {
             // setUp()

tests/unit/specs/components/__snapshots__/Stepper.spec.js.snap

@@ -10,7 +10,11 @@ exports[`Stepper.vue renders correctly has expected UI initially 1`] = `
     </div>
     <firststep-stub stepid="0" status="current"></firststep-stub>
     <nav class="step-navigation">
-      <!----> <a role="button" class="pagination-next disabled">NEXT STEP</a></nav>
+      <!---->
+      <v-button-stub size="normal" disabled="disabled" class="is-success disabled">
+        NEXT STEP
+      </v-button-stub>
+    </nav>
   </div>
   <div class="step-container BY inactive enabled">
     <div class="step-header">
@@ -87,7 +91,14 @@ exports[`Stepper.vue renders correctly has expected UI on CW step after DD 1`] =
       </h5>
     </div>
     <copyrightwaiverstep-stub stepid="6" stepname="CW" status="current"></copyrightwaiverstep-stub>
-    <nav class="step-navigation"><a role="button" class="pagination-previous">BACK</a> <a role="button" class="pagination-next disabled">NEXT STEP</a></nav>
+    <nav class="step-navigation">
+      <v-button-stub size="normal" class="is-border">
+        BACK
+      </v-button-stub>
+      <v-button-stub size="normal" disabled="disabled" class="is-success disabled">
+        NEXT STEP
+      </v-button-stub>
+    </nav>
   </div>
   <div class="step-container AD inactive enabled">
     <div class="step-header">
@@ -137,7 +148,14 @@ exports[`Stepper.vue renders correctly has expected UI on ND step 1`] = `
       </h5>
     </div>
     <step-stub stepname="ND" stepid="3" status="current" reversed="true" enabled="true"></step-stub>
-    <nav class="step-navigation"><a role="button" class="pagination-previous">BACK</a> <a role="button" class="pagination-next disabled">NEXT STEP</a></nav>
+    <nav class="step-navigation">
+      <v-button-stub size="normal" class="is-border">
+        BACK
+      </v-button-stub>
+      <v-button-stub size="normal" disabled="disabled" class="is-success disabled">
+        NEXT STEP
+      </v-button-stub>
+    </nav>
   </div>
   <div class="step-container SA inactive enabled">
     <div class="step-header">