diff --git a/services/web/frontend/js/features/dictionary/components/dictionary-modal-content.tsx b/services/web/frontend/js/features/dictionary/components/dictionary-modal-content.tsx index cd0af3cd77..c68e96b5af 100644 --- a/services/web/frontend/js/features/dictionary/components/dictionary-modal-content.tsx +++ b/services/web/frontend/js/features/dictionary/components/dictionary-modal-content.tsx @@ -23,14 +23,17 @@ export default function DictionaryModalContent({ const handleRemove = useCallback( word => { - ignoredWords.remove(word) runAsync( postJSON('/spelling/unlearn', { body: { word, }, }) - ).catch(debugConsole.error) + ) + .then(() => { + ignoredWords.remove(word) + }) + .catch(debugConsole.error) }, [runAsync] ) diff --git a/services/web/test/frontend/features/dictionary/components/dictionary-modal-content.test.jsx b/services/web/test/frontend/features/dictionary/components/dictionary-modal-content.test.jsx index 072357dd83..11b549fdf0 100644 --- a/services/web/test/frontend/features/dictionary/components/dictionary-modal-content.test.jsx +++ b/services/web/test/frontend/features/dictionary/components/dictionary-modal-content.test.jsx @@ -1,4 +1,4 @@ -import { screen, fireEvent } from '@testing-library/react' +import { screen, fireEvent, waitFor } from '@testing-library/react' import { expect } from 'chai' import fetchMock from 'fetch-mock' import DictionaryModal from '../../../../../frontend/js/features/dictionary/components/dictionary-modal' @@ -8,6 +8,7 @@ function setLearnedWords(words) { window.metaAttributesCache.set('ol-learnedWords', words) window.dispatchEvent(new CustomEvent('learnedWords:doreset')) } + describe('', function () { beforeEach(function () { window.metaAttributesCache = window.metaAttributesCache || new Map() @@ -16,6 +17,7 @@ describe('', function () { afterEach(function () { window.metaAttributesCache = new Map() fetchMock.reset() + window.dispatchEvent(new CustomEvent('learnedWords:doreset')) }) it('list words', async function () { @@ -35,12 +37,14 @@ describe('', function () { fetchMock.post('/spelling/unlearn', 200) setLearnedWords(['Foo', 'bar']) renderWithEditorContext( {}} />) + screen.getByText('Foo') screen.getByText('bar') const [firstButton] = screen.getAllByRole('button', { name: 'Remove from dictionary', }) fireEvent.click(firstButton) - expect(screen.queryByText('bar')).to.not.exist + await fetchMock.flush() + await waitFor(() => expect(screen.queryByText('bar')).to.not.exist) screen.getByText('Foo') }) @@ -48,12 +52,13 @@ describe('', function () { fetchMock.post('/spelling/unlearn', 500) setLearnedWords(['foo']) renderWithEditorContext( {}} />) + screen.getByText('foo') const [firstButton] = screen.getAllByRole('button', { name: 'Remove from dictionary', }) fireEvent.click(firstButton) await fetchMock.flush() screen.getByText('Sorry, something went wrong') - screen.getByText('Your custom dictionary is empty.') + screen.getByText('foo') }) })