Merge pull request #1754 from atlassian/html-dumping

alexreardon · web-flow · commit 293dbc1a3509 · 2020-02-20T13:55:32.000+11:00
Handling early &lt;body&gt; changes
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,18 +1,18 @@
 {
   "dist/react-beautiful-dnd.js": {
-    "bundled": 364318,
-    "minified": 133393,
-    "gzipped": 39449
+    "bundled": 364497,
+    "minified": 133470,
+    "gzipped": 39473
   },
   "dist/react-beautiful-dnd.min.js": {
-    "bundled": 307797,
-    "minified": 109292,
-    "gzipped": 31782
+    "bundled": 307976,
+    "minified": 109369,
+    "gzipped": 31806
   },
   "dist/react-beautiful-dnd.esm.js": {
-    "bundled": 240708,
-    "minified": 125264,
-    "gzipped": 32618,
+    "bundled": 240875,
+    "minified": 125341,
+    "gzipped": 32643,
     "treeshaked": {
       "rollup": {
         "code": 21121,
diff --git a/src/view/use-announcer/use-announcer.js b/src/view/use-announcer/use-announcer.js
@@ -41,10 +41,10 @@ export default function useAnnouncer(contextId: ContextId): Announce {
         // unmounting after a timeout to let any announcements
         // during a mount be published
         setTimeout(function remove() {
-          // checking if element exists before remove to prevent errors
-          if (getBodyElement().contains(el)) {
-            // not clearing the ref as it might have been set by a new effect
-            getBodyElement().removeChild(el);
+          // checking if element exists as the body might have been changed by things like 'turbolinks'
+          const body: HTMLBodyElement = getBodyElement();
+          if (body.contains(el)) {
+            body.removeChild(el);
           }
           // if el was the current ref - clear it so that
           // we can get a warning if announce is called
diff --git a/src/view/use-hidden-text-element/use-hidden-text-element.js b/src/view/use-hidden-text-element/use-hidden-text-element.js
@@ -46,8 +46,11 @@ export default function useHiddenTextElement({
       getBodyElement().appendChild(el);
 
       return function unmount() {
-        // Remove from body
-        getBodyElement().removeChild(el);
+        // checking if element exists as the body might have been changed by things like 'turbolinks'
+        const body: HTMLBodyElement = getBodyElement();
+        if (body.contains(el)) {
+          body.removeChild(el);
+        }
       };
     },
     [id, text],
diff --git a/test/unit/integration/body-removal-before-unmount.spec.js b/test/unit/integration/body-removal-before-unmount.spec.js
@@ -0,0 +1,37 @@
+// @flow
+import React from 'react';
+import { render } from '@testing-library/react';
+import { isDragging } from './util/helpers';
+import App from './util/app';
+import { forEachSensor, simpleLift, type Control } from './util/controls';
+import getBodyElement from '../../../src/view/get-body-element';
+
+it('should have any errors when body is changed just before unmount', () => {
+  jest.useFakeTimers();
+  const { unmount } = render(<App />);
+
+  expect(() => {
+    getBodyElement().innerHTML = '';
+    unmount();
+    jest.runOnlyPendingTimers();
+  }).not.toThrow();
+
+  jest.useRealTimers();
+});
+
+forEachSensor((control: Control) => {
+  it('should have any errors when body is changed just before unmount: mid drag', () => {
+    const { unmount, getByText } = render(<App />);
+    const handle: HTMLElement = getByText('item: 0');
+
+    // mid drag
+    simpleLift(control, handle);
+    expect(isDragging(handle)).toEqual(true);
+
+    expect(() => {
+      getBodyElement().innerHTML = '';
+      unmount();
+      jest.runOnlyPendingTimers();
+    }).not.toThrow();
+  });
+});
diff --git a/test/unit/integration/no-logging-when-unmounting-mid-drag.spec.js b/test/unit/integration/no-logging-when-unmounting-mid-drag.spec.js
diff --git a/test/unit/view/announcer.spec.js b/test/unit/view/announcer.spec.js
@@ -59,26 +59,6 @@ it('should remove the element when unmounting after a timeout', () => {
   expect(getElement('5')).not.toBeTruthy();
 });
 
-it('should not remove the element when unmounting after a timeout if the element does not exist', () => {
-  const { unmount } = render(
-    <WithAnnouncer contextId="5">{getMock()}</WithAnnouncer>,
-  );
-
-  const doc = new DOMParser().parseFromString(
-    '<!doctype html><title>wat</title>',
-    'text/html',
-  );
-  // $FlowFixMe
-  document.write(doc);
-  unmount();
-  expect(() => jest.runOnlyPendingTimers()).not.toThrow(
-    // $FlowFixMe
-    new DOMException(
-      "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.",
-    ),
-  );
-});
-
 it('should set the text content of the announcement element', () => {
   // arrange
   const mock = getMock();
