From 82252646ef129bc3a4e20643bdb0fd8e6276af5d Mon Sep 17 00:00:00 2001 From: Graeme Houston Date: Mon, 27 Jan 2025 10:14:01 +0000 Subject: [PATCH] test: (BadgeTile) add test for badge tile --- .../organisms/BadgeTile/BadgeTile.spec.tsx | 178 ++++++++++++++++++ .../__snapshots__/BadgeTile.spec.tsx.snap | 67 +++++++ .../BadgeTile/badge-tile-date-earned.tsx | 1 + .../BadgeTile/badge-tile-description.tsx | 6 +- .../organisms/BadgeTile/badge-tile-media.tsx | 2 +- .../organisms/BadgeTile/badge-tile-status.tsx | 2 + .../organisms/BadgeTile/badge-tile-title.tsx | 6 +- lib/components/organisms/BadgeTile/index.tsx | 6 +- 8 files changed, 262 insertions(+), 6 deletions(-) create mode 100644 lib/components/organisms/BadgeTile/BadgeTile.spec.tsx create mode 100644 lib/components/organisms/BadgeTile/__snapshots__/BadgeTile.spec.tsx.snap diff --git a/lib/components/organisms/BadgeTile/BadgeTile.spec.tsx b/lib/components/organisms/BadgeTile/BadgeTile.spec.tsx new file mode 100644 index 0000000..286cfc4 --- /dev/null +++ b/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('', () => { + it('matches snapshot', () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + describe('Rendering States', () => { + it('returns null when tile prop is not provided', () => { + const { container } = render(); + expect(container).toBeEmptyDOMElement(); + }); + + it('returns null when tile height is not full', () => { + const halfHeightTile = { + ...BadgeTileMock, + tileHeight: TileHeight.Half, + }; + const { container } = render(); + expect(container).toBeEmptyDOMElement(); + }); + + it('renders correctly for Latest badge type with no badges earned', () => { + render(); + 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(); + 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(); + 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(); + 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(); + 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(); + expect( + screen.getByText(specificBadge.configuration.name) + ).toBeInTheDocument(); + expect(screen.getByText('3x')).toBeInTheDocument(); + }); + }); + + describe('Badge Media', () => { + it('renders badge artwork when provided', () => { + render(); + 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(); + const media = screen.getByTestId('badge-tile-media'); + expect(media).toBeInTheDocument(); + + const progressiveImage = media.querySelector('[src]'); + expect(progressiveImage).toHaveAttribute( + 'src', + emptyBadge.configuration.emptyBadgeArtworkUrl + ); + }); + }); +}); diff --git a/lib/components/organisms/BadgeTile/__snapshots__/BadgeTile.spec.tsx.snap b/lib/components/organisms/BadgeTile/__snapshots__/BadgeTile.spec.tsx.snap new file mode 100644 index 0000000..6eed52a --- /dev/null +++ b/lib/components/organisms/BadgeTile/__snapshots__/BadgeTile.spec.tsx.snap @@ -0,0 +1,67 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` matches snapshot 1`] = ` +
+ +
+`; diff --git a/lib/components/organisms/BadgeTile/badge-tile-date-earned.tsx b/lib/components/organisms/BadgeTile/badge-tile-date-earned.tsx index 330fa09..3875a64 100644 --- a/lib/components/organisms/BadgeTile/badge-tile-date-earned.tsx +++ b/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" > { if (count === 0 || !description) return null; return ( - + + { style={styles.indicatorContainer} accessible accessibilityLabel={statusLabel} + testID="badge-tile-status" > {isLocked ? ( { if (!displayText) return null; return ( - + { - if (!tile) return null; + if (!tile || tile.tileHeight !== TileHeight.Full) return null; return (