Select category children from browse view

src/app/data/availableFilters.ts

@@ -33,6 +33,8 @@ const DEFAULT_AVAILABLE_FILTERS: Filter[] = []
 
 export const availableFilters: Filter[] = cloneFilters(DEFAULT_AVAILABLE_FILTERS)
 
+export const SEARCH_ACTIVE_CATEGORY_STORAGE_KEY = 'search_active_category_id'
+
 type RuntimeSearchFiltersConfig = {
   primaryCategoriesMode?: unknown
   primaryRootName?: unknown

src/app/pages/browse/browse.component.spec.ts

@@ -0,0 +1,78 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { Router } from '@angular/router';
+
+import { BrowseComponent } from './browse.component';
+import { ApiServiceService } from 'src/app/services/product-service.service';
+import { LocalStorageService } from 'src/app/services/local-storage.service';
+import { SEARCH_ACTIVE_CATEGORY_STORAGE_KEY } from 'src/app/data/availableFilters';
+
+describe('BrowseComponent', () => {
+  let component: BrowseComponent;
+  let fixture: ComponentFixture<BrowseComponent>;
+  let apiSpy: jasmine.SpyObj<ApiServiceService>;
+  let routerSpy: jasmine.SpyObj<Router>;
+  let localStorageSpy: jasmine.SpyObj<LocalStorageService>;
+
+  beforeEach(async () => {
+    apiSpy = jasmine.createSpyObj<ApiServiceService>('ApiServiceService', [
+      'getCategoriesByParentId',
+      'getDefaultCategories',
+      'getProducts',
+      'getProductsDetails',
+    ]);
+    routerSpy = jasmine.createSpyObj<Router>('Router', ['navigate']);
+    localStorageSpy = jasmine.createSpyObj<LocalStorageService>('LocalStorageService', [
+      'addCategoryFilter',
+      'removeItem',
+      'setItem',
+    ]);
+
+    apiSpy.getDefaultCategories.and.resolveTo([]);
+    apiSpy.getProducts.and.resolveTo([]);
+    apiSpy.getProductsDetails.and.resolveTo([]);
+    apiSpy.getCategoriesByParentId.and.resolveTo([]);
+
+    await TestBed.configureTestingModule({
+      imports: [BrowseComponent, TranslateModule.forRoot()],
+      providers: [
+        { provide: ApiServiceService, useValue: apiSpy },
+        { provide: Router, useValue: routerSpy },
+        { provide: LocalStorageService, useValue: localStorageSpy },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BrowseComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should select the clicked category children before navigating to search', async () => {
+    const parent = { id: 'parent-1', name: 'Cloud' };
+    const childA = { id: 'child-1', name: 'IaaS' };
+    const childB = { id: 'child-2', name: 'PaaS' };
+    apiSpy.getCategoriesByParentId.and.resolveTo([childA, childB]);
+
+    await component.onCategoryClick(parent);
+
+    expect(localStorageSpy.removeItem).toHaveBeenCalledWith('selected_categories');
+    expect(localStorageSpy.setItem).toHaveBeenCalledWith(SEARCH_ACTIVE_CATEGORY_STORAGE_KEY, 'parent-1');
+    expect(localStorageSpy.addCategoryFilter).toHaveBeenCalledWith(childA);
+    expect(localStorageSpy.addCategoryFilter).toHaveBeenCalledWith(childB);
+    expect(localStorageSpy.addCategoryFilter).not.toHaveBeenCalledWith(parent);
+    expect(routerSpy.navigate).toHaveBeenCalledWith(['/search']);
+  });
+
+  it('should fall back to selecting the parent category when no children are available', async () => {
+    const parent = { id: 'parent-1', name: 'Cloud' };
+    apiSpy.getCategoriesByParentId.and.resolveTo([]);
+
+    await component.onCategoryClick(parent);
+
+    expect(localStorageSpy.addCategoryFilter).toHaveBeenCalledOnceWith(parent);
+    expect(routerSpy.navigate).toHaveBeenCalledWith(['/search']);
+  });
+});

src/app/pages/browse/browse.component.ts

@@ -9,7 +9,7 @@ import { ApiServiceService } from 'src/app/services/product-service.service';
 import { LocalStorageService } from 'src/app/services/local-storage.service';
 import { Category } from 'src/app/models/interfaces';
 import { iconForCategory } from 'src/app/data/categoryIcons';
-import { searchCategoriesConfig } from 'src/app/data/availableFilters';
+import { searchCategoriesConfig, SEARCH_ACTIVE_CATEGORY_STORAGE_KEY } from 'src/app/data/availableFilters';
 
 interface PopularOffer {
   id: string;
@@ -188,14 +188,31 @@ export class BrowseComponent implements OnInit {
     }
   }
 
-  onCategoryClick(category: Category) {
-    localStorage.removeItem('selected_categories');
-    this.localStorage.addCategoryFilter(category);
+  async onCategoryClick(category: Category) {
+    this.localStorage.removeItem('selected_categories');
+    if (category.id) {
+      this.localStorage.setItem(SEARCH_ACTIVE_CATEGORY_STORAGE_KEY, category.id);
+      const children = await this.api.getCategoriesByParentId(category.id).catch(() => []);
+      const childList: Category[] = Array.isArray(children) ? children : [];
+
+      if (childList.length > 0) {
+        for (const child of childList) {
+          if (child?.id) {
+            this.localStorage.addCategoryFilter(child);
+          }
+        }
+      } else {
+        this.localStorage.addCategoryFilter(category);
+      }
+    } else {
+      this.localStorage.addCategoryFilter(category);
+    }
     this.router.navigate(['/search']);
   }
 
   onShowAll() {
-    localStorage.removeItem('selected_categories');
+    this.localStorage.removeItem('selected_categories');
+    this.localStorage.removeItem(SEARCH_ACTIVE_CATEGORY_STORAGE_KEY);
     this.router.navigate(['/search']);
   }
 }

src/app/pages/search/search.component.ts

@@ -17,10 +17,10 @@ import { LocalStorageService } from "../../services/local-storage.service";
 import { SearchStateService } from "../../services/search-state.service";
 type ProductOffering = components["schemas"]["ProductOffering"];
 
-import { availableFilters, searchCategoriesConfig } from 'src/app/data/availableFilters';
-import { iconForCategory } from 'src/app/data/categoryIcons';
 import { AiSearchService } from 'src/app/services/ai-search.service';
 import { PriceServiceService } from 'src/app/services/price-service.service';
+import { availableFilters, searchCategoriesConfig, SEARCH_ACTIVE_CATEGORY_STORAGE_KEY } from 'src/app/data/availableFilters';
+import { iconForCategory } from 'src/app/data/categoryIcons';
 import { ThemeService } from 'src/app/services/theme.service';
 
 type ToolbarFilter = {
@@ -71,7 +71,7 @@ export class SearchComponent implements OnInit, OnDestroy {
   procurementFilterKey = 'procurement_type';
   private procurementCache = new Map<string, boolean>();
   private productsRequestVersion = 0;
-  private readonly activeCategoryStorageKey = 'search_active_category_id';
+  private readonly activeCategoryStorageKey = SEARCH_ACTIVE_CATEGORY_STORAGE_KEY;
 
   showSortDropdown = false;
   sortOption: 'name' | 'date_new' | 'date_old' = 'date_new';