chore(cypress): fix ResizeObserver loop error handling and make it gl…

…obal

.cypress-cucumber-preprocessorrc.json

@@ -3,7 +3,8 @@
     "e2e": {
         "stepDefinitions": [
             "[filepath]/*.{js,mjs,ts,tsx}",
-            "[filepath]/../common/index.{js,mjs,ts,tsx}"
+            "[filepath]/../common/index.{js,mjs,ts,tsx}",
+            "cypress/e2e/common.js"
         ]
     }
 }

components/tab/src/tab-bar/features/auto_hides_scroll_buttons/index.js

@@ -1,25 +1,5 @@
-/* global before,after */
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
 
-const handler = (err) => {
-    // > This error means that ResizeObserver was not able to deliver all
-    // > observations within a single animation frame. It is benign (your site
-    // > will not break). – Aleksandar Totic Apr 15 at 3:14
-    // -----
-    // https://stackoverflow.com/a/50387233
-    if (err.message.match('ResizeObserver loop limit exceeded')) {
-        return false
-    }
-}
-
-before(() => {
-    Cypress.on('uncaught:exception', handler)
-})
-
-after(() => {
-    Cypress.off('uncaught:exception', handler)
-})
-
 Given('a tabbar with enough space for all tabs is rendered', () => {
     cy.viewport(1024, 768)
     cy.visitStory('TabBar', 'Scrollable with some tabs')

components/transfer/src/features/notify_at_end_of_list/index.js

@@ -1,17 +1,5 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
 
-Cypress.on('uncaught:exception', (err) => {
-    // This prevents a benign error:
-    //   This error means that ResizeObserver was not able to deliver all
-    //   observations within a single animation frame. It is benign (your site
-    //   will not break).
-    //
-    // Source: https://stackoverflow.com/a/50387233/1319140
-    if (err.match(/ResizeObserver loop limit exceeded/)) {
-        return false
-    }
-})
-
 Given(
     'the Transfer has enough items to fill the source list completely',
     () => {

cypress/e2e/common.js

@@ -0,0 +1,16 @@
+Cypress.on('uncaught:exception', (err) => {
+    /* This prevents a benign error:
+     *   This error means that ResizeObserver was not able to deliver all
+     *   observations within a single animation frame. It is benign (your site
+     *   will not break).
+     *
+     * Source: https://stackoverflow.com/a/50387233/1319140
+     */
+    const errMsg = err.toString()
+    if (
+        errMsg.match(/ResizeObserver loop limit exceeded/) ||
+        errMsg.match(/ResizeObserver loop completed with undelivered notifications/)
+    ) {
+        return false
+    }
+})