diff --git a/src/app/header/tabs/tabs.component.spec.cy.ts b/src/app/header/tabs/tabs.component.spec.cy.ts
index 6814e854..eac21736 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,14 @@ describe('TabsComponent', () => {
describe('when all tabs fit the screen', () => {
beforeEach(() => {
cy.viewport('macbook-16')
- cy.mount('Hello World', {
+ //👇 Explicit component declaration for Cypress to support v19
+ @Component({
+ template: 'Hello World',
imports: [TabsComponent, TabComponent],
})
+ class HostComponent {}
+
+ cy.mount(HostComponent)
})
it('should disable previous paginator', () => {
@@ -32,20 +38,20 @@ describe('TabsComponent', () => {
const TABS = [...Array(11).keys()]
beforeEach(() => {
cy.viewport('iphone-x')
- cy.mount(
- `
-
- @for(tab of ${JSON.stringify(TABS)}; track $index) {
+ //👇 Explicit component declaration for Cypress to support v19
+ @Component({
+ template: `
+ @for (tab of ${JSON.stringify(TABS)}; track $index) {
- Tab {{ tab }}
+ Tab {{ tab }}
- }
+ }
`,
- {
- 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 +156,6 @@ describe('TabsComponent', () => {
describe('when marking a tab as active', () => {
beforeEach(() => {
- // noinspection CYUnresolvedAlias
cy.get>('@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..b3b2f03e 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._firstTab, this._lastTab] = [tabs.at(0)?.elRef, tabs.at(-1)?.elRef]
+ 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 */