From 33bdc1d9466e000064ce4c085884c7d7850bbf3c Mon Sep 17 00:00:00 2001
From: David LJ <mail@davidlj95.com>
Date: Tue, 26 Nov 2024 13:45:11 +0100
Subject: [PATCH] fix: tab component prev/next buttons

---
 src/app/header/tabs/tabs.component.spec.cy.ts | 29 ++++++++++---------
 src/app/header/tabs/tabs.component.ts         | 23 +++++++--------
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/app/header/tabs/tabs.component.spec.cy.ts b/src/app/header/tabs/tabs.component.spec.cy.ts
index 6814e854..5090173d 100644
--- a/src/app/header/tabs/tabs.component.spec.cy.ts
+++ b/src/app/header/tabs/tabs.component.spec.cy.ts
@@ -2,6 +2,7 @@ import { TabsComponent } from './tabs.component'
 import { TabComponent } from '../tab/tab.component'
 import { MountResponse } from 'cypress/angular'
 import { By } from '@angular/platform-browser'
+import { Component } from '@angular/core'
 
 describe('TabsComponent', () => {
   it('should mount', () => {
@@ -14,9 +15,13 @@ describe('TabsComponent', () => {
   describe('when all tabs fit the screen', () => {
     beforeEach(() => {
       cy.viewport('macbook-16')
-      cy.mount('<app-tabs><app-tab>Hello World</app-tab></app-tabs>', {
+      @Component({
+        template: '<app-tabs><app-tab>Hello World</app-tab></app-tabs>',
         imports: [TabsComponent, TabComponent],
       })
+      class HostComponent {}
+
+      cy.mount(HostComponent)
     })
 
     it('should disable previous paginator', () => {
@@ -32,20 +37,19 @@ describe('TabsComponent', () => {
     const TABS = [...Array(11).keys()]
     beforeEach(() => {
       cy.viewport('iphone-x')
-      cy.mount(
-        `
-        <app-tabs [style.max-width.%]="100">
-        @for(tab of ${JSON.stringify(TABS)}; track $index) {
+      @Component({
+        template: ` <app-tabs [style.max-width.%]="100">
+          @for (tab of ${JSON.stringify(TABS)}; track $index) {
             <app-tab>
-                <span style="white-space: nowrap">Tab {{ tab }}</span>
+              <span style="white-space: nowrap">Tab {{ tab }}</span>
             </app-tab>
-        }
+          }
         </app-tabs>`,
-        {
-          imports: [TabsComponent, TabComponent],
-        },
-      ).then((wrapper) => {
-        // noinspection CYUnusedAlias (used below)
+        imports: [TabsComponent, TabComponent],
+      })
+      class HostComponent {}
+
+      cy.mount(HostComponent).then((wrapper) => {
         cy.wrap(wrapper).as('angular')
       })
     })
@@ -150,7 +154,6 @@ describe('TabsComponent', () => {
 
     describe('when marking a tab as active', () => {
       beforeEach(() => {
-        // noinspection CYUnresolvedAlias
         cy.get<MountResponse<unknown>>('@angular').then((angular) => {
           const tabsElement = angular.fixture.debugElement.query(
             By.css('app-tabs'),
diff --git a/src/app/header/tabs/tabs.component.ts b/src/app/header/tabs/tabs.component.ts
index 9f5150af..67093e6c 100644
--- a/src/app/header/tabs/tabs.component.ts
+++ b/src/app/header/tabs/tabs.component.ts
@@ -111,20 +111,9 @@ export class TabsComponent implements OnDestroy {
 
   private _onTabsChanged() {
     const tabs = this._tabs()
-    if (!this._intersectionObserver || tabs.length === 0) {
-      if (isDevMode) {
-        console.log(
-          'TabsComponent: either intersection observer is not defined or no tabs present. Not updating tabs list',
-          { tabs, intersectionObserver: this._intersectionObserver },
-        )
-      }
-      return
-    }
     this._currentTabs = tabs
-    this._intersectionObserver.disconnect()
     ;[this._firstTab, this._lastTab] = [tabs.at(0)!.elRef, tabs.at(-1)!.elRef]
-    this._intersectionObserver.observe(this._firstTab.nativeElement)
-    this._intersectionObserver.observe(this._lastTab.nativeElement)
+    this._resetIntersectionObserverTargets()
   }
 
   private _setupIntersectionObserver() {
@@ -148,7 +137,17 @@ export class TabsComponent implements OnDestroy {
         threshold: [INTERSECTION_THRESHOLD],
       },
     )
+    this._resetIntersectionObserverTargets()
   }
+
+  private _resetIntersectionObserverTargets(): void {
+    if (this._intersectionObserver && this._firstTab && this._lastTab) {
+      this._intersectionObserver.disconnect()
+      this._intersectionObserver.observe(this._firstTab!.nativeElement)
+      this._intersectionObserver.observe(this._lastTab!.nativeElement)
+    }
+  }
+
   protected _scrollABit(scrollDirection: ScrollDirection) {
     const tabListContainer = this._tabList()?.nativeElement
     /* istanbul ignore next */