Rewrites unit tests for FirstStep.vue

tests/e2e/specs/FirstStep.js

@@ -0,0 +1,19 @@
+module.exports = {
+    '@tags': ['first'],
+    '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()
+            .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

@@ -0,0 +1,82 @@
+import { createLocalVue, mount } from '@vue/test-utils'
+import Buefy from 'buefy'
+import FirstStep from '@/components/FirstStep.vue'
+
+const localVue = createLocalVue()
+
+localVue.use(Buefy)
+
+describe('FirstStep Component', () => {
+    let wrapper
+
+    beforeEach(() => {
+        wrapper = mount(FirstStep, {
+            localVue,
+            mocks: {
+                $t: key => key
+            }
+        })
+    })
+
+    afterEach(() => {
+        wrapper.destroy()
+    })
+
+    it('Mark up is correctly rendered', () => {
+        wrapper.setProps({
+            selected: undefined,
+            stepId: 0,
+            status: 'current'
+        })
+
+        expect(wrapper.element).toMatchSnapshot()
+    })
+
+    it('Radio Input value is YES', () => {
+        wrapper.setProps({
+            selected: undefined,
+            stepId: 0,
+            status: 'current'
+        })
+
+        const radio = wrapper.findAll('input[type="radio"]').at(0)
+        radio.trigger('change')
+
+        expect(wrapper.emitted().change[0]).toEqual(['FS', 0, true])
+    })
+
+    it('Radio Input value is NO', () => {
+        wrapper.setProps({
+            selected: undefined,
+            stepId: 0,
+            status: 'current'
+        })
+
+        const radio = wrapper.findAll('input[type="radio"]').at(1)
+        radio.trigger('change')
+
+        expect(wrapper.emitted().change[0]).toEqual(['FS', 0, false])
+    })
+
+    it('props:selected false', () => {
+        wrapper.setProps({
+            selected: false,
+            stepId: 0,
+            status: 'current'
+        })
+
+        expect(wrapper.vm.radio).toBe('no')
+        expect(wrapper.vm.cardText).toBe('stepper.FS.not-selected')
+    })
+
+    it('props:selected true', () => {
+        wrapper.setProps({
+            selected: true,
+            stepId: 0,
+            status: 'current'
+        })
+
+        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>
+`;