MARP-957: Add URLs for LinkedIn, Xing, Youtube, Facebook (#115)

axonivy-market · Aug 28, 2024 · fc671d3 · fc671d3
1 parent 7e75e29
commit fc671d3
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 13 deletions.
diff --git a/marketplace-ui/src/app/shared/components/footer/footer.component.html b/marketplace-ui/src/app/shared/components/footer/footer.component.html
@@ -67,10 +67,15 @@
         <ul class="navbar-nav me-auto mb-lg-0 flex-row">
           @for (link of socialMediaLinks; track $index) {
           <li>
-            <a class="nav-link" aria-current="page" [href]="link.url">
-              <span class="d-flex justify-content-center align-items-center link-icon">
-                <i [class]="link.styleClass" class="w-100 h-100"></i>
-              </span>
+            <a 
+              class="nav-link social-link text-primary" 
+              aria-current="page"
+              target="_blank" 
+              [href]="link.url" 
+              [title]="link.title">
+                <span class="d-flex justify-content-center align-items-center link-icon">
+                  <i [class]="link.styleClass" class="w-100 h-100"></i>
+                </span>
             </a>
           </li>
           }

diff --git a/marketplace-ui/src/app/shared/components/footer/footer.component.spec.ts b/marketplace-ui/src/app/shared/components/footer/footer.component.spec.ts
@@ -3,6 +3,7 @@ import { FooterComponent } from './footer.component';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { By } from '@angular/platform-browser';
 import { Viewport } from 'karma-viewport/dist/adapter/viewport';
+import { SOCIAL_MEDIA_LINK } from '../../constants/common.constant';
 
 declare const viewport: Viewport;
 
@@ -70,4 +71,19 @@ describe('FooterComponent', () => {
     expect(getComputedStyle(logo.nativeElement).textAlign).toBe('center');
     expect(getComputedStyle(ivyPolicy.nativeElement).textAlign).toBe('center');
   });
+
+  it('should navigate to the correct URL when the link icon is clicked', () => {
+    const socialMediaLinks = fixture.debugElement.queryAll(
+      By.css('.social-link')
+    );
+
+    for (let index = 0; index < socialMediaLinks.length; index++) {
+      const socialMediaLinkElement: HTMLAnchorElement =
+      socialMediaLinks[index].nativeElement;
+
+      socialMediaLinkElement.click();
+
+      expect(socialMediaLinkElement.href).toBe(SOCIAL_MEDIA_LINK[index].url);
+    }
+  });
 });
diff --git a/marketplace-ui/src/app/shared/constants/common.constant.ts b/marketplace-ui/src/app/shared/constants/common.constant.ts
@@ -36,21 +36,25 @@ export const NAV_ITEMS: NavItem[] = [
 
 export const SOCIAL_MEDIA_LINK = [
   {
-    styleClass: 'fab fa-linkedin',
-    url: '/'
+    styleClass: 'fa-brands fa-linkedin-in',
+    title: 'Axon Ivy | LinkedIn',
+    url: 'https://www.linkedin.com/company/axon-ivy-ag'
   },
   {
-    styleClass: 'fab fa-xing',
-    url: '/'
+    styleClass: 'fa-brands fa-xing',
+    title: 'Axon Ivy | XING',
+    url: 'https://www.xing.com/companies/axonivyag'
   },
   {
-    styleClass: 'fab fa-youtube',
-    url: '/'
+    styleClass: 'fa-brands fa-facebook-f',
+    title: 'Axon Ivy | Facebook',
+    url: 'https://www.facebook.com/axonivy'
   },
   {
-    styleClass: 'fab fa-facebook',
-    url: '/'
-  }
+    styleClass: 'fa-brands fa-youtube',
+    title: 'Axon Ivy | Youtube',
+    url: 'https://www.youtube.com/channel/UCkoNcDoeDAVM7FB-txy3jnQ'
+  },
 ];
 
 export const IVY_FOOTER_LINKS = [