feat: 🎸 display generators names in generators menu

✅ Closes: #99

Author: eladzipper96

libs/generators/src/lib/generators/generators.component.html

@@ -1,3 +1,3 @@
-<cli-sidenav [menuItems]="menuItems">
+<cli-sidenav *ngIf="menuItems$ | async as menuItems" [menuItems]="menuItems">
   <router-outlet></router-outlet>
 </cli-sidenav>

libs/generators/src/lib/generators/generators.component.spec.ts

@@ -1,16 +1,39 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  ComponentFixture,
+  fakeAsync,
+  flush,
+  TestBed,
+} from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+
+import { GeneratorsService } from '../services/generatos-service/generators.service';
 
 import { GeneratorsComponent } from './generators.component';
 
 describe('GeneratorsComponent', () => {
   let component: GeneratorsComponent;
   let fixture: ComponentFixture<GeneratorsComponent>;
+  let generatorsServiceMock: Partial<GeneratorsService>;
 
   beforeEach(async () => {
+    generatorsServiceMock = {
+      getGeneratorsList: () =>
+        of([
+          {
+            displayName: 'Component',
+            originalName: 'component',
+            description: 'generate component',
+          },
+        ]),
+    };
+
     await TestBed.configureTestingModule({
       imports: [GeneratorsComponent, NoopAnimationsModule, RouterTestingModule],
+      providers: [
+        { provide: GeneratorsService, useValue: generatorsServiceMock },
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(GeneratorsComponent);
@@ -21,4 +44,18 @@ describe('GeneratorsComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('Component Init', () => {
+    it('Should set menu items with list of generators', fakeAsync(() => {
+      component.menuItems$.subscribe((menuItems) => {
+        expect(menuItems).toEqual([
+          {
+            displayName: 'Component',
+            url: 'component',
+          },
+        ]);
+      });
+      flush();
+    }));
+  });
 });

libs/generators/src/lib/generators/generators.component.ts

@@ -1,23 +1,33 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { MenuItem, SidenavComponent } from '@angular-cli-gui/ui';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { GeneratorsService } from '../services/generatos-service/generators.service';
 
 @Component({
   selector: 'cli-generators',
   standalone: true,
-  imports: [SidenavComponent, RouterOutlet],
+  imports: [SidenavComponent, RouterOutlet, AsyncPipe, NgIf],
   templateUrl: './generators.component.html',
   styleUrls: ['./generators.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class GeneratorsComponent {
-  public menuItems: MenuItem[] = [
-    'component',
-    'directive',
-    'module',
-    'pipe',
-  ].map((item) => ({
-    url: item,
-    displayName: item,
-  }));
+export class GeneratorsComponent implements OnInit {
+  public menuItems$!: Observable<MenuItem[]>;
+
+  constructor(private generatorsService: GeneratorsService) {}
+
+  ngOnInit(): void {
+    this.menuItems$ = this.generatorsService.getGeneratorsList().pipe(
+      map((generatorList) => {
+        return generatorList.map((generator) => ({
+          displayName: generator.displayName,
+          url: generator.originalName,
+        }));
+      })
+    );
+  }
 }

libs/generators/src/lib/services/generatos-service/generators.service.spec.ts

@@ -1,19 +1,31 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import {
+  HttpClientTestingModule,
+  HttpTestingController,
+} from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
 
 import { GeneratorsService } from './generators.service';
 
 describe('GeneratorsService', () => {
   let service: GeneratorsService;
-
+  let httpClientMock: HttpTestingController;
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],
     });
     service = TestBed.inject(GeneratorsService);
+    httpClientMock = TestBed.inject(HttpTestingController);
   });
 
   it('should be created', () => {
     expect(service).toBeTruthy();
   });
+
+  describe('getGeneratorsList()', () => {
+    it('Should call the get HTTP request to get list of generators', () => {
+      service.getGeneratorsList().subscribe();
+      const req = httpClientMock.expectOne('/api/generators');
+      expect(req.request.method).toEqual('GET');
+    });
+  });
 });

libs/generators/src/lib/services/generatos-service/generators.service.ts

@@ -1,6 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import {
+  GeneratorDefinition,
   IExecResult,
   IGenerateComponentArgs,
 } from '@angular-cli-gui/shared/data';
@@ -19,4 +20,8 @@ export class GeneratorsService {
     const body = { name, ...args };
     return this.http.post<IExecResult>(`/api/generate/component`, body);
   }
+
+  getGeneratorsList(): Observable<GeneratorDefinition[]> {
+    return this.http.get<GeneratorDefinition[]>('/api/generators');
+  }
 }

libs/shared/data/src/index.ts

@@ -2,5 +2,6 @@ export * from './lib/exec-result.interface';
 export * from './lib/generate-component-args.interface';
 export * from './lib/directory.interface';
 export * from './lib/storage-keys.consts';
+export * from './lib/generators/generator-definition.interface';
 export * from './lib/workspace';
 export * from './lib/executors';

libs/shared/data/src/lib/generators/generator-definition.interface.ts

@@ -0,0 +1,5 @@
+export interface GeneratorDefinition {
+  displayName: string;
+  originalName: string;
+  description: string;
+}