test: update testing for more tiles

lib/components/atoms/BaseTile/base-tile-body.tsx

@@ -40,6 +40,7 @@ export const BaseTileBody = (props: BaseTileBodyProps): JSX.Element | null => {
       {...props}
       accessibilityLabel={body}
       numberOfLines={getNumberOfLines()}
+      testID="tile-body"
     >
       {body}
     </Text>

lib/components/atoms/BaseTile/base-tile-content.tsx

@@ -19,6 +19,7 @@ export const BaseTileContent = ({
 
   return (
     <View
+      testID="tile-content"
       style={[
         baseStyles.content,
         {

lib/components/atoms/BaseTile/base-tile-header.tsx

@@ -30,6 +30,7 @@ export const BaseTileHeader = ({
         },
       ]}
       numberOfLines={1}
+      testID="tile-header"
     >
       {children}
     </View>

lib/components/atoms/BaseTile/base-tile-media.tsx

@@ -17,6 +17,7 @@ export const BaseTileMedia = (
   return (
     <ProgressiveImage
       {...props}
+      testID="tile-media"
       source={{ uri: artworkUrl }}
       style={[props.style, baseStyles.media, styles.media]}
     />

lib/components/atoms/BaseTile/base-tile-title.tsx

@@ -18,7 +18,12 @@ export const BaseTileTitle = (): JSX.Element | null => {
 
   return (
     <>
-      <Text variant="title" accessibilityLabel={title} numberOfLines={1}>
+      <Text
+        variant="title"
+        accessibilityLabel={title}
+        numberOfLines={1}
+        testID="tile-title"
+      >
         {title}
       </Text>
       {ctaLink && (

lib/components/atoms/Skeleton/index.tsx

@@ -47,14 +47,8 @@ const Skeleton = ({
     outputRange: [0.3, 0.7],
   });
 
-  const sharedSkeletonStyle = {
-    opacity,
-    backgroundColor: theme.alphaDerivedText[20],
-    borderRadius: theme.sizes.borderRadiusLg,
-  };
-
   return (
-    <View>
+    <View testID="loading-skeleton">
       <Animated.View
         style={[
           styles.skeleton,

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

@@ -40,8 +40,12 @@ describe('<BadgeTile />', () => {
   });
 
   describe('Rendering States', () => {
-    it('returns null when tile prop is not provided', () => {
-      const { container } = render(<BadgeTile />);
+    it('returns null when tile is not active', () => {
+      const inactiveTile = {
+        ...BadgeTileMock,
+        active: false,
+      };
+      const { container } = render(<BadgeTile tile={inactiveTile} />);
       expect(container).toBeEmptyDOMElement();
     });
 

lib/components/organisms/BadgeTile/index.tsx

@@ -9,7 +9,7 @@ import { BadgeTileStatus } from './badge-tile-status';
 import { BadgeTileTitle } from './badge-tile-title';
 
 type BadgeTileProps = {
-  tile?: Tile;
+  tile: Tile;
 };
 
 /**

lib/components/organisms/BannerTile/BannerTile.spec.tsx

@@ -45,9 +45,13 @@ describe('<BannerTile  />', () => {
 });
 
 describe('<BannerTile /> Rendering States', () => {
-  it('returns null when tile prop is not provided', () => {
-    const { container } = render(<BannerTile tile={undefined} />);
-    expect(container.firstChild).toBeNull();
+  it('returns null when tile is not active', () => {
+    const inactiveTile = {
+      ...BannerTileMock,
+      active: false,
+    };
+    const { container } = render(<BannerTile tile={inactiveTile} />);
+    expect(container).toBeEmptyDOMElement();
   });
 });
 

lib/components/organisms/BannerTile/index.tsx

@@ -9,7 +9,7 @@ import { BannerTileMedia } from './banner-tile-media';
 import { BannerTileTitle } from './banner-tile-title';
 
 type BannerTileProps = {
-  tile?: Tile;
+  tile: Tile;
 };
 
 /**

lib/components/organisms/ContentTile/ContentTile.spec.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Tile, TileHeight, TileType } from '../../../types/tile';
+import { render } from '../../__test__/test-utils';
+import { ContentTile } from './index';
+
+const ContentTileMock: Tile = {
+  id: '1',
+  type: TileType.Content,
+  active: true,
+  createdAt: '',
+  updatedAt: '',
+  tileHeight: TileHeight.Full,
+  priority: 1,
+  configuration: {
+    title: 'Gold Tier Unlocked!',
+    body: "You've unlocked exclusive Gold member benefits including 2X points on every purchase, priority support, and VIP event access.",
+    artworkUrl:
+      'https://images.pexels.com/photos/352097/pexels-photo-352097.jpeg',
+  },
+};
+
+describe('<RewardTile />', () => {
+  it('renders and matches snapshot', () => {
+    const { container } = render(<ContentTile tile={ContentTileMock} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('handles inactive tile gracefully', () => {
+    const { container } = render(
+      <ContentTile tile={{ ...ContentTileMock, active: false }} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+});
+
+describe('<RewardTile /> Rendering States', () => {
+  it('if full-size tile has no artwork, content should be rendered', () => {
+    const fullSizeTileWithNoArtwork = {
+      ...ContentTileMock,
+      tileHeight: TileHeight.Full,
+      configuration: {
+        ...ContentTileMock.configuration,
+        artworkUrl: null,
+      },
+    };
+    const { queryByTestId } = render(
+      <ContentTile tile={fullSizeTileWithNoArtwork} />
+    );
+    expect(queryByTestId('tile-content')).toBeTruthy();
+  });
+
+  it('if half-size tile has artwork, content should be null', () => {
+    const halfSizeTileWithArtwork = {
+      ...ContentTileMock,
+      tileHeight: TileHeight.Half,
+      configuration: {
+        ...ContentTileMock.configuration,
+        artworkUrl:
+          'https://images.pexels.com/photos/352097/pexels-photo-352097.jpeg',
+      },
+    };
+    const { queryByTestId } = render(
+      <ContentTile tile={halfSizeTileWithArtwork} />
+    );
+    expect(queryByTestId('tile-content')).toBeNull();
+  });
+
+  it('handles inactive tile gracefully', () => {
+    const { container } = render(
+      <ContentTile tile={{ ...ContentTileMock, active: false }} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+});

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

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RewardTile /> renders and matches snapshot 1`] = `
+<div>
+  <button
+    aria-disabled="true"
+    aria-label="Gold Tier Unlocked!"
+    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"
+  >
+    <button
+      aria-disabled="true"
+      aria-label="Gold Tier Unlocked!"
+      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-height-1pi2tsx r-justifyContent-1777fci r-position-bnwqim r-flexBasis-1t2qqvi r-objectFit-1t7uo4s 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"
+          data-testid="tile-media"
+          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-4gszlv"
+            style="background-image: url(https://images.pexels.com/photos/352097/pexels-photo-352097.jpeg);"
+          />
+          <img
+            alt=""
+            class="css-accessibilityImage-9pa8cd"
+            draggable="false"
+            src="https://images.pexels.com/photos/352097/pexels-photo-352097.jpeg"
+          />
+        </div>
+      </div>
+      <div
+        class="css-view-175oi2r r-display-6koalj"
+        data-testid="tile-content"
+        style="justify-content: center;"
+      >
+        <div
+          class="css-view-175oi2r r-flex-13awgt0 r-justifyContent-1777fci r-paddingInline-3o4zer"
+        >
+          <div
+            class="css-view-175oi2r r-alignItems-1awozwy r-flexDirection-18u37iz r-justifyContent-1wtj0ep r-marginBottom-5oul0u"
+            data-testid="tile-header"
+            style="margin-top: 12px;"
+          >
+            <div
+              aria-label="Gold Tier Unlocked!"
+              class="css-text-146c3p1 r-maxWidth-dnmrzs r-overflow-1udh08x r-textOverflow-1udbk01 r-whiteSpace-3s2u2q r-wordWrap-1iln25a"
+              data-testid="tile-title"
+              dir="auto"
+              style="color: rgb(0, 0, 0); font-size: 24px; font-weight: bold;"
+            >
+              Gold Tier Unlocked!
+            </div>
+          </div>
+          <div
+            aria-label="You've unlocked exclusive Gold member benefits including 2X points on every purchase, priority support, and VIP event access."
+            class="css-text-146c3p1 r-WebkitBoxOrient-8akbws r-display-krxsd3 r-maxWidth-dnmrzs r-overflow-1udh08x r-textOverflow-1udbk01"
+            data-testid="tile-body"
+            dir="auto"
+            style="color: rgb(51, 51, 51); font-size: 14px;"
+          >
+            You've unlocked exclusive Gold member benefits including 2X points on every purchase, priority support, and VIP event access.
+          </div>
+        </div>
+      </div>
+    </button>
+  </button>
+</div>
+`;

lib/components/organisms/Group/index.tsx

@@ -98,7 +98,7 @@ const Group = ({ id }: GroupProps): JSX.Element | null => {
 
   return (
     <GroupContext.Provider value={{ groupData }}>
-      <View>
+      <View data-testid="group-container">
         <GroupSections />
       </View>
     </GroupContext.Provider>