fix: use new endpoint to toggle tasks

cypress/integration/list-route/job-toggle/index.js

@@ -24,7 +24,10 @@ Given('the job toggle switch is off', () => {
 })
 
 When('the user clicks the enabled job toggle switch', () => {
-    cy.intercept({ pathname: /lnWRZN67iDU$/ }, { statusCode: 204 })
+    cy.intercept(
+        { pathname: /jobConfigurations\/lnWRZN67iDU\/disable$/ },
+        { statusCode: 204 }
+    )
     cy.intercept(
         { pathname: /scheduler$/ },
         { fixture: 'list-route/disabled-user-job' }
@@ -34,7 +37,10 @@ When('the user clicks the enabled job toggle switch', () => {
 })
 
 When('the user clicks the disabled job toggle switch', () => {
-    cy.intercept({ pathname: /lnWRZN67iDU$/ }, { statusCode: 204 })
+    cy.intercept(
+        { pathname: /jobConfigurations\/lnWRZN67iDU\/enable$/ },
+        { statusCode: 204 }
+    )
     cy.intercept(
         { pathname: /scheduler$/ },
         { fixture: 'list-route/enabled-user-job' }

package.json

@@ -52,7 +52,8 @@
         "stylelint": "^13.13.1",
         "stylelint-config-prettier": "^8.0.2",
         "stylelint-config-standard": "^22.0.0",
-        "stylelint-no-unsupported-browser-features": "^5.0.1"
+        "stylelint-no-unsupported-browser-features": "^5.0.1",
+        "wait-for-expect": "^3.0.2"
     },
     "jest": {
         "setupFilesAfterEnv": [

src/components/Switches/ToggleJobSwitch.js

@@ -1,33 +1,31 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { useDataMutation } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { Switch } from '@dhis2/ui'
 
-const mutation = {
-    resource: 'jobConfigurations',
-    id: ({ id }) => id,
-    type: 'json-patch',
-    data: ({ enabled }) => [
-        {
-            op: 'replace',
-            path: '/enabled',
-            value: enabled,
-        },
-    ],
-}
-
 const ToggleJobSwitch = ({ id, checked, disabled, refetch }) => {
-    const [toggleJob, { loading }] = useDataMutation(mutation)
-    const enabled = !checked
+    const [disableQuery] = useState({
+        resource: `jobConfigurations/${id}/disable`,
+        type: 'create',
+    })
+    const [enableQuery] = useState({
+        resource: `jobConfigurations/${id}/enable`,
+        type: 'create',
+    })
+    const [disableJob, disableMutation] = useDataMutation(disableQuery)
+    const [enableJob, enableMutation] = useDataMutation(enableQuery)
+
+    const toggleJob = checked ? disableJob : enableJob
+    const loading = disableMutation.loading || enableMutation.loading
 
     return (
         <Switch
             name={`toggle-job-${id}`}
             disabled={disabled || loading}
             checked={checked}
             onChange={() => {
-                toggleJob({ id, enabled }).then(refetch)
+                toggleJob().then(refetch)
             }}
             ariaLabel={i18n.t('Toggle job')}
         />

src/components/Switches/ToggleJobSwitch.test.js

@@ -1,16 +1,9 @@
 import React from 'react'
+import waitForExpect from 'wait-for-expect'
 import { shallow, mount } from 'enzyme'
-import { useDataMutation } from '@dhis2/app-runtime'
+import { CustomDataProvider } from '@dhis2/app-runtime'
 import ToggleJobSwitch from './ToggleJobSwitch'
 
-jest.mock('@dhis2/app-runtime', () => ({
-    useDataMutation: jest.fn(() => [() => {}, {}]),
-}))
-
-afterEach(() => {
-    jest.resetAllMocks()
-})
-
 describe('<ToggleJobSwitch>', () => {
     it('renders without errors', () => {
         shallow(
@@ -23,33 +16,65 @@ describe('<ToggleJobSwitch>', () => {
         )
     })
 
-    it('calls toggleJob and refetches when toggle is clicked', async () => {
-        const checked = false
-        const toggle = Promise.resolve()
-        const toggleJobSpy = jest.fn(() => toggle)
-        const refetchSpy = jest.fn(() => {})
+    it('enables an inactive job and refetches when toggle is clicked', async () => {
+        const answerSpy = jest.fn(() => 'response')
+        const refetchSpy = jest.fn(() => Promise.resolve())
+
         const props = {
             id: 'id',
-            checked,
+            checked: false,
             disabled: false,
             refetch: refetchSpy,
         }
-
-        useDataMutation.mockImplementation(() => [toggleJobSpy, {}])
-
-        const wrapper = mount(<ToggleJobSwitch {...props} />)
+        const data = { 'jobConfigurations/id/enable': answerSpy }
+        const wrapper = mount(<ToggleJobSwitch {...props} />, {
+            wrappingComponent: CustomDataProvider,
+            wrappingComponentProps: { data },
+        })
 
         wrapper
             .find('input')
             .find({ name: 'toggle-job-id' })
-            .simulate('change', { target: { checked: !checked } })
+            .simulate('change', { target: { checked: !props.checked } })
+
+        await waitForExpect(() => {
+            expect(answerSpy).toHaveBeenCalledWith(
+                'create',
+                expect.anything(),
+                expect.anything()
+            )
+            expect(refetchSpy).toHaveBeenCalled()
+        })
+    })
 
-        await toggle
+    it('disables an active job and refetches when toggle is clicked', async () => {
+        const answerSpy = jest.fn(() => 'response')
+        const refetchSpy = jest.fn(() => Promise.resolve())
 
-        expect(toggleJobSpy).toHaveBeenCalledWith({
+        const props = {
             id: 'id',
-            enabled: !checked,
+            checked: true,
+            disabled: false,
+            refetch: refetchSpy,
+        }
+        const data = { 'jobConfigurations/id/disable': answerSpy }
+        const wrapper = mount(<ToggleJobSwitch {...props} />, {
+            wrappingComponent: CustomDataProvider,
+            wrappingComponentProps: { data },
+        })
+
+        wrapper
+            .find('input')
+            .find({ name: 'toggle-job-id' })
+            .simulate('change', { target: { checked: !props.checked } })
+
+        await waitForExpect(() => {
+            expect(answerSpy).toHaveBeenCalledWith(
+                'create',
+                expect.anything(),
+                expect.anything()
+            )
+            expect(refetchSpy).toHaveBeenCalled()
         })
-        expect(refetchSpy).toHaveBeenCalled()
     })
 })

yarn.lock

@@ -16152,6 +16152,11 @@ w3c-xmlserializer@^2.0.0:
   dependencies:
     xml-name-validator "^3.0.0"
 
+wait-for-expect@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-3.0.2.tgz#d2f14b2f7b778c9b82144109c8fa89ceaadaa463"
+  integrity sha512-cfS1+DZxuav1aBYbaO/kE06EOS8yRw7qOFoD3XtjTkYvCvh3zUvNST8DXK/nPaeqIzIv3P3kL3lRJn8iwOiSag==
+
 [email protected]:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/wait-on/-/wait-on-5.3.0.tgz#584e17d4b3fe7b46ac2b9f8e5e102c005c2776c7"