diff --git a/cypress/support/ResizeObserverMock.js b/cypress/support/ResizeObserverMock.js new file mode 100644 index 00000000000..55c5f541a7b --- /dev/null +++ b/cypress/support/ResizeObserverMock.js @@ -0,0 +1,76 @@ +class ResizeObserverMock { + constructor(callback) { + this.callback = callback; + this.elements = new Set(); + this.handleResize = this.handleResize.bind(this); + this._window = null; + this._listening = false; + } + + observe(element) { + if (!this._window && element && element.ownerDocument) { + this._window = element.ownerDocument.defaultView || null; + } + + const win = + this._window || (typeof window !== 'undefined' ? window : null); + + if (!this.elements) return; + this.elements.add(element); + + if (!this._listening && win) { + win.addEventListener('resize', this.handleResize); + this._listening = true; + } + + this.trigger(); + } + + unobserve(element) { + this.elements.delete(element); + const win = + this._window || (typeof window !== 'undefined' ? window : null); + if (this.elements.size === 0 && this._listening && win) { + win.removeEventListener('resize', this.handleResize); + this._listening = false; + } + } + + disconnect() { + this.elements.clear(); + const win = + this._window || (typeof window !== 'undefined' ? window : null); + if (this._listening && win) { + win.removeEventListener('resize', this.handleResize); + this._listening = false; + } + } + + handleResize() { + this.trigger(); + } + + trigger() { + if (this.elements.size === 0) return; + + const entries = Array.from(this.elements).map(e => ({ + target: e, + contentRect: e.getBoundingClientRect(), + })); + + const win = + this._window || (typeof window !== 'undefined' ? window : null); + const raf = + win && typeof win.requestAnimationFrame === 'function' + ? win.requestAnimationFrame.bind(win) + : typeof requestAnimationFrame === 'function' + ? requestAnimationFrame + : cb => setTimeout(cb, 0); + + raf(() => { + this.callback(entries, this); + }); + } +} + +export default ResizeObserverMock; diff --git a/cypress/support/index.js b/cypress/support/index.js index e8561a4370d..fcd8636619d 100644 --- a/cypress/support/index.js +++ b/cypress/support/index.js @@ -3,12 +3,9 @@ * See https://github.com/cypress-io/cypress/issues/20341 * See https://github.com/cypress-io/cypress/issues/29277 */ -Cypress.on('uncaught:exception', err => { - if ( - err.message.includes( - 'ResizeObserver loop completed with undelivered notifications' - ) - ) { - return false; - } + +import ResizeObserverMock from './ResizeObserverMock'; + +Cypress.on('window:before:load', win => { + win.ResizeObserver = ResizeObserverMock; }); diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json index 2a757c66521..cd18e3f37d2 100644 --- a/cypress/tsconfig.json +++ b/cypress/tsconfig.json @@ -1,7 +1,16 @@ { "extends": "../tsconfig.json", "compilerOptions": { - "rootDir": "e2e" + "rootDir": ".", + "noEmit": true, + "allowJs": true, + "types": [ + "cypress", + "node" + ] }, - "types": ["cypress", "node"] -} + "include": [ + "**/*.ts", + "**/*.js" + ] +} \ No newline at end of file