Rewrites unit tests for FirstStep.vue

tests/e2e/specs/FirstStep.js

@@ -0,0 +1,18 @@
+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'
+        const nextBtn = '.pagination-next'
+
+        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')
+    }        
+}

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

@@ -0,0 +1,84 @@
+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>
+`;