Fix anchor navigation for h1 headers in telegram-bot component

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<TelegramBotABoutComponent>;
+  let mockActivatedRoute: any;
+  let mockViewportScroller: jasmine.SpyObj<ViewportScroller>;
 
   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<ViewportScroller>;
   });
 
   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();
+  });
 });

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;
   }