Merge pull request #149 from JackieBinya/bg-first-step-unit

Rewrites unit tests for FirstStep.vue

Author: obulat

tests/e2e/specs/FirstStep.js

@@ -0,0 +1,27 @@
+module.exports = {
+    '@tags': ['first'],
+    'FirstStep'(browser) {
+        const radioSelector = 'div.field.not-selected > label > span.control-label > span'
+        const nextBtn = 'a.pagination-next'
+        const stepBelowCurrentHeader = 'div:nth-child(2) > div > h5'
+        const stepDescription = '.step-description'
+        const backBtn = 'a.pagination-previous'
+
+        browser
+            .init()
+            .waitForElementVisible('body')
+            .assert.not.elementPresent(stepDescription)
+            .click(radioSelector)
+            .assert.containsText(stepBelowCurrentHeader, 'Creative Commons License')
+            .click(nextBtn)
+            .assert.elementPresent(stepDescription)
+            .assert.visible(stepDescription)
+            .assert.containsText(stepDescription, 'I know which license I need.')
+            .click(backBtn)
+            .click(radioSelector)
+            .assert.containsText(stepBelowCurrentHeader, 'Attribution')
+            .click(nextBtn)
+            .assert.containsText(stepDescription, 'I need help selecting a license.')
+            .end()
+    }
+}

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

@@ -1,79 +1,82 @@
-import { mount } from '@vue/test-utils'
+import { createLocalVue, mount } from '@vue/test-utils'
+import Buefy from 'buefy'
 import FirstStep from '@/components/FirstStep.vue'
 
-describe('FirstStep.vue', () => {
-    const wrapper = mount(FirstStep)
-    it('Has the main div tag', () => {
-        expect(wrapper.contains('.step-content')).toBe(true)
+const localVue = createLocalVue()
+
+localVue.use(Buefy)
+
+describe('FirstStep Component', () => {
+    let wrapper
+
+    beforeEach(() => {
+        wrapper = mount(FirstStep, {
+            localVue,
+            mocks: {
+                $t: key => key
+            }
+        })
     })
 
-    it('renders without any errors', () => {
-        expect(wrapper.isVueInstance()).toBeTruthy()
+    afterEach(() => {
+        wrapper.destroy()
     })
 
-    it('Checks if the cardtext function return the correct answer when selected is true', () => {
+    it('Mark up is correctly rendered', () => {
         wrapper.setProps({
-            selected: true
+            selected: undefined,
+            stepId: 0,
+            status: 'current'
         })
 
-        expect(wrapper.vm.cardText).toBe('stepper.FS.selected')
+        expect(wrapper.element).toMatchSnapshot()
     })
 
-    it('Checks if the cardtext function return the correct answer when selected is false', () => {
+    it('Radio Input value is YES', () => {
         wrapper.setProps({
-            selected: false
+            selected: undefined,
+            stepId: 0,
+            status: 'current'
         })
 
-        expect(wrapper.vm.cardText).toBe('stepper.FS.not-selected')
-    })
-
-    it('Checks if the yesText function returns correct answer ', () => {
-        expect(wrapper.vm.yesText).toBe('stepper.FS.selected')
-    })
+        const radio = wrapper.findAll('input[type="radio"]').at(0)
+        radio.setChecked()
 
-    it('Checks if the noText function returns correct answer', () => {
-        expect(wrapper.vm.noText).toBe('stepper.FS.not-selected')
+        expect(wrapper.emitted().change[0]).toEqual(['FS', 0, true])
     })
 
-    it('Checks if the yesSelected function returns the correct boolean when selected is true', () => {
+    it('Radio Input value is NO', () => {
         wrapper.setProps({
-            selected: true
+            selected: undefined,
+            stepId: 0,
+            status: 'current'
         })
-        expect(wrapper.vm.yesSelected).toBe('selected')
-    })
 
-    it('Checks if the yesSelected function returns the correct boolean when selected is false', () => {
-        wrapper.setProps({
-            selected: false
-        })
-        expect(wrapper.vm.yesSelected).toBe('not-selected')
+        const radio = wrapper.findAll('input[type="radio"]').at(1)
+        radio.setChecked()
+
+        expect(wrapper.emitted().change[0]).toEqual(['FS', 0, false])
     })
 
-    it('Checks if the get function in radio returns the correct value when selected is undefined', () => {
+    it('props:selected false', () => {
         wrapper.setProps({
-            selected: undefined
+            selected: false,
+            stepId: 0,
+            status: 'current'
         })
-        expect(wrapper.vm.radio).toBe(undefined)
-    })
 
-    it('Checks if the get function in radio returns the correct value when selected is yes', () => {
-        wrapper.setData({
-            selected: 'yes'
-        })
-        expect(wrapper.vm.radio).toBe('yes')
+        expect(wrapper.vm.radio).toBe('no')
+        expect(wrapper.vm.cardText).toBe('stepper.FS.not-selected')
     })
 
-    it('Checks if the noSelected function returns the correct boolean when selected is true', () => {
+    it('props:selected true', () => {
         wrapper.setProps({
-            selected: true
+            selected: true,
+            stepId: 0,
+            status: 'current'
         })
-        expect(wrapper.vm.noSelected).toBe('not-selected')
-    })
 
-    it('Checks if the noSelected function returns the correct boolean when selected is false', () => {
-        wrapper.setProps({
-            selected: false
-        })
-        expect(wrapper.vm.noSelected).toBe('selected')
+        expect(wrapper.vm.radio).toBe('yes')
+        expect(wrapper.vm.cardText).toBe('stepper.FS.selected')
     })
 })

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

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FirstStep Component Mark up is correctly rendered 1`] = `
+<div
+  class="step-content"
+>
+  <div
+    class="step-actions"
+  >
+    <div
+      class="field not-selected"
+    >
+      <label
+        class="b-radio radio"
+      >
+        <input
+          type="radio"
+          value="yes"
+        />
+         
+        <span
+          class="check"
+        />
+         
+        <span
+          class="control-label"
+        >
+          <span
+            class="vocab-body body-normal"
+          >
+            
+                    stepper.yesstepper.FS.selected
+                
+          </span>
+        </span>
+      </label>
+    </div>
+     
+    <div
+      class="field selected"
+    >
+      <label
+        class="b-radio radio"
+      >
+        <input
+          type="radio"
+          value="no"
+        />
+         
+        <span
+          class="check"
+        />
+         
+        <span
+          class="control-label"
+        >
+          <span
+            class="vocab-body body-normal"
+          >
+            
+                    stepper.nostepper.FS.not-selected
+                
+          </span>
+        </span>
+      </label>
+    </div>
+  </div>
+</div>
+`;