diff --git a/src/app/modules/home/components/telegram-bot/telegram-bot.component.spec.ts b/src/app/modules/home/components/telegram-bot/telegram-bot.component.spec.ts index 6ff6746..2079c9c 100644 --- a/src/app/modules/home/components/telegram-bot/telegram-bot.component.spec.ts +++ b/src/app/modules/home/components/telegram-bot/telegram-bot.component.spec.ts @@ -1,4 +1,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { ViewportScroller } from "@angular/common"; +import { ActivatedRoute } from "@angular/router"; +import { of } from "rxjs"; import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; import { @@ -11,14 +14,34 @@ import { TelegramBotABoutComponent } from "./telegram-bot.component"; describe("TelegramBotABoutComponent", () => { let component: TelegramBotABoutComponent; let fixture: ComponentFixture; + let mockActivatedRoute: any; + let mockViewportScroller: jasmine.SpyObj; beforeEach(async () => { + const viewportScrollerSpy = jasmine.createSpyObj('ViewportScroller', [ + 'scrollToAnchor', + ]); + + mockActivatedRoute = { + fragment: of(null), + paramMap: of(new Map()), + queryParams: of({}), + snapshot: { fragment: "" } + }; + await TestBed.configureTestingModule({ declarations: [TelegramBotABoutComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [...mostUsedImports], - providers: [...testUtilStubs, ...mostUsedServices], + providers: [ + ...testUtilStubs.filter(provider => provider.provide !== ActivatedRoute), + ...mostUsedServices, + { provide: ActivatedRoute, useValue: mockActivatedRoute }, + { provide: ViewportScroller, useValue: viewportScrollerSpy }, + ], }).compileComponents(); + + mockViewportScroller = TestBed.inject(ViewportScroller) as jasmine.SpyObj; }); beforeEach(() => { @@ -30,4 +53,24 @@ describe("TelegramBotABoutComponent", () => { it("should create", () => { expect(component).toBeTruthy(); }); + + it("should scroll to anchor when fragment is provided", (done) => { + const testFragment = 'techinterview-salary-assistant-header'; + mockActivatedRoute.fragment = of(testFragment); + + component.ngOnInit(); + + setTimeout(() => { + expect(mockViewportScroller.scrollToAnchor).toHaveBeenCalledWith(testFragment); + done(); + }, 150); + }); + + it("should not scroll when no fragment is provided", () => { + mockActivatedRoute.fragment = of(null); + + component.ngOnInit(); + + expect(mockViewportScroller.scrollToAnchor).not.toHaveBeenCalled(); + }); }); diff --git a/src/app/modules/home/components/telegram-bot/telegram-bot.component.ts b/src/app/modules/home/components/telegram-bot/telegram-bot.component.ts index 036b707..7344cbd 100644 --- a/src/app/modules/home/components/telegram-bot/telegram-bot.component.ts +++ b/src/app/modules/home/components/telegram-bot/telegram-bot.component.ts @@ -1,4 +1,6 @@ -import { Component, OnDestroy } from "@angular/core"; +import { Component, OnDestroy, OnInit } from "@angular/core"; +import { ActivatedRoute } from "@angular/router"; +import { ViewportScroller } from "@angular/common"; import { TitleService } from "@services/title.service"; @Component({ @@ -7,13 +9,29 @@ import { TitleService } from "@services/title.service"; styleUrls: ["./telegram-bot.component.scss"], standalone: false, }) -export class TelegramBotABoutComponent implements OnDestroy { +export class TelegramBotABoutComponent implements OnInit, OnDestroy { imageLinkToShowInModal: string | null = null; - constructor(private readonly titleService: TitleService) { + constructor( + private readonly titleService: TitleService, + private readonly route: ActivatedRoute, + private readonly viewportScroller: ViewportScroller + ) { this.titleService.setTitle("О ботах в Telegram"); } + ngOnInit(): void { + // Handle fragment scrolling for anchor links + this.route.fragment.subscribe((fragment) => { + if (fragment) { + // Small delay to ensure the DOM is fully rendered + setTimeout(() => { + this.viewportScroller.scrollToAnchor(fragment); + }, 100); + } + }); + } + openImage(link: string): void { this.imageLinkToShowInModal = link; }