Refactor tests to pull out the mountMockedProvider functions

- Create a separate file to contain the mountMockedProvider function which is re-used in a number of tests, making it generic Co-authored-by: Riccardo Giomi <contact@riccardogiomi.com>
AgileVentures · Apr 19, 2020 · 122fafb · 122fafb
1 parent 9d1d7de
commit 122fafb
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 152 deletions.
diff --git a/src/containers/Causes/CampaignsEndingSoon/CampaignEndingSoon.test.js b/src/containers/Causes/CampaignsEndingSoon/CampaignEndingSoon.test.js
@@ -1,36 +1,8 @@
 import React from 'react'
-import { mount } from 'enzyme'
-import { MockedProvider } from '@apollo/react-testing'
-import { act } from 'react-dom/test-utils'
-import { MemoryRouter as Router } from 'react-router-dom'
 import CampaignsEndingSoon, {
   GET_CAUSES_ENDING_SOON_QUERY
 } from './CampaignsEndingSoon'
-
-async function mountMockedProvider(result) {
-  const mocks = [
-    {
-      request: {
-        query: GET_CAUSES_ENDING_SOON_QUERY,
-        variables: { scope: 'ending_soon' }
-      },
-      result
-    }
-  ]
-  jest.useFakeTimers()
-  const component = mount(
-    <MockedProvider mocks={mocks} addTypename={false}>
-      <Router>
-        <CampaignsEndingSoon />
-      </Router>
-    </MockedProvider>
-  )
-  act(() => {
-    jest.runAllTimers()
-  })
-  component.update()
-  return component
-}
+import { mountMockedProvider } from '../../support/tests/mountMockedProvider'
 
 describe('<CampaignsEndingSoon />', () => {
   let campaignsEndingSoonWrapper, data
@@ -55,7 +27,7 @@ describe('<CampaignsEndingSoon />', () => {
         ]
       }
     }
-    campaignsEndingSoonWrapper = await mountMockedProvider(data)
+    campaignsEndingSoonWrapper = await mountMockedProvider(data, GET_CAUSES_ENDING_SOON_QUERY, <CampaignsEndingSoon />, { scope: 'ending_soon' })
   })
 
   describe('success', () => {
@@ -102,7 +74,7 @@ describe('<CampaignsEndingSoon />', () => {
     describe('empty response', () => {
       beforeEach(async() => {
         data = { 'data': { 'causes': [] } }
-        campaignsEndingSoonWrapper = await mountMockedProvider(data)
+        campaignsEndingSoonWrapper = await mountMockedProvider(data, GET_CAUSES_ENDING_SOON_QUERY, <CampaignsEndingSoon />, { scope: 'ending_soon' })
       })
 
       it('displays 2 EmptyCard components', () => {
@@ -115,7 +87,7 @@ describe('<CampaignsEndingSoon />', () => {
     let result
     beforeEach(async () => {
       result = { error: new Error('aw shucks') }
-      campaignsEndingSoonWrapper = await mountMockedProvider(result)
+      campaignsEndingSoonWrapper = await mountMockedProvider(result, GET_CAUSES_ENDING_SOON_QUERY, <CampaignsEndingSoon />)
     })
     it('displays error div', () => {
       expect(campaignsEndingSoonWrapper.find('div').text()).toEqual('Error')

diff --git a/src/containers/Causes/TrendingCauses/TrendingCauses.test.js b/src/containers/Causes/TrendingCauses/TrendingCauses.test.js
@@ -1,37 +1,7 @@
 import React from 'react'
-import { mount } from 'enzyme'
-import { MockedProvider } from '@apollo/react-testing'
-import { act } from 'react-dom/test-utils'
-import { MemoryRouter as Router } from 'react-router-dom'
 import TrendingCauses, { GET_TRENDING_CAUSES_QUERY } from './TrendingCauses'
+import { mountMockedProvider } from '../../support/tests/mountMockedProvider'
 
-async function mountMockedProvider(result) {
-  const mocks = [
-    {
-      request: {
-        query: GET_TRENDING_CAUSES_QUERY,
-        variables: { scope: 'trending' }
-      },
-      result
-    }
-  ]
-
-  jest.useFakeTimers()
-  const component = mount(
-    <MockedProvider
-      mocks={mocks}
-      addTypename={false}
-    >
-      <Router>
-        <TrendingCauses />
-      </Router>
-    </MockedProvider>)
-  act(() => {
-    jest.runAllTimers()
-  })
-  component.update()
-  return component
-}
 describe('<TrendingCauses />', () => {
   let trendingCausesWrapper, result
 
@@ -45,7 +15,7 @@ describe('<TrendingCauses />', () => {
                         ]
     }
     }
-    trendingCausesWrapper = await mountMockedProvider(result)
+    trendingCausesWrapper = await mountMockedProvider(result, GET_TRENDING_CAUSES_QUERY, <TrendingCauses />, { scope: 'trending' })
   })
 
   describe('success', () => {
@@ -73,7 +43,7 @@ describe('<TrendingCauses />', () => {
     describe('empty response', () => {
       beforeEach(async() => {
         result = { 'data': { 'causes': [] } }
-        trendingCausesWrapper = await mountMockedProvider(result)
+        trendingCausesWrapper = await mountMockedProvider(result, GET_TRENDING_CAUSES_QUERY, <TrendingCauses />, { scope: 'trending' })
       })
 
       it('displays 2 EmptyCard components', () => {
@@ -85,7 +55,7 @@ describe('<TrendingCauses />', () => {
   describe('error', () => {
     beforeEach(async () => {
       result = { error: new Error('aw shucks') }
-      trendingCausesWrapper = await mountMockedProvider(result)
+      trendingCausesWrapper = await mountMockedProvider(result, GET_TRENDING_CAUSES_QUERY, <TrendingCauses />, { scope: 'trending' })
     })
     it('displays error div', async() => {
       expect(trendingCausesWrapper.find('div').text()).toEqual('Error')

diff --git a/src/containers/Performances/TrendingPerformances/TrendingPerformances.test.js b/src/containers/Performances/TrendingPerformances/TrendingPerformances.test.js
@@ -1,35 +1,8 @@
 import React from 'react'
-import { mount } from 'enzyme'
-import { MockedProvider } from '@apollo/react-testing'
-import { act } from 'react-dom/test-utils'
-import { MemoryRouter as Router } from 'react-router-dom'
 import TrendingPerformances, {
   GET_TRENDING_PERFORMANCES_QUERY
 } from './TrendingPerformances'
-
-async function mountMockedProvider(result) {
-  const mocks = [
-    {
-      request: {
-        query: GET_TRENDING_PERFORMANCES_QUERY
-      },
-      result
-    }
-  ]
-  jest.useFakeTimers()
-  const component = mount(
-    <MockedProvider mocks={mocks} addTypename={false}>
-      <Router>
-        <TrendingPerformances />
-      </Router>
-    </MockedProvider>
-  )
-  act(() => {
-    jest.runAllTimers()
-  })
-  component.update()
-  return component
-}
+import { mountMockedProvider } from '../../support/tests/mountMockedProvider'
 
 describe('<TrendingPerformances />', () => {
   let trendingPerformancesWrapper, data
@@ -59,7 +32,7 @@ describe('<TrendingPerformances />', () => {
         ]
       }
     }
-    trendingPerformancesWrapper = await mountMockedProvider(data)
+    trendingPerformancesWrapper = await mountMockedProvider(data, GET_TRENDING_PERFORMANCES_QUERY, <TrendingPerformances />)
   })
   describe('success', () => {
     it("has 'Trending Performances' title", () => {
@@ -95,7 +68,7 @@ describe('<TrendingPerformances />', () => {
               performances: []
             }
           }
-          trendingPerformancesWrapper = await mountMockedProvider(data)
+          trendingPerformancesWrapper = await mountMockedProvider(data, GET_TRENDING_PERFORMANCES_QUERY, <TrendingPerformances />)
         })
 
         it('has 1 Empty cards', () => {
@@ -109,7 +82,7 @@ describe('<TrendingPerformances />', () => {
     let result
     beforeEach(async () => {
       result = { error: new Error('aw shucks') }
-      trendingPerformancesWrapper = await mountMockedProvider(result)
+      trendingPerformancesWrapper = await mountMockedProvider(result, GET_TRENDING_PERFORMANCES_QUERY, <TrendingPerformances />)
     })
     it('displays error div', () => {
       expect(trendingPerformancesWrapper.find('div').text()).toEqual('Error')

diff --git a/src/containers/Users/Create/UserCreate.test.js b/src/containers/Users/Create/UserCreate.test.js
@@ -1,32 +1,7 @@
 import React from 'react'
-import { mount } from 'enzyme'
-import { MockedProvider } from '@apollo/react-testing'
-import { act } from 'react-dom/test-utils'
-import { MemoryRouter as Router } from 'react-router-dom'
 import UserCreate, { SIGNUP_MUTATION } from './UserCreate'
+import { mountMockedProvider } from '../../support/tests/mountMockedProvider'
 
-async function mountMockedProvider(result) {
-  const mocks = [
-    {
-      request: {
-        query: SIGNUP_MUTATION },
-      result
-    }
-  ]
-  jest.useFakeTimers()
-  const component = mount(
-    <MockedProvider mocks={mocks} addTypename={false}>
-      <Router>
-        <UserCreate />
-      </Router>
-    </MockedProvider>
-  )
-  act(() => {
-    jest.runAllTimers()
-  })
-  component.update()
-  return component
-}
 describe('<UserCreate />', () => {
   let result, userCreateWrapper
 
@@ -40,7 +15,7 @@ describe('<UserCreate />', () => {
         }
       }
     }
-    userCreateWrapper = await mountMockedProvider(result)
+    userCreateWrapper = await mountMockedProvider(result, SIGNUP_MUTATION, <UserCreate />)
   })
 
   it('has form component to submit the form', () => {

diff --git a/src/containers/Users/SignIn/UserSignIn.test.js b/src/containers/Users/SignIn/UserSignIn.test.js
@@ -1,33 +1,7 @@
 import React from 'react'
-import { mount } from 'enzyme'
-import { MockedProvider } from '@apollo/react-testing'
-import { act } from 'react-dom/test-utils'
-import { MemoryRouter as Router } from 'react-router-dom'
 import UserSignIn, { SIGNIN_MUTATION } from './UserSignIn'
+import { mountMockedProvider } from '../../support/tests/mountMockedProvider'
 
-async function mountMockedProvider(result) {
-  const mocks = [
-    {
-      request: {
-        query: SIGNIN_MUTATION
-      },
-      result
-    }
-  ]
-  jest.useFakeTimers()
-  const component = mount(
-    <MockedProvider mocks={mocks} addTypename={false}>
-      <Router>
-        <UserSignIn />
-      </Router>
-    </MockedProvider>
-  )
-  act(() => {
-    jest.runAllTimers()
-  })
-  component.update()
-  return component
-}
 describe('<UserSignIn />', () => {
   let result, userSignInWrapper
 
@@ -40,7 +14,7 @@ describe('<UserSignIn />', () => {
         }
       }
     }
-    userSignInWrapper = await mountMockedProvider(result)
+    userSignInWrapper = await mountMockedProvider(result, SIGNIN_MUTATION, <UserSignIn />)
   })
 
   it('has form component to sign in to Sing for Needs', () => {

diff --git a/src/containers/support/tests/mountMockedProvider.js b/src/containers/support/tests/mountMockedProvider.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { MockedProvider } from '@apollo/react-testing'
+import { act } from 'react-dom/test-utils'
+import { MemoryRouter as Router } from 'react-router-dom'
+
+export async function mountMockedProvider(result, query, currentComponent, variables) {
+  const request = variables ? { query, variables } : { query }
+  const mocks = [
+    {
+      request,
+      result
+    }
+  ]
+
+  jest.useFakeTimers()
+  const component = mount(
+    <MockedProvider
+      mocks={mocks}
+      addTypename={false}
+    >
+      <Router>
+        { currentComponent }
+      </Router>
+    </MockedProvider>)
+  act(() => {
+    jest.runAllTimers()
+  })
+  component.update()
+  return component
+}