feat: test cov 100%

src/app/product-store/app-detail/app-detail.component.html

@@ -126,9 +126,10 @@
                 id="ps_app_detail_form_mfe_field_icon_name"
                 styleClass="w-full"
                 formControlName="iconName"
+                appendTo="body"
                 [options]="iconItems"
-                [showClear]="false"
-                [attr.aria-label]="'APP.ICON_NAME' | translate"
+                [showClear]="true"
+                [ariaLabel]="'APP.ICON_NAME' | translate"
                 [pTooltip]="'APP.TOOLTIPS.ICON_NAME' | translate"
                 tooltipPosition="top"
                 tooltipEvent="hover"
@@ -402,7 +403,7 @@
                 pInputText
                 type="text"
                 id="ps_app_detail_form_mfe_field_remote_name"
-                class="w-full sm:w-18rem pt-3 pb-2 text-responsive"
+                class="w-full pt-3 pb-2 text-responsive"
                 formControlName="remoteName"
                 [attr.aria-label]="'APP.REMOTE_NAME' | translate"
                 [pTooltip]="'APP.TOOLTIPS.REMOTE_NAME' | translate"

src/app/product-store/app-search/app-search.component.ts

@@ -337,9 +337,6 @@ export class AppSearchComponent implements OnInit, OnDestroy {
   public onSearchReset() {
     this.appSearchCriteriaGroup.reset({ appType: 'ALL' })
   }
-  public onBack() {
-    this.router.navigate(['../'], { relativeTo: this.route })
-  }
   public onGotoProduct(ev: any, product: string) {
     ev.stopPropagation()
     this.router.navigate(['../', product], { relativeTo: this.route })

src/app/product-store/endpoint-search/endpoint-search.component.spec.ts

@@ -24,6 +24,7 @@ const responseData: MicrofrontendAbstract[] = [
     productName: 'product1',
     appName: 'MFE 1',
     appId: 'mfe1',
+    exposedModule: './expMod_p1_mfe1',
     remoteBaseUrl: '/mfe1/remoteEntry.js',
     type: MicrofrontendType.Module,
     endpoints: [
@@ -36,6 +37,7 @@ const responseData: MicrofrontendAbstract[] = [
     productName: 'product2',
     appName: 'MFE 1',
     appId: 'mfe1',
+    exposedModule: './expMod_p2_mfe1',
     remoteBaseUrl: '/mfe1/remoteEntry.js',
     type: MicrofrontendType.Module,
     endpoints: [{ name: 'endpoint_2_1_1', path: '/{name}' }]
@@ -45,6 +47,7 @@ const responseData: MicrofrontendAbstract[] = [
     productName: 'product3',
     appName: 'MFE 1',
     appId: 'mfe1',
+    exposedModule: './expMod_p3_mfe1',
     remoteBaseUrl: '/mfe1/remoteEntry.js',
     type: MicrofrontendType.Module
   }
@@ -57,6 +60,7 @@ const itemData: MfeEndpoint[] = [
     productName: 'product1',
     appName: 'MFE 1',
     appId: 'mfe1',
+    exposedModule: './expMod_p1_mfe1',
     remoteBaseUrl: '/mfe1/remoteEntry.js',
     type: MicrofrontendType.Module,
     endpoint_name: 'endpoint_1_1_1',
@@ -68,6 +72,7 @@ const itemData: MfeEndpoint[] = [
     productName: 'product1',
     appName: 'MFE 1',
     appId: 'mfe1',
+    exposedModule: './expMod_p1_mfe1',
     remoteBaseUrl: '/mfe1/remoteEntry.js',
     type: MicrofrontendType.Module,
     endpoint_name: 'endpoint_1_1_2',
@@ -79,6 +84,7 @@ const itemData: MfeEndpoint[] = [
     productName: 'product2',
     appName: 'MFE 1',
     appId: 'mfe1',
+    exposedModule: './expMod_p2_mfe1',
     remoteBaseUrl: '/mfe1/remoteEntry.js',
     type: MicrofrontendType.Module,
     endpoint_name: 'endpoint_2_1_1',
@@ -199,6 +205,44 @@ describe('EndpointSearchComponent', () => {
     })
   })
 
+  describe('page actions', () => {
+    it('should navigate to Products when button clicked and actionCallback executed', () => {
+      component.ngOnInit()
+
+      if (component.actions$) {
+        component.actions$.subscribe((actions) => {
+          const action = actions[0]
+          action.actionCallback()
+          expect(routerSpy.navigate).toHaveBeenCalledWith(['..'], { relativeTo: routeMock })
+        })
+      }
+    })
+
+    it('should navigate to Apps when button clicked and actionCallback executed', () => {
+      component.ngOnInit()
+
+      if (component.actions$) {
+        component.actions$.subscribe((actions) => {
+          const action = actions[1]
+          action.actionCallback()
+          expect(routerSpy.navigate).toHaveBeenCalledWith(['../apps'], { relativeTo: routeMock })
+        })
+      }
+    })
+
+    it('should navigate to Slots when button clicked and actionCallback executed', () => {
+      component.ngOnInit()
+
+      if (component.actions$) {
+        component.actions$.subscribe((actions) => {
+          const action = actions[2]
+          action.actionCallback()
+          expect(routerSpy.navigate).toHaveBeenCalledWith(['../slots'], { relativeTo: routeMock })
+        })
+      }
+    })
+  })
+
   /*
    * UI ACTIONS
    */
@@ -250,4 +294,30 @@ describe('EndpointSearchComponent', () => {
       expect(component.dateFormat).toEqual('M/d/yy, hh:mm:ss a')
     })
   })
+
+  describe('sort endpoints', () => {
+    it('should correctly sort items by product', () => {
+      const items: MfeEndpoint[] = itemData
+      const sortedItems = items.sort(component.sortMfes)
+
+      expect(sortedItems[0]).toEqual(itemData[0])
+    })
+
+    it("should treat falsy values for SelectItem.label as ''", () => {
+      const items: MfeEndpoint[] = itemData
+      items.push({ ...itemData[1], exposedModule: undefined })
+      const sortedItems = items.sort(component.sortMfes)
+
+      expect(sortedItems[1]).toEqual(itemData[1])
+    })
+
+    it("should treat falsy values for SelectItem.label as ''", () => {
+      const items: MfeEndpoint[] = itemData
+      items.push({ ...itemData[1], exposedModule: undefined })
+      items.push({ ...itemData[2], exposedModule: undefined })
+      const sortedItems = items.sort(component.sortMfes)
+
+      expect(sortedItems[1]).toEqual(itemData[1])
+    })
+  })
 })

src/app/product-store/endpoint-search/endpoint-search.component.ts

@@ -20,7 +20,7 @@ export interface MicrofrontendSearchCriteria {
   productName: FormControl<string | null>
 }
 export type ChangeMode = 'VIEW' | 'COPY' | 'CREATE' | 'EDIT'
-export type MfeEndpoint = MicrofrontendAbstract & { unique_id: string; endpoint_name?: string; endpoint_path?: string }
+export type MfeEndpoint = MicrofrontendAbstract & { unique_id: string; endpoint_name: string; endpoint_path: string }
 type ExtendedColumn = Column & {
   hasFilter?: boolean
   isDate?: boolean
@@ -231,6 +231,7 @@ export class EndpointSearchComponent implements OnInit {
                 appId: mfe.appId,
                 appName: mfe.appName,
                 productName: mfe.productName,
+                exposedModule: mfe.exposedModule,
                 remoteBaseUrl: mfe.remoteBaseUrl,
                 type: mfe.type,
                 unique_id: mfe.id + '_' + i,
@@ -256,9 +257,7 @@ export class EndpointSearchComponent implements OnInit {
       (a.exposedModule ? a.exposedModule.toUpperCase() : '').localeCompare(
         b.exposedModule ? b.exposedModule.toUpperCase() : ''
       ) ||
-      (a.endpoint_name ? a.endpoint_name.toUpperCase() : '').localeCompare(
-        b.endpoint_name ? b.endpoint_name.toUpperCase() : ''
-      )
+      a.endpoint_name.toUpperCase().localeCompare(b.endpoint_name.toUpperCase())
     )
   }
 }

src/app/product-store/product-detail/product-detail.component.scss

@@ -1,6 +1,7 @@
 @import '/src/app/_ps-mixins.scss';
 
 @include danger-action;
+@include readable-disabled-form-controls;
 @include dropdown-zebra-rows;
 @include compact-dropdown-list-items;
 @include dialog-modal-dialog-content;

src/app/product-store/product-detail/product-intern/product-intern.component.html

@@ -2,23 +2,23 @@
   <!-- row 1 -->
   <div class="mx-3 flex flex-row flex-wrap column-gap-6 row-gap-3">
     <p-checkbox
-      inputId="ps_product_detail_intern_field_operator"
+      inputId="ps_product_detail_intern_operator"
       styleClass="cursor-auto"
-      [readonly]="true"
       [(ngModel)]="operator"
       [binary]="true"
+      [disabled]="true"
       [label]="'INTERNAL.OPERATOR' | translate"
       [ariaLabel]="'INTERNAL.OPERATOR' | translate"
       [pTooltip]="'PRODUCT.TOOLTIPS.OPERATOR' | translate"
       tooltipPosition="top"
       tooltipEvent="hover"
     ></p-checkbox>
     <p-checkbox
-      inputId="ps_product_detail_intern_field_undeployed"
+      inputId="ps_product_detail_intern_undeployed"
       styleClass="cursor-auto"
-      [readonly]="true"
       [(ngModel)]="undeployed"
       [binary]="true"
+      [disabled]="true"
       [label]="'PRODUCT.UNDEPLOYED' | translate"
       [ariaLabel]="'PRODUCT.UNDEPLOYED' | translate"
       [pTooltip]="'PRODUCT.TOOLTIPS.UNDEPLOYED' | translate"
@@ -33,31 +33,31 @@
       <input
         pInputText
         type="text"
-        readonly
-        id="ps_product_detail_intern_field_creationDate"
+        id="ps_product_detail_intern_creationDate"
         class="w-full sm:w-15rem pt-3 pb-2 text-responsive"
         [value]="product?.creationDate | date: dateFormat"
+        [disabled]="true"
         [attr.aria-label]="'INTERNAL.CREATION_DATE' | translate"
         [pTooltip]="'INTERNAL.TOOLTIPS.CREATION_DATE' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"
       />
-      <label for="ps_product_detail_intern_field_creationDate">{{ 'INTERNAL.CREATION_DATE' | translate }}</label>
+      <label for="ps_product_detail_intern_creationDate">{{ 'INTERNAL.CREATION_DATE' | translate }}</label>
     </span>
-    <span class="flex-grow-1 p-float-label">
+    <span class="flex-grow-1 max-w-30rem p-float-label">
       <input
         pInputText
         type="text"
-        readonly
-        id="ps_product_detail_intern_field_creation_user"
+        id="ps_product_detail_intern_creation_user"
         class="w-full pt-3 pb-2 text-responsive"
         [value]="product?.creationUser"
+        [disabled]="true"
         [attr.aria-label]="'INTERNAL.CREATION_USER' | translate"
         [pTooltip]="'INTERNAL.TOOLTIPS.CREATION_USER' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"
       />
-      <label for="ps_product_detail_intern_field_creation_user">{{ 'INTERNAL.CREATION_USER' | translate }}</label>
+      <label for="ps_product_detail_intern_creation_user">{{ 'INTERNAL.CREATION_USER' | translate }}</label>
     </span>
   </div>
 
@@ -67,35 +67,31 @@
       <input
         pInputText
         type="text"
-        readonly
-        id="ps_product_detail_intern_field_modification_date"
+        id="ps_product_detail_intern_modification_date"
         class="w-full sm:w-15rem pt-3 pb-2 text-responsive"
         [value]="product?.modificationDate | date: dateFormat"
+        [disabled]="true"
         [attr.aria-label]="'INTERNAL.MODIFICATION_DATE' | translate"
         [pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_DATE' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"
       />
-      <label for="ps_product_detail_intern_field_modification_date">
-        {{ 'INTERNAL.MODIFICATION_DATE' | translate }}</label
-      >
+      <label for="ps_product_detail_intern_modification_date">{{ 'INTERNAL.MODIFICATION_DATE' | translate }}</label>
     </span>
-    <span class="flex-grow-1 p-float-label">
+    <span class="flex-grow-1 max-w-30rem p-float-label">
       <input
         pInputText
         type="text"
-        readonly
-        id="ps_product_detail_intern_field_modification_user"
+        id="ps_product_detail_intern_modification_user"
         class="w-full pt-3 pb-2 text-responsive"
         [value]="product?.modificationUser"
+        [disabled]="true"
         [attr.aria-label]="'INTERNAL.MODIFICATION_USER' | translate"
         [pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_USER' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"
       />
-      <label for="ps_product_detail_intern_field_modification_user">
-        {{ 'INTERNAL.MODIFICATION_USER' | translate }}</label
-      >
+      <label for="ps_product_detail_intern_modification_user">{{ 'INTERNAL.MODIFICATION_USER' | translate }}</label>
     </span>
   </div>
 </div>

src/app/product-store/product-search/product-search.component.spec.ts

@@ -192,28 +192,38 @@ describe('ProductSearchComponent', () => {
     expect(component.productSearchCriteriaGroup.reset).toHaveBeenCalled()
   })
 
-  it('should navigate to new product onNewProduct', () => {
-    const routerSpy = spyOn(router, 'navigate')
+  describe('navigate', () => {
+    it('should navigate to new product onNewProduct', () => {
+      const routerSpy = spyOn(router, 'navigate')
 
-    component.onNewProduct()
+      component.onNewProduct()
 
-    expect(routerSpy).toHaveBeenCalledWith(['./new'], jasmine.any(Object))
-  })
+      expect(routerSpy).toHaveBeenCalledWith(['./new'], jasmine.any(Object))
+    })
 
-  it('should navigate to apps onAppSearch', () => {
-    const routerSpy = spyOn(router, 'navigate')
+    it('should navigate to apps onAppSearch', () => {
+      const routerSpy = spyOn(router, 'navigate')
 
-    component.onAppSearch()
+      component.onAppSearch()
 
-    expect(routerSpy).toHaveBeenCalledWith(['./apps'], jasmine.any(Object))
-  })
+      expect(routerSpy).toHaveBeenCalledWith(['./apps'], jasmine.any(Object))
+    })
 
-  it('should navigate to slots onSlotSearch', () => {
-    const routerSpy = spyOn(router, 'navigate')
+    it('should navigate to slots onSlotSearch', () => {
+      const routerSpy = spyOn(router, 'navigate')
 
-    component.onSlotSearch()
+      component.onEndpointSearch()
 
-    expect(routerSpy).toHaveBeenCalledWith(['./slots'], jasmine.any(Object))
+      expect(routerSpy).toHaveBeenCalledWith(['./endpoints'], jasmine.any(Object))
+    })
+
+    it('should navigate to slots onSlotSearch', () => {
+      const routerSpy = spyOn(router, 'navigate')
+
+      component.onSlotSearch()
+
+      expect(routerSpy).toHaveBeenCalledWith(['./slots'], jasmine.any(Object))
+    })
   })
 
   it('should sort products by display name', () => {

src/app/product-store/slot-delete/slot-delete.component.html

@@ -13,8 +13,16 @@
     <div class="pi pi-question-circle text-3xl danger-action-text"></div>
     <div>
       <div id="ps_slot_delete_message" class="font-bold">{{ 'ACTIONS.DELETE.SLOT.MESSAGE' | translate }}</div>
-      <div id="ps_slot_delete_message" class="my-2 font-bold danger-action-text text-center">{{ slot?.name }}</div>
-      <div *ngIf="slot?.operator">{{ 'ACTIONS.DELETE.SLOT.OPERATOR_TEXT' | translate }}</div>
+      <div class="flex flex-column row-gap-2">
+        <div id="ps_slot_delete_slot_name" class="my-2 font-bold danger-action-text text-center">{{ slot?.name }}</div>
+        <div class="flex flex-row column-gap-2">
+          <div class="w-4 text-right font-bold">{{ 'SLOT.PRODUCT_NAME' | translate }}:</div>
+          <div class="w-8 text-left white-space-nowrap" id="ps_slot_delete_product_name">{{ slot?.productName }}</div>
+        </div>
+        <div *ngIf="slot?.operator" id="ps_slot_delete_operator">
+          {{ 'ACTIONS.DELETE.SLOT.OPERATOR_TEXT' | translate }}
+        </div>
+      </div>
       <div class="mt-2">{{ 'ACTIONS.DELETE.MESSAGE_INFO' | translate }}</div>
     </div>
   </div>