Fix finance memory leak remove resize listener leak and layout shift

.github/workflows/if-nodejs-pr-testing.yml

@@ -71,8 +71,14 @@ jobs:
         name: Install dependencies
         run: npm ci
       - if: steps.packagejson.outputs.exists == 'true'
-        name: Test
+        name: Run tests
         run: npm test --if-present
+      - if: steps.packagejson.outputs.exists == 'true'
+        name: Build project
+        run: npm run build --if-present
+      - if: steps.packagejson.outputs.exists == 'true' && matrix.os == 'ubuntu-latest'
+        name: Run E2E tests (Cypress)
+        run: npm run test:e2e --if-present
       - if: steps.packagejson.outputs.exists == 'true' && matrix.os == 'ubuntu-latest'
         name: Run linter
         run: npm run lint --if-present

config/tools.json

@@ -942,7 +942,7 @@
               "borderColor": "border-[#CA1A33]"
             },
             {
-              "name": "Liquid",
+              "name": "AsyncAPI CLI",
               "color": "bg-[#61d0f2]",
               "borderColor": "border-[#40ccf7]"
             },
@@ -1652,7 +1652,7 @@
               "borderColor": "border-[#CA1A33]"
             },
             {
-              "name": "Liquid",
+              "name": "AsyncAPI CLI",
               "color": "bg-[#61d0f2]",
               "borderColor": "border-[#40ccf7]"
             },

cypress/ambassadors.cy.ts

@@ -0,0 +1,181 @@
+describe('Ambassadors Page - Social Links Rendering', () => {
+  beforeEach(() => {
+    cy.visit('/community/ambassadors');
+  });
+
+  describe('Social Links Conditional Rendering', () => {
+    it('should render ambassador cards', () => {
+      cy.get('[data-testid="Ambassadors-members"]').should('have.length.greaterThan', 0);
+    });
+
+    it('should not render links with undefined href attributes', () => {
+      // Check that no anchor tags have href="undefined"
+      cy.get('[data-testid="Ambassadors-members-socials"] a').each(($link) => {
+        const href = $link.attr('href');
+        expect(href).not.to.equal('undefined');
+        expect(href).not.to.be.empty;
+        expect(href).to.match(/^https?:\/\//); // Must start with http/https
+      });
+    });
+
+    it('should only render Twitter links when twitter URL exists', () => {
+      cy.get('[data-testid="Ambassadors-members"]').each(($card) => {
+        const twitterLink = cy.wrap($card).find('[data-testid="Ambassadors-members-twitter"]');
+
+        // If Twitter link exists, verify it has a valid href
+        twitterLink.then(($el) => {
+          if ($el.length > 0) {
+            expect($el.attr('href')).to.include('twitter.com');
+            expect($el.attr('href')).not.to.equal('undefined');
+          }
+        });
+      });
+    });
+
+    it('should only render GitHub links when github URL exists', () => {
+      cy.get('[data-testid="Ambassadors-members-socials"]').each(($socialsDiv) => {
+        // Get all links in the socials section
+        const links = cy.wrap($socialsDiv).find('a');
+
+        links.each(($link) => {
+          const href = $link.attr('href');
+          // If it's a GitHub link, ensure it's valid
+          if (href && href.includes('github.com')) {
+            expect(href).not.to.equal('undefined');
+            expect(href).to.include('github.com');
+          }
+        });
+      });
+    });
+
+    it('should only render LinkedIn links when linkedin URL exists', () => {
+      cy.get('[data-testid="Ambassadors-members-socials"]').each(($socialsDiv) => {
+        // Get all links in the socials section
+        const links = cy.wrap($socialsDiv).find('a');
+
+        links.each(($link) => {
+          const href = $link.attr('href');
+          // If it's a LinkedIn link, ensure it's valid
+          if (href && href.includes('linkedin.com')) {
+            expect(href).not.to.equal('undefined');
+            expect(href).to.include('linkedin.com/in');
+          }
+        });
+      });
+    });
+
+    it('should render valid links with proper target and rel attributes', () => {
+      cy.get('[data-testid="Ambassadors-members-socials"] a').each(($link) => {
+        expect($link.attr('target')).to.equal('_blank');
+        expect($link.attr('rel')).to.include('noreferrer');
+      });
+    });
+  });
+
+  describe('Ambassador Images', () => {
+    it('should not render broken image URLs', () => {
+      cy.get('[data-testid="Ambassadors-members-img"] img').each(($img) => {
+        const src = $img.attr('src');
+        expect(src).not.to.equal('undefined.png');
+        expect(src).not.to.be.empty;
+      });
+    });
+
+    it('should load ambassador images without 404 errors', () => {
+      cy.get('[data-testid="Ambassadors-members-img"] img').each(($img) => {
+        cy.wrap($img).should('be.visible');
+        // Verify image is loaded (naturalHeight should be set for successful loads)
+        cy.wrap($img).should(($el) => {
+          // Just check that src is valid
+          expect($el.attr('src')).to.exist;
+          expect($el.attr('src')).not.to.include('undefined');
+        });
+      });
+    });
+  });
+
+  describe('Social Links Navigation', () => {
+    it('should navigate to Twitter when clicking Twitter link', () => {
+      cy.get('[data-testid="Ambassadors-members-twitter"]').first().then(($link) => {
+        if ($link.length > 0) {
+          const href = $link.attr('href');
+          expect(href).to.include('twitter.com');
+          cy.wrap($link).should('have.attr', 'href', href);
+        }
+      });
+    });
+
+    it('should navigate to GitHub when clicking GitHub link', () => {
+      cy.get('[data-testid="Ambassadors-members-socials"]').first().then(($socialsDiv) => {
+        const githubLink = cy.wrap($socialsDiv).find('a').filter(':contains("Github")');
+
+        githubLink.then(($link) => {
+          if ($link.length > 0) {
+            const href = $link.attr('href');
+            expect(href).to.include('github.com');
+          }
+        });
+      });
+    });
+
+    it('should navigate to LinkedIn when clicking LinkedIn link', () => {
+      cy.get('[data-testid="Ambassadors-members-socials"]').first().then(($socialsDiv) => {
+        const linkedinLink = cy.wrap($socialsDiv).find('a').filter(':contains("Linkedin")');
+
+        linkedinLink.then(($link) => {
+          if ($link.length > 0) {
+            const href = $link.attr('href');
+            expect(href).to.include('linkedin.com');
+          }
+        });
+      });
+    });
+  });
+
+  describe('Ambassador Card Layout', () => {
+    it('should display ambassador name and country', () => {
+      cy.get('[data-testid="Ambassadors-members-details"]').each(($detail) => {
+        expect($detail).to.contain.text('');
+        // Should have name and country
+        cy.wrap($detail).find('div').should('have.length.at.least', 2);
+      });
+    });
+
+    it('should display ambassador title and bio', () => {
+      cy.get('[data-testid="Ambassadors-members"]').each(($card) => {
+        cy.wrap($card).should('be.visible');
+        // Should have title in rounded border
+        cy.wrap($card).find('.rounded-lg').should('be.visible');
+      });
+    });
+
+    it('should display social links section for each ambassador', () => {
+      cy.get('[data-testid="Ambassadors-members-socials"]').should('have.length.greaterThan', 0);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle ambassadors with only GitHub', () => {
+      // Find an ambassador card and verify GitHub link exists
+      cy.get('[data-testid="Ambassadors-members-socials"]').first().within(() => {
+        cy.get('a').then(($links) => {
+          const links = $links.toArray();
+          const hasValidLinks = links.some((link) => {
+            const href = link.getAttribute('href');
+            return href && href.includes('github.com') && href !== 'undefined';
+          });
+
+          // At least some ambassadors should have GitHub
+          if (hasValidLinks) {
+            expect(hasValidLinks).to.be.true;
+          }
+        });
+      });
+    });
+
+    it('should not have any broken hrefs in the entire page', () => {
+      cy.get('a[href="undefined"]').should('have.length', 0);
+      cy.get('a[href=""]').should('not.exist');
+    });
+  });
+});

pages/community/ambassadors/index.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import type { Ambassador } from '@/types/pages/community/Community';
 import { HeadingTypeStyle } from '@/types/typography/Heading';
+import { addAdditionalUserInfo } from '@/utils/ambassadors';
 
 import Button from '../../../components/buttons/Button';
 import IconGithub from '../../../components/icons/Github';
@@ -15,30 +16,6 @@ import Heading from '../../../components/typography/Heading';
 import ambassadorList from '../../../config/ambassador_lists.json';
 import ambassadors from '../../../config/AMBASSADORS_MEMBERS.json';
 
-/**
- * @description Add additional user information to the user object having ambassador data
- * @param {Ambassador} user - The user object having ambassador data
- */
-export function addAdditionalUserInfo(user: Ambassador) {
-  const userData: Ambassador = {
-    ...user
-  };
-
-  if (userData.github) {
-    userData.githubUrl = `https://www.github.com/${userData.github}`;
-  }
-  if (userData.linkedin) {
-    userData.linkedinUrl = `https://www.linkedin.com/in/${userData.linkedin}`;
-  }
-  if (userData.twitter) {
-    userData.twitterUrl = `https://www.twitter.com/${userData.twitter}`;
-  }
-
-  userData.img = `${userData.githubUrl}.png`;
-
-  return userData;
-}
-
 /**
  * @description The main page for the AsyncAPI Ambassador Program.
  */

pages/finance.tsx

@@ -1,5 +1,5 @@
 import Head from 'next/head';
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 
 import AsyncAPISummary from '../components/FinancialSummary/AsyncAPISummary';
 import BarChartComponent from '../components/FinancialSummary/BarChartComponent';
@@ -8,32 +8,13 @@ import ExpenseBreakdown from '../components/FinancialSummary/ExpenseBreakdown';
 import OtherFormsComponent from '../components/FinancialSummary/OtherFormsComponent';
 import SponsorshipTiers from '../components/FinancialSummary/SponsorshipTiers';
 import SuccessStories from '../components/FinancialSummary/SuccessStories';
-import Container from '../components/layout/Container';
 
 /**
  * @description The FinancialSummary is the financial summary page of the website.
  * It contains the AsyncAPI summary, sponsorship tiers, other forms, expense breakdown,
  * bar chart, success stories, and contact us components.
  */
 export default function FinancialSummary() {
-  const [windowWidth, setWindowWidth] = useState<number>(0);
-
-  const handleResizeRef = useRef<() => void>(null!);
-
-  handleResizeRef.current = () => {
-    setWindowWidth(window.innerWidth);
-  };
-
-  // Handle window resize event to update the window width state value for responsive design purposes
-  useEffect(() => {
-    handleResizeRef.current!();
-    window.addEventListener('resize', handleResizeRef.current!);
-
-    return () => {
-      window.removeEventListener('resize', handleResizeRef.current!);
-    };
-  }, []);
-
   const title = 'AsyncAPI Finance Summary';
   const description = 'Financial Summary of AsyncAPI';
 
@@ -53,7 +34,5 @@ export default function FinancialSummary() {
     </>
   );
 
-  const shouldUseContainer = windowWidth > 1700;
-
-  return <div>{shouldUseContainer ? <Container wide>{renderComponents()}</Container> : renderComponents()}</div>;
+  return <div className='w-full 2xl:mx-auto 2xl:max-w-screen-xl'>{renderComponents()}</div>;
 }