test: (BadgeTile) add test for badge tile

lib/components/organisms/BadgeTile/BadgeTile.spec.tsx

@@ -0,0 +1,178 @@
+import '@testing-library/jest-dom';
+import { screen } from '@testing-library/react';
+import React from 'react';
+import { BadgeTileType, TileHeight, TileType } from '../../../types/tile';
+import { render } from '../../__test__/test-utils';
+import { BadgeTile } from './index';
+
+const BadgeTileMock = {
+  id: 'latest-badge-none',
+  type: TileType.Badge,
+  active: true,
+  createdAt: '2024-08-06T08:53:24.307Z',
+  updatedAt: '2024-08-06T08:53:24.307Z',
+  tileHeight: TileHeight.Full,
+  priority: 0,
+  configuration: {
+    type: BadgeTileType.Latest,
+    badgeId: '900a2477-95c4-4c42-ae2d-3795e7f0f5f2',
+    internalName: 'Top Spender',
+    name: 'Top Spender',
+    description: 'Spent £100 on 5 Separate transactions',
+    artworkUrl: 'https://ucarecdn.com/3d3731b2-faec-4779-9cd8-3691631d280c/',
+    priority: 0,
+    status: 'ACTIVE',
+    createdAt: '2024-08-06T08:53:24.307Z',
+    updatedAt: '2024-08-06T08:53:24.307Z',
+    awardedDatePrefix: 'Awarded',
+    emptyBadgeMessage: "You haven't earned any badges yet.",
+    badgeNotEarnedMessage: 'Badge not earned yet',
+    emptyBadgeArtworkUrl:
+      'https://ucarecdn.com/3d3731b2-faec-4779-9cd8-3691631d280c/',
+    count: 0,
+  },
+};
+
+describe('<BadgeTile />', () => {
+  it('matches snapshot', () => {
+    const { container } = render(<BadgeTile tile={BadgeTileMock} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  describe('Rendering States', () => {
+    it('returns null when tile prop is not provided', () => {
+      const { container } = render(<BadgeTile tile={undefined} />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('returns null when tile height is not full', () => {
+      const halfHeightTile = {
+        ...BadgeTileMock,
+        tileHeight: TileHeight.Half,
+      };
+      const { container } = render(<BadgeTile tile={halfHeightTile} />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('renders correctly for Latest badge type with no badges earned', () => {
+      render(<BadgeTile tile={BadgeTileMock} />);
+      expect(
+        screen.getByText(BadgeTileMock.configuration.emptyBadgeMessage)
+      ).toBeInTheDocument();
+      expect(screen.getByTestId('badge-tile-media')).toBeInTheDocument();
+    });
+
+    it('renders correctly for Latest badge type with badges earned', () => {
+      const earnedBadge = {
+        ...BadgeTileMock,
+        configuration: {
+          ...BadgeTileMock.configuration,
+          count: 1,
+        },
+      };
+      render(<BadgeTile tile={earnedBadge} />);
+      expect(
+        screen.getByText(earnedBadge.configuration.name)
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(earnedBadge.configuration.description)
+      ).toBeInTheDocument();
+      expect(screen.getByTestId('badge-tile-media')).toBeInTheDocument();
+    });
+  });
+
+  describe('Badge Types', () => {
+    it('renders specific badge type correctly when not earned', () => {
+      const specificBadge = {
+        ...BadgeTileMock,
+        configuration: {
+          ...BadgeTileMock.configuration,
+          type: BadgeTileType.Specific,
+          count: 0,
+        },
+      };
+      render(<BadgeTile tile={specificBadge} />);
+      expect(
+        screen.getByText(specificBadge.configuration.badgeNotEarnedMessage)
+      ).toBeInTheDocument();
+    });
+
+    it('renders specific badge type correctly when earned once', () => {
+      const specificBadge = {
+        ...BadgeTileMock,
+        configuration: {
+          ...BadgeTileMock.configuration,
+          type: BadgeTileType.Specific,
+          count: 1,
+        },
+      };
+      render(<BadgeTile tile={specificBadge} />);
+      expect(
+        screen.getByText(specificBadge.configuration.name)
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(specificBadge.configuration.description)
+      ).toBeInTheDocument();
+    });
+
+    it('renders Lock icon when not earned', () => {
+      const specificBadge = {
+        ...BadgeTileMock,
+        configuration: {
+          ...BadgeTileMock.configuration,
+          type: BadgeTileType.Specific,
+          count: 0,
+        },
+      };
+      render(<BadgeTile tile={specificBadge} />);
+      expect(
+        screen.getByText(specificBadge.configuration.badgeNotEarnedMessage)
+      ).toBeInTheDocument();
+      expect(
+        screen.getByTestId('badge-tile-status-locked')
+      ).toBeInTheDocument();
+    });
+
+    it('renders specific badge type correctly with multiple earned', () => {
+      const specificBadge = {
+        ...BadgeTileMock,
+        configuration: {
+          ...BadgeTileMock.configuration,
+          type: BadgeTileType.Specific,
+          count: 3,
+        },
+      };
+      render(<BadgeTile tile={specificBadge} />);
+      expect(
+        screen.getByText(specificBadge.configuration.name)
+      ).toBeInTheDocument();
+      expect(screen.getByText('3x')).toBeInTheDocument();
+    });
+  });
+
+  describe('Badge Media', () => {
+    it('renders badge artwork when provided', () => {
+      render(<BadgeTile tile={BadgeTileMock} />);
+      expect(screen.getByTestId('badge-tile-media')).toBeInTheDocument();
+    });
+
+    it('renders empty badge artwork when no badges earned', () => {
+      const emptyBadge = {
+        ...BadgeTileMock,
+        configuration: {
+          ...BadgeTileMock.configuration,
+          count: 0,
+        },
+      };
+      render(<BadgeTile tile={emptyBadge} />);
+      const media = screen.getByTestId('badge-tile-media');
+      expect(media).toBeInTheDocument();
+
+      const progressiveImage = media.querySelector('[src]');
+      expect(progressiveImage).toHaveAttribute(
+        'src',
+        emptyBadge.configuration.emptyBadgeArtworkUrl
+      );
+    });
+  });
+});

lib/components/organisms/BadgeTile/__snapshots__/BadgeTile.spec.tsx.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<BadgeTile /> matches snapshot 1`] = `
+<div>
+  <button
+    aria-disabled="true"
+    aria-label="undefined"
+    class="css-view-175oi2r r-pointerEvents-12vffkv r-aspectRatio-1ujkv8a r-borderRadius-y47klf r-height-1pi2tsx r-overflow-1udh08x r-position-bnwqim r-width-13qz1uu"
+    disabled=""
+    role="button"
+    style="background-color: rgb(248, 247, 252); opacity: 1; flex-direction: column; justify-content: flex-start; align-items: stretch;"
+    tabindex="-1"
+    type="button"
+  >
+    <div
+      class="css-view-175oi2r r-alignItems-1awozwy r-flexBasis-1t2qqvi r-justifyContent-1777fci r-marginBottom-1ifxtd0 r-position-bnwqim"
+      data-testid="badge-tile-media"
+    >
+      <div
+        class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci r-position-bnwqim r-height-1pi2tsx r-width-13qz1uu"
+        style="background-color: rgba(57, 46, 215, 0.2);"
+      >
+        <div
+          class="css-view-175oi2r r-bottom-1p0dtai r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af"
+          style="background-color: rgba(57, 46, 215, 0.2); opacity: 1;"
+        />
+        <div
+          class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010 r-bottom-1p0dtai r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af"
+          style="opacity: 0;"
+        >
+          <div
+            class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+            style="background-image: url(https://ucarecdn.com/3d3731b2-faec-4779-9cd8-3691631d280c/);"
+          />
+          <img
+            alt=""
+            class="css-accessibilityImage-9pa8cd"
+            draggable="false"
+            src="https://ucarecdn.com/3d3731b2-faec-4779-9cd8-3691631d280c/"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="css-view-175oi2r r-alignItems-1habvwh r-flex-13awgt0 r-flexDirection-eqz5dr r-justifyContent-1wtj0ep r-paddingBottom-kzbkwu r-paddingInline-3o4zer"
+    >
+      <div
+        aria-label="Badge title: You haven't earned any badges yet."
+        class="css-view-175oi2r"
+        data-testid="badge-tile-title"
+      >
+        <div
+          class="css-text-146c3p1 r-WebkitBoxOrient-8akbws r-display-krxsd3 r-maxWidth-dnmrzs r-overflow-1udh08x r-textOverflow-1udbk01 r-marginBottom-5oul0u"
+          dir="auto"
+          style="color: rgb(0, 0, 0); font-size: 24px; font-weight: bold;"
+        >
+          You haven't earned any badges yet.
+        </div>
+      </div>
+      <div
+        class="css-view-175oi2r"
+        style="flex: 1;"
+      />
+    </div>
+  </button>
+</div>
+`;

lib/components/organisms/BadgeTile/badge-tile-date-earned.tsx

@@ -47,6 +47,7 @@ export const BadgeTileDateEarned = (): JSX.Element | null => {
       style={containerStyle}
       accessible
       accessibilityLabel={accessibilityLabel}
+      testID="badge-tile-date-earned"
     >
       <Text
         variant="label"

lib/components/organisms/BadgeTile/badge-tile-description.tsx

@@ -12,7 +12,11 @@ export const BadgeTileDescription = (): JSX.Element | null => {
   if (count === 0 || !description) return null;
 
   return (
-    <View accessible accessibilityLabel={`Badge description: ${description}`}>
+    <View
+      accessible
+      accessibilityLabel={`Badge description: ${description}`}
+      testID="badge-tile-description"
+    >
       <Text
         variant="body"
         numberOfLines={2}

lib/components/organisms/BadgeTile/badge-tile-media.tsx

@@ -23,7 +23,7 @@ export const BadgeTileMedia = ({
   if (!displayUrl) return null;
 
   return (
-    <View style={styles.header}>
+    <View style={styles.header} testID="badge-tile-media">
       <ProgressiveImage
         {...props}
         source={{ uri: displayUrl }}

lib/components/organisms/BadgeTile/badge-tile-status.tsx

@@ -24,10 +24,12 @@ export const BadgeTileStatus = (): JSX.Element | null => {
       style={styles.indicatorContainer}
       accessible
       accessibilityLabel={statusLabel}
+      testID="badge-tile-status"
     >
       {isLocked ? (
         <Icon
           name="LockKeyhole"
+          testID="badge-tile-status-locked"
           color="#FFF"
           size={20}
           accessibilityElementsHidden={true}

lib/components/organisms/BadgeTile/badge-tile-title.tsx

@@ -15,7 +15,11 @@ export const BadgeTileTitle = (): JSX.Element | null => {
   if (!displayText) return null;
 
   return (
-    <View accessible accessibilityLabel={`Badge title: ${displayText}`}>
+    <View
+      accessible
+      accessibilityLabel={`Badge title: ${displayText}`}
+      testID="badge-tile-title"
+    >
       <Text
         variant="title"
         style={styles.titleText}

lib/components/organisms/BadgeTile/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tile } from '../../../types/tile';
+import { Tile, TileHeight } from '../../../types/tile';
 import { BaseTile, Layout, Spacer } from '../../atoms';
 import { withTileFetching } from '../../hoc/withTileFetching';
 import { BadgeTileDateEarned } from './badge-tile-date-earned';
@@ -9,7 +9,7 @@ import { BadgeTileStatus } from './badge-tile-status';
 import { BadgeTileTitle } from './badge-tile-title';
 
 type BadgeTileProps = {
-  tile: Tile;
+  tile?: Tile;
 };
 
 /**
@@ -18,7 +18,7 @@ type BadgeTileProps = {
  * This component renders a badge tile with optional media, status, title, description, and date earned.
  */
 const BadgeTileRoot = ({ tile }: BadgeTileProps): JSX.Element | null => {
-  if (!tile) return null;
+  if (!tile || tile.tileHeight !== TileHeight.Full) return null;
 
   return (
     <BaseTile tile={tile}>