MARP-994: Market-website-Artifact-and-version-in-download-feature-not save-update

marketplace-ui/src/app/app.component.html

@@ -25,8 +25,6 @@
   }
 
   @if (loadingService.isLoading()) {
-    <div class="spinner-container">
-      <div class="spinner-border"></div>
-    </div>
+    <app-loading-spinner />
   }
 </div>

marketplace-ui/src/app/app.component.scss

@@ -25,24 +25,6 @@ footer {
   }
 }
 
-.spinner-container {
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.32);
-  z-index: 2000;
-}
-
-.spinner-border {
-  width: 4rem;
-  height: 4rem;
-}
-
 .header-mobile {
   z-index: 1;
   position: absolute;

marketplace-ui/src/app/app.component.ts

@@ -12,11 +12,12 @@ import {
   RouterOutlet,
   Event
 } from '@angular/router';
+import { LoadingSpinnerComponent } from "./shared/components/loading-spinner/loading-spinner.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, HeaderComponent, FooterComponent, CommonModule],
+  imports: [RouterOutlet, HeaderComponent, FooterComponent, CommonModule, LoadingSpinnerComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })

marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/show-feedbacks-dialog/show-feedbacks-dialog.component.spec.ts

@@ -7,10 +7,7 @@ import { AppModalService } from '../../../../../shared/services/app-modal.servic
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { CommonModule } from '@angular/common';
 import { By } from '@angular/platform-browser';
-import {
-  provideHttpClient,
-  withInterceptorsFromDi
-} from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 
 describe('ShowFeedbacksDialogComponent', () => {
@@ -74,4 +71,39 @@ describe('ShowFeedbacksDialogComponent', () => {
 
     expect(mockAppModalService.openAddFeedbackDialog).toHaveBeenCalled();
   });
+
+  it('should call activeModal.dismiss when the window is resized to less than or equal to 767px', () => {
+    // Set up a media query list that matches
+    spyOn(window, 'matchMedia').and.returnValue({
+      matches: true,
+      addListener: () => {
+      },
+      removeListener: () => {
+      }
+    } as any);
+
+    // Trigger the resize event
+    component.onResize();
+
+    // Check that dismiss was called
+    expect(mockActiveModal.dismiss).toHaveBeenCalled();
+  });
+
+  it('should not call activeModal.dismiss when the window is resized to more than 767px', () => {
+    // Set up a media query list that does not match
+    spyOn(window, 'matchMedia').and.returnValue({
+      matches: false,
+      addListener: () => {
+      },
+      removeListener: () => {
+      }
+    } as any);
+
+    // Trigger the resize event
+    component.onResize();
+
+    // Check that dismiss was not called
+    expect(mockActiveModal.dismiss).not.toHaveBeenCalled();
+  });
+
 });

marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.html

@@ -56,7 +56,7 @@
 }
 
 @if (isDropDownDisplayed()) {
-<div #artifactDownloadDialog class="dropdown-menu show maven-artifact-version__action border__dropdown">
+  <div #artifactDownloadDialog class="dropdown-menu show maven-artifact-version__action border__dropdown">
     <div class="up-arrow border__dropdown position-absolute"></div>
     <form>
       <div class="form-group">
@@ -113,5 +113,8 @@
         </button>
       </div>
     </form>
+    @if (isArtifactLoading()) {
+      <app-loading-spinner [isFixPosition]="false" />
+    }
   </div>
 }

marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.spec.ts

@@ -1,38 +1,60 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { of } from 'rxjs';
-import { ProductDetailVersionActionComponent } from './product-detail-version-action.component';
+import { ProductDetailVersionActionComponent, versionParam } from './product-detail-version-action.component';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ProductService } from '../../product.service';
 import { provideHttpClient } from '@angular/common/http';
 import { ElementRef } from '@angular/core';
 import { ItemDropdown } from '../../../../shared/models/item-dropdown.model';
+import { CookieService } from 'ngx-cookie-service';
+import { ActivatedRoute, provideRouter, Router } from '@angular/router';
+import { CommonUtils } from '../../../../shared/utils/common.utils';
 
 class MockElementRef implements ElementRef {
   nativeElement = {
     contains: jasmine.createSpy('contains')
   };
 }
+
 describe('ProductDetailVersionActionComponent', () => {
+  const productId = '123';
   let component: ProductDetailVersionActionComponent;
   let fixture: ComponentFixture<ProductDetailVersionActionComponent>;
   let productServiceMock: any;
+  let router: Router;
+  let route: jasmine.SpyObj<ActivatedRoute>;
 
   beforeEach(() => {
     productServiceMock = jasmine.createSpyObj('ProductService', [
-      'sendRequestToProductDetailVersionAPI' , 'sendRequestToUpdateInstallationCount'
+      'sendRequestToProductDetailVersionAPI', 'sendRequestToUpdateInstallationCount', 'sendRequestToGetProductVersionsForDesigner'
     ]);
+    const commonUtilsSpy = jasmine.createSpyObj('CommonUtils', ['getCookieValue']);
+    // const cookieServiceSpy = jasmine.createSpyObj('CookieService', ['get', 'set']);
+    const activatedRouteSpy = jasmine.createSpyObj('ActivatedRoute', [], {
+      snapshot: {
+        queryParams: {}
+      }
+    });
 
     TestBed.configureTestingModule({
       imports: [ProductDetailVersionActionComponent, TranslateModule.forRoot()],
       providers: [
         TranslateService,
+        CookieService,
         provideHttpClient(),
+        provideRouter([]),
         { provide: ProductService, useValue: productServiceMock },
-        { provide: ElementRef, useClass: MockElementRef }
+        { provide: ElementRef, useClass: MockElementRef },
+        { provide: ActivatedRoute, useValue: { queryParams: of({}) } },
+        { provide: CommonUtils, useValue: commonUtilsSpy },
+        { provide: ActivatedRoute, useValue: activatedRouteSpy }
       ]
     }).compileComponents();
     fixture = TestBed.createComponent(ProductDetailVersionActionComponent);
     component = fixture.componentInstance;
+    component.productId = productId;
+    router = TestBed.inject(Router);
+    route = TestBed.inject(ActivatedRoute) as jasmine.SpyObj<ActivatedRoute>;
     fixture.detectChanges();
   });
 
@@ -58,6 +80,90 @@ describe('ProductDetailVersionActionComponent', () => {
     expect(component.selectedArtifact).toEqual('https://example.com/download');
   });
 
+  it('should update selectedVersion, artifacts, selectedArtifactName, and selectedArtifact, and call addVersionParamToRoute', () => {
+    const version = '1.0';
+    const artifacts = [{
+      name: 'Example Artifact',
+      downloadUrl: 'https://example.com/download',
+      isProductArtifact: true
+    } as ItemDropdown];
+    const versionMap = new Map<string, any[]>();
+    versionMap.set(version, artifacts);
+
+    // Set up spies
+    spyOn(component.selectedVersion, 'set');
+    spyOn(component as any, 'addVersionParamToRoute').and.callThrough();
+
+    // Mock data
+    component.versionMap = versionMap;
+    component.artifacts.set([]);
+
+    // Call the method
+    component.onSelectVersion(version);
+
+    // Expectations
+    expect(component.selectedVersion.set).toHaveBeenCalledWith(version);
+    expect(component.artifacts()).toEqual(artifacts);
+    expect(component.selectedArtifactName).toBe('Example Artifact');
+    expect(component.selectedArtifact).toBe('https://example.com/download');
+    expect(component.addVersionParamToRoute).toHaveBeenCalledWith(version);
+  });
+
+  it('should not update selected version or artifacts if the version is the same', () => {
+    // Arrange
+    const version = 'v1';
+    component.selectedVersion.set(version);
+    spyOn(component.selectedVersion, 'set');
+    spyOn(component.artifacts, 'set');
+    spyOn(component.versionMap, 'get');
+    spyOn(component, 'addVersionParamToRoute');
+
+    // Act
+    component.onSelectVersion(version);
+
+    // Assert
+    expect(component.selectedVersion.set).not.toHaveBeenCalled();
+    expect(component.artifacts.set).toHaveBeenCalled();
+    expect(component.addVersionParamToRoute).toHaveBeenCalledWith(version);
+  });
+
+  it('should handle empty artifacts', () => {
+    // Arrange
+    const version = 'v1';
+    spyOn(component.selectedVersion, 'set');
+    spyOn(component.artifacts, 'set');
+    spyOn(component.versionMap, 'get').and.returnValue([]);
+    spyOn(component, 'addVersionParamToRoute');
+
+    // Act
+    component.onSelectVersion(version);
+
+    // Assert
+    expect(component.selectedVersion.set).toHaveBeenCalledWith(version);
+    expect(component.artifacts.set).toHaveBeenCalledWith([]);
+    expect(component.selectedArtifactName).toBe('');
+    expect(component.selectedArtifact).toBe('');
+    expect(component.addVersionParamToRoute).toHaveBeenCalledWith(version);
+  });
+
+  it('should navigate with the selected version in the query params', () => {
+    const version = '1.0';
+
+    // Set up spy for router.navigate
+    spyOn(router, 'navigate').and.returnValue(Promise.resolve(true));
+
+    // Call the method
+    component.addVersionParamToRoute(version);
+
+    // Expectations
+    expect(router.navigate).toHaveBeenCalledWith([], {
+      relativeTo: route,
+      queryParams: { [versionParam]: version },
+      queryParamsHandling: 'merge'
+    });
+  });
+
+
   it('all of state should be reset before call rest api', () => {
     const selectedVersion = 'Version 10.0.2';
     const artifact = {
@@ -77,6 +183,8 @@ describe('ProductDetailVersionActionComponent', () => {
     component.sanitizeDataBeforeFetching();
     expect(component.versions().length).toBe(0);
     expect(component.artifacts().length).toBe(0);
+    expect(component.selectedVersion()).toEqual(selectedVersion);
+    expect(component.selectedArtifact).toEqual('');
   });
 
   it('should call sendRequestToProductDetailVersionAPI and update versions and versionMap', () => {
@@ -120,6 +228,7 @@ describe('ProductDetailVersionActionComponent', () => {
   });
 
   it('should send Api to get DevVersion', () => {
+    spyOn(component.isDevVersionsDisplayed, 'set');
     expect(component.isDevVersionsDisplayed()).toBeFalse();
     mockApiWithExpectedResponse();
     const event = new Event('click');
@@ -133,7 +242,7 @@ describe('ProductDetailVersionActionComponent', () => {
     const mockArtifact1 = {
       name: 'Example Artifact1',
       downloadUrl: 'https://example.com/download',
-      isProductArtifact: true, label: 'Example Artifact1',
+      isProductArtifact: true, label: 'Example Artifact1'
     } as ItemDropdown;
     const mockArtifact2 = {
       name: 'Example Artifact2',
@@ -182,7 +291,7 @@ describe('ProductDetailVersionActionComponent', () => {
     const productId = 'octopus';
     component.productId = productId;
     const newTabMock: Partial<Window> = {
-    blur: jasmine.createSpy('blur')
+      blur: jasmine.createSpy('blur')
     };
     spyOn(window, 'open').and.returnValue(newTabMock as Window);
     spyOn(window, 'focus');
@@ -210,4 +319,38 @@ describe('ProductDetailVersionActionComponent', () => {
     );
     expect(window.focus).toHaveBeenCalled();
   });
+
+  it('should not call productService if versions are already populated', () => {
+    component.versions.set(['1.0', '1.1']);
+    fixture.detectChanges();
+    component.getVersionInDesigner();
+
+    expect(productServiceMock.sendRequestToGetProductVersionsForDesigner).not.toHaveBeenCalled();
+  });
+
+  it('should call productService and update versions if versions are empty', () => {
+    const productId = '123';
+    component.versions.set([]);
+    const mockVersions = [{ version: '1.0' }, { version: '2.0' }];
+    productServiceMock.sendRequestToGetProductVersionsForDesigner.and.returnValue(of(mockVersions));
+
+    // Act
+    component.getVersionInDesigner();
+
+    // Assert
+    expect(productServiceMock.sendRequestToGetProductVersionsForDesigner).toHaveBeenCalledWith(productId);
+    expect(component.versions()).toEqual(['Version 1.0', 'Version 2.0']);
+  });
+
+  it('should handle empty response from productService', () => {
+    component.versions.set([]);
+    productServiceMock.sendRequestToGetProductVersionsForDesigner.and.returnValue(of([]));
+
+    // Act
+    component.getVersionInDesigner();
+
+    // Assert
+    expect(productServiceMock.sendRequestToGetProductVersionsForDesigner).toHaveBeenCalledWith(productId);
+    expect(component.versions()).toEqual([]);
+  });
 });