Move gig navigation inside Day component

Author: agualis

src/app/__page_objects__/DayPageObject.js

@@ -0,0 +1,16 @@
+import PageObject from './PageObject'
+
+export default class DayListPageObject extends PageObject {
+ constructor(wrapper) {
+ super(wrapper)
+ this.wrapper = wrapper
+ }
+
+ clickFirstGig() {
+ this.wrapper.findAll('.q-item').at(0).trigger('click')
+ }
+
+ clickSecondGig() {
+ this.wrapper.findAll('.q-item').at(1).trigger('click')
+ }
+}

src/app/__page_objects__/DaysPageObject.js

@@ -21,8 +21,4 @@ export default class DayListPageObject extends PageObject {
  clickSecondGig() {
  this.wrapper.findAll('.q-item').at(1).trigger('click')
  }
-
- setRouterSpy(routerSpy) {
- this.wrapper.vm.mosicaRouter = routerSpy
- }
 }

src/app/__page_objects__/PageObject.js

@@ -27,4 +27,8 @@ export default class PageObject {
  matchSnapshot() {
  expect(this.wrapper.html()).toMatchSnapshot()
  }
+
+ setRouterSpy(routerSpy) {
+ this.wrapper.vm.mosicaRouter = routerSpy
+ }
 }

src/app/pages/Days/Day.vue

@@ -4,15 +4,25 @@
  <q-list-header>{{day.day}}</q-list-header>
 
  <div v-for="gig in day.gigs">
- <Gig :gig ="gig" :onClick="onClick"/>
+ <Gig :gig ="gig" :onClick="goTo"/>
  </div>
  </div>
  </q-list>
 </template>
 
 <script>
+ import { MosicaRouter } from '../../services/MosicaRouter'
+
  export default {
- props: { day: Object, isLoading: Boolean, onClick: Function }
+ props: {day: Object, isLoading: Boolean},
+ created() {
+ this.mosicaRouter = new MosicaRouter(this.$router)
+ },
+ methods: {
+ goTo(gig) {
+ this.mosicaRouter.navigateToGig(gig.id)
+ }
+ }
  }
 </script>
 

src/app/pages/Days/Days.vue

@@ -2,14 +2,13 @@
  <div class="full-width">
  <LoadSpinner :isLoading="isLoading"/>
  <div v-for="day in gigsByDay" v-if="!isLoading">
- <Day :day="day" :onClick="goTo"/>
+ <Day :day="day"/>
  </div>
  </div>
 </template>
 
 <script>
  import { mapState, mapActions } from 'vuex'
- import { MosicaRouter } from '../../services/MosicaRouter'
  import { gigService } from '../../services/mosica-instances'
 
  export default {
@@ -33,13 +32,9 @@
  await this.retrieve_days()
  this.gigsByDay = this.days
  this.isLoading = false
- this.mosicaRouter = new MosicaRouter(this.$router)
  },
  methods: {
- ...mapActions(['retrieve_days']),
- goTo(gig) {
- this.mosicaRouter.navigateToGig(gig.id)
- }
+ ...mapActions(['retrieve_days'])
  },
  computed: {
  ...mapState(['days'])

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

@@ -2,6 +2,7 @@ import Day from '@/app/pages/Days/Day.vue'
 import PageObject from '../../../__page_objects__/PageObject'
 import { fakeGigsByDay } from '../../../services/__mocks__/gigs-sample'
 import { Wrap } from '../../../../../test/helpers'
+import DayListPageObject from '../../../__page_objects__/DayPageObject';
 
 const FIRST_DAY = fakeGigsByDay[0]
 
@@ -11,8 +12,9 @@ describe('Day', () => {
  beforeEach(async () => {
  wrapper = Wrap(Day)
  .withProps({ day: FIRST_DAY, isLoading: false, onClick: jest.fn })
+ .withRouter(jest.fn())
  .mount()
- page = new PageObject(wrapper)
+ page = new DayListPageObject(wrapper)
  await page.updateAsync()
  })
 
@@ -26,4 +28,26 @@ describe('Day', () => {
  it('renders gig', async() => {
  page.contains(FIRST_DAY.day)
  })
+
+
+ describe('When clicking buttons', () => {
+
+ let navigateToGigSpy
+ beforeEach(async () => {
+ navigateToGigSpy = jest.fn()
+ page.setRouterSpy({ navigateToGig: navigateToGigSpy })
+ })
+
+ it('navigates to first gig detail', async () => {
+ const FIRST_GIG = FIRST_DAY.gigs[0]
+ page.clickFirstGig()
+ expect(navigateToGigSpy).toHaveBeenCalledWith(FIRST_GIG.id)
+ })
+
+ it('navigates to second gig detail', async () => {
+ const SECOND_GIG = FIRST_DAY.gigs[1]
+ page.clickSecondGig()
+ expect(navigateToGigSpy).toHaveBeenCalledWith(SECOND_GIG.id)
+ })
+ })
 })

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

@@ -25,27 +25,6 @@ describe('Days', () => {
  FIRST_DAY_GIG_TEXTS.map((text) => page.contains(text))
  })
 
- describe('When clicking buttons', () => {
-
- let navigateToGigSpy
- beforeEach(async () => {
- navigateToGigSpy = jest.fn()
- page.setRouterSpy({ navigateToGig: navigateToGigSpy })
- })
-
- it('navigates to first gig detail', async () => {
- const FIRST_GIG = fakeGigsByDay[0].gigs[0]
- page.clickFirstGig()
- expect(navigateToGigSpy).toHaveBeenCalledWith(FIRST_GIG.id)
- })
-
- it('navigates to second gig detail', async () => {
- const SECOND_GIG = fakeGigsByDay[0].gigs[1]
- page.clickSecondGig()
- expect(navigateToGigSpy).toHaveBeenCalledWith(SECOND_GIG.id)
- })
- })
-
  /* Different examples of more accurate tests that need
  to explicitly run over the DOM structure
  */