Tests if AttributionDetailsStep component is mounted correctly

tests/e2e/specs/AttributionDetailsStep.js

@@ -0,0 +1,43 @@
+module.exports = {
+    '@tags': ['att'],
+    'AttributionDetailsStep'(browser){
+        const knowLicenseSelector = '.b-radio'
+        const nextButton = '.pagination-next'
+        const select = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > div > div > span > select'
+        const selectOpt = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > div > div > span > select > option:nth-child(4)'
+        const stepTitle = '.step-title'
+        const attributionDetailsInstructions = '.attribution-details-instructions'
+        const workAuthorLabel ='#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > form > div:nth-child(1) > label'
+        const workAuthorInput = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > form > div:nth-child(1) > div > input'
+        const urlCreatorProfileLabel = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > form > div:nth-child(2) > label'
+        const urlCreatorProfileInput = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > form > div:nth-child(2) > div > input'
+        const workUrlLabel = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > form > div:nth-child(3) > label'
+        const workUrlInput = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > form > div:nth-child(4) > div > input'
+        const workTitleLabel = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > form > div:nth-child(3) > label'
+        const workTitleInput = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > form > div:nth-child(3) > div > input'
+        const backBtn = '.pagination-previous'
+        const paginationFinish = '.pagination-finish'
+
+
+        browser
+            .init()
+            .click(knowLicenseSelector)
+            .click(nextButton)
+            .click(select, () =>{
+                browser.click(selectOpt)
+            })
+            .click(nextButton)
+            .assert.visible(stepTitle, 'Title is visible')
+            .assert.visible(attributionDetailsInstructions, 'Atrribution Details Instructions block is visible')
+            .assert.visible(workAuthorLabel, 'Work Author Label is visible')
+            .assert.visible(workAuthorInput, 'Work Author Input is visible')
+            .assert.visible(urlCreatorProfileLabel, 'URL of Creator Profile Label is visible')
+            .assert.visible(urlCreatorProfileInput, 'URL of Creator Profile Input is visible')
+            .assert.visible(workUrlLabel, 'Work URL Label is visible')
+            .assert.visible(workUrlInput, 'Work URL Input is visible')
+            .assert.visible(workTitleLabel, 'Work Title Label is visible')
+            .assert.visible(workTitleInput, 'Work Title Input is visible')
+            .assert.visible(backBtn, 'Back button is visible')
+            .assert.visible(paginationFinish, 'Pagination Finish Block is visible')
+    }
+}

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

@@ -0,0 +1,122 @@
+import { createLocalVue, mount } from '@vue/test-utils'
+import Buefy from 'buefy'
+import Vuex from 'vuex'
+import AttributionDetailsStep from '@/components/AttributionDetailsStep'
+
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
+localVue.use(Buefy)
+
+describe('AttributionDetailsStep Component Rendering', () => {
+    let wrapper
+
+    beforeEach(() => {
+        wrapper = mount(AttributionDetailsStep, {
+            localVue,
+            mocks: {
+                $t: key => key,
+                $store: {
+                    state: {
+                        attributionDetails: {
+                            creatorName: '',
+                            creatorProfileUrl: '',
+                            workTitle: '',
+                            workUrl: ''
+                        }
+                    }
+                }
+            }
+
+        })
+    })
+
+    afterEach(()=> {
+        wrapper.destroy()
+    })
+
+    it('Component not mounted if status is previous', () =>{
+        wrapper.setProps({status : 'previous'})
+        expect(wrapper.find('.step-actions').exists()).toBeFalsy()
+    })
+
+    it('Component not mounted if status is inactive', () =>{
+        wrapper.setProps({status : 'inactive'})
+        expect(wrapper.find('.step-actions').exists()).toBeFalsy()
+    })
+
+    it('Component mounted if status is current', () =>{
+        wrapper.setProps({status : 'current'})
+        expect(wrapper.element).toMatchSnapshot()
+    })
+})
+
+describe('Store is updated when a user provides input', () => {
+    let mutations, state, wrapper,store
+
+    beforeEach(() => {
+        mutations = {
+            setCreatorName: jest.fn(),
+            setCreatorProfileUrl: jest.fn(),
+            setWorkTitle: jest.fn(),
+            setWorkUrl: jest.fn()
+        };
+
+        state = {
+            attributionDetails: {
+                creatorName: '',
+                creatorProfileUrl: '',
+                workTitle: '',
+                workUrl: ''
+            }
+        };
+
+        store = new Vuex.Store({
+            state,
+            mutations,
+        });
+
+        wrapper = mount(AttributionDetailsStep, {
+            propsData: {
+                status: 'current'
+            },
+            mocks: {
+                $t: key => key
+            }, 
+            store,
+            localVue,    
+        });
+    })
+
+    afterEach(()=> {
+        wrapper.destroy()
+    })
+
+    it('Creator Name is updated', async() => {
+        const input  = wrapper.find('input[placeholder="stepper.AD.form.creator-name.placeholder"]')
+        await input.setValue("Jane Bar")
+        expect(mutations.setCreatorName).toHaveBeenCalled() 
+    })  
+
+    //CreatorProfile URL
+    it('Profile Url is updated', async() => {
+        const input  = wrapper.find('input[placeholder="stepper.AD.form.creator-profile.placeholder"]')
+        await input.setValue("jane@bar.com")
+        expect(mutations.setCreatorProfileUrl).toHaveBeenCalled() 
+    }) 
+
+    //Work URL
+    it('Work Url is updated', async() => {
+        const input  = wrapper.find('input[placeholder="stepper.AD.form.work-url.placeholder"]')
+        await input.setValue("jane@bar.com/kitty.jpeg")
+        expect(mutations.setWorkUrl).toHaveBeenCalled() 
+    }) 
+
+    //Work Title
+    it('Work Title is updated', async() => {
+        const input  = wrapper.find('input[placeholder="stepper.AD.form.work-title.placeholder"]')
+        await input.setValue("illustrator")
+        expect(mutations.setWorkTitle).toHaveBeenCalled() 
+    }) 
+
+})

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

@@ -0,0 +1,139 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AttributionDetailsStep Component Rendering Component mounted if status is current 1`] = `
+<div
+  class="step-content"
+>
+  <div
+    class="step-actions"
+  >
+    <p
+      class="attribution-details-instructions"
+    >
+
+            stepper.AD.instructions
+
+    </p>
+
+    <form
+      class="attribution-details-form"
+    >
+      <div
+        class="field"
+      >
+        <label
+          class="label"
+        >
+          stepper.AD.form.creator-name.label
+        </label>
+
+        <div
+          class="control is-clearfix"
+        >
+          <input
+            autocomplete="on"
+            class="input"
+            placeholder="stepper.AD.form.creator-name.placeholder"
+            type="text"
+          />
+
+          <!---->
+
+          <!---->
+
+          <!---->
+        </div>
+
+        <!---->
+      </div>
+
+      <div
+        class="field"
+      >
+        <label
+          class="label"
+        >
+          stepper.AD.form.creator-profile.label
+        </label>
+
+        <div
+          class="control is-clearfix"
+        >
+          <input
+            autocomplete="on"
+            class="input"
+            placeholder="stepper.AD.form.creator-profile.placeholder"
+            type="text"
+          />
+
+          <!---->
+
+          <!---->
+
+          <!---->
+        </div>
+
+        <!---->
+      </div>
+
+      <div
+        class="field"
+      >
+        <label
+          class="label"
+        >
+          stepper.AD.form.work-title.label
+        </label>
+
+        <div
+          class="control is-clearfix"
+        >
+          <input
+            autocomplete="on"
+            class="input"
+            placeholder="stepper.AD.form.work-title.placeholder"
+            type="text"
+          />
+
+          <!---->
+
+          <!---->
+
+          <!---->
+        </div>
+
+        <!---->
+      </div>
+
+      <div
+        class="field"
+      >
+        <label
+          class="label"
+        >
+          stepper.AD.form.work-url.label
+        </label>
+
+        <div
+          class="control is-clearfix"
+        >
+          <input
+            autocomplete="on"
+            class="input"
+            placeholder="stepper.AD.form.work-url.placeholder"
+            type="text"
+          />
+
+          <!---->
+
+          <!---->
+
+          <!---->
+        </div>
+
+        <!---->
+      </div>
+    </form>
+  </div>
+</div>
+`;