Skip to content

Commit 3a4ea32

Browse files
agualisagualis
committed
Add test samples for codely TV
1 parent c7d2411 commit 3a4ea32

File tree

12 files changed

+115
-70
lines changed

12 files changed

+115
-70
lines changed

‎src/app/pages/Days/Days.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
1414
export default {
1515
props: {
16-
gigService: {
16+
retrieveDays: {
1717
default: () => retrieveDays
1818
}
1919
},
@@ -26,7 +26,7 @@
2626
async created() {
2727
this.isLoading = true
2828
// Without vuex action
29-
this.gigsByDay = await retrieveDays
29+
this.gigsByDay = await this.retrieveDays
3030
// With vuex action
3131
await this.retrieve_days()
3232
this.gigsByDay = this.days

‎src/app/pages/Days/__test__/Days.spec.js‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import { mount } from 'vue-test-utils'
22
import Days from '@/app/pages/Days/Days.vue'
33
import { FIRST_DAY, DAY_LIST } from '../../../services/__mocks__/gigs-sample'
4-
import { fakeGigsByDay2 } from '../../../services/__mocks__/gigs-sample2'
54
import DayListPage from '../../../__page_objects__/DaysPageObject'
65
import { cloneProductionStore } from '../../../../../test/helpers'
76
import { localizedFromIso } from '../../../services/date-utils'
87
jest.mock('@/app/services/jota-api')
98

109
describe('Days', () => {
11-
const FIRST_DAY_GIG_TEXTS = FIRST_DAY.gigs.map(
12-
gig => gig.title + ' - ' + gig.place)
10+
const FIRST_DAY_GIG_TITLES = FIRST_DAY.gigs.map(gig => gig.title)
1311

1412
let page, wrapper
1513
beforeEach(async () => {
@@ -22,7 +20,7 @@ describe('Days', () => {
2220
})
2321

2422
it('renders all gigs in the first day', async() => {
25-
FIRST_DAY_GIG_TEXTS.map((text) => page.contains(text))
23+
FIRST_DAY_GIG_TITLES.map((text) => page.contains(text))
2624
})
2725

2826
/* Different examples of more accurate tests that need
@@ -37,20 +35,8 @@ describe('Days', () => {
3735
it('render gigs for each day', async () => {
3836
let expectedGigs
3937
DAY_LIST.map((day, index) => {
40-
expectedGigs = day.gigs.map((gig) => gig.title + ' - ' + gig.place)
38+
expectedGigs = day.gigs.map((gig) => gig.title + ' ' + gig.place)
4139
expect(page.gigRowsFor(index)).toEqual(expectedGigs)
4240
})
4341
})
44-
45-
/* Test to demonstrate how to explicitly inject backendService as a prop
46-
(less MAGIC than manual jest mock)
47-
*/
48-
// it('render days(explicitly injected mock)', async () => {
49-
// const gigService = {retrieveNextGigs: () => Promise.resolve(fakeGigsByDay2)}
50-
// const wrapper = mount(Days, {propsData: {gigService}})
51-
// page = new DayListPage(wrapper)
52-
// await page.updateAsync()
53-
// expect(wrapper.html()).toContain('rapsus')
54-
// })
55-
5642
})

‎src/app/pages/Days/__test__/GigRow.spec.js‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,7 @@ describe('GigRow', () => {
99

1010
const wrapper = mount(GigRow, { propsData: {gig: GIG} })
1111

12-
expect(wrapper.text()).toContain('a title - a place')
12+
expect(wrapper.text()).toContain('a title')
13+
expect(wrapper.text()).toContain('a place')
1314
})
1415
})
15-
16-
17-
18-
// fit('renders the correct message with native', () => {
19-
// const Ctor = Vue.extend(FunctionalSFC)
20-
// const vm = new Ctor({ propsData: { msg: 'Hello' } }).$mount()
21-
// console.log('YIIIIPIIII', vm.$el.textContent)
22-
// })
23-
24-
// it('renders the correct message with native from parent', () => {
25-
// const Ctor = Vue.extend(FunctionalSFCParent)
26-
// const vm = new Ctor().$mount()
27-
// console.log('YIIIIPIIII', vm.$el.textContent)
28-
// })

‎src/app/pages/Days/__test__/__snapshots__/Day.spec.js.snap‎

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

33
exports[`Day matches full snapshot 1`] = `
4-
<div class="q-card">
4+
<div>
55
<div class="day">
66
<div class="q-card-primary q-card-container row no-wrap">
77
<div class="col column">
@@ -11,13 +11,23 @@ exports[`Day matches full snapshot 1`] = `
1111
<div class="col-auto self-center q-card-title-extra"></div>
1212
</div>
1313
<div>
14-
<div striped="" class="q-item q-item-division relative-position q-item-highlight q-item-link">
15-
Anarchy in the JS - SCBCN
14+
<div highlight="" class="q-card">
15+
<div class="q-item q-item-division relative-position"><img src="http://www.zaragoza.es/cont/paginas/actividades/imagen/web_320x480px.png" class="q-item-side q-item-side-left q-item-section q-item-image">
16+
<div class="q-item-main q-item-section">
17+
<div class="q-item-label">Anarchy in the JS</div>
18+
<div class="q-item-sublabel">SCBCN</div>
19+
</div>
20+
</div>
1621
</div>
1722
</div>
1823
<div>
19-
<div striped="" class="q-item q-item-division relative-position q-item-highlight q-item-link">
20-
Vegan Microservices - Around the world
24+
<div highlight="" class="q-card">
25+
<div class="q-item q-item-division relative-position"><img src="http://www.wtf.es/wtf.png" class="q-item-side q-item-side-left q-item-section q-item-image">
26+
<div class="q-item-main q-item-section">
27+
<div class="q-item-label">Vegan Microservices</div>
28+
<div class="q-item-sublabel">Around the world</div>
29+
</div>
30+
</div>
2131
</div>
2232
</div>
2333
</div>

‎src/app/pages/Days/__test__/__snapshots__/Days.spec.js.snap‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`Days matches full snapshot 1`] = `
44
<div class="full-width">
55
<!---->
66
<div>
7-
<div class="q-card">
7+
<div>
88
<div class="day">
99
<div class="q-card-primary q-card-container row no-wrap">
1010
<div class="col column">
@@ -14,13 +14,23 @@ exports[`Days matches full snapshot 1`] = `
1414
<div class="col-auto self-center q-card-title-extra"></div>
1515
</div>
1616
<div>
17-
<div striped="" class="q-item q-item-division relative-position q-item-highlight q-item-link">
18-
Anarchy in the JS - SCBCN
17+
<div highlight="" class="q-card">
18+
<div class="q-item q-item-division relative-position"><img src="http://www.zaragoza.es/cont/paginas/actividades/imagen/web_320x480px.png" class="q-item-side q-item-side-left q-item-section q-item-image">
19+
<div class="q-item-main q-item-section">
20+
<div class="q-item-label">Anarchy in the JS</div>
21+
<div class="q-item-sublabel">SCBCN</div>
22+
</div>
23+
</div>
1924
</div>
2025
</div>
2126
<div>
22-
<div striped="" class="q-item q-item-division relative-position q-item-highlight q-item-link">
23-
Vegan Microservices - Around the world
27+
<div highlight="" class="q-card">
28+
<div class="q-item q-item-division relative-position"><img src="http://www.wtf.es/wtf.png" class="q-item-side q-item-side-left q-item-section q-item-image">
29+
<div class="q-item-main q-item-section">
30+
<div class="q-item-label">Vegan Microservices</div>
31+
<div class="q-item-sublabel">Around the world</div>
32+
</div>
33+
</div>
2434
</div>
2535
</div>
2636
</div>

‎src/app/pages/Days/__test__/codely/TestinWithManualDoubleInjection.spec.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import Days from '@/app/pages/Days/Days.vue'
2+
import { mount } from 'vue-test-utils'
3+
import { fakeGigsByDay } from '../../../../services/__mocks__/gigs-sample'
4+
import DaysPageObject from '../../../../__page_objects__/DaysPageObject'
5+
6+
jest.mock('@/app/services/jota-api')
7+
8+
xdescribe('Days', () => {
9+
10+
/* Test to demonstrate how to explicitly inject backendService as a prop
11+
(less MAGIC than manual jest mock)
12+
*/
13+
it('renders days', async () => {
14+
const retrieveDays = () => Promise.resolve(fakeGigsByDay)
15+
16+
const wrapper = mount(Days, {propsData: {retrieveDays}})
17+
const page = new DaysPageObject(wrapper)
18+
await page.wait()
19+
20+
expect(wrapper.html()).toContain('rapsus')
21+
})
22+
})

‎src/app/pages/Days/__test__/codely/TestingAsync.spec.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Days from '@/app/pages/Days/Days.vue'
2+
import { mount } from 'vue-test-utils'
3+
import { FIRST_DAY } from '../../../../services/__mocks__/gigs-sample'
4+
5+
jest.mock('@/app/services/jota-api')
6+
7+
xdescribe('Days', () => {
8+
const FIRST_DAY_GIG_TITLES = FIRST_DAY.gigs.map(gig => gig.title)
9+
console.log('WOWOWWO', FIRST_DAY_GIG_TITLES)
10+
11+
let wrapper
12+
beforeEach(async () => {
13+
wrapper = mount(Days)
14+
})
15+
16+
it('renders all gigs in the first day', async() => {
17+
FIRST_DAY_GIG_TITLES.map((text) => expect(wrapper.contains(text)).toBeTruthy())
18+
})
19+
})

‎src/app/pages/Days/__test__/codely/TestingComponentsRaw.spec.js‎

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import Vue from 'vue'
22
import GigRow from '@/app/pages/Days/GigRow.vue'
3-
import { mount } from 'vue-test-utils'
43

54
describe('GigRow', () => {
65

@@ -11,24 +10,7 @@ describe('GigRow', () => {
1110
const GigRowBuilder = Vue.extend(GigRow)
1211
const vm = new GigRowBuilder({ propsData: {gig: GIG} }).$mount()
1312

14-
15-
16-
const wrapper = mount(GigRow, { propsData: {gig: GIG} })
17-
18-
expect(wrapper.text()).toContain('a title - a place')
13+
expect(vm.$el.textContent).toContain('a title')
14+
expect(vm.$el.textContent).toContain('a place')
1915
})
2016
})
21-
22-
23-
24-
// fit('renders the correct message with native', () => {
25-
// const Ctor = Vue.extend(FunctionalSFC)
26-
// const vm = new Ctor({ propsData: { msg: 'Hello' } }).$mount()
27-
// console.log('YIIIIPIIII', vm.$el.textContent)
28-
// })
29-
30-
// it('renders the correct message with native from parent', () => {
31-
// const Ctor = Vue.extend(FunctionalSFCParent)
32-
// const vm = new Ctor().$mount()
33-
// console.log('YIIIIPIIII', vm.$el.textContent)
34-
// })

‎src/app/pages/Days/__test__/codely/TestingComponentsWithCodingStonesWrapper.spec.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import GigRow from '@/app/pages/Days/GigRow.vue'
2+
import { Wrap } from '../../../../../../test/helpers'
3+
4+
describe('GigRow', () => {
5+
6+
it('renders gig content', async () => {
7+
8+
const GIG = {id: 'an id', title: 'a title', place: 'a place'}
9+
10+
const wrapper = Wrap(GigRow).withProps({ gig: GIG }).mount()
11+
12+
expect(wrapper.text()).toContain('a title')
13+
expect(wrapper.text()).toContain('a title')
14+
})
15+
})

‎src/app/pages/Days/__test__/codely/TestingComponentsWithVueTestUtils.spec.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import GigRow from '@/app/pages/Days/GigRow.vue'
2+
// import GigRowFunctional from '@/app/pages/Days/GigRowFunctional.vue'
3+
import { mount } from 'vue-test-utils'
4+
5+
describe('GigRow', () => {
6+
7+
it('renders gig content', async () => {
8+
9+
const GIG = {id: 'an id', title: 'a title', place: 'a place'}
10+
11+
const wrapper = mount(GigRow, { propsData: {gig: GIG} })
12+
13+
expect(wrapper.text()).toContain('a title')
14+
expect(wrapper.text()).toContain('a title')
15+
})
16+
})

0 commit comments

Comments
 (0)