feat(category,demo): add category view to demo (#2620)

apps/demo/package.json

@@ -31,6 +31,7 @@
     "@daffodil/builders": "0.0.0-PLACEHOLDER",
     "@daffodil/auth": "0.0.0-PLACEHOLDER",
     "@daffodil/cart": "0.0.0-PLACEHOLDER",
+    "@daffodil/category": "0.0.0-PLACEHOLDER",
     "@daffodil/checkout": "0.0.0-PLACEHOLDER",
     "@daffodil/core": "0.0.0-PLACEHOLDER",
     "@daffodil/design": "0.0.0-PLACEHOLDER",

apps/demo/src/app/app-routing.module.ts

@@ -50,6 +50,17 @@ export const appRoutes: Routes = [
           product: DaffProductPageUrlResolver,
         },
       },
+      {
+        path: 'category',
+        loadChildren: () => import('./category/category.module').then(m => m.CategoryModule),
+      },
+      {
+        matcher: daffDataPathUrlMatcher,
+        data: {
+          daffExternalRouteType: 'CATEGORY',
+        },
+        loadChildren: () => import('./category/category.module').then(m => m.CategoryModule),
+      },
       {
         path: 'checkout',
         loadChildren: () => import('./checkout/checkout.module').then(m => m.CheckoutModule),
@@ -73,10 +84,11 @@ export const appRoutes: Routes = [
       failedResolutionPath: '404',
       notFoundResolutionPath: '404',
     }, [
-      // {
-      //   type: 'CATEGORY',
-      //   route: {},
-      // },
+      {
+        type: 'CATEGORY',
+        insertionStrategy: daffInsertDataPathStrategy,
+        route: {},
+      },
       {
         type: 'PRODUCT',
         insertionStrategy: daffInsertDataPathStrategy,

apps/demo/src/app/app.module.ts

@@ -11,6 +11,7 @@ import { DaffProgressIndicatorModule } from '@daffodil/design';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { DemoCartRootModule } from './cart/cart-root.module';
+import { CategoryModule } from './category/category.module';
 import { TemplateModule } from './core/template/template/template.module';
 import { DemoDriverMap } from './drivers/map';
 import { NotFoundModule } from './misc/not-found/not-found.module';
@@ -43,6 +44,7 @@ import { environment } from '../environments/environment';
     DemoRoutingComponentModule,
     DemoCartRootModule,
     ProductModule,
+    CategoryModule,
     ThankYouModule,
     TemplateModule,
     NotFoundModule,

apps/demo/src/app/category/category-routing.module.ts

@@ -0,0 +1,48 @@
+import { NgModule } from '@angular/core';
+import {
+  RouterModule,
+  Routes,
+} from '@angular/router';
+
+import {
+  DaffCategoryPageIdResolver,
+  DaffCategoryPageUrlResolver,
+  DaffCategoryRoutingModule,
+} from '@daffodil/category/routing';
+import { daffDataPathUrlMatcher } from '@daffodil/external-router';
+
+import { CategoryViewComponent } from './pages/category-view/category-view.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    children: [
+      {
+        path: ':id',
+        component: CategoryViewComponent,
+        resolve: {
+          product: DaffCategoryPageIdResolver,
+        },
+      },
+      {
+        path: '',
+        component: CategoryViewComponent,
+        resolve: {
+          product: DaffCategoryPageUrlResolver,
+        },
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes),
+    DaffCategoryRoutingModule,
+  ],
+  exports: [
+    RouterModule,
+  ],
+})
+export class CategoryRoutingModule { }

apps/demo/src/app/category/category.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+
+import { CategoryRoutingModule } from './category-routing.module';
+import { CategoryViewModule } from './pages/category-view/category-view.module';
+
+@NgModule({
+  imports: [
+    CategoryViewModule,
+    CategoryRoutingModule,
+  ],
+  exports: [
+    CategoryViewModule,
+  ],
+})
+export class CategoryModule { }

apps/demo/src/app/category/pages/category-view/category-view.component.html

@@ -0,0 +1,7 @@
+<daff-container size="lg">
+  <ng-container *ngIf="(loading$ | async) === false">
+    <h1>{{(category$ | async).name}}</h1>
+    <demo-product-grid [products]="products$ | async"></demo-product-grid>
+  </ng-container>
+  <daff-loading-icon *ngIf="loading$ | async"></daff-loading-icon>
+<daff-container>

apps/demo/src/app/category/pages/category-view/category-view.component.spec.ts

@@ -0,0 +1,120 @@
+import {
+  waitForAsync,
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { DaffCategory } from '@daffodil/category';
+import {
+  DaffCategoryStateTestingModule,
+  MockDaffCategoryFacade,
+} from '@daffodil/category/state/testing';
+import { DaffCategoryFactory } from '@daffodil/category/testing';
+import {
+  DaffContainerModule,
+  DaffLoadingIconModule,
+} from '@daffodil/design';
+import { DaffProduct } from '@daffodil/product';
+import {
+  DaffProductFactory,
+  DaffProductTestingModule,
+} from '@daffodil/product/testing';
+
+import { CategoryViewComponent } from './category-view.component';
+import { ProductGridComponent } from '../../../product/components/product-grid/product-grid.component';
+import { ProductGridModule } from '../../../product/components/product-grid/product-grid.module';
+
+
+describe('CategoryViewComponent', () => {
+  let categoryFactory: DaffCategoryFactory;
+  let productFactory: DaffProductFactory;
+  let mockCategory: DaffCategory;
+  let mockProducts: DaffProduct[];
+  let facade: MockDaffCategoryFacade;
+
+  let component: CategoryViewComponent;
+  let fixture: ComponentFixture<CategoryViewComponent>;
+  let productGridComponent: ProductGridComponent;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        CategoryViewComponent,
+      ],
+      imports: [
+        DaffContainerModule,
+        DaffLoadingIconModule,
+        ProductGridModule,
+        DaffCategoryStateTestingModule,
+        DaffProductTestingModule,
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    facade = TestBed.inject(MockDaffCategoryFacade);
+    categoryFactory = TestBed.inject(DaffCategoryFactory);
+    productFactory = TestBed.inject(DaffProductFactory);
+
+    mockCategory = categoryFactory.create();
+    mockProducts = productFactory.createMany(10);
+    facade.category$.next(mockCategory);
+    facade.products$.next(mockProducts);
+
+    fixture = TestBed.createComponent(CategoryViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+
+    productGridComponent = fixture.debugElement.query(By.css('demo-product-grid')).componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('on <demo-product-grid>', () => {
+    it('should set products to value from the facade', () => {
+      expect(productGridComponent.products).toEqual(mockProducts);
+    });
+  });
+
+  describe('when loading$ becomes false', () => {
+
+    beforeEach(() => {
+      facade.loading$.next(false);
+      fixture.detectChanges();
+    });
+
+    it('should render <demo-product-grid>', () => {
+      const productGrid = fixture.debugElement.query(By.css('demo-product-grid'));
+
+      expect(productGrid).not.toBeNull();
+    });
+
+    it('should not render daff-loading-icon', () => {
+      const loadingIcon = fixture.debugElement.query(By.css('daff-loading-icon'));
+
+      expect(loadingIcon).toBeNull();
+    });
+  });
+
+  describe('when loading$ becomes true', () => {
+
+    beforeEach(() => {
+      facade.loading$.next(true);
+      fixture.detectChanges();
+    });
+
+    it('should not render <demo-product-grid>', () => {
+      const productGrid = fixture.debugElement.query(By.css('demo-product-grid'));
+      expect(productGrid).toBeNull();
+    });
+
+    it('should render daff-loading-icon', () => {
+      const loadingIcon = fixture.debugElement.query(By.css('daff-loading-icon'));
+      expect(loadingIcon).not.toBeNull();
+    });
+  });
+});

apps/demo/src/app/category/pages/category-view/category-view.component.ts

@@ -0,0 +1,29 @@
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { DaffCategory } from '@daffodil/category';
+import { DaffCategoryFacade } from '@daffodil/category/state';
+import { DaffProduct } from '@daffodil/product';
+
+@Component({
+  selector: 'demo-category-view',
+  templateUrl: './category-view.component.html',
+})
+export class CategoryViewComponent implements OnInit {
+  category$: Observable<DaffCategory>;
+  loading$: Observable<boolean>;
+  products$: Observable<DaffProduct[]>;
+
+  constructor(
+    private facade: DaffCategoryFacade,
+  ) {}
+
+  ngOnInit() {
+    this.category$ = this.facade.category$;
+    this.products$ = this.facade.products$;
+    this.loading$ = this.facade.loading$;
+  }
+}

apps/demo/src/app/category/pages/category-view/category-view.module.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { DaffCategoryStateModule } from '@daffodil/category/state';
+import {
+  DaffContainerModule,
+  DaffLoadingIconModule,
+} from '@daffodil/design';
+import { DaffProductStateModule } from '@daffodil/product/state';
+
+import { CategoryViewComponent } from './category-view.component';
+import { ProductGridModule } from '../../../product/components/product-grid/product-grid.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    DaffLoadingIconModule,
+    ProductGridModule,
+    DaffContainerModule,
+    DaffProductStateModule,
+    DaffCategoryStateModule,
+  ],
+  declarations: [
+    CategoryViewComponent,
+  ],
+  exports: [
+    CategoryViewComponent,
+  ],
+})
+export class CategoryViewModule { }

apps/demo/src/app/drivers/in-memory/backend/backend.service.ts

@@ -9,6 +9,7 @@ import {
 import { DaffInMemoryBackendAuthService } from '@daffodil/auth/driver/in-memory';
 import { DaffCart } from '@daffodil/cart';
 import { DaffInMemoryBackendCartRootService } from '@daffodil/cart/driver/in-memory';
+import { DaffInMemoryBackendCategoryService } from '@daffodil/category/driver/in-memory';
 import { DaffOrder } from '@daffodil/checkout';
 import { DaffInMemoryBackendCheckoutService } from '@daffodil/checkout/testing';
 import { DaffInMemoryBackendGeographyService } from '@daffodil/geography/driver/in-memory';
@@ -28,6 +29,7 @@ export class DemoInMemoryBackendService implements InMemoryDbService {
     private navigationTestingService: DaffInMemoryBackendNavigationService,
     private authTestingService: DaffInMemoryBackendAuthService,
     private geographyTestingService: DaffInMemoryBackendGeographyService,
+    private categoryTestingService: DaffInMemoryBackendCategoryService,
   ) {}
 
   parseRequestUrl(url: string, utils: RequestInfoUtilities): ParsedRequestUrl {
@@ -57,6 +59,8 @@ export class DemoInMemoryBackendService implements InMemoryDbService {
       return this.cartTestingService.get(reqInfo);
     } else if (collectionName === 'countries') {
       return this.geographyTestingService.get(reqInfo);
+    } else if (collectionName === 'category') {
+      return this.categoryTestingService.get(reqInfo);
     }
   }
 

apps/demo/src/app/drivers/in-memory/external-router.config.token.ts

@@ -12,7 +12,7 @@ export const DEMO_EXTERNAL_ROUTER_DRIVER_IN_MEMORY_CONFIG
   = new InjectionToken<DaffExternalRouterDriverInMemoryConfig>('DEMO_EXTERNAL_ROUTER_DRIVER_IN_MEMORY_CONFIG', {
     factory: () => {
       const productBackend = inject(DaffInMemoryBackendProductService);
-      // const categoryBackend = inject(DaffInMemoryBackendCategoryService);
+      const categoryBackend = inject(DaffInMemoryBackendCategoryService);
 
       return {
         resolver: url => {
@@ -27,16 +27,16 @@ export const DEMO_EXTERNAL_ROUTER_DRIVER_IN_MEMORY_CONFIG
             };
           }
 
-          // const category = categoryBackend.categories.find(c => c.url === url);
-          // if (category) {
-          //   return {
-          //     id: category.id,
-          //     url,
-          //     // TODO(griest024): don't hardcode this
-          //     type: 'CATEGORY',
-          //     code: 200,
-          //   };
-          // }
+          const category = categoryBackend.categories.find(c => c.url === url);
+          if (category) {
+            return {
+              id: category.id,
+              url,
+              // TODO(griest024): don't hardcode this
+              type: 'CATEGORY',
+              code: 200,
+            };
+          }
 
           return DAFF_EXTERNAL_ROUTER_NOT_FOUND_RESOLUTION;
         },

apps/demo/src/app/drivers/in-memory/in-memory.module.ts

@@ -3,6 +3,7 @@ import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
 
 import { DaffAuthInMemoryDriverModule } from '@daffodil/auth/driver/in-memory';
 import { DaffCartInMemoryDriverModule } from '@daffodil/cart/driver/in-memory';
+import { DaffCategoryInMemoryDriverModule } from '@daffodil/category/driver/in-memory';
 import { DaffCheckoutInMemoryDriverModule } from '@daffodil/checkout/testing';
 import { DaffExternalRouterDriverInMemoryModule } from '@daffodil/external-router/driver/in-memory';
 import { DaffGeographyInMemoryDriverModule } from '@daffodil/geography/driver/in-memory';
@@ -24,6 +25,7 @@ import { DEMO_EXTERNAL_ROUTER_DRIVER_IN_MEMORY_CONFIG } from './external-router.
     DaffNavigationInMemoryDriverModule.forRoot(),
     DaffNewsletterInMemoryDriverModule.forRoot(),
     DaffGeographyInMemoryDriverModule.forRoot(),
+    DaffCategoryInMemoryDriverModule.forRoot(),
     DaffExternalRouterDriverInMemoryModule.forRoot(DEMO_EXTERNAL_ROUTER_DRIVER_IN_MEMORY_CONFIG),
   ],
 })