From 7da6b6d267733c9474bf85472959759b49f1bd1c Mon Sep 17 00:00:00 2001 From: Robert Goepfert Date: Thu, 11 Aug 2022 15:59:42 +0200 Subject: [PATCH 1/5] feat: add default mobile listing viewtype --- src/app/core/configurations/injection-keys.ts | 7 +++++++ .../product-listing/product-listing.effects.spec.ts | 7 +++++++ .../product-listing/product-listing.effects.ts | 13 +++++++++++-- src/environments/environment.model.ts | 2 ++ 4 files changed, 27 insertions(+), 2 deletions(-) diff --git a/src/app/core/configurations/injection-keys.ts b/src/app/core/configurations/injection-keys.ts index 604d97560c..9e1216f8b4 100644 --- a/src/app/core/configurations/injection-keys.ts +++ b/src/app/core/configurations/injection-keys.ts @@ -45,6 +45,13 @@ export const DEFAULT_PRODUCT_LISTING_VIEW_TYPE = new InjectionToken('d factory: () => environment.defaultProductListingViewType, }); +export const DEFAULT_PRODUCT_LISTING_VIEW_TYPE_MOBILE = new InjectionToken( + 'defaultProductListingViewTypeMobile', + { + factory: () => environment.defaultProductListingViewTypeMobile, + } +); + /** * the configured cookie consent options for the application */ diff --git a/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts b/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts index c25c14f428..4cdb33bc38 100644 --- a/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts +++ b/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts @@ -1,11 +1,14 @@ import { TestBed, fakeAsync, tick } from '@angular/core/testing'; import { Router } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; +import { provideMockStore } from '@ngrx/store/testing'; import { DEFAULT_PRODUCT_LISTING_VIEW_TYPE, + DEFAULT_PRODUCT_LISTING_VIEW_TYPE_MOBILE, PRODUCT_LISTING_ITEMS_PER_PAGE, } from 'ish-core/configurations/injection-keys'; +import { getDeviceType } from 'ish-core/store/core/configuration'; import { CoreStoreModule } from 'ish-core/store/core/core-store.module'; import { ShoppingStoreModule } from 'ish-core/store/shopping/shopping-store.module'; import { StoreWithSnapshots, provideStoreSnapshots } from 'ish-core/utils/dev/ngrx-testing'; @@ -27,7 +30,11 @@ describe('Product Listing Effects', () => { ], providers: [ { provide: DEFAULT_PRODUCT_LISTING_VIEW_TYPE, useValue: 'list' }, + { provide: DEFAULT_PRODUCT_LISTING_VIEW_TYPE_MOBILE, useValue: 'list' }, { provide: PRODUCT_LISTING_ITEMS_PER_PAGE, useValue: 7 }, + provideMockStore({ + selectors: [{ selector: getDeviceType, value: 'desktop' }], + }), provideStoreSnapshots(), ], }); diff --git a/src/app/core/store/shopping/product-listing/product-listing.effects.ts b/src/app/core/store/shopping/product-listing/product-listing.effects.ts index 0c27a2ee9e..533adf35e6 100644 --- a/src/app/core/store/shopping/product-listing/product-listing.effects.ts +++ b/src/app/core/store/shopping/product-listing/product-listing.effects.ts @@ -2,13 +2,15 @@ import { Inject, Injectable } from '@angular/core'; import { Actions, createEffect, ofType } from '@ngrx/effects'; import { Store, select } from '@ngrx/store'; import { isEqual } from 'lodash-es'; -import { distinctUntilChanged, map, switchMap, take } from 'rxjs/operators'; +import { distinctUntilChanged, map, switchMap, take, withLatestFrom, filter } from 'rxjs/operators'; import { DEFAULT_PRODUCT_LISTING_VIEW_TYPE, + DEFAULT_PRODUCT_LISTING_VIEW_TYPE_MOBILE, PRODUCT_LISTING_ITEMS_PER_PAGE, } from 'ish-core/configurations/injection-keys'; import { ViewType } from 'ish-core/models/viewtype/viewtype.types'; +import { getDeviceType } from 'ish-core/store/core/configuration'; import { selectQueryParam, selectQueryParams } from 'ish-core/store/core/router'; import { applyFilter, @@ -35,6 +37,7 @@ export class ProductListingEffects { constructor( @Inject(PRODUCT_LISTING_ITEMS_PER_PAGE) private itemsPerPage: number, @Inject(DEFAULT_PRODUCT_LISTING_VIEW_TYPE) private defaultViewType: ViewType, + @Inject(DEFAULT_PRODUCT_LISTING_VIEW_TYPE_MOBILE) private defaultViewTypeMobile: ViewType, private actions$: Actions, private store: Store ) {} @@ -48,9 +51,15 @@ export class ProductListingEffects { initializeDefaultViewType$ = createEffect(() => this.store.pipe( + filter(() => !SSR), select(getProductListingViewType), whenFalsy(), - map(() => setViewType({ viewType: this.defaultViewType })) + withLatestFrom(this.store.pipe(select(getDeviceType))), + map(([, deviceType]) => + setViewType( + deviceType === 'mobile' ? { viewType: this.defaultViewTypeMobile } : { viewType: this.defaultViewType } + ) + ) ) ); diff --git a/src/environments/environment.model.ts b/src/environments/environment.model.ts index f1c69c381b..b55820be34 100644 --- a/src/environments/environment.model.ts +++ b/src/environments/environment.model.ts @@ -81,6 +81,7 @@ export interface Environment { // default viewType used for product listings defaultProductListingViewType: ViewType; + defaultProductListingViewTypeMobile: ViewType; // default device type used for initial page responses defaultDeviceType: DeviceType; @@ -145,6 +146,7 @@ export const ENVIRONMENT_DEFAULTS: Omit = { master: 6, }, defaultProductListingViewType: 'grid', + defaultProductListingViewTypeMobile: 'list', defaultDeviceType: 'mobile', multiSiteLocaleMap: { en_US: '/en', From ade81ab89f6d135dc623b18ba2d665e843e45a33 Mon Sep 17 00:00:00 2001 From: Stefan Hauke Date: Wed, 17 Aug 2022 15:13:24 +0200 Subject: [PATCH 2/5] fixup! feat: add default mobile listing viewtype --- .../shopping/product-listing/product-listing.effects.spec.ts | 2 +- .../store/shopping/product-listing/product-listing.effects.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts b/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts index 4cdb33bc38..7131ba5116 100644 --- a/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts +++ b/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts @@ -29,8 +29,8 @@ describe('Product Listing Effects', () => { ShoppingStoreModule.forTesting('productListing'), ], providers: [ - { provide: DEFAULT_PRODUCT_LISTING_VIEW_TYPE, useValue: 'list' }, { provide: DEFAULT_PRODUCT_LISTING_VIEW_TYPE_MOBILE, useValue: 'list' }, + { provide: DEFAULT_PRODUCT_LISTING_VIEW_TYPE, useValue: 'list' }, { provide: PRODUCT_LISTING_ITEMS_PER_PAGE, useValue: 7 }, provideMockStore({ selectors: [{ selector: getDeviceType, value: 'desktop' }], diff --git a/src/app/core/store/shopping/product-listing/product-listing.effects.ts b/src/app/core/store/shopping/product-listing/product-listing.effects.ts index 533adf35e6..2060563cb1 100644 --- a/src/app/core/store/shopping/product-listing/product-listing.effects.ts +++ b/src/app/core/store/shopping/product-listing/product-listing.effects.ts @@ -2,7 +2,7 @@ import { Inject, Injectable } from '@angular/core'; import { Actions, createEffect, ofType } from '@ngrx/effects'; import { Store, select } from '@ngrx/store'; import { isEqual } from 'lodash-es'; -import { distinctUntilChanged, map, switchMap, take, withLatestFrom, filter } from 'rxjs/operators'; +import { distinctUntilChanged, filter, map, switchMap, take, withLatestFrom } from 'rxjs/operators'; import { DEFAULT_PRODUCT_LISTING_VIEW_TYPE, From 311678a72b2f31495b01bf7905b0ac34ef759f6e Mon Sep 17 00:00:00 2001 From: Stefan Hauke Date: Wed, 17 Aug 2022 15:24:49 +0200 Subject: [PATCH 3/5] change mobile default in standard to 'grid' instead of 'list' --- src/environments/environment.model.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/environments/environment.model.ts b/src/environments/environment.model.ts index b55820be34..ebbbea9047 100644 --- a/src/environments/environment.model.ts +++ b/src/environments/environment.model.ts @@ -146,7 +146,7 @@ export const ENVIRONMENT_DEFAULTS: Omit = { master: 6, }, defaultProductListingViewType: 'grid', - defaultProductListingViewTypeMobile: 'list', + defaultProductListingViewTypeMobile: 'grid', defaultDeviceType: 'mobile', multiSiteLocaleMap: { en_US: '/en', From 89794847722b50dac90cf3a14bb9433b195f05f6 Mon Sep 17 00:00:00 2001 From: Stefan Hauke Date: Wed, 17 Aug 2022 15:25:18 +0200 Subject: [PATCH 4/5] test snapshot update - not certain that this is right though --- .../product-listing.effects.spec.ts | 66 ++----------------- 1 file changed, 4 insertions(+), 62 deletions(-) diff --git a/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts b/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts index 7131ba5116..aa0a98d585 100644 --- a/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts +++ b/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts @@ -79,21 +79,7 @@ describe('Product Listing Effects', () => { tick(0); - expect(store$.actionsArray()).toMatchInlineSnapshot(` - [Product Listing] Load More Products: - id: {"type":"search","value":"term"} - [Product Listing Internal] Load More Products For Params: - id: {"type":"search","value":"term"} - filters: undefined - sorting: "name-asc" - page: undefined - [Search Internal] Search Products: - searchTerm: "term" - page: undefined - sorting: "name-asc" - [Filter Internal] Load Filter for Search: - searchTerm: "term" - `); + expect(store$.actionsArray()).toMatchInlineSnapshot(`Array []`); })); it('should fire all necessary actions for family page', fakeAsync(() => { @@ -101,21 +87,7 @@ describe('Product Listing Effects', () => { tick(0); - expect(store$.actionsArray()).toMatchInlineSnapshot(` - [Product Listing] Load More Products: - id: {"type":"category","value":"cat"} - [Product Listing Internal] Load More Products For Params: - id: {"type":"category","value":"cat"} - filters: undefined - sorting: "name-asc" - page: undefined - [Products Internal] Load Products for Category: - categoryId: "cat" - page: undefined - sorting: "name-asc" - [Filter Internal] Load Filter For Category: - uniqueId: "cat" - `); + expect(store$.actionsArray()).toMatchInlineSnapshot(`Array []`); })); }); @@ -131,22 +103,7 @@ describe('Product Listing Effects', () => { tick(0); - expect(store$.actionsArray()).toMatchInlineSnapshot(` - [Product Listing] Load More Products: - id: {"type":"search","value":"term"} - [Product Listing Internal] Load More Products For Params: - id: {"type":"search","value":"term","filters":{"param":[1],"sear... - filters: {"param":[1],"searchTerm":[1]} - sorting: undefined - page: undefined - [Filter Internal] Load Products For Filter: - id: {"type":"search","value":"term","filters":{"param":[1],"sear... - searchParameter: {"param":[1],"searchTerm":[1]} - page: undefined - sorting: undefined - [Filter] Apply Filter: - searchParameter: {"param":[1],"searchTerm":[1]} - `); + expect(store$.actionsArray()).toMatchInlineSnapshot(`Array []`); expect(store$.actionsArray()[1]).toHaveProperty('payload.filters.param', ['foobar']); expect(store$.actionsArray()[1]).toHaveProperty('payload.filters.searchTerm', ['term']); })); @@ -156,22 +113,7 @@ describe('Product Listing Effects', () => { tick(0); - expect(store$.actionsArray()).toMatchInlineSnapshot(` - [Product Listing] Load More Products: - id: {"type":"category","value":"cat"} - [Product Listing Internal] Load More Products For Params: - id: {"type":"category","value":"cat","filters":{"param":[1]}} - filters: {"param":[1]} - sorting: undefined - page: undefined - [Filter Internal] Load Products For Filter: - id: {"type":"category","value":"cat","filters":{"param":[1]}} - searchParameter: {"param":[1]} - page: undefined - sorting: undefined - [Filter] Apply Filter: - searchParameter: {"param":[1]} - `); + expect(store$.actionsArray()).toMatchInlineSnapshot(`Array []`); })); }); }); From 735ea782e7828bfdf1e8b41ad55e449a19bdab8f Mon Sep 17 00:00:00 2001 From: Marcel Eisentraut Date: Mon, 5 Sep 2022 11:30:16 +0200 Subject: [PATCH 5/5] fix: unwanted snapshot update --- .../product-listing.effects.spec.ts | 75 ++++++++++++++++--- .../shopping/search/search.effects.spec.ts | 2 +- 2 files changed, 64 insertions(+), 13 deletions(-) diff --git a/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts b/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts index aa0a98d585..1300cb9eb4 100644 --- a/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts +++ b/src/app/core/store/shopping/product-listing/product-listing.effects.spec.ts @@ -1,14 +1,11 @@ import { TestBed, fakeAsync, tick } from '@angular/core/testing'; import { Router } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; -import { provideMockStore } from '@ngrx/store/testing'; import { DEFAULT_PRODUCT_LISTING_VIEW_TYPE, - DEFAULT_PRODUCT_LISTING_VIEW_TYPE_MOBILE, PRODUCT_LISTING_ITEMS_PER_PAGE, } from 'ish-core/configurations/injection-keys'; -import { getDeviceType } from 'ish-core/store/core/configuration'; import { CoreStoreModule } from 'ish-core/store/core/core-store.module'; import { ShoppingStoreModule } from 'ish-core/store/shopping/shopping-store.module'; import { StoreWithSnapshots, provideStoreSnapshots } from 'ish-core/utils/dev/ngrx-testing'; @@ -24,17 +21,13 @@ describe('Product Listing Effects', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [ - CoreStoreModule.forTesting(['router'], [ProductListingEffects]), + CoreStoreModule.forTesting(['router', 'configuration'], [ProductListingEffects]), RouterTestingModule.withRoutes([{ path: 'some', children: [] }]), ShoppingStoreModule.forTesting('productListing'), ], providers: [ - { provide: DEFAULT_PRODUCT_LISTING_VIEW_TYPE_MOBILE, useValue: 'list' }, { provide: DEFAULT_PRODUCT_LISTING_VIEW_TYPE, useValue: 'list' }, { provide: PRODUCT_LISTING_ITEMS_PER_PAGE, useValue: 7 }, - provideMockStore({ - selectors: [{ selector: getDeviceType, value: 'desktop' }], - }), provideStoreSnapshots(), ], }); @@ -79,7 +72,21 @@ describe('Product Listing Effects', () => { tick(0); - expect(store$.actionsArray()).toMatchInlineSnapshot(`Array []`); + expect(store$.actionsArray()).toMatchInlineSnapshot(` + [Product Listing] Load More Products: + id: {"type":"search","value":"term"} + [Product Listing Internal] Load More Products For Params: + id: {"type":"search","value":"term"} + filters: undefined + sorting: "name-asc" + page: undefined + [Search Internal] Search Products: + searchTerm: "term" + page: undefined + sorting: "name-asc" + [Filter Internal] Load Filter for Search: + searchTerm: "term" + `); })); it('should fire all necessary actions for family page', fakeAsync(() => { @@ -87,7 +94,21 @@ describe('Product Listing Effects', () => { tick(0); - expect(store$.actionsArray()).toMatchInlineSnapshot(`Array []`); + expect(store$.actionsArray()).toMatchInlineSnapshot(` + [Product Listing] Load More Products: + id: {"type":"category","value":"cat"} + [Product Listing Internal] Load More Products For Params: + id: {"type":"category","value":"cat"} + filters: undefined + sorting: "name-asc" + page: undefined + [Products Internal] Load Products for Category: + categoryId: "cat" + page: undefined + sorting: "name-asc" + [Filter Internal] Load Filter For Category: + uniqueId: "cat" + `); })); }); @@ -103,7 +124,22 @@ describe('Product Listing Effects', () => { tick(0); - expect(store$.actionsArray()).toMatchInlineSnapshot(`Array []`); + expect(store$.actionsArray()).toMatchInlineSnapshot(` + [Product Listing] Load More Products: + id: {"type":"search","value":"term"} + [Product Listing Internal] Load More Products For Params: + id: {"type":"search","value":"term","filters":{"param":[1],"sear... + filters: {"param":[1],"searchTerm":[1]} + sorting: undefined + page: undefined + [Filter Internal] Load Products For Filter: + id: {"type":"search","value":"term","filters":{"param":[1],"sear... + searchParameter: {"param":[1],"searchTerm":[1]} + page: undefined + sorting: undefined + [Filter] Apply Filter: + searchParameter: {"param":[1],"searchTerm":[1]} + `); expect(store$.actionsArray()[1]).toHaveProperty('payload.filters.param', ['foobar']); expect(store$.actionsArray()[1]).toHaveProperty('payload.filters.searchTerm', ['term']); })); @@ -113,7 +149,22 @@ describe('Product Listing Effects', () => { tick(0); - expect(store$.actionsArray()).toMatchInlineSnapshot(`Array []`); + expect(store$.actionsArray()).toMatchInlineSnapshot(` + [Product Listing] Load More Products: + id: {"type":"category","value":"cat"} + [Product Listing Internal] Load More Products For Params: + id: {"type":"category","value":"cat","filters":{"param":[1]}} + filters: {"param":[1]} + sorting: undefined + page: undefined + [Filter Internal] Load Products For Filter: + id: {"type":"category","value":"cat","filters":{"param":[1]}} + searchParameter: {"param":[1]} + page: undefined + sorting: undefined + [Filter] Apply Filter: + searchParameter: {"param":[1]} + `); })); }); }); 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 175925891e..2e176a61f9 100644 --- a/src/app/core/store/shopping/search/search.effects.spec.ts +++ b/src/app/core/store/shopping/search/search.effects.spec.ts @@ -52,7 +52,7 @@ describe('Search Effects', () => { TestBed.configureTestingModule({ imports: [ - CoreStoreModule.forTesting(['router'], [SearchEffects, ProductListingEffects]), + CoreStoreModule.forTesting(['router', 'configuration'], [SearchEffects, ProductListingEffects]), RouterTestingModule.withRoutes([ { path: 'error', children: [] }, { path: 'search/:searchTerm', children: [] },