Skip to content

Commit 68af796

Browse files
obulatobulat
committed
Add snapshot testing for step status
1 parent 49b2076 commit 68af796

File tree

2 files changed

+184
-71
lines changed

2 files changed

+184
-71
lines changed

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

Lines changed: 134 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,23 @@ describe('Step.vue', () => {
1212

1313
// Always creates a shallow instance of component
1414
beforeEach(() => {
15-
localVue = createLocalVue()
16-
localVue.use(Vuex)
17-
localVue.use(Buefy)
18-
Vue.use(VueI18n)
19-
const messages = require('@/locales/en.json')
20-
const i18n = new VueI18n({
21-
locale: 'en',
22-
fallbackLocale: 'en',
23-
messages: messages
24-
})
25-
26-
config.mocks.i18n = i18n
27-
28-
config.mocks.$t = key => {}
29-
wrapper = shallowMount(Step, {
30-
store,
31-
localVue
32-
})
15+
localVue = createLocalVue()
16+
localVue.use(Vuex)
17+
localVue.use(Buefy)
18+
Vue.use(VueI18n)
19+
const i18n = new VueI18n({
20+
locale: 'en',
21+
fallbackLocale: 'en',
22+
messages: {}
23+
})
24+
25+
config.mocks.i18n = i18n
26+
27+
config.mocks.$t = key => key
28+
wrapper = shallowMount(Step, {
29+
store,
30+
localVue
31+
})
3332
})
3433

3534
it('Check if Step.vue component renders without any errors', () => {
@@ -38,69 +37,134 @@ describe('Step.vue', () => {
3837

3938
// It's only for one state, but this should be enough to test if the logic works properly
4039
it('Check that all computed i18n props return correct values', () => {
41-
wrapper.setProps({
42-
disabledDue: "",
43-
enabled: true,
44-
reversed: false,
45-
selected: undefined,
46-
status: "current",
47-
stepId: 1,
48-
stepName: "BY"
49-
})
40+
wrapper.setProps({
41+
disabledDue: '',
42+
enabled: true,
43+
reversed: false,
44+
selected: undefined,
45+
status: 'current',
46+
stepId: 1,
47+
stepName: 'BY'
48+
})
5049

51-
expect(wrapper.vm.cardText).toBe('stepper.BY.not-selected')
52-
expect(wrapper.vm.noSelected).toBe('selected')
53-
expect(wrapper.vm.noText).toBe('stepper.BY.not-selected')
54-
expect(wrapper.vm.question).toBe('stepper.BY.question')
55-
expect(wrapper.vm.tPrefix).toBe('stepper.BY')
56-
expect(wrapper.vm.yesSelected).toBe('not-selected')
57-
expect(wrapper.vm.yesText).toBe('stepper.BY.selected')
50+
expect(wrapper.vm.cardText).toBe('stepper.BY.not-selected')
51+
expect(wrapper.vm.noSelected).toBe('selected')
52+
expect(wrapper.vm.noText).toBe('stepper.BY.not-selected')
53+
expect(wrapper.vm.question).toBe('stepper.BY.question')
54+
expect(wrapper.vm.tPrefix).toBe('stepper.BY')
55+
expect(wrapper.vm.yesSelected).toBe('not-selected')
56+
expect(wrapper.vm.yesText).toBe('stepper.BY.selected')
5857
})
5958

6059
it('Check that all computed i18n props return correct values after true selected', () => {
61-
wrapper.setProps({
62-
disabledDue: undefined,
63-
enabled: true,
64-
reversed: false,
65-
selected: true,
66-
status: "current",
67-
stepId: 1,
68-
stepName: "BY"
69-
})
60+
wrapper.setProps({
61+
disabledDue: undefined,
62+
enabled: true,
63+
reversed: false,
64+
selected: true,
65+
status: 'current',
66+
stepId: 1,
67+
stepName: 'BY'
68+
})
7069

71-
expect(wrapper.vm.radio).toBe("yes")
72-
expect(wrapper.vm.cardText).toBe('stepper.BY.selected')
73-
expect(wrapper.vm.noSelected).toBe('not-selected')
74-
expect(wrapper.vm.noText).toBe('stepper.BY.not-selected')
75-
expect(wrapper.vm.question).toBe('stepper.BY.question')
76-
expect(wrapper.vm.tPrefix).toBe('stepper.BY')
77-
expect(wrapper.vm.yesSelected).toBe('selected')
78-
expect(wrapper.vm.yesText).toBe('stepper.BY.selected')
70+
expect(wrapper.vm.radio).toBe('yes')
71+
expect(wrapper.vm.cardText).toBe('stepper.BY.selected')
72+
expect(wrapper.vm.noSelected).toBe('not-selected')
73+
expect(wrapper.vm.noText).toBe('stepper.BY.not-selected')
74+
expect(wrapper.vm.question).toBe('stepper.BY.question')
75+
expect(wrapper.vm.tPrefix).toBe('stepper.BY')
76+
expect(wrapper.vm.yesSelected).toBe('selected')
77+
expect(wrapper.vm.yesText).toBe('stepper.BY.selected')
7978
})
8079

8180
it('Check that all computed i18n props return correct values after false selected', () => {
82-
wrapper.setProps({
83-
disabledDue: undefined,
84-
enabled: true,
85-
reversed: false,
86-
selected: false,
87-
status: "current",
88-
stepId: 1,
89-
stepName: "BY"
90-
})
81+
wrapper.setProps({
82+
disabledDue: undefined,
83+
enabled: true,
84+
reversed: false,
85+
selected: false,
86+
status: 'current',
87+
stepId: 1,
88+
stepName: 'BY'
89+
})
90+
91+
expect(wrapper.vm.radio).toBe('no')
92+
expect(wrapper.vm.cardText).toBe('stepper.BY.not-selected')
93+
expect(wrapper.vm.noSelected).toBe('selected')
94+
expect(wrapper.vm.noText).toBe('stepper.BY.not-selected')
95+
expect(wrapper.vm.question).toBe('stepper.BY.question')
96+
expect(wrapper.vm.tPrefix).toBe('stepper.BY')
97+
expect(wrapper.vm.yesSelected).toBe('not-selected')
98+
expect(wrapper.vm.yesText).toBe('stepper.BY.selected')
99+
})
91100

92-
expect(wrapper.vm.radio).toBe("no")
93-
expect(wrapper.vm.cardText).toBe('stepper.BY.not-selected')
94-
expect(wrapper.vm.noSelected).toBe('selected')
95-
expect(wrapper.vm.noText).toBe('stepper.BY.not-selected')
96-
expect(wrapper.vm.question).toBe('stepper.BY.question')
97-
expect(wrapper.vm.tPrefix).toBe('stepper.BY')
98-
expect(wrapper.vm.yesSelected).toBe('not-selected')
99-
expect(wrapper.vm.yesText).toBe('stepper.BY.selected')
101+
it('Check that `previous` step does not have actions div', () => {
102+
wrapper.setProps({
103+
status: 'previous',
104+
stepId: 1,
105+
stepName: 'BY'
106+
})
107+
const stepActions = wrapper.findAll('.step-actions')
108+
expect(stepActions).toHaveLength(0)
109+
const stepDescription = wrapper.findAll('.step-description')
110+
expect(stepDescription).toHaveLength(1)
100111
})
101112

102113
// Snapshot tests
103-
it('Check if the Step.vue component has the expected UI', () => {
114+
it('Check if the Step.vue component has the expected UI if current', () => {
115+
wrapper.setProps({
116+
disabledDue: undefined,
117+
enabled: true,
118+
reversed: false,
119+
selected: false,
120+
stepName: 'SA',
121+
status: 'current'
122+
})
123+
124+
expect(wrapper).toMatchSnapshot()
125+
})
126+
it('Check if the Step.vue component has the expected UI if previous', () => {
127+
wrapper.setProps({
128+
status: 'previous',
129+
disabledDue: undefined,
130+
enabled: true,
131+
reversed: false,
132+
selected: false,
133+
stepName: 'SA'
134+
})
135+
expect(wrapper).toMatchSnapshot()
136+
})
137+
it('Check if the Step.vue component has the expected UI if inactive', () => {
138+
wrapper.setProps({
139+
status: 'inactive',
140+
disabledDue: undefined,
141+
enabled: true,
142+
reversed: false,
143+
selected: false,
144+
stepName: 'SA'
145+
})
146+
expect(wrapper).toMatchSnapshot()
147+
})
148+
it('Check if the Step.vue component has the expected UI if disabled due is set', () => {
149+
wrapper.setProps({
150+
disabledDue: 'ND',
151+
enabled: true,
152+
reversed: false,
153+
selected: false,
154+
stepName: 'SA',
155+
status: 'current'
156+
})
157+
expect(wrapper).toMatchSnapshot()
158+
})
159+
it('Check if the Step.vue component has the expected UI if reversed', () => {
160+
wrapper.setProps({
161+
reversed: true,
162+
disabledDue: undefined,
163+
enabled: true,
164+
selected: false,
165+
stepName: 'SA',
166+
status: 'current'
167+
})
104168
expect(wrapper).toMatchSnapshot()
105169
})
106-
})
170+
})

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

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,56 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Step.vue Check if the Step.vue component has the expected UI 1`] = `
3+
exports[`Step.vue Check if the Step.vue component has the expected UI if current 1`] = `
4+
<div class="step-content">
5+
<div class="step-actions">
6+
<div class="field not-selected">
7+
<b-radio-stub value="no" nativevalue="yes"><span class="vocab-body body-normal">stepper.yesstepper.SA.selected</span></b-radio-stub>
8+
</div>
9+
<div class="field selected">
10+
<b-radio-stub value="no" nativevalue="no"><span class="vocab-body body-normal">stepper.nostepper.SA.not-selected</span></b-radio-stub>
11+
</div>
12+
</div>
13+
</div>
14+
`;
15+
16+
exports[`Step.vue Check if the Step.vue component has the expected UI if disabled due is set 1`] = `
17+
<div class="step-content">
18+
<div class="step-actions">
19+
<div class="field not-selected">
20+
<b-radio-stub value="no" nativevalue="yes"><span class="vocab-body body-normal">stepper.yesstepper.SA.selected</span></b-radio-stub>
21+
</div>
22+
<div class="field selected">
23+
<b-radio-stub value="no" nativevalue="no"><span class="vocab-body body-normal">stepper.nostepper.SA.not-selected</span></b-radio-stub>
24+
</div>
25+
</div>
26+
</div>
27+
`;
28+
29+
exports[`Step.vue Check if the Step.vue component has the expected UI if inactive 1`] = `
430
<div class="step-content">
531
<!---->
632
</div>
733
`;
34+
35+
exports[`Step.vue Check if the Step.vue component has the expected UI if previous 1`] = `
36+
<div class="step-content">
37+
<div class="step-description vocab-body body-normal">
38+
<p class="vocab-body body-normal">
39+
stepper.SA.not-selected
40+
</p>
41+
</div>
42+
</div>
43+
`;
44+
45+
exports[`Step.vue Check if the Step.vue component has the expected UI if reversed 1`] = `
46+
<div class="step-content">
47+
<div class="step-actions">
48+
<div class="field not-selected">
49+
<b-radio-stub value="yes" nativevalue="yes"><span class="vocab-body body-normal">stepper.yesstepper.SA.selected</span></b-radio-stub>
50+
</div>
51+
<div class="field selected">
52+
<b-radio-stub value="yes" nativevalue="no"><span class="vocab-body body-normal">stepper.nostepper.SA.not-selected</span></b-radio-stub>
53+
</div>
54+
</div>
55+
</div>
56+
`;

0 commit comments

Comments
 (0)