feat: #1325 Update webhook edit + create modal tests

packages/marketplace/src/components/pages/developer-webhooks/developer-webhooks.tsx

@@ -27,9 +27,9 @@ import {
   selectWebhookEditModalType,
 } from '@/selector/wehooks'
 import FormikAutoSave from '@/components/hocs/formik-auto-save'
-import WebhookEditModal from '@/components/ui/webhook-edit-modal'
+import WebhookEditModal from '@/components/ui/developer-webhooks/webhook-edit-modal'
 import { selectDeveloper } from '@/selector/developer'
-import WebhookTestModal from '@/components/ui/webhook-test-modal'
+import WebhookTestModal from '@/components/ui/developer-webhooks/webhook-test-modal'
 import styles from '@/styles/elements/link.scss?mod'
 import linkStyles from '@/styles/elements/link.scss?mod'
 import Routes from '@/constants/routes'

packages/marketplace/src/components/ui/developer-webhooks/__test__/__snapshots__/webhook-edit-modal.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WebhookEditModal should match a snapshot 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
+  <Memo()
+    afterClose={[MockFunction]}
+    appId=""
+    closeModal={[MockFunction]}
+    isUpdate={true}
+    visible={true}
+    webhookId="testWebhookId"
+  >
+    <Component
+      afterClose={[MockFunction]}
+      renderChildren={true}
+      visible={true}
+    />
+  </Memo()>
+</Provider>
+`;

packages/marketplace/src/components/ui/__tests__/webhook-edit-modal.tsx → packages/marketplace/src/components/ui/developer-webhooks/__test__/webhook-edit-modal.test.tsx

@@ -1,111 +1,93 @@
 import * as React from 'react'
-import { shallow } from 'enzyme'
+import * as ReactRedux from 'react-redux'
+import configureStore from 'redux-mock-store'
+import { mount } from 'enzyme'
+import appState from '@/reducers/__stubs__/app-state'
 import WebhookCreateModal, {
-  WebhookModalInner,
   WebhookEditProps,
   onEdit,
   onCreate,
-  WebhookModalInnerProps,
-  mapDispatchToProps,
   generateCustomerOptions,
   generateTopicOptions,
   FormValuesType,
   validateURL,
 } from '../webhook-edit-modal'
-import { webhookItemDataStub } from '@/sagas/__stubs__/webhook-edit'
 import { TopicItem, CustomerItem } from '@/reducers/webhook-edit-modal'
+import { editWebhook, createWebhook } from '@/actions/webhook-edit-modal'
 
-const createProps: WebhookEditProps = {
+const mockProps: WebhookEditProps = {
   appId: '',
   visible: true,
-}
-const editProps: WebhookEditProps = {
-  appId: '',
-  visible: true,
-  isUpdate: true,
-}
-
-const innerModalProps: WebhookModalInnerProps = {
-  appId: '',
-  topics: [],
-  customers: [],
-  loading: false,
   isUpdate: true,
+  afterClose: jest.fn(),
   closeModal: jest.fn(),
-  requestWebhookSubcriptionData: jest.fn(),
-  requestWebhookData: jest.fn(),
-  createWebhook: jest.fn(),
-  editWebhook: jest.fn(),
-  deleteWebhook: jest.fn(),
-  webhookDataClear: jest.fn(),
-  webhookData: webhookItemDataStub,
+  webhookId: 'testWebhookId',
 }
 
 describe('WebhookEditModal', () => {
+  let store
+  let spyDispatch
+  beforeEach(() => {
+    /* mocking store */
+    const mockStore = configureStore()
+    store = mockStore(appState)
+    spyDispatch = jest.spyOn(ReactRedux, 'useDispatch').mockImplementation(() => store.dispatch)
+  })
   it('should match a snapshot', () => {
-    expect(shallow(<WebhookCreateModal {...createProps} />)).toMatchSnapshot()
-    expect(shallow(<WebhookCreateModal {...editProps} />)).toMatchSnapshot()
-    expect(shallow(<WebhookCreateModal {...createProps} visible={false} />)).toMatchSnapshot()
-    expect(shallow(<WebhookCreateModal {...editProps} visible={false} />)).toMatchSnapshot()
-    expect(shallow(<WebhookModalInner {...innerModalProps} />)).toMatchSnapshot()
+    expect(
+      mount(
+        <ReactRedux.Provider store={store}>
+          <WebhookCreateModal {...mockProps} />
+        </ReactRedux.Provider>,
+      ),
+    ).toMatchSnapshot()
   })
 
   it('should call editWebhook', () => {
-    const editWebhook = jest.fn()
     const webhookId = ''
     const appId = ''
-    const fn = onEdit(editWebhook, webhookId, appId)
+    const fn = onEdit(spyDispatch, webhookId, appId)
     const values: FormValuesType = {
       url: '',
       topicIds: [],
       customerIds: [],
       active: false,
     }
     fn(values)
-    expect(editWebhook).toBeCalled()
+    expect(spyDispatch).toBeCalledWith(
+      editWebhook({
+        applicationId: appId,
+        webhookId,
+        url: values.url,
+        description: '',
+        topicIds: values.topicIds,
+        customerIds: values.customerIds,
+        active: values.active,
+      }),
+    )
   })
   it('should call createWebhook', () => {
-    const createWebhook = jest.fn()
-    const webhookId = ''
-    const fn = onCreate(createWebhook, webhookId)
+    const appId = ''
+    const fn = onCreate(spyDispatch, appId)
     const values = {
       url: '',
       topicIds: [],
       customerIds: [],
       active: false,
     }
     fn(values)
-    expect(createWebhook).toBeCalled()
-  })
-  describe('mapDispatchToProps', () => {
-    it('should run correctly', () => {
-      const mockDispatch = jest.fn()
-      const {
-        requestWebhookSubcriptionData,
-        createWebhook,
-        editWebhook,
-        requestWebhookData,
-        webhookDataClear,
-        deleteWebhook,
-      } = mapDispatchToProps(mockDispatch)
-      requestWebhookSubcriptionData('1')
-      requestWebhookData('1')
-      const values = {
-        applicationId: '',
-        url: '',
+    expect(spyDispatch).toBeCalledWith(
+      createWebhook({
+        applicationId: appId,
+        url: values.url,
         description: '',
-        topicIds: [],
-        customerIds: [],
-        active: false,
-        webhookId: '',
-      }
-      createWebhook(values)
-      editWebhook(values)
-      webhookDataClear()
-      deleteWebhook(values)
-      expect(mockDispatch).toBeCalled()
-    })
+        topicIds: values.topicIds,
+        customerIds: values.customerIds,
+        active: values.active,
+      }),
+    )
   })
+
   it('should return TopicItem Options', () => {
     const data: TopicItem[] = [
       {