test: convert resize observer loop error to warning (#679)

* feat(test-helper): add mocha util converting resize observer loop error to warning

* test(canvas): apply observer loop handler

* test(clock): apply observer loop handler

* test(heatmap): apply observer loop handler

* test(interactive-chart): apply observer loop handler

* test(layout): apply observer loop handler

* test(notification): apply observer loop handler

* test(overlay): apply observer loop handler

* test(sparkline): apply observer loop handler

* test(swing-gauge): apply observer loop handler

* test(tornado-chart): apply observer loop handler

* test(test-helpers): add test for resize observer loop handler

* refactor(test-helpers): refactor resize observer loop handler to test helper's side effect

* test(elements): remove resize observer loop handler import

* refactor(test-helpers): cleanup export

* refactor(test-helpers): fix code smell

---------

Co-authored-by: Wasuwat Limsuparhat <[email protected]>

packages/elements/src/clock/__test__/clock.interactive.test.js

@@ -145,7 +145,7 @@ describe('clock/Interactive', () => {
       expect(offsetChangedCount, 'offset-changed count should be 1').to.be.equal(1);
       expect(offsetEvent.detail.value, '  should be 60').to.be.equal(60);
     });
-    
+
     describe('Accessibility', () => {
       it('Should have role="spinbutton", be focusable, and aria attributes', async () => {
         expect(el.getAttribute('role')).to.be.equal('spinbutton');
@@ -165,7 +165,7 @@ describe('clock/Interactive', () => {
         createKeyboardEvent(el, InputKey.ArrowUp);
         await elementUpdated(el);
         await nextFrame();
-  
+
         expect(el.getAttribute('aria-valuetext')).to.be.equal('Time: 01:00');
         expect(el.getAttribute('aria-valuenow')).to.be.equal(el.displayTime.toString());
       });
@@ -174,7 +174,7 @@ describe('clock/Interactive', () => {
         createKeyboardEvent(el, InputKey.ArrowDown);
         await elementUpdated(el);
         await nextFrame();
-  
+
         expect(el.getAttribute('aria-valuetext')).to.be.equal('Time: 23:00');
         expect(el.getAttribute('aria-valuenow')).to.be.equal(el.displayTime.toString());
       });
@@ -183,7 +183,7 @@ describe('clock/Interactive', () => {
         createKeyboardEvent(el, InputKey.ArrowUp);
         await elementUpdated(el);
         await nextFrame();
-  
+
         expect(el.getAttribute('aria-valuetext')).to.be.equal('Time: 00:01');
         expect(el.getAttribute('aria-valuenow')).to.be.equal(el.displayTime.toString());
       });
@@ -192,7 +192,7 @@ describe('clock/Interactive', () => {
         createKeyboardEvent(el, InputKey.ArrowUp);
         await elementUpdated(el);
         await nextFrame();
-  
+
         expect(el.getAttribute('aria-valuetext')).to.be.equal('Time: 00:01');
         expect(el.getAttribute('aria-valuenow')).to.be.equal(el.displayTime.toString());
       });

packages/elements/src/interactive-chart/__test__/interactive-chart.test.js

@@ -3,6 +3,7 @@ import { fixture, fixtureSync, expect, elementUpdated, oneEvent, nextFrame, aTim
 // import element and theme
 import { InteractiveChart } from '@refinitiv-ui/elements/interactive-chart';
 import '@refinitiv-ui/elemental-theme/light/ef-interactive-chart.js';
+
 let line = {
   series: [
     {

packages/elements/src/overlay/__test__/managers/backdrop-manager.test.js

@@ -1,4 +1,4 @@
-import { expect, fixture, nextFrame, oneEvent } from '@refinitiv-ui/test-helpers';
+import { expect, fixture, nextFrame } from '@refinitiv-ui/test-helpers';
 import { createSandbox, restore, spy } from 'sinon';
 
 import { BackdropManager, clear, deregister, register, size } from '../../../../lib/overlay/managers/backdrop-manager.js';

packages/elements/src/overlay/__test__/managers/viewport-manager.test.js

@@ -1,4 +1,4 @@
-import { expect, fixture, nextFrame } from '@refinitiv-ui/test-helpers';
+import { expect, fixture } from '@refinitiv-ui/test-helpers';
 import { createSandbox, restore, spy } from 'sinon';
 
 import { openedUpdated } from './../mocks/helper';

packages/test-helpers/__test__/test-helpers.test.js

@@ -108,4 +108,18 @@ describe('TestHelpersTest', () => {
     });
   });
 
+  describe('test ResizeObserver loop handler', function () {
+
+    it('Convert resize-observer errors to warnings', function () {
+      const message = 'ResizeObserver loop completed with undelivered notifications';
+      window.dispatchEvent(new ErrorEvent('error', {
+        message,
+        error: new Error(message)
+      }));
+
+      // the test should run until the end with a passed result
+      expect(message).to.equal(message);
+    });
+  });
+
 });

packages/test-helpers/package.json

@@ -31,4 +31,4 @@
     "@types/mocha": "^5.2.7",
     "mocha": "^6.2.3"
   }
-}
+}

packages/test-helpers/src/test-helpers.ts

@@ -47,11 +47,11 @@ export const keyboardEvent = (type: string, init: KeyboardEventInit = {}): Keybo
       cancelable: true,
       composed: true
     }) as CustomKeyboardEvent;
-    event.key = init.key || '';
-    event.shiftKey = init.shiftKey || false;
-    event.altKey = init.altKey || false;
-    event.ctrlKey = init.ctrlKey || false;
-    event.metaKey = init.metaKey || false;
+    event.key = init.key ?? '';
+    event.shiftKey = init.shiftKey ?? false;
+    event.altKey = init.altKey ?? false;
+    event.ctrlKey = init.ctrlKey ?? false;
+    event.metaKey = init.metaKey ?? false;
 
     return event;
   }
@@ -94,3 +94,25 @@ export const isNear = (a: number, b: number, distance: number, inclusive = true)
  * @returns string
  */
 export const replaceWhitespace = (text: string): string => text.replace(/\s/g, ' ');
+
+// ResizeObserver loop error is considered benign as discussed in https://github.com/w3c/csswg-drafts/issues/5023
+// This module converts the error into a warning instead
+// Note that, mocha must be available in an imported context
+before(function () {
+  const originalOnError = window.onerror;
+  window.onerror = function (event, ...args) {
+    // Firefox: `ResizeObserver loop completed with undelivered notifications.`
+    // Chrome: `ResizeObserver loop limit exceeded`
+    // Safari: `ResizeObserver loop completed with undelivered notifications`
+    // Each browser logs a slightly different messages yet they all start with `ResizeObserver loop`
+    /* istanbul ignore else */
+    if (typeof event === 'string' && event.startsWith('ResizeObserver loop')) {
+      // eslint-disable-next-line no-console
+      console.warn(`warning: ${event}`);
+      return true;
+    }
+    else {
+      return originalOnError ? originalOnError(event, ...args) as boolean : false;
+    }
+  };
+});