feat #583: add affiliate marketing (#616)

Author: suzuhe481

components/GiftDetailsView/GiftDetailsView.test.tsx

@@ -1,113 +1,91 @@
 // Copyright (c) Gridiron Survivor.
 // Licensed under the MIT License.
 
-import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import GiftDetailsView from './GiftDetailsView';
 import { describe } from 'node:test';
-import { userEvent } from '@storybook/test';
 
 const mockGift = {
   id: '1',
   title: 'Blanket',
   price: '$29.99',
   description: 'fuzzy blanket',
   matchReasons: ['fits theme', 'highly rated'],
-  matchScore: 0.98,
-  imageUrl:
-    'https://www.amazon.com/Cozzenity-Checkered-Blanket-Blankets-Lightweight/dp/B0F13991KJ/ref=sr_1_1_sspa?dib=eyJ2IjoiMSJ9.6wzR8Y2VhlZ6NsPFYW2cadhZFdeTIN7H6f_K3SufPMLJMToDPu0O_vCflzFycFVgQu9w8Xa2yC56dPFThjqnH5R3cM6i--ozxTqrjiTRLFj0OR_jh8wRe9Y0992_NPU9HrrjbKFeAWsFHKCcDxcGytcREvh7r2XZf-F-jcpqtBJFNhezM0lAhCO27_HYTgtb21GKie4DnzAWwESS488BC_7hi7FVKkDLJRJSmBIBro0WxlgebmNyTq6QqPcwQpM-o2Xa9hLm7DvYG0QSsRcR9QhK0aiRkQs6wLSW0YJHQBI.GiOlWv46xAPaV98XHUz3LzGTnXgnhW8lH6oq09Rz7Jk&dib_tag=se&hvadid=694526290027&hvdev=c&hvexpln=67&hvlocphy=9031568&hvnetw=g&hvocijid=18272751582845398260--&hvqmt=e&hvrand=18272751582845398260&hvtargid=kwd-460419430462&hydadcr=19233_13355042&keywords=amazon%2Bfuzzy%2Bblanket&mcid=5b4485e6f4883f9f84c099bcd937f120&qid=1747259407&sr=8-1-spons&sp_csd=d2lkZ2V0TmFtZT1zcF9hdGY&th=1',
+  matchScore: 98,
+  imageUrl: 'https://example.com/fuzzy-blanket.jpg',
 };
 
-const mockBadGift = {
-  id: '1',
-  title: 'Blanket',
-  price: '$29.99',
-  description: 'fuzzy blanket',
-  matchReasons: ['fits theme', 'highly rated'],
-  matchScore: 0.98,
-  imageUrl:'bad_url',
-}
-
+const mockGiftWithBadUrl = {
+  ...mockGift,
+  imageUrl: 'bad_url',
+};
 
 const mockHandleFeedback = jest.fn();
 
 describe('GiftDetailsView', () => {
-  //testing the gift and handleFeedback props
-  it('renders the component with correct props', () => {
+  it('renders the component with gift details', () => {
     render(
       <GiftDetailsView gift={mockGift} handleFeedback={mockHandleFeedback} />,
     );
-  });
 
-  //testing the Amazon URL
-  it('generates the correct Amazon URL', async () => {
-    render(
-      <GiftDetailsView gift={mockGift} handleFeedback={mockHandleFeedback} />,
-    );
-
-    const hrefLink = screen.getByRole('link', { name: /view/i });
-    await userEvent.click(hrefLink);
+    const giftImage = screen.getByRole('img');
+    expect(giftImage).toHaveAttribute('src', mockGift.imageUrl);
 
-    expect(hrefLink).toHaveAttribute(
-      'href',
-      'https://www.amazon.com/s?k=Blanket',
-    );
+    const matchScore = screen.getByRole('score');
+    expect(matchScore).toHaveTextContent(/98% Match/);
 
-  })
+    const price = screen.getByLabelText(/price/i);
+    expect(price).toHaveTextContent(mockGift.price);
 
-  // testing conditional rendering for ImageURL
-  it('renders image if URL is present', () => {
-    render(
-      <GiftDetailsView gift={mockGift} handleFeedback={mockHandleFeedback} />,
-    );
+    const title = screen.getByRole('heading', {
+      level: 3,
+      name: mockGift.title,
+    });
+    expect(title).toBeInTheDocument();
 
-    const image = screen.getByTestId('valid-image');
-    expect(image).toBeInTheDocument();
-  })
+    const description = screen.getByText(mockGift.description);
+    expect(description).toHaveTextContent(mockGift.description);
 
-  //testing that Gift Icon appears if not valid image URL
-  //CAN NOT FIGURE THIS OUT
-  it('renders Gift Icon if URl is not valid', ()=> {
-     render(
-       <GiftDetailsView gift={mockBadGift} handleFeedback={mockHandleFeedback} />,
-     );
+    const matchReasons = screen.getByRole('list');
+    const matchItems = within(matchReasons)
+      .getAllByRole('listitem')
+      .map((li) => li.textContent);
+    expect(matchItems).toEqual(expect.arrayContaining(mockGift.matchReasons));
+  });
 
-     const giftIcon = screen.getByTestId('gift-icon');
-     expect(giftIcon).toBeInTheDocument();
-  })
+  it('generates the correct Amazon URL', async () => {
+    // Cloning the env variable
+    const original_NEXT_PUBLIC_AMAZON_AFFILIATE_TAG =
+      process.env.NEXT_PUBLIC_AMAZON_AFFILIATE_TAG;
+    process.env.NEXT_PUBLIC_AMAZON_AFFILIATE_TAG = 'test-tag';
 
-  it('renders a valid MatchScore and price', () => {
     render(
       <GiftDetailsView gift={mockGift} handleFeedback={mockHandleFeedback} />,
     );
 
-    const matchScore = screen.getByTestId('valid-matchScore');
-    expect(matchScore).toBeInTheDocument();
-
-    const price = screen.getByTestId('valid-price');
-    expect(price).toBeInTheDocument();
-  })
-
-  it('renders a valid title and description', () => {
-    render(
-      <GiftDetailsView gift={mockGift} handleFeedback={mockHandleFeedback} />,
+    const hrefLink = screen.getByRole('link', { name: /view/i });
+    expect(hrefLink).toHaveAttribute(
+      'href',
+      `https://www.amazon.com/s?k=${mockGift.title}&tag=${process.env.NEXT_PUBLIC_AMAZON_AFFILIATE_TAG}`,
     );
 
-    const title = screen.getByTestId('valid-title');
-    expect(title).toBeInTheDocument();
-
-    const description = screen.getByTestId('valid-description');
-    expect(description).toBeInTheDocument();
+    // Restoring the env variable
+    process.env.NEXT_PUBLIC_AMAZON_AFFILIATE_TAG =
+      original_NEXT_PUBLIC_AMAZON_AFFILIATE_TAG;
   });
 
-  it('correctly renders a list for match reasons', () => {
+  it('renders default Gift Icon on invalid image url', () => {
     render(
-      <GiftDetailsView gift={mockGift} handleFeedback={mockHandleFeedback} />,
+      <GiftDetailsView
+        gift={mockGiftWithBadUrl}
+        handleFeedback={mockHandleFeedback}
+      />,
     );
 
-    mockGift.matchReasons.forEach((reason) => {
-      expect(screen.getByText(reason)).toBeInTheDocument();
-    })
-  })
+    const giftIcon = screen.getByRole('img', {
+      name: /gift placeholder image/i,
+    });
 
+    expect(giftIcon).toBeInTheDocument();
+  });
 });

components/GiftDetailsView/GiftDetailsView.tsx

@@ -6,7 +6,11 @@ import {
   CardHeader,
   CardTitle,
 } from '../Card/Card';
-import { SquareArrowOutUpRight, ThumbsDown, Gift } from 'lucide-react';
+import {
+  SquareArrowOutUpRight,
+  ThumbsDown,
+  Gift as GiftIcon,
+} from 'lucide-react';
 import { IGiftSuggestion } from '@/app/types/giftSuggestion';
 import { useState, useCallback } from 'react';
 
@@ -34,53 +38,58 @@ const GiftDetailsView = ({
 
   const handleAmazonLink = ({ searchTerm }: { searchTerm: string }) => {
     const encodedSearch = encodeURIComponent(searchTerm).replace(/%20/g, '+');
-    return `https://www.amazon.com/s?k=${encodedSearch}`;
+
+    return `https://www.amazon.com/s?k=${encodedSearch}&tag=${process.env.NEXT_PUBLIC_AMAZON_AFFILIATE_TAG}`;
   };
 
+  const showImage = gift.imageUrl && isValidUrl(gift.imageUrl) && !imageError;
+  const matchScore = `${gift.matchScore}% Match`;
+
   return (
     <>
       <div className="relative w-full h-40 bg-white rounded-t-md">
-        {gift.imageUrl && isValidUrl(gift.imageUrl) && !imageError ? (
+        {showImage ? (
           <img
-            src={gift.imageUrl}
+            src={gift.imageUrl || ''}
             alt={gift.title}
             className="w-full h-full object-contain p-2"
             onError={handleImageError}
-            data-testid="valid-image"
           />
         ) : (
           <div className="w-full h-full flex items-center justify-center">
-            <Gift className="w-16 h-16 text-gray-300" data-testid="gift-icon" />
+            <GiftIcon
+              role="img"
+              className="w-16 h-16 text-gray-300"
+              aria-label="gift placeholder image"
+            />
           </div>
         )}
 
         <div className="absolute top-2 left-2 right-2 flex justify-between items-center">
           <div
-            data-testid="valid-matchScore"
+            role="score"
+            aria-label="match score"
             className="text-xs px-3 py-1 flex items-center justify-center font-semibold bg-giftSuggestionTextBackground text-giftSuggestionTextGreen rounded-full shadow-sm"
           >
-            {gift.matchScore}% Match
+            {matchScore}
           </div>
-          <div
-            data-testid="valid-price"
+          <data
+            value={gift.price}
+            aria-label="price"
             className="px-3 py-1 font-semibold text-giftSuggestionDarkGreen bg-white/90 rounded-full shadow-sm"
           >
             {gift.price}
-          </div>
+          </data>
         </div>
       </div>
 
       <CardHeader className="p-0 mx-4">
-        <CardTitle
-          data-testid="valid-title"
-          className="text-base font-bold text-giftSuggestionDarkGreen"
-        >
-          {gift.title}
+        <CardTitle>
+          <h3 className="text-base font-bold text-giftSuggestionDarkGreen">
+            {gift.title}
+          </h3>
         </CardTitle>
-        <CardDescription
-          data-testid="valid-description"
-          className="text-sm text-giftSuggestionTextLightGreen"
-        >
+        <CardDescription className="text-sm text-giftSuggestionTextLightGreen">
           {gift.description}
         </CardDescription>
       </CardHeader>