Merge pull request #146 from creativecommons/stepper-test

Add tests for Stepper component

Author: obulat

src/components/DropdownStep.vue

@@ -37,7 +37,7 @@ export default {
     },
     methods: {
         updateSelected() {
-            this.$emit('input', 'DD', this.$props.stepId, true)
+            this.$emit('change', 'DD', this.$props.stepId, true)
         }
     }
 }

src/components/Stepper.vue

@@ -3,7 +3,7 @@
         <div
             v-for="(step, idx) in visibleSteps()"
             :key="idx"
-            :class="['step-container', step.status, enabledQualifier(step.enabled)]"
+            :class="['step-container', step.name, step.status, enabledQualifier(step.enabled)]"
         >
             <div
                 :class="['step-header']"
@@ -43,7 +43,7 @@
                 v-else-if="step.status!=='inactive' && step.name==='DD'"
                 :step-id="step.id"
                 :status="step.status"
-                @input="changeStepSelected"
+                @change="changeStepSelected"
             />
             <AttributionDetailsStep
                 v-else-if="step.status!=='inactive' && step.name==='AD'"
@@ -258,26 +258,18 @@ export default {
             this.$set(this.steps, previousStep, { ...this.steps[previousStep], status: 'current' })
             this.currentStepId = previousStep
         },
-        handleFinish() {
-            // TODO: write the method
-        },
         setActiveStep(clickedStepId) {
             /**
              * Handles a click on Step header
              */
             if (!this.steps[clickedStepId].enabled) return
             if (this.steps[clickedStepId].status === 'inactive') return
-            if (clickedStepId > this.currentStepId) {
-                for (let i = this.currentStepId; i < clickedStepId; i++) {
-                    this.$set(this.steps, i, { ...this.steps[i], status: 'previous' })
-                }
-                this.$set(this.steps, clickedStepId, { ...this.steps[clickedStepId], status: 'current' })
-            } else {
-                for (let i = this.currentStepId; i > clickedStepId; i--) {
-                    this.$set(this.steps, i, { ...this.steps[i], status: 'inactive' })
-                }
-                this.$set(this.steps, clickedStepId, { ...this.steps[clickedStepId], status: 'current' })
+            // only steps before the current one are clickable
+            if (clickedStepId >= this.currentStepId) return
+            for (let i = this.currentStepId; i > clickedStepId; i--) {
+                this.$set(this.steps, i, { ...this.steps[i], status: 'inactive' })
             }
+            this.$set(this.steps, clickedStepId, { ...this.steps[clickedStepId], status: 'current' })
             this.currentStepId = clickedStepId
         },
         setStepsVisible(stepsToSetVisible) {

tests/e2e/page-objects/chooser.js

@@ -0,0 +1,88 @@
+/**
+ * Page object for license chooser
+ */
+
+const stepperCommands = {
+    clickYes: function() {
+        this.click('.step-actions .field:first-of-type .check')
+        return this
+    },
+    clickNo: function() {
+        this.click('.step-actions .field:last-of-type .check')
+        return this
+    },
+    clickNext: function() {
+        this.click('.pagination-next')
+        return this
+    },
+    clickPrevious: function() {
+        this.click('.pagination-previous')
+        return this
+    },
+    chooseNo: function() {
+        this.clickNo()
+            .clickNext()
+        return this
+    },
+    chooseYes: function() {
+        this.clickYes()
+            .clickNext()
+        return this
+    },
+    clickWaiver: function() {
+        this.click('.checkbox:first-of-type input[type=checkbox]')
+            .click('.checkbox:last-of-type input[type=checkbox]')
+            .click('.pagination-next')
+        return this
+    },
+    selectFromDropdown: function(licenseName) {
+        this
+            .waitForElementVisible('.license-dropdown')
+            .click('.license-dropdown')
+            .click(`.license-dropdown option[value="${licenseName}"]`)
+            .click('.pagination-next')
+        return this
+    },
+    assertStepName: function(stepName) {
+        this.expect.element('@currentStep').to.have.property('classList').contain(stepName)
+        return this
+    }
+}
+const chooserCommands = {
+    assertSelectedLicenseDisplayed: function(licenseName) {
+        this
+            .assert.containsText('.license-name', licenseName)
+            .assert.containsText('p.license-text a', licenseName)
+        return this
+    }
+}
+module.exports = {
+    url: '/',
+    commands: [chooserCommands],
+
+    elements: {
+        appContainer: '#app',
+        stepper: '.stepper-container',
+        selectedLicenseCard: '.selected-license-card',
+        licenseUseCard: '.license-use-card'
+    },
+
+    sections: {
+        stepper: {
+            selector: '.stepper-container',
+            elements: {
+                currentStep: {
+                    selector: '.step-container.current'
+                }
+            },
+            commands: [stepperCommands]
+        },
+        selectedLicenseCard: {
+            selector: '.selected-license-card'
+        },
+        licenseUseCard: {
+            selector: '.license-use-card'
+        }
+    }
+
+}