Rewrites unit tests for FirstStep.vue

tests/e2e/specs/FirstStep.js

@@ -1,18 +1,19 @@
 module.exports = {
     '@tags': ['first'],
-    'FirstStep'(browser){
-        const yesRadioSelector = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > div.field.not-selected > label > span.check'
-        const noRadioSelector = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > div.field.not-selected > label > span.check'
-        const attributionHeader = '#site-container > div.columns > div.stepper-container.column > div:nth-child(2) > div > h5'
-        const ccLicenseHeader = '#site-container > div.columns > div.stepper-container.column > div:nth-child(2) > div'
+    'FirstStep'(browser) {
+        const radioSelector = 'div.field.not-selected > label > span.control-label > span'
+        const radioSelected = 'div.field.selected > label > span.control-label > span'
         const nextBtn = '.pagination-next'
-
+        const stepTitle = 'div.step-header > h5'
+
         browser
             .init()
-            .click(yesRadioSelector)
-            .assert.visible(ccLicenseHeader, 'Click yes:Creative Commons License header is visible in the step below FirstStep')
-            .assert.visible(nextBtn, 'Next button is visible')
-            .click(noRadioSelector)
-            .assert.visible(attributionHeader, 'Click no:Attribution header is visible in the step below FirstStep')
-    }        
-}
+            .assert.containsText(stepTitle, 'Do you know which license you need?')
+            .assert.containsText(radioSelector, 'Yes. I know which license I need')
+            .assert.containsText(radioSelected, 'No. I need help selecting a license')
+            .click(radioSelector)
+            .assert.not.cssClassPresent(nextBtn, 'disabled')
+            .assert.containsText(radioSelector, 'No. I need help selecting a license')
+            .end()
+    }
+}

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

@@ -1,33 +1,32 @@
-import { createLocalVue, mount } from "@vue/test-utils";
+import { createLocalVue, mount } from '@vue/test-utils'
 import Buefy from 'buefy'
-import FirstStep from "@/components/FirstStep.vue";
+import FirstStep from '@/components/FirstStep.vue'
 
 const localVue = createLocalVue()
 
 localVue.use(Buefy)
 
-describe('FirstStep Component', ()=> {
-    let wrapper 
+describe('FirstStep Component', () => {
+    let wrapper
 
-    beforeEach(()=> {
+    beforeEach(() => {
         wrapper = mount(FirstStep, {
             localVue,
             mocks: {
                 $t: key => key
             }
         })
-    }) 
-
-    afterEach(()=> {
-            wrapper.destroy()
-        })
+    })
 
+    afterEach(() => {
+        wrapper.destroy()
+    })
 
     it('Mark up is correctly rendered', () => {
         wrapper.setProps({
             selected: undefined,
             stepId: 0,
-            status: "current"
+            status: 'current'
         })
 
         expect(wrapper.element).toMatchSnapshot()
@@ -37,11 +36,11 @@ describe('FirstStep Component', ()=> {
         wrapper.setProps({
             selected: undefined,
             stepId: 0,
-            status: "current"
+            status: 'current'
         })
 
         const radio = wrapper.findAll('input[type="radio"]').at(0)
-        radio.trigger('change');
+        radio.trigger('change')
 
         expect(wrapper.emitted().change[0]).toEqual(['FS', 0, true])
     })
@@ -50,35 +49,34 @@ describe('FirstStep Component', ()=> {
         wrapper.setProps({
             selected: undefined,
             stepId: 0,
-            status: "current"
+            status: 'current'
         })
 
         const radio = wrapper.findAll('input[type="radio"]').at(1)
-        radio.trigger('change');
-        
+        radio.trigger('change')
+
         expect(wrapper.emitted().change[0]).toEqual(['FS', 0, false])
     })
 
-    it('props:selected false', () =>{
+    it('props:selected false', () => {
         wrapper.setProps({
             selected: false,
             stepId: 0,
-            status: "current"
+            status: 'current'
         })
 
         expect(wrapper.vm.radio).toBe('no')
         expect(wrapper.vm.cardText).toBe('stepper.FS.not-selected')
     })
 
-    it('props:selected true', () =>{
+    it('props:selected true', () => {
         wrapper.setProps({
             selected: true,
             stepId: 0,
-            status: "current"
+            status: 'current'
         })
 
         expect(wrapper.vm.radio).toBe('yes')
         expect(wrapper.vm.cardText).toBe('stepper.FS.selected')
     })
-
-})
+})