import { screen, fireEvent, waitForElementToBeRemoved, } from '@testing-library/react' import fetchMock from 'fetch-mock' import DictionaryModal from '../../../../../frontend/js/features/dictionary/components/dictionary-modal' import { renderWithEditorContext } from '../../../helpers/render-with-context' function setLearnedWords(words) { window.metaAttributesCache.set('ol-learnedWords', words) window.dispatchEvent(new CustomEvent('learnedWords:doreset')) } describe('', function () { afterEach(function () { fetchMock.reset() setLearnedWords([]) }) it('list words', async function () { setLearnedWords(['foo', 'bar']) renderWithEditorContext( {}} />) screen.getByText('foo') screen.getByText('bar') }) it('shows message when empty', async function () { setLearnedWords([]) renderWithEditorContext( {}} />) screen.getByText('Your custom dictionary is empty.') }) it('removes words', async 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) await waitForElementToBeRemoved(() => screen.getByText('bar')) screen.getByText('Foo') }) it('handles errors', async 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('foo') }) })