diff --git a/src/app/core/routing/category/category.route.ts b/src/app/core/routing/category/category.route.ts index 8d0ee81b8e..5686c3e5b0 100644 --- a/src/app/core/routing/category/category.route.ts +++ b/src/app/core/routing/category/category.route.ts @@ -2,16 +2,12 @@ import { UrlMatchResult, UrlSegment } from '@angular/router'; import { MonoTypeOperatorFunction } from 'rxjs'; import { filter } from 'rxjs/operators'; -import { CategoryView } from 'ish-core/models/category-view/category-view.model'; +import { Category } from 'ish-core/models/category/category.model'; import { CoreState } from 'ish-core/store/core/core-store'; import { selectRouteParam } from 'ish-core/store/core/router'; -export function generateLocalizedCategorySlug(category: CategoryView) { - if (!category || !category.categoryPath.length) { - return ''; - } - const lastCat = category.pathCategories()[category.categoryPath.length - 1].name; - return lastCat ? lastCat.replace(/ /g, '-') : ''; +export function generateLocalizedCategorySlug(category: Category) { + return category?.name?.replace(/ /g, '-') || ''; } const categoryRouteFormat = /^\/(?!category\/.*$)(.*-)?cat(.*)$/; @@ -37,7 +33,7 @@ export function matchCategoryRoute(segments: UrlSegment[]): UrlMatchResult { return; } -export function generateCategoryUrl(category: CategoryView): string { +export function generateCategoryUrl(category: Category): string { if (!category) { return '/'; } diff --git a/src/app/core/store/content/pages/pages.effects.ts b/src/app/core/store/content/pages/pages.effects.ts index bfa7a5abe3..268a91e311 100644 --- a/src/app/core/store/content/pages/pages.effects.ts +++ b/src/app/core/store/content/pages/pages.effects.ts @@ -5,9 +5,11 @@ import { map, mergeMap } from 'rxjs/operators'; import { CMSService } from 'ish-core/services/cms/cms.service'; import { selectRouteParam } from 'ish-core/store/core/router'; +import { setBreadcrumbData } from 'ish-core/store/core/viewconf'; import { mapErrorToAction, mapToPayloadProperty, whenTruthy } from 'ish-core/utils/operators'; import { loadContentPage, loadContentPageFail, loadContentPageSuccess } from './pages.actions'; +import { getSelectedContentPage } from './pages.selectors'; @Injectable() export class PagesEffects { @@ -32,4 +34,12 @@ export class PagesEffects { map(contentPageId => loadContentPage({ contentPageId })) ) ); + + setBreadcrumbForContentPage$ = createEffect(() => + this.store.pipe( + select(getSelectedContentPage), + whenTruthy(), + map(contentPage => setBreadcrumbData({ breadcrumbData: [{ key: contentPage.displayName }] })) + ) + ); } diff --git a/src/app/core/store/shopping/categories/categories.effects.ts b/src/app/core/store/shopping/categories/categories.effects.ts index 3458e8c7eb..31248e6ca1 100644 --- a/src/app/core/store/shopping/categories/categories.effects.ts +++ b/src/app/core/store/shopping/categories/categories.effects.ts @@ -20,6 +20,7 @@ import { CategoryHelper } from 'ish-core/models/category/category.model'; import { ofCategoryUrl } from 'ish-core/routing/category/category.route'; import { CategoriesService } from 'ish-core/services/categories/categories.service'; import { selectRouteParam } from 'ish-core/store/core/router'; +import { setBreadcrumbData } from 'ish-core/store/core/viewconf'; import { loadMoreProducts } from 'ish-core/store/shopping/product-listing'; import { HttpStatusCodeService } from 'ish-core/utils/http-status-code/http-status-code.service'; import { mapErrorToAction, mapToPayloadProperty, mapToProperty, whenFalsy, whenTruthy } from 'ish-core/utils/operators'; @@ -32,7 +33,12 @@ import { loadTopLevelCategoriesFail, loadTopLevelCategoriesSuccess, } from './categories.actions'; -import { getCategoryEntities, getSelectedCategory, isTopLevelCategoriesLoaded } from './categories.selectors'; +import { + getBreadcrumbForCategoryPage, + getCategoryEntities, + getSelectedCategory, + isTopLevelCategoriesLoaded, +} from './categories.selectors'; @Injectable() export class CategoriesEffects { @@ -134,4 +140,13 @@ export class CategoriesEffects { ), { dispatch: false } ); + + setBreadcrumbForCategoryPage$ = createEffect(() => + this.store.pipe( + ofCategoryUrl(), + select(getBreadcrumbForCategoryPage), + whenTruthy(), + map(breadcrumbData => setBreadcrumbData({ breadcrumbData })) + ) + ); } diff --git a/src/app/core/store/shopping/categories/categories.selectors.spec.ts b/src/app/core/store/shopping/categories/categories.selectors.spec.ts index 39d20f465a..af2081be01 100644 --- a/src/app/core/store/shopping/categories/categories.selectors.spec.ts +++ b/src/app/core/store/shopping/categories/categories.selectors.spec.ts @@ -3,7 +3,7 @@ import { TestBed, fakeAsync, tick } from '@angular/core/testing'; import { Router } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; -import { Category } from 'ish-core/models/category/category.model'; +import { Category, CategoryCompletenessLevel } from 'ish-core/models/category/category.model'; import { HttpError } from 'ish-core/models/http-error/http-error.model'; import { Product } from 'ish-core/models/product/product.model'; import { CoreStoreModule } from 'ish-core/store/core/core-store.module'; @@ -19,6 +19,7 @@ import { loadTopLevelCategoriesSuccess, } from './categories.actions'; import { + getBreadcrumbForCategoryPage, getCategoryEntities, getCategoryLoading, getSelectedCategory, @@ -30,13 +31,24 @@ describe('Categories Selectors', () => { let store$: StoreWithSnapshots; let router: Router; - let cat: Category; + let catA: Category; + let catA1: Category; let prod: Product; beforeEach(() => { prod = { sku: 'sku' } as Product; - cat = { uniqueId: 'Aa', categoryPath: ['Aa'] } as Category; - cat.hasOnlineProducts = true; + catA = { + uniqueId: 'A', + categoryPath: ['A'], + completenessLevel: CategoryCompletenessLevel.Max, + name: 'nA', + } as Category; + catA1 = { + uniqueId: 'A.1', + categoryPath: ['A', 'A.1'], + completenessLevel: CategoryCompletenessLevel.Max, + name: 'nA1', + } as Category; @Component({ template: 'dummy' }) class DummyComponent {} @@ -82,12 +94,12 @@ describe('Categories Selectors', () => { describe('and reporting success', () => { beforeEach(() => { - store$.dispatch(loadCategorySuccess({ categories: categoryTree([cat]) })); + store$.dispatch(loadCategorySuccess({ categories: categoryTree([catA]) })); }); it('should set loading to false', () => { expect(getCategoryLoading(store$.state)).toBeFalse(); - expect(getCategoryEntities(store$.state)).toEqual({ [cat.uniqueId]: cat }); + expect(getCategoryEntities(store$.state)).toHaveProperty(catA.uniqueId); }); }); @@ -105,46 +117,89 @@ describe('Categories Selectors', () => { describe('state with a category', () => { beforeEach(() => { - store$.dispatch(loadCategorySuccess({ categories: categoryTree([cat]) })); + store$.dispatch(loadCategorySuccess({ categories: categoryTree([catA, catA1]) })); store$.dispatch(loadProductSuccess({ product: prod })); }); describe('but no current router state', () => { it('should return the category information when used', () => { - expect(getCategoryEntities(store$.state)).toEqual({ [cat.uniqueId]: cat }); + expect(getCategoryEntities(store$.state)).toHaveProperty(catA.uniqueId); expect(getCategoryLoading(store$.state)).toBeFalse(); }); it('should not select the irrelevant category when used', () => { expect(getSelectedCategory(store$.state)).toBeUndefined(); }); + + it('should not generate a breadcrumb for unselected category', () => { + expect(getBreadcrumbForCategoryPage(store$.state)).toBeUndefined(); + }); }); describe('with category route', () => { beforeEach(fakeAsync(() => { - router.navigate(['category', cat.uniqueId]); + router.navigate(['category', catA.uniqueId]); tick(500); })); it('should return the category information when used', () => { - expect(getCategoryEntities(store$.state)).toEqual({ [cat.uniqueId]: cat }); + expect(getCategoryEntities(store$.state)).toHaveProperty(catA.uniqueId); expect(getCategoryLoading(store$.state)).toBeFalse(); }); it('should select the selected category when used', () => { - expect(getSelectedCategory(store$.state).uniqueId).toEqual(cat.uniqueId); + expect(getSelectedCategory(store$.state).uniqueId).toEqual(catA.uniqueId); + }); + + it('should set a category page breadcrumb when selected', () => { + expect(getBreadcrumbForCategoryPage(store$.state)).toMatchInlineSnapshot(` + Array [ + Object { + "link": undefined, + "text": "nA", + }, + ] + `); + }); + + describe('with subcategory', () => { + beforeEach(fakeAsync(() => { + router.navigate(['category', catA1.uniqueId]); + tick(500); + })); + + it('should select the selected category when used', () => { + expect(getSelectedCategory(store$.state).uniqueId).toEqual(catA1.uniqueId); + }); + + it('should set a category page breadcrumb when selected', () => { + expect(getBreadcrumbForCategoryPage(store$.state)).toMatchInlineSnapshot(` + Array [ + Object { + "link": "/nA-catA", + "text": "nA", + }, + Object { + "link": undefined, + "text": "nA1", + }, + ] + `); + }); }); }); }); describe('loading top level categories', () => { - let catA: Category; - let catB: Category; - beforeEach(() => { - catA = { uniqueId: 'A', categoryPath: ['A'] } as Category; - catB = { uniqueId: 'B', categoryPath: ['B'] } as Category; - store$.dispatch(loadTopLevelCategoriesSuccess({ categories: categoryTree([catA, catB]) })); + store$.dispatch( + loadTopLevelCategoriesSuccess({ + categories: categoryTree([ + { uniqueId: 'A', categoryPath: ['A'] }, + { uniqueId: 'B', categoryPath: ['B'] }, + ] as Category[]), + }) + ); }); it('should select root categories when used', () => { diff --git a/src/app/core/store/shopping/categories/categories.selectors.ts b/src/app/core/store/shopping/categories/categories.selectors.ts index 001e5d6944..191b33b3e6 100644 --- a/src/app/core/store/shopping/categories/categories.selectors.ts +++ b/src/app/core/store/shopping/categories/categories.selectors.ts @@ -1,6 +1,10 @@ -import { createSelector } from '@ngrx/store'; +import { Dictionary } from '@ngrx/entity'; +import { createSelector, createSelectorFactory, defaultMemoize } from '@ngrx/store'; +import { isEqual } from 'lodash-es'; -import { createCategoryView } from 'ish-core/models/category-view/category-view.model'; +import { CategoryView, createCategoryView } from 'ish-core/models/category-view/category-view.model'; +import { Category, CategoryHelper } from 'ish-core/models/category/category.model'; +import { generateCategoryUrl } from 'ish-core/routing/category/category.route'; import { selectRouteParam } from 'ish-core/store/core/router'; import { ShoppingState, getShoppingState } from 'ish-core/store/shopping/shopping-store'; @@ -29,3 +33,17 @@ export const getTopLevelCategories = createSelector(getCategoryTree, tree => ); export const isTopLevelCategoriesLoaded = createSelector(getCategoriesState, state => state.topLevelLoaded); + +export const getBreadcrumbForCategoryPage = createSelectorFactory(projector => + defaultMemoize(projector, undefined, isEqual) +)(getSelectedCategory, getCategoryEntities, (category: CategoryView, entities: Dictionary) => + CategoryHelper.isCategoryCompletelyLoaded(category) + ? (category.categoryPath || []) + .map(id => entities[id]) + .filter(x => !!x) + .map((cat, idx, arr) => ({ + text: cat.name, + link: idx === arr.length - 1 ? undefined : generateCategoryUrl(cat), + })) + : undefined +); diff --git a/src/app/core/store/shopping/products/products.effects.ts b/src/app/core/store/shopping/products/products.effects.ts index 35c85da74c..161ca3927c 100644 --- a/src/app/core/store/shopping/products/products.effects.ts +++ b/src/app/core/store/shopping/products/products.effects.ts @@ -25,6 +25,7 @@ import { Product, ProductCompletenessLevel, ProductHelper } from 'ish-core/model import { ofProductUrl } from 'ish-core/routing/product/product.route'; import { ProductsService } from 'ish-core/services/products/products.service'; import { selectRouteParam } from 'ish-core/store/core/router'; +import { setBreadcrumbData } from 'ish-core/store/core/viewconf'; import { loadCategory } from 'ish-core/store/shopping/categories'; import { setProductListingPages } from 'ish-core/store/shopping/product-listing'; import { HttpStatusCodeService } from 'ish-core/utils/http-status-code/http-status-code.service'; @@ -52,7 +53,7 @@ import { loadProductsForCategoryFail, loadRetailSetSuccess, } from './products.actions'; -import { getProductEntities, getSelectedProduct } from './products.selectors'; +import { getBreadcrumbForProductPage, getProductEntities, getSelectedProduct } from './products.selectors'; @Injectable() export class ProductsEffects { @@ -327,5 +328,14 @@ export class ProductsEffects { ) ); + setBreadcrumbForProductPage$ = createEffect(() => + this.store.pipe( + ofProductUrl(), + select(getBreadcrumbForProductPage), + whenTruthy(), + map(breadcrumbData => setBreadcrumbData({ breadcrumbData })) + ) + ); + private throttleOnBrowser = () => (isPlatformBrowser(this.platformId) ? throttleTime(3000) : map(identity)); } diff --git a/src/app/core/store/shopping/products/products.selectors.spec.ts b/src/app/core/store/shopping/products/products.selectors.spec.ts index ffb118af0d..6a42b38d52 100644 --- a/src/app/core/store/shopping/products/products.selectors.spec.ts +++ b/src/app/core/store/shopping/products/products.selectors.spec.ts @@ -3,11 +3,14 @@ import { TestBed, fakeAsync, tick } from '@angular/core/testing'; import { Router } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; +import { Category } from 'ish-core/models/category/category.model'; import { HttpError } from 'ish-core/models/http-error/http-error.model'; -import { Product } from 'ish-core/models/product/product.model'; +import { Product, ProductCompletenessLevel } from 'ish-core/models/product/product.model'; import { CoreStoreModule } from 'ish-core/store/core/core-store.module'; +import { loadCategorySuccess } from 'ish-core/store/shopping/categories'; import { ShoppingStoreModule } from 'ish-core/store/shopping/shopping-store.module'; import { StoreWithSnapshots, provideStoreSnapshots } from 'ish-core/utils/dev/ngrx-testing'; +import { categoryTree } from 'ish-core/utils/dev/test-data-utils'; import { loadProduct, @@ -20,7 +23,14 @@ import { loadProductVariationsSuccess, loadRetailSetSuccess, } from './products.actions'; -import { getProduct, getProductEntities, getProductLinks, getProducts, getSelectedProduct } from './products.selectors'; +import { + getBreadcrumbForProductPage, + getProduct, + getProductEntities, + getProductLinks, + getProducts, + getSelectedProduct, +} from './products.selectors'; describe('Products Selectors', () => { let store$: StoreWithSnapshots; @@ -29,7 +39,7 @@ describe('Products Selectors', () => { let prod: Product; beforeEach(() => { - prod = { sku: 'sku' } as Product; + prod = { sku: 'sku', completenessLevel: ProductCompletenessLevel.Detail, name: 'product' } as Product; @Component({ template: 'dummy' }) class DummyComponent {} @@ -101,6 +111,10 @@ describe('Products Selectors', () => { it('should not select the irrelevant product when used', () => { expect(getSelectedProduct(store$.state)).toBeUndefined(); }); + + it('should not have a breadcrumb when no product is selected', () => { + expect(getBreadcrumbForProductPage(store$.state)).toBeUndefined(); + }); }); describe('with product route', () => { @@ -116,6 +130,98 @@ describe('Products Selectors', () => { it('should select the selected product when used', () => { expect(getSelectedProduct(store$.state)).toHaveProperty('sku', prod.sku); }); + + it('should generate a breadcrumb when product is selected', () => { + expect(getBreadcrumbForProductPage(store$.state)).toMatchInlineSnapshot(` + Array [ + Object { + "link": undefined, + "text": "product", + }, + ] + `); + }); + + describe('with category', () => { + beforeEach(() => { + store$.dispatch( + loadCategorySuccess({ + categories: categoryTree([{ uniqueId: 'A', name: 'nA', categoryPath: ['A'] }] as Category[]), + }) + ); + store$.dispatch( + loadCategorySuccess({ + categories: categoryTree([{ uniqueId: 'B', name: 'nB', categoryPath: ['B'] }] as Category[]), + }) + ); + }); + + describe('as default category', () => { + beforeEach(() => { + store$.dispatch(loadProductSuccess({ product: { ...prod, defaultCategoryId: 'A' } })); + }); + + it('should generate a breadcrumb with default category when product is selected', () => { + expect(getBreadcrumbForProductPage(store$.state)).toMatchInlineSnapshot(` + Array [ + Object { + "link": "/nA-catA", + "text": "nA", + }, + Object { + "link": undefined, + "text": "product", + }, + ] + `); + }); + }); + + describe('as selected category', () => { + beforeEach(fakeAsync(() => { + router.navigateByUrl('/product;sku=sku;categoryUniqueId=B'); + tick(500); + })); + + it('should generate a breadcrumb with selected category when product is selected', () => { + expect(getBreadcrumbForProductPage(store$.state)).toMatchInlineSnapshot(` + Array [ + Object { + "link": "/nB-catB", + "text": "nB", + }, + Object { + "link": undefined, + "text": "product", + }, + ] + `); + }); + }); + + describe('both selected and default', () => { + beforeEach(fakeAsync(() => { + store$.dispatch(loadProductSuccess({ product: { ...prod, defaultCategoryId: 'A' } })); + router.navigateByUrl('/product;sku=sku;categoryUniqueId=B'); + tick(500); + })); + + it('should generate a breadcrumb with selected category even if product has default category when product is selected', () => { + expect(getBreadcrumbForProductPage(store$.state)).toMatchInlineSnapshot(` + Array [ + Object { + "link": "/nB-catB", + "text": "nB", + }, + Object { + "link": undefined, + "text": "product", + }, + ] + `); + }); + }); + }); }); }); @@ -215,7 +321,7 @@ describe('Products Selectors', () => { store$.dispatch(loadProductSuccess({ product: { sku: 'SKU3', name: 'sku3' } as Product })); }); - it('should select various products on entites selector', () => { + it('should select various products on entities selector', () => { expect(getProductEntities(store$.state)).toHaveProperty('SKU1'); expect(getProductEntities(store$.state)).toHaveProperty('SKU2'); expect(getProductEntities(store$.state)).toHaveProperty('SKU3'); diff --git a/src/app/core/store/shopping/products/products.selectors.ts b/src/app/core/store/shopping/products/products.selectors.ts index a198dfc32d..554c522ed2 100644 --- a/src/app/core/store/shopping/products/products.selectors.ts +++ b/src/app/core/store/shopping/products/products.selectors.ts @@ -1,8 +1,10 @@ -import { createSelector } from '@ngrx/store'; -import { memoize } from 'lodash-es'; +import { Dictionary } from '@ngrx/entity'; +import { createSelector, createSelectorFactory, defaultMemoize } from '@ngrx/store'; +import { isEqual, memoize } from 'lodash-es'; import { CategoryTree } from 'ish-core/models/category-tree/category-tree.model'; -import { createCategoryView } from 'ish-core/models/category-view/category-view.model'; +import { CategoryView, createCategoryView } from 'ish-core/models/category-view/category-view.model'; +import { Category } from 'ish-core/models/category/category.model'; import { ProductLinks, ProductLinksView } from 'ish-core/models/product-links/product-links.model'; import { ProductVariationHelper } from 'ish-core/models/product-variation/product-variation.helper'; import { @@ -13,9 +15,10 @@ import { createVariationProductMasterView, createVariationProductView, } from 'ish-core/models/product-view/product-view.model'; -import { Product, ProductHelper } from 'ish-core/models/product/product.model'; +import { Product, ProductCompletenessLevel, ProductHelper } from 'ish-core/models/product/product.model'; +import { generateCategoryUrl } from 'ish-core/routing/category/category.route'; import { selectRouteParam } from 'ish-core/store/core/router'; -import { getCategoryTree } from 'ish-core/store/shopping/categories'; +import { getCategoryEntities, getCategoryTree, getSelectedCategory } from 'ish-core/store/shopping/categories'; import { getShoppingState } from 'ish-core/store/shopping/shopping-store'; import { productAdapter } from './products.reducer'; @@ -137,3 +140,22 @@ export const getProductLinks = createSelector( return acc; }, {}) ); + +export const getBreadcrumbForProductPage = createSelectorFactory(projector => + defaultMemoize(projector, undefined, isEqual) +)( + getSelectedProduct, + getSelectedCategory, + getCategoryEntities, + (product: ProductView, category: CategoryView, entities: Dictionary) => + ProductHelper.isSufficientlyLoaded(product, ProductCompletenessLevel.Detail) + ? (category?.categoryPath || product.defaultCategory()?.categoryPath || []) + .map(id => entities[id]) + .filter(x => !!x) + .map(cat => ({ + text: cat.name, + link: generateCategoryUrl(cat), + })) + .concat([{ text: product.name, link: undefined }]) + : undefined +); diff --git a/src/app/core/store/shopping/search/search.effects.spec.ts b/src/app/core/store/shopping/search/search.effects.spec.ts index 7e8f5f7f8d..4614d80bfb 100644 --- a/src/app/core/store/shopping/search/search.effects.spec.ts +++ b/src/app/core/store/shopping/search/search.effects.spec.ts @@ -3,6 +3,7 @@ import { Component } from '@angular/core'; import { TestBed, fakeAsync, tick } from '@angular/core/testing'; import { Router } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; +import { TranslateModule } from '@ngx-translate/core'; import { of, throwError } from 'rxjs'; import { anyNumber, anyString, anything, instance, mock, verify, when } from 'ts-mockito'; @@ -65,6 +66,7 @@ describe('Search Effects', () => { { path: 'search/:searchTerm', component: DummyComponent }, ]), ShoppingStoreModule.forTesting('productListing'), + TranslateModule.forRoot(), ], providers: [ provideStoreSnapshots(), diff --git a/src/app/core/store/shopping/search/search.effects.ts b/src/app/core/store/shopping/search/search.effects.ts index f90dca148d..41bf9708d0 100644 --- a/src/app/core/store/shopping/search/search.effects.ts +++ b/src/app/core/store/shopping/search/search.effects.ts @@ -2,6 +2,7 @@ import { Injectable } from '@angular/core'; import { Actions, createEffect, ofType } from '@ngrx/effects'; import { routerNavigatedAction } from '@ngrx/router-store'; import { Store, select } from '@ngrx/store'; +import { TranslateService } from '@ngx-translate/core'; import { isEqual } from 'lodash-es'; import { EMPTY } from 'rxjs'; import { catchError, concatMap, debounceTime, distinctUntilChanged, map, sample, switchMap, tap } from 'rxjs/operators'; @@ -10,6 +11,7 @@ import { ProductListingMapper } from 'ish-core/models/product-listing/product-li import { ProductsService } from 'ish-core/services/products/products.service'; import { SuggestService } from 'ish-core/services/suggest/suggest.service'; import { ofUrl, selectRouteParam } from 'ish-core/store/core/router'; +import { setBreadcrumbData } from 'ish-core/store/core/viewconf'; import { loadMoreProducts, setProductListingPages } from 'ish-core/store/shopping/product-listing'; import { loadProductSuccess } from 'ish-core/store/shopping/products'; import { HttpStatusCodeService } from 'ish-core/utils/http-status-code/http-status-code.service'; @@ -25,7 +27,8 @@ export class SearchEffects { private productsService: ProductsService, private suggestService: SuggestService, private httpStatusCodeService: HttpStatusCodeService, - private productListingMapper: ProductListingMapper + private productListingMapper: ProductListingMapper, + private translateService: TranslateService ) {} /** @@ -96,4 +99,17 @@ export class SearchEffects { ), { dispatch: false } ); + + setSearchBreadcrumb$ = createEffect(() => + this.store.pipe( + ofUrl(/^\/search.*/), + select(selectRouteParam('searchTerm')), + whenTruthy(), + switchMap(searchTerm => + this.translateService + .get('search.breadcrumbs.your_search.label') + .pipe(map(translation => setBreadcrumbData({ breadcrumbData: [{ text: `${translation} ${searchTerm}` }] }))) + ) + ) + ); } diff --git a/src/app/core/store/shopping/shopping-store.spec.ts b/src/app/core/store/shopping/shopping-store.spec.ts index 4faa3edc65..974dcac9f5 100644 --- a/src/app/core/store/shopping/shopping-store.spec.ts +++ b/src/app/core/store/shopping/shopping-store.spec.ts @@ -58,14 +58,15 @@ describe('Shopping Store', () => { @Component({ template: 'dummy' }) class DummyComponent {} - const catA = { uniqueId: 'A', categoryPath: ['A'] } as Category; - const catA123 = { uniqueId: 'A.123', categoryPath: ['A', 'A.123'] } as Category; + const catA = { uniqueId: 'A', categoryPath: ['A'], name: 'nA' } as Category; + const catA123 = { uniqueId: 'A.123', categoryPath: ['A', 'A.123'], name: 'nA123' } as Category; const catA123456 = { uniqueId: 'A.123.456', categoryPath: ['A', 'A.123', 'A.123.456'], hasOnlineProducts: true, + name: 'nA123456', } as Category; - const catB = { uniqueId: 'B', categoryPath: ['B'] } as Category; + const catB = { uniqueId: 'B', categoryPath: ['B'], name: 'nB' } as Category; const promotion = { id: 'PROMO_UUID', @@ -119,7 +120,7 @@ describe('Shopping Store', () => { productsServiceMock = mock(ProductsService); when(productsServiceMock.getProduct(anyString())).thenCall(sku => { if (['P1', 'P2'].find(x => x === sku)) { - return of({ sku }); + return of({ sku, name: 'n' + sku }); } else { return throwError({ message: `error loading product ${sku}` }); } @@ -269,6 +270,8 @@ describe('Shopping Store', () => { categories: tree(A.123,A.123.456) [Categories Internal] Load Category: categoryId: "A" + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"nA","link":"/nA-catA"},{"text":"nA123"}] [Categories API] Load Category Success: categories: tree(A,A.123) @ngrx/router-store/navigated: @@ -315,6 +318,8 @@ describe('Shopping Store', () => { @ngrx/router-store/navigation: routerState: {"url":"/search/something","params":{"searchTerm":"something... event: {"id":2,"url":"/search/something"} + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"search.breadcrumbs.your_search.label something"}] @ngrx/router-store/navigated: routerState: {"url":"/search/something","params":{"searchTerm":"something... event: {"id":2,"url":"/search/something"} @@ -366,7 +371,7 @@ describe('Shopping Store', () => { sku: "P2" group: undefined [Products API] Load Product Success: - product: {"sku":"P2"} + product: {"sku":"P2","name":"nP2"} @ngrx/router-store/navigated: routerState: {"url":"/product/P2","params":{"sku":"P2"},"queryParams":{},... event: {"id":3,"url":"/product/P2"} @@ -402,8 +407,12 @@ describe('Shopping Store', () => { categories: tree(A.123,A.123.456) [Categories Internal] Load Category: categoryId: "A" + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"nA123"}] [Categories API] Load Category Success: categories: tree(A,A.123) + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"nA","link":"/nA-catA"},{"text":"nA123"}] @ngrx/router-store/navigated: routerState: {"url":"/category/A.123","params":{"categoryUniqueId":"A.123... event: {"id":1,"url":"/category/A.123"} @@ -476,12 +485,16 @@ describe('Shopping Store', () => { categoryId: "A" [Categories Internal] Load Category: categoryId: "A.123" + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"nA123456"}] [Categories API] Load Category Success: categories: tree(A,A.123) [Categories API] Load Category Success: categories: tree(A.123,A.123.456) [Categories Internal] Load Category: categoryId: "A.123" + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"nA","link":"/nA-catA"},{"text":"nA123","link":"/nA... [Categories API] Load Category Success: categories: tree(A.123,A.123.456) @ngrx/router-store/navigated: @@ -545,7 +558,7 @@ describe('Shopping Store', () => { sku: "P1" group: undefined [Products API] Load Product Success: - product: {"sku":"P1"} + product: {"sku":"P1","name":"nP1"} @ngrx/router-store/navigated: routerState: {"url":"/category/A.123.456/product/P1","params":{"categoryU... event: {"id":2,"url":"/category/A.123.456/product/P1"} @@ -594,6 +607,8 @@ describe('Shopping Store', () => { @ngrx/router-store/navigation: routerState: {"url":"/search/something","params":{"searchTerm":"something... event: {"id":2,"url":"/search/something"} + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"search.breadcrumbs.your_search.label something"}] @ngrx/router-store/navigated: routerState: {"url":"/search/something","params":{"searchTerm":"something... event: {"id":2,"url":"/search/something"} @@ -708,7 +723,7 @@ describe('Shopping Store', () => { [Categories API] Load Category Success: categories: tree(A.123.456) [Products API] Load Product Success: - product: {"sku":"P1"} + product: {"sku":"P1","name":"nP1"} [Categories Internal] Load Category: categoryId: "A" [Categories Internal] Load Category: @@ -759,6 +774,8 @@ describe('Shopping Store', () => { @ngrx/router-store/navigation: routerState: {"url":"/category/A.123.456","params":{"categoryUniqueId":"A... event: {"id":2,"url":"/category/A.123.456"} + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"nA","link":"/nA-catA"},{"text":"nA123","link":"/nA... [Product Listing] Load More Products: id: {"type":"category","value":"A.123.456"} [Product Listing Internal] Load More Products For Params: @@ -853,7 +870,7 @@ describe('Shopping Store', () => { [Products Internal] Load Product: sku: "P1" [Products API] Load Product Success: - product: {"sku":"P1"} + product: {"sku":"P1","name":"nP1"} [Recently Viewed Internal] Add Product to Recently: sku: "P1" group: undefined @@ -1036,6 +1053,8 @@ describe('Shopping Store', () => { @ngrx/router-store/navigation: routerState: {"url":"/search/something","params":{"searchTerm":"something... event: {"id":1,"url":"/search/something"} + [Viewconf Internal] Set Breadcrumb Data: + breadcrumbData: [{"text":"search.breadcrumbs.your_search.label something"}] @ngrx/router-store/navigated: routerState: {"url":"/search/something","params":{"searchTerm":"something... event: {"id":1,"url":"/search/something"} diff --git a/src/app/extensions/order-templates/store/order-template/order-template.effects.spec.ts b/src/app/extensions/order-templates/store/order-template/order-template.effects.spec.ts index fb39af766a..62bb8ebe2d 100644 --- a/src/app/extensions/order-templates/store/order-template/order-template.effects.spec.ts +++ b/src/app/extensions/order-templates/store/order-template/order-template.effects.spec.ts @@ -509,7 +509,9 @@ describe('Order Template Effects', () => { store$.dispatch(selectOrderTemplate({ id: orderTemplates[0].id })); }); - it('should set the breadcrumb of the selected Order Template', done => { + it('should set the breadcrumb of the selected Order Template when on account url', done => { + router.navigateByUrl('/account/order-templates/' + orderTemplates[0].id); + effects.setOrderTemplateBreadcrumb$.subscribe(action => { expect(action.payload).toMatchInlineSnapshot(` Object { @@ -527,5 +529,11 @@ describe('Order Template Effects', () => { done(); }); }); + + it('should not set the breadcrumb of the selected Order Template when on another url', done => { + effects.setOrderTemplateBreadcrumb$.subscribe(fail, fail, fail); + + setTimeout(done, 1000); + }); }); }); diff --git a/src/app/extensions/order-templates/store/order-template/order-template.effects.ts b/src/app/extensions/order-templates/store/order-template/order-template.effects.ts index 926acde020..772e2aaac7 100644 --- a/src/app/extensions/order-templates/store/order-template/order-template.effects.ts +++ b/src/app/extensions/order-templates/store/order-template/order-template.effects.ts @@ -5,7 +5,7 @@ import { concat } from 'rxjs'; import { concatMap, filter, last, map, mapTo, mergeMap, switchMap, withLatestFrom } from 'rxjs/operators'; import { displaySuccessMessage } from 'ish-core/store/core/messages'; -import { selectRouteParam } from 'ish-core/store/core/router'; +import { ofUrl, selectRouteParam } from 'ish-core/store/core/router'; import { setBreadcrumbData } from 'ish-core/store/core/viewconf'; import { getCurrentBasket } from 'ish-core/store/customer/basket'; import { getUserAuthorized } from 'ish-core/store/customer/user'; @@ -274,6 +274,7 @@ export class OrderTemplateEffects { setOrderTemplateBreadcrumb$ = createEffect(() => this.store.pipe( + ofUrl(/^\/account\/.*/), select(getSelectedOrderTemplateDetails), whenTruthy(), map(orderTemplate => diff --git a/src/app/extensions/quickorder/pages/quickorder-routing.module.ts b/src/app/extensions/quickorder/pages/quickorder-routing.module.ts index dbedcfdccd..1421729097 100644 --- a/src/app/extensions/quickorder/pages/quickorder-routing.module.ts +++ b/src/app/extensions/quickorder/pages/quickorder-routing.module.ts @@ -8,7 +8,7 @@ const routes: Routes = [ path: 'quick-order', loadChildren: () => import('./quickorder/quickorder-page.module').then(m => m.QuickorderPageModule), canActivate: [FeatureToggleGuard], - data: { feature: 'quickorder' }, + data: { feature: 'quickorder', breadcrumbData: [{ key: 'quickorder.page.breadcrumb' }] }, }, ]; diff --git a/src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.html b/src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.html index d41fe906e9..7c37cd6a8c 100644 --- a/src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.html +++ b/src/app/extensions/quickorder/pages/quickorder/quickorder-page.component.html @@ -1,5 +1,5 @@
- +

{{ 'quickorder.page.title' | translate }}

diff --git a/src/app/extensions/quoting/store/quote-request/quote-request.effects.ts b/src/app/extensions/quoting/store/quote-request/quote-request.effects.ts index e166d1d53c..5c7d36451c 100644 --- a/src/app/extensions/quoting/store/quote-request/quote-request.effects.ts +++ b/src/app/extensions/quoting/store/quote-request/quote-request.effects.ts @@ -26,7 +26,7 @@ import { import { LineItemUpdate } from 'ish-core/models/line-item-update/line-item-update.model'; import { ProductCompletenessLevel } from 'ish-core/models/product/product.model'; import { displaySuccessMessage } from 'ish-core/store/core/messages'; -import { selectRouteParam } from 'ish-core/store/core/router'; +import { ofUrl, selectRouteParam } from 'ish-core/store/core/router'; import { setBreadcrumbData } from 'ish-core/store/core/viewconf'; import { getCurrentBasket } from 'ish-core/store/customer/basket'; import { getUserAuthorized, loadCompanyUserSuccess } from 'ish-core/store/customer/user'; @@ -452,6 +452,7 @@ export class QuoteRequestEffects { setQuoteRequestBreadcrumb$ = createEffect(() => this.store.pipe( + ofUrl(/^\/account\/.*/), select(getSelectedQuoteRequest), whenTruthy(), withLatestFrom(this.translateService.get('quote.edit.unsubmitted.quote_request_details.text')), diff --git a/src/app/extensions/wishlists/store/wishlist/wishlist.effects.spec.ts b/src/app/extensions/wishlists/store/wishlist/wishlist.effects.spec.ts index 5e9c572945..78f9fd4e04 100644 --- a/src/app/extensions/wishlists/store/wishlist/wishlist.effects.spec.ts +++ b/src/app/extensions/wishlists/store/wishlist/wishlist.effects.spec.ts @@ -84,7 +84,7 @@ describe('Wishlist Effects', () => { CoreStoreModule.forTesting(['router']), CustomerStoreModule.forTesting('user'), FeatureToggleModule.forTesting('wishlists'), - RouterTestingModule.withRoutes([{ path: 'account/wishlist/:wishlistName', component: DummyComponent }]), + RouterTestingModule.withRoutes([{ path: 'account/wishlists/:wishlistName', component: DummyComponent }]), WishlistsStoreModule.forTesting('wishlists'), ], providers: [ @@ -494,7 +494,7 @@ describe('Wishlist Effects', () => { describe('routeListenerForSelectedWishlist$', () => { it('should map to action of type SelectWishlist', done => { - router.navigateByUrl('/account/wishlist/.SKsEQAE4FIAAAFuNiUBWx0d'); + router.navigateByUrl('/account/wishlists/.SKsEQAE4FIAAAFuNiUBWx0d'); effects.routeListenerForSelectedWishlist$.subscribe(action => { expect(action).toMatchInlineSnapshot(` @@ -526,7 +526,9 @@ describe('Wishlist Effects', () => { store$.dispatch(selectWishlist({ id: wishlists[0].id })); }); - it('should set the breadcrumb of the selected wishlist', done => { + it('should set the breadcrumb of the selected wishlist in my account area', done => { + router.navigateByUrl('/account/wishlists/' + wishlists[0].id); + effects.setWishlistBreadcrumb$.subscribe(action => { expect(action.payload).toMatchInlineSnapshot(` Object { @@ -544,5 +546,11 @@ describe('Wishlist Effects', () => { done(); }); }); + + it('should not set the breadcrumb of the selected wishlist when on another url', done => { + effects.setWishlistBreadcrumb$.subscribe(fail, fail, fail); + + setTimeout(done, 1000); + }); }); }); diff --git a/src/app/extensions/wishlists/store/wishlist/wishlist.effects.ts b/src/app/extensions/wishlists/store/wishlist/wishlist.effects.ts index 0ffb5495ac..f055324650 100644 --- a/src/app/extensions/wishlists/store/wishlist/wishlist.effects.ts +++ b/src/app/extensions/wishlists/store/wishlist/wishlist.effects.ts @@ -4,7 +4,7 @@ import { Store, select } from '@ngrx/store'; import { debounceTime, filter, map, mapTo, mergeMap, switchMap, withLatestFrom } from 'rxjs/operators'; import { displaySuccessMessage } from 'ish-core/store/core/messages'; -import { selectRouteParam } from 'ish-core/store/core/router'; +import { ofUrl, selectRouteParam } from 'ish-core/store/core/router'; import { setBreadcrumbData } from 'ish-core/store/core/viewconf'; import { getUserAuthorized } from 'ish-core/store/customer/user'; import { @@ -219,6 +219,7 @@ export class WishlistEffects { setWishlistBreadcrumb$ = createEffect(() => this.store.pipe( + ofUrl(/^\/account\/.*/), select(getSelectedWishlistDetails), whenTruthy(), map(wishlist => diff --git a/src/app/pages/account/account-page.component.html b/src/app/pages/account/account-page.component.html index e342d79e8c..fd4881fe02 100644 --- a/src/app/pages/account/account-page.component.html +++ b/src/app/pages/account/account-page.component.html @@ -4,7 +4,7 @@
- +
diff --git a/src/app/pages/account/account-page.component.ts b/src/app/pages/account/account-page.component.ts index 92171343f9..a8591e30ec 100644 --- a/src/app/pages/account/account-page.component.ts +++ b/src/app/pages/account/account-page.component.ts @@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs'; import { AppFacade } from 'ish-core/facades/app.facade'; -import { BreadcrumbItem } from 'ish-core/models/breadcrumb-item/breadcrumb-item.interface'; import { DeviceType } from 'ish-core/models/viewtype/viewtype.types'; @Component({ @@ -11,13 +10,11 @@ import { DeviceType } from 'ish-core/models/viewtype/viewtype.types'; changeDetection: ChangeDetectionStrategy.Default, }) export class AccountPageComponent implements OnInit { - breadcrumbData$: Observable; deviceType$: Observable; constructor(private appFacade: AppFacade) {} ngOnInit() { - this.breadcrumbData$ = this.appFacade.breadcrumbData$; this.deviceType$ = this.appFacade.deviceType$; } } diff --git a/src/app/pages/app-routing.module.ts b/src/app/pages/app-routing.module.ts index f6dc0e1f61..f556feeff2 100644 --- a/src/app/pages/app-routing.module.ts +++ b/src/app/pages/app-routing.module.ts @@ -61,6 +61,7 @@ const routes: Routes = [ title: 'application.recentlyViewed.heading', robots: 'noindex, nofollow', }, + breadcrumbData: [{ key: 'application.recentlyViewed.breadcrumb.label' }], }, }, { @@ -142,6 +143,7 @@ const routes: Routes = [ title: 'helpdesk.contact_us.heading', robots: 'index, nofollow', }, + breadcrumbData: [{ key: 'helpdesk.contact_us.link' }], }, }, ]; diff --git a/src/app/pages/category/category-categories/category-categories.component.html b/src/app/pages/category/category-categories/category-categories.component.html index 8a1a20c4f5..db11a95f65 100644 --- a/src/app/pages/category/category-categories/category-categories.component.html +++ b/src/app/pages/category/category-categories/category-categories.component.html @@ -11,7 +11,7 @@
- +

{{ category.name }}

diff --git a/src/app/pages/category/category-products/category-products.component.html b/src/app/pages/category/category-products/category-products.component.html index 0e37ce3943..57e2851009 100644 --- a/src/app/pages/category/category-products/category-products.component.html +++ b/src/app/pages/category/category-products/category-products.component.html @@ -14,7 +14,7 @@
- +

{{ category.name }}

+

{{ 'helpdesk.contact_us.heading' | translate }}

diff --git a/src/app/pages/content/content-page.component.html b/src/app/pages/content/content-page.component.html index 7f9675a639..55be777508 100644 --- a/src/app/pages/content/content-page.component.html +++ b/src/app/pages/content/content-page.component.html @@ -1,5 +1,5 @@ - + - + + diff --git a/src/app/pages/search/search-page.component.html b/src/app/pages/search/search-page.component.html index ca681d0c72..a66c5bd82b 100644 --- a/src/app/pages/search/search-page.component.html +++ b/src/app/pages/search/search-page.component.html @@ -10,7 +10,7 @@ - + diff --git a/src/app/pages/search/search-result/search-result.component.html b/src/app/pages/search/search-result/search-result.component.html index 73080adf25..8d91068865 100644 --- a/src/app/pages/search/search-result/search-result.component.html +++ b/src/app/pages/search/search-result/search-result.component.html @@ -10,7 +10,7 @@
- +

{{ 'search.title.text' diff --git a/src/app/shared/components/common/breadcrumb/breadcrumb.component.html b/src/app/shared/components/common/breadcrumb/breadcrumb.component.html index f98f76e1c3..e35a4ccf72 100644 --- a/src/app/shared/components/common/breadcrumb/breadcrumb.component.html +++ b/src/app/shared/components/common/breadcrumb/breadcrumb.component.html @@ -7,13 +7,8 @@ >{{ separator }} - -
  • {{ 'search.breadcrumbs.your_search.label' | translate }} {{ searchTerm }}
    • -
  • - + {{ 'account.my_account.link' | translate }}{{ separator }} @@ -23,7 +18,7 @@
  • diff --git a/src/app/shared/components/common/breadcrumb/breadcrumb.component.spec.ts b/src/app/shared/components/common/breadcrumb/breadcrumb.component.spec.ts index f686888550..e5d0df9748 100644 --- a/src/app/shared/components/common/breadcrumb/breadcrumb.component.spec.ts +++ b/src/app/shared/components/common/breadcrumb/breadcrumb.component.spec.ts @@ -1,12 +1,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { TranslateModule, TranslateService } from '@ngx-translate/core'; +import { of } from 'rxjs'; +import { instance, mock, when } from 'ts-mockito'; -import { createCategoryView } from 'ish-core/models/category-view/category-view.model'; -import { Category } from 'ish-core/models/category/category.model'; -import { createProductView } from 'ish-core/models/product-view/product-view.model'; -import { Product } from 'ish-core/models/product/product.model'; -import { categoryTree } from 'ish-core/utils/dev/test-data-utils'; +import { AppFacade } from 'ish-core/facades/app.facade'; import { BreadcrumbComponent } from './breadcrumb.component'; @@ -15,11 +13,14 @@ describe('Breadcrumb Component', () => { let component: BreadcrumbComponent; let element: HTMLElement; let translate: TranslateService; + let appFacade: AppFacade; beforeEach(() => { + appFacade = mock(AppFacade); TestBed.configureTestingModule({ declarations: [BreadcrumbComponent], imports: [RouterTestingModule, TranslateModule.forRoot()], + providers: [{ provide: AppFacade, useFactory: () => instance(appFacade) }], }); fixture = TestBed.createComponent(BreadcrumbComponent); component = fixture.componentInstance; @@ -27,7 +28,6 @@ describe('Breadcrumb Component', () => { translate = TestBed.inject(TranslateService); translate.setDefaultLang('en'); translate.use('en'); - translate.set('search.breadcrumbs.your_search.label', 'Search Results:'); translate.set('account.my_account.link', 'My Account'); translate.set('account.order_history.link', 'Orders'); translate.set('common.home.link', 'Home'); @@ -41,131 +41,44 @@ describe('Breadcrumb Component', () => { describe('breadcrumbtrail from property trail', () => { it('should render trail from home and trail with translation keys if set', () => { - component.trail = [{ key: 'KEY' }, { key: 'KEY2' }]; + when(appFacade.breadcrumbData$).thenReturn(of([{ key: 'KEY' }, { key: 'KEY2' }])); fixture.detectChanges(); expect(element.textContent).toMatchInlineSnapshot(`"Home/KEY/KEY2"`); }); it('should render trail from home and trail with text if set', () => { - component.trail = [{ text: 'TEXT' }, { text: 'TEXT2' }]; + when(appFacade.breadcrumbData$).thenReturn(of([{ text: 'TEXT' }, { text: 'TEXT2' }])); fixture.detectChanges(); expect(element.textContent).toMatchInlineSnapshot(`"Home/TEXT/TEXT2"`); }); it('should render trail from home and with link if set', () => { - component.trail = [ - { link: '/LINK', text: 'L1' }, - { link: '/LINK', text: 'L2' }, - ]; + when(appFacade.breadcrumbData$).thenReturn( + of([ + { link: '/LINK', text: 'L1' }, + { link: '/LINK', text: 'L2' }, + ]) + ); fixture.detectChanges(); expect(element.textContent).toMatchInlineSnapshot(`"Home/L1/L2"`); }); }); - describe('breadcrumbtrail from category', () => { - const cat1 = { - uniqueId: '123', - categoryPath: ['123'], - name: 'cat123', - } as Category; - const cat11 = { - uniqueId: '123.456', - categoryPath: ['123', '123.456'], - name: 'cat456', - } as Category; - const tree = categoryTree([cat1, cat11]); - const view = createCategoryView(tree, '123.456'); - - it('should render breadcrumbtrail from home and category when available', () => { - component.category = view; - fixture.detectChanges(); - expect(element.textContent).toMatchInlineSnapshot(`"Home/cat123/cat456"`); - }); - it('should render breadcrumbtrail from category when available', () => { - component.showHome = false; - component.category = view; - fixture.detectChanges(); - expect(element.textContent).toMatchInlineSnapshot(`"cat123/cat456"`); - }); - }); - - describe('breadcrumbtrail from category of product', () => { - const cat1 = { - uniqueId: '1', - categoryPath: ['1'], - name: 'n1', - } as Category; - const cat11 = { - uniqueId: '1.2', - categoryPath: ['1', '1.2'], - name: 'n2', - } as Category; - const tree = categoryTree([cat1, cat11]); - - it('should render breadcrumbtrail from home and category of product when category of product is available', () => { - const product = { - name: 'FakeProduct', - sku: '01234567', - defaultCategoryId: '1.2', - } as Product; - const view = createProductView(product, tree); - component.product = view; - fixture.detectChanges(); - expect(element.textContent).toMatchInlineSnapshot(`"Home/n1/n2/FakeProduct"`); - }); - }); - - describe('breadcrumbtrail from product name', () => { - it('should render breadcrumbtrail from product name of product when product is available', () => { - const productName = 'FakeProduct'; - component.showHome = false; - const product = { - name: productName, - sku: '01234567', - } as Product; - const view = createProductView(product, categoryTree()); - component.product = view; - fixture.detectChanges(); - expect(element.textContent).toMatchInlineSnapshot(`"FakeProduct"`); - }); - }); - describe('breadcrumbtrail from account', () => { it('should render breadcrumbtrail from account and trail when account is active', () => { component.showHome = false; component.account = true; - component.trail = [{ key: 'account.order_history.link' }]; + when(appFacade.breadcrumbData$).thenReturn(of([{ key: 'account.order_history.link' }])); fixture.detectChanges(); expect(element.textContent).toMatchInlineSnapshot(`"My Account/Orders"`); }); it('should render breadcrumbtrail from home and account and trail when account is active', () => { component.account = true; - component.trail = [{ key: 'account.order_history.link' }]; + when(appFacade.breadcrumbData$).thenReturn(of([{ key: 'account.order_history.link' }])); fixture.detectChanges(); expect(element.textContent).toMatchInlineSnapshot(`"Home/My Account/Orders"`); expect(element.textContent).toContain('My Account'); }); }); - - describe('breadcrumbtrail from search term', () => { - it('should render trail from search term when is available', () => { - component.showHome = false; - component.searchTerm = 'Test Search Term'; - - fixture.detectChanges(); - expect(element.textContent).toMatchInlineSnapshot(`"Search Results: Test Search Term"`); - }); - - it('should render trail from home and search term when search term is available', () => { - component.searchTerm = 'Test Search Term'; - fixture.detectChanges(); - expect(element.textContent).toMatchInlineSnapshot(`"Home/Search Results: Test Search Term"`); - }); - - it('should render home only by default if nothing else is available', () => { - fixture.detectChanges(); - expect(element.textContent).toMatchInlineSnapshot(`"Home/"`); - }); - }); }); diff --git a/src/app/shared/components/common/breadcrumb/breadcrumb.component.ts b/src/app/shared/components/common/breadcrumb/breadcrumb.component.ts index aacfd77f95..95ba4840fe 100644 --- a/src/app/shared/components/common/breadcrumb/breadcrumb.component.ts +++ b/src/app/shared/components/common/breadcrumb/breadcrumb.component.ts @@ -1,52 +1,31 @@ -import { ChangeDetectionStrategy, Component, DoCheck, Input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; +import { Observable } from 'rxjs'; +import { AppFacade } from 'ish-core/facades/app.facade'; import { BreadcrumbItem } from 'ish-core/models/breadcrumb-item/breadcrumb-item.interface'; -import { CategoryView } from 'ish-core/models/category-view/category-view.model'; -import { ProductView } from 'ish-core/models/product-view/product-view.model'; -import { generateCategoryUrl } from 'ish-core/routing/category/category.route'; +/** + * component for setting the breadcrumb trail of a specific page + * + * Breadcrumbs can be set in two specific ways: + * - setting the 'breadcrumbData' field as routing data + * - dispatching a setBreadcrumbData action in an effect + */ @Component({ selector: 'ish-breadcrumb', templateUrl: './breadcrumb.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class BreadcrumbComponent implements DoCheck { +export class BreadcrumbComponent implements OnInit { @Input() separator = '/'; @Input() showHome = true; - @Input() category: CategoryView; - @Input() product: ProductView; - @Input() searchTerm: string; @Input() account: boolean; - @Input() trail: BreadcrumbItem[] = []; - private buildTrailFromCategoryOrProduct(category: CategoryView, product: ProductView) { - const trail = []; + trail$: Observable; - // use incoming category if set, if not fallback to product default category - const usedCategory = category ? category : product ? product.defaultCategory() : undefined; - if (usedCategory) { - trail.push( - ...usedCategory.pathCategories().map(cat => ({ - text: cat.name, - link: generateCategoryUrl(cat), - })) - ); - } + constructor(private appFacade: AppFacade) {} - if (product) { - trail.push({ text: product.name }); - } else if (trail.length) { - // remove link from last category entry - trail[trail.length - 1].link = undefined; - } - - return trail; - } - - ngDoCheck() { - if (this.category || this.product) { - // tslint:disable-next-line:no-assignement-to-inputs - this.trail = this.buildTrailFromCategoryOrProduct(this.category, this.product); - } + ngOnInit() { + this.trail$ = this.appFacade.breadcrumbData$; } }