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')
})
})