Add warning for unsaved changes on tab close (#432)

* "Add warning for unsaved changes on tab close"

* Implement a beforeunload event listener in TransliterationForm, added tests

* Rewrite TransliterationForm, update & add tests

---------

Co-authored-by: Ilya Khait <[email protected]>

src/fragmentarium/ui/edition/TransliterationForm.test.tsx

@@ -1,31 +1,52 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { changeValueByLabel, submitFormByTestId } from 'test-support/utils'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { submitFormByTestId } from 'test-support/utils'
 import { Promise } from 'bluebird'
 
 import TransliterationForm from './TransliterationForm'
+import { act } from 'react-dom/test-utils'
+import userEvent from '@testing-library/user-event'
 
 const transliteration = 'line1\nline2'
 const notes = 'notes'
 const introduction = 'introduction'
 
+let addEventListenerSpy
 let updateEdition
 
-beforeEach(() => {
+beforeEach(async () => {
+  jest.restoreAllMocks()
+  addEventListenerSpy = jest.spyOn(window, 'addEventListener')
   updateEdition = jest.fn()
   updateEdition.mockReturnValue(Promise.resolve())
 
-  render(
-    <TransliterationForm
-      transliteration={transliteration}
-      notes={notes}
-      introduction={introduction}
-      updateEdition={updateEdition}
-    />
-  )
+  act(() => {
+    render(
+      <TransliterationForm
+        transliteration={transliteration}
+        notes={notes}
+        introduction={introduction}
+        updateEdition={updateEdition}
+      />
+    )
+  })
 })
 
-test('Submitting the form calls updateEdition', () => {
+it('Updates transliteration on change', async () => {
+  const newTransliteration = 'line1\nline2\nnew line'
+  const transliterationEditor = screen.getAllByRole('textbox')[0]
+  fireEvent.click(transliterationEditor)
+  await userEvent.click(transliterationEditor)
+  await userEvent.paste(transliterationEditor, newTransliteration)
+  act(() => {
+    fireEvent.change(transliterationEditor, {
+      target: { value: newTransliteration },
+    })
+  })
+  expect(transliterationEditor).toHaveValue(newTransliteration)
+})
+
+it('Submitting the form calls updateEdition', () => {
   submitFormByTestId(screen, 'transliteration-form')
   expect(updateEdition).toHaveBeenCalledWith(
     transliteration,
@@ -34,18 +55,31 @@ test('Submitting the form calls updateEdition', () => {
   )
 })
 
-xit('Updates transliteration on change', () => {
+it('Displays warning before closing when unsaved', async () => {
   const newTransliteration = 'line1\nline2\nnew line'
-  changeValueByLabel(screen, 'Transliteration', newTransliteration)
-
-  expect(screen.getByLabelText('Transliteration')).toHaveValue(
-    newTransliteration
+  window.confirm = jest.fn(() => true)
+  const beforeUnloadEvent = new Event('beforeunload', { cancelable: true })
+  const transliterationEditor = screen.getAllByRole('textbox')[0]
+  fireEvent.click(transliterationEditor)
+  await userEvent.click(transliterationEditor)
+  await userEvent.paste(transliterationEditor, newTransliteration)
+  act(() => {
+    fireEvent.change(transliterationEditor, {
+      target: { value: newTransliteration },
+    })
+  })
+  expect(transliterationEditor).toHaveValue(newTransliteration)
+  window.dispatchEvent(beforeUnloadEvent)
+  expect(addEventListenerSpy).toHaveBeenCalledWith(
+    'beforeunload',
+    expect.any(Function)
+  )
+  const mockEvent = { returnValue: '' }
+  const beforeUnloadHandler = addEventListenerSpy.mock.calls.find(
+    (call) => call[0] === 'beforeunload'
+  )[1]
+  beforeUnloadHandler(mockEvent)
+  expect(mockEvent.returnValue).toBe(
+    'You have unsaved changes. Are you sure you want to leave?'
   )
-})
-
-xit('Updates introduction on change', () => {
-  const newIntroduction = 'Introduction\n\nintroduction continued'
-  changeValueByLabel(screen, 'Introduction', newIntroduction)
-
-  expect(screen.getByLabelText('Introduction')).toHaveValue(newIntroduction)
 })