Add TypeScript coverage to the intersection observer mock (#5574)

It appears that it wasn't so difficult to add type coverage to the
intersection observer mock file. It was more difficult in Flow due to
Flow's incorrect `IntersectionObserver` type. But TypeScript have it
correct, so we can just remove the redundant type instead.

Also, I removed the eslint rule that allows `@ts-nocheck` since this was
the last file that used it. Ideally we shouldn't use it in the future.

Author: canova

eslint.config.mjs

@@ -215,22 +215,6 @@ export default [
       // Allow require(), for example for importing JSON files.
       '@typescript-eslint/no-require-imports': 'off',
 
-      // Override the project-wide config to allow @ts-nocheck.
-      // We really just need this for our mocks.
-      '@typescript-eslint/ban-ts-comment': [
-        'error',
-        {
-          // Allow @ts-expect-error and @ts-no-check annotations with descriptions.
-          'ts-expect-error': 'allow-with-description',
-          'ts-nocheck': 'allow-with-description',
-          // Don't allow @ts-ignore because we want to be notified
-          // when the error goes away so we can remove the annotation - use
-          // @ts-expect-error instead
-          'ts-ignore': true,
-          'ts-check': false,
-        },
-      ],
-
       // Adding more errors now
       'testing-library/no-manual-cleanup': 'error',
       'testing-library/no-wait-for-snapshot': 'error',

src/test/fixtures/mocks/intersection-observer.ts

@@ -1,29 +1,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-// @ts-nocheck Complex DOM mock with intricate typing that would require extensive work to properly type
-
-/**
- * Creating a mock intersection observer type because Flow's IntersectionObserver
- * type is not completely correct in this version.
- */
-type MockIntersectionObserver = {
-  thresholds: number[];
-  root: HTMLElement | Document;
-  rootMargin: string;
-  observe: (param: HTMLElement) => void;
-  unobserve: (param: HTMLElement) => void;
-  disconnect: () => void;
-  takeRecords: () => void;
-};
 
 /**
  * Type of the item we are going to keep for tracking observers.
  */
 type Item = {
   callback: (
-    param: IntersectionObserverEntry[],
-    MockIntersectionObserver
+    entries: IntersectionObserverEntry[],
+    observer: IntersectionObserver
   ) => void;
   elements: Set<HTMLElement>;
   created: number;
@@ -32,10 +17,7 @@ type Item = {
 /**
  * Tracked observers during the testing.
  */
-const observers: Map<MockIntersectionObserver, Item> = new Map<
-  unknown,
-  unknown
->();
+const observers: Map<IntersectionObserver, Item> = new Map();
 
 /**
  * Call this function inside a `describe` block to automatically define the
@@ -50,16 +32,16 @@ const observers: Map<MockIntersectionObserver, Item> = new Map<
  * give you a better control over the intersection observer and is used mostly
  * when you want to test the intersection observer behavior.
  */
-export function autoMockIntersectionObserver(autoTrigger?: boolean = true) {
+export function autoMockIntersectionObserver(autoTrigger: boolean = true) {
   beforeEach(() => {
     (window as any).IntersectionObserver = jest.fn((cb, options = {}) => {
-      const item = {
+      const item: Item = {
         callback: cb,
         elements: new Set(),
         created: Date.now(),
       };
 
-      const instance: MockIntersectionObserver = {
+      const instance: IntersectionObserver = {
         thresholds: Array.isArray(options.threshold)
           ? options.threshold
           : [options.threshold ?? 0],
@@ -93,7 +75,7 @@ export function autoMockIntersectionObserver(autoTrigger?: boolean = true) {
 }
 
 function triggerSingleObserver(
-  observer: MockIntersectionObserver,
+  observer: IntersectionObserver,
   item: Item,
   isIntersecting: boolean = true
 ) {
@@ -105,7 +87,12 @@ function triggerSingleObserver(
       intersectionRatio: 1,
       intersectionRect: element.getBoundingClientRect(),
       isIntersecting: isIntersecting,
-      rootBounds: observer.root ? observer.root.getBoundingClientRect() : null,
+      // `root` is `Element | Document | null`. We can call getBoundingClientRect
+      // only if it's an Element.
+      rootBounds:
+        observer.root && observer.root instanceof Element
+          ? observer.root.getBoundingClientRect()
+          : null,
       target: element,
       time: Date.now() - item.created,
     });