Skip to content

Commit cd1d995

Browse files
author
Ari Madian
authored
Merge pull request #133 from JackieBinya/ft-attribution-unit
Tests if AttributionDetailsStep component is mounted correctly
2 parents 6237418 + 3db1c5e commit cd1d995

File tree

3 files changed

+304
-0
lines changed

3 files changed

+304
-0
lines changed

‎tests/e2e/specs/AttributionDetailsStep.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
module.exports = {
2+
'@tags': ['att'],
3+
'AttributionDetailsStep'(browser){
4+
const knowLicenseSelector = '.b-radio'
5+
const nextButton = '.pagination-next'
6+
const select = '#site-container > div.columns > div.stepper-container.column > div.step-container.current.enabled > div.step-content > div > div > div > span > select'
7+
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)'
8+
const stepTitle = '.step-title'
9+
const attributionDetailsInstructions = '.attribution-details-instructions'
10+
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'
11+
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'
12+
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'
13+
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'
14+
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'
15+
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'
16+
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'
17+
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'
18+
const backBtn = '.pagination-previous'
19+
const paginationFinish = '.pagination-finish'
20+
21+
22+
browser
23+
.init()
24+
.click(knowLicenseSelector)
25+
.click(nextButton)
26+
.click(select, () =>{
27+
browser.click(selectOpt)
28+
})
29+
.click(nextButton)
30+
.assert.visible(stepTitle, 'Title is visible')
31+
.assert.visible(attributionDetailsInstructions, 'Atrribution Details Instructions block is visible')
32+
.assert.visible(workAuthorLabel, 'Work Author Label is visible')
33+
.assert.visible(workAuthorInput, 'Work Author Input is visible')
34+
.assert.visible(urlCreatorProfileLabel, 'URL of Creator Profile Label is visible')
35+
.assert.visible(urlCreatorProfileInput, 'URL of Creator Profile Input is visible')
36+
.assert.visible(workUrlLabel, 'Work URL Label is visible')
37+
.assert.visible(workUrlInput, 'Work URL Input is visible')
38+
.assert.visible(workTitleLabel, 'Work Title Label is visible')
39+
.assert.visible(workTitleInput, 'Work Title Input is visible')
40+
.assert.visible(backBtn, 'Back button is visible')
41+
.assert.visible(paginationFinish, 'Pagination Finish Block is visible')
42+
}
43+
}

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

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { createLocalVue, mount } from '@vue/test-utils'
2+
import Buefy from 'buefy'
3+
import Vuex from 'vuex'
4+
import AttributionDetailsStep from '@/components/AttributionDetailsStep'
5+
6+
const localVue = createLocalVue()
7+
8+
localVue.use(Vuex)
9+
localVue.use(Buefy)
10+
11+
describe('AttributionDetailsStep Component Rendering', () => {
12+
let wrapper
13+
14+
beforeEach(() => {
15+
wrapper = mount(AttributionDetailsStep, {
16+
localVue,
17+
mocks: {
18+
$t: key => key,
19+
$store: {
20+
state: {
21+
attributionDetails: {
22+
creatorName: '',
23+
creatorProfileUrl: '',
24+
workTitle: '',
25+
workUrl: ''
26+
}
27+
}
28+
}
29+
}
30+
31+
})
32+
})
33+
34+
afterEach(()=> {
35+
wrapper.destroy()
36+
})
37+
38+
it('Component not mounted if status is previous', () =>{
39+
wrapper.setProps({status : 'previous'})
40+
expect(wrapper.find('.step-actions').exists()).toBeFalsy()
41+
})
42+
43+
it('Component not mounted if status is inactive', () =>{
44+
wrapper.setProps({status : 'inactive'})
45+
expect(wrapper.find('.step-actions').exists()).toBeFalsy()
46+
})
47+
48+
it('Component mounted if status is current', () =>{
49+
wrapper.setProps({status : 'current'})
50+
expect(wrapper.element).toMatchSnapshot()
51+
})
52+
})
53+
54+
describe('Store is updated when a user provides input', () => {
55+
let mutations, state, wrapper,store
56+
57+
beforeEach(() => {
58+
mutations = {
59+
setCreatorName: jest.fn(),
60+
setCreatorProfileUrl: jest.fn(),
61+
setWorkTitle: jest.fn(),
62+
setWorkUrl: jest.fn()
63+
};
64+
65+
state = {
66+
attributionDetails: {
67+
creatorName: '',
68+
creatorProfileUrl: '',
69+
workTitle: '',
70+
workUrl: ''
71+
}
72+
};
73+
74+
store = new Vuex.Store({
75+
state,
76+
mutations,
77+
});
78+
79+
wrapper = mount(AttributionDetailsStep, {
80+
propsData: {
81+
status: 'current'
82+
},
83+
mocks: {
84+
$t: key => key
85+
},
86+
store,
87+
localVue,
88+
});
89+
})
90+
91+
afterEach(()=> {
92+
wrapper.destroy()
93+
})
94+
95+
it('Creator Name is updated', async() => {
96+
const input = wrapper.find('input[placeholder="stepper.AD.form.creator-name.placeholder"]')
97+
await input.setValue("Jane Bar")
98+
expect(mutations.setCreatorName).toHaveBeenCalled()
99+
})
100+
101+
//CreatorProfile URL
102+
it('Profile Url is updated', async() => {
103+
const input = wrapper.find('input[placeholder="stepper.AD.form.creator-profile.placeholder"]')
104+
await input.setValue("jane@bar.com")
105+
expect(mutations.setCreatorProfileUrl).toHaveBeenCalled()
106+
})
107+
108+
//Work URL
109+
it('Work Url is updated', async() => {
110+
const input = wrapper.find('input[placeholder="stepper.AD.form.work-url.placeholder"]')
111+
await input.setValue("jane@bar.com/kitty.jpeg")
112+
expect(mutations.setWorkUrl).toHaveBeenCalled()
113+
})
114+
115+
//Work Title
116+
it('Work Title is updated', async() => {
117+
const input = wrapper.find('input[placeholder="stepper.AD.form.work-title.placeholder"]')
118+
await input.setValue("illustrator")
119+
expect(mutations.setWorkTitle).toHaveBeenCalled()
120+
})
121+
122+
})

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

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`AttributionDetailsStep Component Rendering Component mounted if status is current 1`] = `
4+
<div
5+
class="step-content"
6+
>
7+
<div
8+
class="step-actions"
9+
>
10+
<p
11+
class="attribution-details-instructions"
12+
>
13+
14+
stepper.AD.instructions
15+
16+
</p>
17+
18+
<form
19+
class="attribution-details-form"
20+
>
21+
<div
22+
class="field"
23+
>
24+
<label
25+
class="label"
26+
>
27+
stepper.AD.form.creator-name.label
28+
</label>
29+
30+
<div
31+
class="control is-clearfix"
32+
>
33+
<input
34+
autocomplete="on"
35+
class="input"
36+
placeholder="stepper.AD.form.creator-name.placeholder"
37+
type="text"
38+
/>
39+
40+
<!---->
41+
42+
<!---->
43+
44+
<!---->
45+
</div>
46+
47+
<!---->
48+
</div>
49+
50+
<div
51+
class="field"
52+
>
53+
<label
54+
class="label"
55+
>
56+
stepper.AD.form.creator-profile.label
57+
</label>
58+
59+
<div
60+
class="control is-clearfix"
61+
>
62+
<input
63+
autocomplete="on"
64+
class="input"
65+
placeholder="stepper.AD.form.creator-profile.placeholder"
66+
type="text"
67+
/>
68+
69+
<!---->
70+
71+
<!---->
72+
73+
<!---->
74+
</div>
75+
76+
<!---->
77+
</div>
78+
79+
<div
80+
class="field"
81+
>
82+
<label
83+
class="label"
84+
>
85+
stepper.AD.form.work-title.label
86+
</label>
87+
88+
<div
89+
class="control is-clearfix"
90+
>
91+
<input
92+
autocomplete="on"
93+
class="input"
94+
placeholder="stepper.AD.form.work-title.placeholder"
95+
type="text"
96+
/>
97+
98+
<!---->
99+
100+
<!---->
101+
102+
<!---->
103+
</div>
104+
105+
<!---->
106+
</div>
107+
108+
<div
109+
class="field"
110+
>
111+
<label
112+
class="label"
113+
>
114+
stepper.AD.form.work-url.label
115+
</label>
116+
117+
<div
118+
class="control is-clearfix"
119+
>
120+
<input
121+
autocomplete="on"
122+
class="input"
123+
placeholder="stepper.AD.form.work-url.placeholder"
124+
type="text"
125+
/>
126+
127+
<!---->
128+
129+
<!---->
130+
131+
<!---->
132+
</div>
133+
134+
<!---->
135+
</div>
136+
</form>
137+
</div>
138+
</div>
139+
`;

0 commit comments

Comments
 (0)