#1177 Ensure New Data is Fetched For Result Page OnInit

apps/sales/src/app/modules/shelf/pages/shelf-search-results/shelf-search-results.component.spec.ts

@@ -0,0 +1,76 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SearchStateFacade } from '@shelf-store/search/search.facade';
+import { of } from 'rxjs';
+import { ShelfNavigationService } from '../../shared/services';
+import { ShelfSearchResultsComponent } from './shelf-search-results.component';
+import { ShelfSearchResultsModule } from './shelf-search-results.module';
+
+class SearchStateFacadeMock {
+  get result$() {
+    return of([]);
+  }
+  get fetching$() {
+    return of(false);
+  }
+  get hits$() {
+    return of(1);
+  }
+
+  fetchResult() {
+    return Promise.resolve([]);
+  }
+}
+
+fdescribe('ShelfSearchResultComponent', () => {
+  let fixture: ComponentFixture<ShelfSearchResultsComponent>;
+  let component: ShelfSearchResultsComponent;
+
+  let facade: jasmine.SpyObj<SearchStateFacade>;
+  let navService: jasmine.SpyObj<ShelfNavigationService>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ShelfSearchResultsModule],
+      providers: [
+        {
+          provide: SearchStateFacade,
+          useClass: SearchStateFacadeMock,
+        },
+        {
+          provide: ShelfNavigationService,
+          useValue: jasmine.createSpy('shelfNavigationService'),
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ShelfSearchResultsComponent);
+    component = fixture.componentInstance;
+
+    facade = TestBed.get(SearchStateFacade);
+    navService = TestBed.get(ShelfNavigationService);
+  });
+
+  it('should be created', () => {
+    expect(component instanceof ShelfSearchResultsComponent).toBeTruthy();
+  });
+
+  describe('fetch', () => {
+    it('should be called onInit with initalFetching set to true', () => {
+      spyOn(component, 'fetch').and.callFake(() => {});
+
+      component.ngOnInit();
+
+      expect(component.fetch).toHaveBeenCalledWith(true, true);
+    });
+
+    it('should call fetchResult on the facade when initializing the component (i.e. OnInit)', async () => {
+      component.ngOnInit();
+
+      spyOn(facade, 'fetchResult').and.callThrough();
+
+      await component.fetch(true, true);
+
+      expect(facade.fetchResult).toHaveBeenCalledWith({ isNewSearch: true });
+    });
+  });
+});

apps/sales/src/app/modules/shelf/pages/shelf-search-results/shelf-search-results.component.ts

@@ -13,10 +13,11 @@ import {
   ViewChild,
   ElementRef,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
 } from '@angular/core';
 import { SearchStateFacade } from 'apps/sales/src/app/store/customer';
 import { first, takeUntil, map, withLatestFrom } from 'rxjs/operators';
-import { groupBy } from 'apps/sales/src/app/utils';
+import { Group, groupBy } from 'apps/sales/src/app/utils';
 import { OrderItemListItemDTO } from '@swagger/oms';
 import { ShelfNavigationService } from '../../shared/services';
 import { Select } from '@ngxs/store';
@@ -40,22 +41,31 @@ export class ShelfSearchResultsComponent implements OnInit, OnDestroy {
   destroy$ = new Subject();
   isFetching$ = new BehaviorSubject<boolean>(false);
 
-  grouped$ = this.searchStateFacade.result$.pipe(
-    map((results) => groupBy(results, (item) => (item ? item.buyerNumber : '')))
-  );
+  grouped$: Observable<Group<string, OrderItemListItemDTO>[]>;
 
-  fetching$ = this.searchStateFacade.fetching$;
+  fetching$: Observable<boolean>;
 
   scrollStorageKey = ORDER_DETAILS_PREFIX;
 
   constructor(
     private searchStateFacade: SearchStateFacade,
-    private shelfNavigationService: ShelfNavigationService
+    private shelfNavigationService: ShelfNavigationService,
+    private cdr: ChangeDetectorRef
   ) {}
 
   ngOnInit() {
+    this.initFacade();
     this.initScrollContainer();
-    this.fetch();
+    this.fetch(true, true);
+  }
+
+  initFacade() {
+    this.grouped$ = this.searchStateFacade.result$.pipe(
+      map((results) =>
+        groupBy(results, (item) => (item ? item.buyerNumber : ''))
+      )
+    );
+    this.fetching$ = this.searchStateFacade.fetching$;
   }
 
   initScrollContainer() {
@@ -79,7 +89,7 @@ export class ShelfSearchResultsComponent implements OnInit, OnDestroy {
     );
   }
 
-  async fetch(force = false) {
+  async fetch(force = false, isInitialFetch = false) {
     const [hits, result, fetching] = await combineLatest([
       this.searchStateFacade.hits$,
       this.searchStateFacade.result$,
@@ -88,13 +98,17 @@ export class ShelfSearchResultsComponent implements OnInit, OnDestroy {
       .pipe(first())
       .toPromise();
 
-    if (
+    if (isInitialFetch) {
+      await this.searchStateFacade.fetchResult({ isNewSearch: true });
+    } else if (
       (force && this.resultListNotFullyLoaded(hits, result.length || 0)) ||
       !hits ||
       (!result.length && !fetching)
     ) {
       await this.searchStateFacade.fetchResult({});
     }
+
+    this.cdr.detectChanges();
   }
 
   navigateToDetails(orderItemListItem: OrderItemListItemDTO) {