Merge pull request #737 from gradido/improve-tests

feat: Testing Tabs of TransactionLists

.github/workflows/test.yml

@@ -261,7 +261,7 @@ jobs:
           report_name: Coverage Frontend
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 59
+          min_coverage: 60
           token: ${{ github.token }}
   
   ##############################################################################

frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js

@@ -0,0 +1,115 @@
+import { mount } from '@vue/test-utils'
+import GdtTransactionList from './GdtTransactionList'
+
+const localVue = global.localVue
+
+const apolloMock = jest.fn().mockResolvedValue({
+  data: {
+    listGDTEntries: {
+      count: 4,
+      gdtEntries: [
+        {
+          amount: 100,
+          gdt: 1700,
+          factor: 17,
+          comment: '',
+          date: '2021-05-02T17:20:11+00:00',
+          gdtEntryType: 1,
+        },
+        {
+          amount: 1810,
+          gdt: 362,
+          factor: 0.2,
+          comment: 'Dezember 20',
+          date: '2020-12-31T12:00:00+00:00',
+          gdtEntryType: 7,
+        },
+        {
+          amount: 100,
+          gdt: 1700,
+          factor: 17,
+          comment: '',
+          date: '2020-05-07T17:00:00+00:00',
+          gdtEntryType: 1,
+        },
+        {
+          amount: 100,
+          gdt: 110,
+          factor: 22,
+          comment: '',
+          date: '2020-04-10T13:28:00+00:00',
+          gdtEntryType: 4,
+        },
+      ],
+    },
+  },
+})
+
+const toastErrorMock = jest.fn()
+
+describe('GdtTransactionList', () => {
+  let wrapper
+
+  const mocks = {
+    $i18n: {
+      locale: 'en',
+    },
+    $t: jest.fn((t) => t),
+    $n: jest.fn((n) => n),
+    $d: jest.fn((d) => d),
+    $store: {
+      state: {
+        sessionId: 1,
+      },
+    },
+    $toasted: {
+      error: toastErrorMock,
+    },
+    $apollo: {
+      query: apolloMock,
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(GdtTransactionList, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.gdt-transaction-list').exists()).toBeTruthy()
+    })
+
+    describe('server returns valid data', () => {
+      it('calls the API', async () => {
+        await wrapper.vm.$nextTick()
+        expect(apolloMock).toBeCalledWith(
+          expect.objectContaining({
+            variables: {
+              sessionId: 1,
+              currentPage: 1,
+              pageSize: 25,
+            },
+          }),
+        )
+      })
+    })
+
+    describe('server returns error', () => {
+      beforeEach(() => {
+        jest.resetAllMocks()
+        apolloMock.mockRejectedValue({
+          message: 'Ouch!',
+        })
+        wrapper = Wrapper()
+      })
+
+      it('toasts an error message', () => {
+        expect(toastErrorMock).toBeCalledWith('Ouch!')
+      })
+    })
+  })
+})

frontend/src/views/Pages/Login.vue

@@ -88,7 +88,7 @@ export default {
             email: this.form.email,
             password: this.form.password,
           },
-          fetchPolicy: 'no-cache',
+          fetchPolicy: 'network-only',
         })
         .then((result) => {
           const {

frontend/src/views/Pages/UserProfileTransactionList.spec.js

@@ -3,16 +3,6 @@ import UserProfileTransactionList from './UserProfileTransactionList'
 
 const localVue = global.localVue
 
-const mutationObserverMock = jest.fn(function MutationObserver(callback) {
-  this.observe = jest.fn()
-  this.disconnect = jest.fn()
-  this.trigger = (mockedMutationsList) => {
-    callback(mockedMutationsList, this)
-  }
-})
-
-global.MutationObserver = mutationObserverMock
-
 describe('UserProfileTransactionList', () => {
   let wrapper
 
@@ -30,8 +20,12 @@ describe('UserProfileTransactionList', () => {
     },
   }
 
+  const stubs = {
+    GdtTransactionList: true,
+  }
+
   const Wrapper = () => {
-    return mount(UserProfileTransactionList, { localVue, mocks })
+    return mount(UserProfileTransactionList, { localVue, mocks, stubs })
   }
 
   describe('mount', () => {
@@ -61,5 +55,43 @@ describe('UserProfileTransactionList', () => {
     it('renders the transaction gradido transform table', () => {
       expect(wrapper.findComponent({ name: 'GdtTransactionList' }).exists()).toBeTruthy()
     })
+
+    describe('tabs', () => {
+      it('shows the GDD transactions by default', () => {
+        expect(wrapper.findAll('div[role="tabpanel"]').at(0).isVisible()).toBeTruthy()
+      })
+
+      it('does not show the GDT transactions by default', () => {
+        expect(wrapper.findAll('div[role="tabpanel"]').at(1).isVisible()).toBeFalsy()
+      })
+
+      describe('click on GDT tab', () => {
+        beforeEach(() => {
+          wrapper.findAll('li[ role="presentation"]').at(1).find('a').trigger('click')
+        })
+
+        it('does not show the GDD transactions', () => {
+          expect(wrapper.findAll('div[role="tabpanel"]').at(0).isVisible()).toBeFalsy()
+        })
+
+        it('shows the GDT transactions', () => {
+          expect(wrapper.findAll('div[role="tabpanel"]').at(1).isVisible()).toBeTruthy()
+        })
+
+        describe('click on GDD tab', () => {
+          beforeEach(() => {
+            wrapper.findAll('li[ role="presentation"]').at(0).find('a').trigger('click')
+          })
+
+          it('shows the GDD transactions', () => {
+            expect(wrapper.findAll('div[role="tabpanel"]').at(0).isVisible()).toBeTruthy()
+          })
+
+          it('does not show the GDT', () => {
+            expect(wrapper.findAll('div[role="tabpanel"]').at(1).isVisible()).toBeFalsy()
+          })
+        })
+      })
+    })
   })
 })

frontend/src/views/Pages/thx.spec.js

@@ -0,0 +1,91 @@
+import { mount } from '@vue/test-utils'
+import Thx from './thx'
+
+const localVue = global.localVue
+
+const createMockObject = (comingFrom) => {
+  return {
+    $t: jest.fn((t) => t),
+    $route: {
+      params: {
+        comingFrom,
+      },
+    },
+  }
+}
+
+describe('Thx', () => {
+  let wrapper
+
+  const Wrapper = (mocks) => {
+    return mount(Thx, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper(createMockObject('password'))
+    })
+
+    it('renders the thx page', () => {
+      expect(wrapper.find('div.header').exists()).toBeTruthy()
+    })
+
+    it('renders the title', () => {
+      expect(wrapper.find('p.h1').text()).toBe('site.thx.title')
+    })
+  })
+
+  describe('coming from /password', () => {
+    beforeEach(() => {
+      wrapper = Wrapper(createMockObject('password'))
+    })
+
+    it('renders the thanks text', () => {
+      expect(wrapper.find('p.h4').text()).toBe('site.thx.email')
+    })
+
+    it('renders the thanks redirect button', () => {
+      expect(wrapper.find('a.btn').text()).toBe('login')
+    })
+
+    it('links the redirect button to /login', () => {
+      expect(wrapper.find('a.btn').attributes('href')).toBe('/login')
+    })
+  })
+
+  describe('coming from /reset', () => {
+    beforeEach(() => {
+      wrapper = Wrapper(createMockObject('reset'))
+    })
+
+    it('renders the thanks text', () => {
+      expect(wrapper.find('p.h4').text()).toBe('site.thx.reset')
+    })
+
+    it('renders the thanks redirect button', () => {
+      expect(wrapper.find('a.btn').text()).toBe('login')
+    })
+
+    it('links the redirect button to /login', () => {
+      expect(wrapper.find('a.btn').attributes('href')).toBe('/login')
+    })
+  })
+
+  describe('coming from /register', () => {
+    beforeEach(() => {
+      wrapper = Wrapper(createMockObject('register'))
+    })
+
+    it('renders the thanks text', () => {
+      expect(wrapper.find('p.h4').text()).toBe('site.thx.register')
+    })
+
+    it('renders the thanks redirect button', () => {
+      expect(wrapper.find('a.btn').text()).toBe('site.login.signin')
+    })
+
+    it('links the redirect button to /login', () => {
+      expect(wrapper.find('a.btn').attributes('href')).toBe('/overview')
+    })
+  })
+})

frontend/test/testSetup.js

@@ -33,6 +33,9 @@ loadAllRules(i18nMock)
 
 global.localVue = createLocalVue()
 
+// switch of warnings from bootstrap vue
+global.process.env.BOOTSTRAP_VUE_NO_WARN = true
+
 global.localVue.use(BootstrapVue)
 global.localVue.use(Vuex)
 global.localVue.use(IconsPlugin)

frontend/yarn.lock

@@ -3750,9 +3750,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001181:
-  version "1.0.30001191"
+  version "1.0.30001251"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001191.tgz#bacb432b6701f690c8c5f7c680166b9a9f0843d9"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001251.tgz"
-  integrity sha512-xJJqzyd+7GCJXkcoBiQ1GuxEiOBCLQ0aVW9HMekifZsAVGdj5eJ4mFB9fEhSHipq9IOk/QXFJUiIr9lZT+EsGw==
+  integrity sha512-HOe1r+9VkU4TFmnU70z+r7OLmtR+/chB1rdcJUeQlAinjEeb0cKL20tlAtOagNZhbrtLnCvV19B4FmF1rgzl6A==
 
 capture-exit@^2.0.0:
   version "2.0.0"