From 9d4c7da97ea570999b33dcb7c20defb5e7442f95 Mon Sep 17 00:00:00 2001 From: ismay Date: Wed, 15 Nov 2023 16:04:35 +0100 Subject: [PATCH] fix: use new endpoint to toggle tasks --- package.json | 3 +- src/components/Switches/ToggleJobSwitch.js | 32 ++++---- .../Switches/ToggleJobSwitch.test.js | 73 +++++++++++++------ yarn.lock | 5 ++ 4 files changed, 71 insertions(+), 42 deletions(-) diff --git a/package.json b/package.json index 48f05a6da..2c714168c 100644 --- a/package.json +++ b/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": [ diff --git a/src/components/Switches/ToggleJobSwitch.js b/src/components/Switches/ToggleJobSwitch.js index c9751a2f1..93f3298b6 100644 --- a/src/components/Switches/ToggleJobSwitch.js +++ b/src/components/Switches/ToggleJobSwitch.js @@ -1,25 +1,23 @@ -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 ( { disabled={disabled || loading} checked={checked} onChange={() => { - toggleJob({ id, enabled }).then(refetch) + toggleJob().then(refetch) }} ariaLabel={i18n.t('Toggle job')} /> diff --git a/src/components/Switches/ToggleJobSwitch.test.js b/src/components/Switches/ToggleJobSwitch.test.js index 06d1c596c..1de96a98c 100644 --- a/src/components/Switches/ToggleJobSwitch.test.js +++ b/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('', () => { it('renders without errors', () => { shallow( @@ -23,33 +16,65 @@ describe('', () => { ) }) - 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() + const data = { 'jobConfigurations/id/enable': answerSpy } + const wrapper = mount(, { + 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(, { + 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() }) }) diff --git a/yarn.lock b/yarn.lock index ec95fdecc..9636cc0b6 100644 --- a/yarn.lock +++ b/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== + wait-on@5.3.0: version "5.3.0" resolved "https://registry.yarnpkg.com/wait-on/-/wait-on-5.3.0.tgz#584e17d4b3fe7b46ac2b9f8e5e102c005c2776c7"