Production release 🚀

src/apps/pillarx-app/components/AnimatedTile/AnimatedTitle.tsx

@@ -32,7 +32,6 @@ const AnimatedTile = ({
   const tileDisplay = meta?.display;
 
   const [ref, inView] = useInView({
-    threshold: 0.1,
     rootMargin: '100px 0px 0px 0px',
   });
 
@@ -53,7 +52,7 @@ const AnimatedTile = ({
 
   const animationProps = useSpring({
     transform:
-      inView && !isDataLoading ? 'translateY(0px)' : 'translateY(100px)',
+      inView && !isDataLoading ? 'translateY(0px)' : 'translateY(75px)',
     config: { tension: 170, friction: 26 },
     onRest: () => {
       if (inView) {

src/apps/pillarx-app/components/EditorialTile/EditorialTile.tsx

@@ -70,7 +70,12 @@ const EditorialTile = ({ data, isDataLoading }: EditorialTileProps) => {
     }
   };
 
-  if (!data || isDataLoading) {
+  if (
+    !data ||
+    !editorialDisplay ||
+    Object.keys(editorialDisplay).length < 2 ||
+    isDataLoading
+  ) {
     return null;
   }
 

src/apps/pillarx-app/components/EditorialTile/test/EditorialTile.test.tsx

@@ -221,4 +221,62 @@ describe('<EditorialTile />', () => {
     expect(video).not.toBeInTheDocument();
     expect(audio).not.toBeInTheDocument();
   });
+
+  it('renders nothing when data is undefined', () => {
+    render(
+      <Provider store={store}>
+        <EditorialTile data={undefined} isDataLoading={false} />
+      </Provider>
+    );
+
+    expect(screen.queryByTestId('editorial-tile')).not.toBeInTheDocument();
+  });
+
+  it('renders nothing when editorialDisplay is undefined', () => {
+    const mockDataWithoutDisplay = {
+      ...mockDataEditorial,
+      meta: {
+        ...mockDataEditorial.meta,
+        display: undefined,
+      },
+    };
+
+    render(
+      <Provider store={store}>
+        <EditorialTile data={mockDataWithoutDisplay} isDataLoading={false} />
+      </Provider>
+    );
+
+    expect(screen.queryByTestId('editorial-tile')).not.toBeInTheDocument();
+  });
+
+  it('renders nothing when editorialDisplay has less than 2 keys', () => {
+    const mockDataWithEmptyDisplay = {
+      ...mockDataEditorial,
+      meta: {
+        ...mockDataEditorial.meta,
+        display: {
+          title: 'Editorial title',
+        },
+      },
+    };
+
+    render(
+      <Provider store={store}>
+        <EditorialTile data={mockDataWithEmptyDisplay} isDataLoading={false} />
+      </Provider>
+    );
+
+    expect(screen.queryByTestId('editorial-tile')).not.toBeInTheDocument();
+  });
+
+  it('renders nothing when isDataLoading is true', () => {
+    render(
+      <Provider store={store}>
+        <EditorialTile data={mockDataEditorial} isDataLoading />
+      </Provider>
+    );
+
+    expect(screen.queryByTestId('editorial-tile')).not.toBeInTheDocument();
+  });
 });

src/apps/pillarx-app/components/GenericBannerTile/GenericBannerTile.tsx

@@ -17,7 +17,14 @@ const GenericBannerTile = ({ data, isDataLoading }: GenericBannerTileProps) => {
     window.open(bannerDisplay?.cta?.href, '_blank');
   };
 
-  if (!data || isDataLoading) {
+  if (
+    !data ||
+    !meta ||
+    Object.keys(meta).length === 0 ||
+    !bannerDisplay ||
+    Object.keys(bannerDisplay).length === 0 ||
+    isDataLoading
+  ) {
     return null;
   }
 

src/apps/pillarx-app/components/GenericBannerTile/test/GenericBannerTile.test.tsx

@@ -111,4 +111,52 @@ describe('<GenericBannerTile />', () => {
 
     expect(screen.queryByRole('button')).toBeNull();
   });
+
+  it('returns null if data is undefined', () => {
+    render(<GenericBannerTile data={undefined} isDataLoading={false} />);
+    expect(screen.queryByTestId('generic-banner-tile')).not.toBeInTheDocument();
+  });
+
+  it('returns null if meta is an empty object', () => {
+    const mockDataWithEmptyMeta = {
+      ...mockDataGenericBanner,
+      meta: {},
+    };
+    render(
+      <GenericBannerTile data={mockDataWithEmptyMeta} isDataLoading={false} />
+    );
+    expect(screen.queryByTestId('generic-banner-tile')).not.toBeInTheDocument();
+  });
+
+  it('returns null if bannerDisplay is undefined', () => {
+    const mockDataWithNoBannerDisplay = {
+      ...mockDataGenericBanner,
+      meta: {
+        display: undefined,
+      },
+    };
+    render(
+      <GenericBannerTile
+        data={mockDataWithNoBannerDisplay}
+        isDataLoading={false}
+      />
+    );
+    expect(screen.queryByTestId('generic-banner-tile')).not.toBeInTheDocument();
+  });
+
+  it('returns null if bannerDisplay is an empty object', () => {
+    const mockDataWithEmptyBannerDisplay = {
+      ...mockDataGenericBanner,
+      meta: {
+        display: {},
+      },
+    };
+    render(
+      <GenericBannerTile
+        data={mockDataWithEmptyBannerDisplay}
+        isDataLoading={false}
+      />
+    );
+    expect(screen.queryByTestId('generic-banner-tile')).not.toBeInTheDocument();
+  });
 });

src/apps/pillarx-app/components/HighlightedMediaGridTile/HighlightedMediaGridTile.tsx

@@ -56,7 +56,8 @@ const HighlightedMediaGridTile = ({
     return null;
   }
 
-  if (!dataMediaGrid?.grids) return null;
+  if (!dataMediaGrid?.grids?.length || Object.keys(dataMediaGrid).length === 0)
+    return null;
 
   return (
     <div ref={divRef}>

src/apps/pillarx-app/components/HighlightedMediaGridTile/test/HighlightedMediaGridTile.test.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { render, screen } from '@testing-library/react';
 import renderer from 'react-test-renderer';
-import { ApiLayout, Projection } from '../../../../../types/api';
+import { ApiLayout, MediaGridData, Projection } from '../../../../../types/api';
 import HighlightedMediaGridTile from '../HighlightedMediaGridTile';
 
 // Mock useRefDimensions
@@ -63,4 +63,19 @@ describe('<HighlightedMediaGridTile />', () => {
     expect(screen.queryByText('Title')).not.toBeInTheDocument();
     expect(screen.queryAllByTestId('media-grid-collection')).toHaveLength(0);
   });
+
+  it('does not render when dataMediaGrid is an empty object', () => {
+    const mockDataEmpty: Projection = {
+      ...mockData,
+      data: {} as MediaGridData,
+    };
+
+    render(
+      <HighlightedMediaGridTile data={mockDataEmpty} isDataLoading={false} />
+    );
+
+    expect(
+      screen.queryByTestId('pillarx-feed-highlighted-media-grid-tile')
+    ).not.toBeInTheDocument();
+  });
 });