test: configure Codecov (#658)

* refactor: tabs component for coverage purposes

* ci: run again with Codecov installed

* test: configure Codecov msg & targets

codecov.yml

@@ -0,0 +1,14 @@
+coverage:
+  status:
+    patch:
+      default:
+        threshold: 5%
+    project:
+      default:
+        threshold: 5%
+comment:
+  layout: 'header, diff, files, footer'
+  hide_project_coverage: false
+
+codecov:
+  require_ci_to_pass: false

package.json

@@ -44,7 +44,8 @@
     "//2": "👇 Cypress executes it to perform custom reporting. With this:",
     "//3": "    - **same filename for local/CI**: the 'mv' command is run in both local & CI, so JSON coverage filename is the same",
     "//4": "    - **.nycrc* config files avoided:** could be mistakenly used by other tools",
-    "coverage:report": "nyc report --reporter json --report-dir coverage && mv -f coverage/coverage-final.json coverage/component-testing.json"
+    "coverage:report": "nyc report --reporter json --report-dir coverage && mv -f coverage/coverage-final.json coverage/component-testing.json",
+    "validate-codecov-yml": "curl -X POST --data-binary @codecov.yml https://codecov.io/validate"
   },
   "dependencies": {
     "@angular/animations": "18.0.5",

src/app/header/tabs/tabs.component.ts

@@ -63,13 +63,7 @@ export class TabsComponent implements OnDestroy {
   ) {
     afterNextRender(
       () => {
-        this._intersectionObserver = new IntersectionObserver(
-          this._onIntersectChange.bind(this),
-          {
-            root: this._elRef.nativeElement,
-            threshold: [INTERSECTION_THRESHOLD],
-          },
-        )
+        this._setupIntersectionObserver()
       },
       { phase: AfterRenderPhase.Read },
     )
@@ -137,23 +131,28 @@ export class TabsComponent implements OnDestroy {
     this._intersectionObserver.observe(this._lastTab.nativeElement)
   }
 
-  private _onIntersectChange(
-    entries: ReadonlyArray<IntersectionObserverEntry>,
-  ) {
-    ;(
-      [
-        [this._firstTab!, this._prevButtonDisabled],
-        [this._lastTab!, this._nextButtonDisabled],
-      ] as const
-    ).forEach(([tabElement, signalToUpdate]) => {
-      const entry = findEntryByTarget(entries, tabElement.nativeElement)
-      if (entry === undefined) {
-        return
-      }
-      signalToUpdate.set(entry.isIntersecting)
-    })
+  private _setupIntersectionObserver() {
+    this._intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        ;(
+          [
+            [this._firstTab!, this._prevButtonDisabled],
+            [this._lastTab!, this._nextButtonDisabled],
+          ] as const
+        ).forEach(([tabElement, signalToUpdate]) => {
+          const entry = entries.find(
+            (entry) => entry.target === tabElement.nativeElement,
+          )
+          if (!entry) return
+          signalToUpdate.set(entry.isIntersecting)
+        })
+      },
+      {
+        root: this._elRef.nativeElement,
+        threshold: [INTERSECTION_THRESHOLD],
+      },
+    )
   }
-
   protected _scrollABit(scrollDirection: ScrollDirection) {
     const tabListContainer = this._tabList()?.nativeElement
     /* istanbul ignore next */
@@ -185,8 +184,3 @@ const INTERSECTION_THRESHOLD = 0.8
 type ScrollDirection = typeof DIRECTION_PREVIOUS | typeof DIRECTION_NEXT
 const DIRECTION_PREVIOUS = -1
 const DIRECTION_NEXT = 1
-
-const findEntryByTarget = (
-  entries: ReadonlyArray<IntersectionObserverEntry>,
-  target: Element,
-) => entries.find((entry) => entry.target === target)