Write and fix donations bar frontend tests

webapp/components/DonationInfo/DonationInfo.spec.js

@@ -14,7 +14,7 @@ describe('DonationInfo.vue', () => {
     mocks = {
       $t: jest.fn((string) => string),
       $i18n: {
-        locale: () => 'de',
+        locale: () => 'en',
       },
     }
     propsData = {
@@ -25,31 +25,29 @@ describe('DonationInfo.vue', () => {
 
   const Wrapper = () => mount(DonationInfo, { mocks, localVue, propsData })
 
+  it('displays the progress bar', () => {
+    wrapper = Wrapper()
+    expect(wrapper.find('.progress-bar').exists()).toBe(true)
+  })
+
+  it('displays the action button', () => {
+    wrapper = Wrapper()
+    expect(wrapper.find('.base-button').text()).toBe('donations.donate-now')
+  })
+
   it('includes a link to the ocelot.social donations website', () => {
-    expect(Wrapper().find('a').attributes('href')).toBe(
+    wrapper = Wrapper()
+    expect(wrapper.find('a').attributes('href')).toBe(
       'https://ocelot-social.herokuapp.com/donations',
     )
   })
 
-  it('displays a call to action button', () => {
-    expect(Wrapper().find('.base-button').text()).toBe('donations.donate-now')
-  })
-
-  // Wolle
-  it.skip('creates a title from the current month and a translation string', () => {
-    mocks.$t = jest.fn(() => 'Spenden für')
-    expect(Wrapper().vm.title).toBe('Spenden für Dezember')
-  })
-
   describe('mount with data', () => {
-    beforeEach(() => {
-      wrapper = Wrapper()
-      wrapper.setData({ goal: 50000, progress: 10000 })
-    })
-
     describe('given german locale', () => {
-      // Wolle
       it.skip('creates a label from the given amounts and a translation string', () => {
+        // couldn't find out why it's not working
+        mocks.$i18n.locale = () => 'de'
+        wrapper = Wrapper()
         expect(mocks.$t).toBeCalledWith(
           'donations.amount-of-total',
           expect.objectContaining({
@@ -61,12 +59,8 @@ describe('DonationInfo.vue', () => {
     })
 
     describe('given english locale', () => {
-      beforeEach(() => {
-        mocks.$i18n.locale = () => 'en'
-      })
-
-      // Wolle
-      it.skip('creates a label from the given amounts and a translation string', () => {
+      it('creates a label from the given amounts and a translation string', () => {
+        wrapper = Wrapper()
         expect(mocks.$t).toBeCalledWith(
           'donations.amount-of-total',
           expect.objectContaining({

webapp/components/ProgressBar/ProgressBar.spec.js

@@ -1,31 +1,30 @@
-import { mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import ProgressBar from './ProgressBar'
 
 const localVue = global.localVue
 
 describe('ProgessBar.vue', () => {
-  let propsData
+  let propsData, slots, wrapper
 
   beforeEach(() => {
     propsData = {
       goal: 50000,
       progress: 10000,
     }
+    slots = {}
   })
 
-  const Wrapper = () => mount(ProgressBar, { localVue, propsData })
+  const Wrapper = () => shallowMount(ProgressBar, { localVue, propsData, slots })
 
   describe('given only goal and progress', () => {
-    it('renders no title', () => {
-      expect(Wrapper().find('.progress-bar__title').exists()).toBe(false)
+    it('calculates the progress bar width as a percentage of the goal', () => {
+      wrapper = Wrapper()
+      expect(wrapper.vm.progressBarWidth).toBe('width: 20%;')
     })
 
     it('renders no label', () => {
-      expect(Wrapper().find('.progress-bar__label').exists()).toBe(false)
-    })
-
-    it('calculates the progress bar width as a percentage of the goal', () => {
-      expect(Wrapper().vm.progressBarWidth).toBe('width: 20%;')
+      wrapper = Wrapper()
+      expect(wrapper.find('.progress-bar__label').exists()).toBe(false)
     })
   })
 
@@ -35,7 +34,21 @@ describe('ProgessBar.vue', () => {
     })
 
     it('renders the label', () => {
-      expect(Wrapper().find('.progress-bar__label').text()).toBe('Going well')
+      wrapper = Wrapper()
+      expect(wrapper.find('.progress-bar__label').text()).toBe('Going well')
+    })
+  })
+
+  describe('given a fake-button as slot', () => {
+    beforeEach(() => {
+      slots = {
+        default: '<div class="fake-button"></div>',
+      }
+    })
+
+    it('renders the fake-button', () => {
+      wrapper = Wrapper()
+      expect(wrapper.find('.fake-button').exists()).toBe(true)
     })
   })
 })

webapp/pages/index.spec.js

@@ -1,6 +1,5 @@
 import { config, shallowMount, mount } from '@vue/test-utils'
 import PostIndex from './index.vue'
-import Vue from 'vue'
 import Vuex from 'vuex'
 import HashtagsFilter from '~/components/HashtagsFilter/HashtagsFilter'
 
@@ -115,10 +114,9 @@ describe('PostIndex', () => {
         expect(wrapper.find('.top-info-bar').exists()).toBe(true)
       })
 
-      it('hides donation-info if not "showDonations"', () => {
+      it('hides donation-info if not "showDonations"', async () => {
         wrapper = Wrapper()
-        wrapper.setData({ showDonations: false })
-        Vue.nextTick()
+        await wrapper.setData({ showDonations: false })
         expect(wrapper.find('.top-info-bar').exists()).toBe(false)
       })
     })