finalize unit tests for federation visualization page

admin/src/pages/FederationVisualize.spec.js

@@ -3,6 +3,7 @@ import FederationVisualize from './FederationVisualize'
 import VueApollo from 'vue-apollo'
 import { createMockClient } from 'mock-apollo-client'
 import { getCommunities } from '@/graphql/getCommunities'
+import { toastErrorSpy } from '../../test/testSetup'
 
 const mockClient = createMockClient()
 const apolloProvider = new VueApollo({
@@ -15,7 +16,6 @@ localVue.use(VueApollo)
 
 const mocks = {
   $t: (key) => key,
-  // $t: jest.fn((t) => t),
   $d: jest.fn((d) => d),
   $i18n: {
     locale: 'en',
@@ -87,6 +87,17 @@ describe('FederationVisualize', () => {
       wrapper = Wrapper()
     })
 
+    describe('server error', () => {
+      it('toast error', () => {
+        expect(toastErrorSpy).toBeCalledWith('Ouch!')
+      })
+    })
+
+    describe('sever success', () => {
+      it('sends query to Apollo when created', () => {
+        expect(getCommunitiesMock).toBeCalled()
+      })
+
       it('has a DIV element with the class "federation-visualize"', () => {
         expect(wrapper.find('div.federation-visualize').exists()).toBe(true)
       })
@@ -94,5 +105,21 @@ describe('FederationVisualize', () => {
       it('has a refresh button', () => {
         expect(wrapper.find('[data-test="federation-communities-refresh-btn"]').exists()).toBe(true)
       })
+
+      it('renders 3 community list items', () => {
+        expect(wrapper.findAll('.list-group-item').length).toBe(3)
+      })
+
+      describe('cklicking the refresh button', () => {
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          await wrapper.find('[data-test="federation-communities-refresh-btn"]').trigger('click')
+        })
+
+        it('calls the API', async () => {
+          expect(getCommunitiesMock).toBeCalled()
+        })
+      })
+    })
   })
 })