test: creating the FamousDetails

__mocks__/famous-details.ts

@@ -0,0 +1,96 @@
+import { FAMOUS_DETAILS_QUERY } from '@/components/stacks/common-screens/famous-details/use-famous-details';
+import { ISO6391Language } from '@/types/schema';
+import { randomPositiveNumber } from './utils';
+import { GraphQLError } from 'graphql';
+
+const famous = {
+  knownForDepartment: 'KNOWN_FOR_DEPARTMENT',
+  placeOfBirth: 'PLACE_OF_BIRTH',
+  biography: 'BIOGRAPHY',
+  birthday: '1994-02-21',
+  deathday: '???',
+  images: Array(randomPositiveNumber(10, 1))
+    .fill('')
+    .map((_, index) => `IMAGE_${index}`),
+  cast: {
+    movies: Array(randomPositiveNumber(10, 1))
+      .fill({})
+      .map((_, index) => ({
+        voteAverage: randomPositiveNumber(10, 1),
+        posterPath: `POSTER_PATH_${index}`,
+        voteCount: randomPositiveNumber(10, 1),
+        title: `CAST_MOVIE_${index}`,
+        id: index,
+      })),
+    tvShows: Array(randomPositiveNumber(10, 1))
+      .fill({})
+      .map((_, index) => ({
+        voteAverage: randomPositiveNumber(10, 1),
+        posterPath: `POSTER_PATH_${index}`,
+        voteCount: randomPositiveNumber(10, 1),
+        title: `CAST_TV_SHOW_${index}`,
+        id: index,
+      })),
+  },
+};
+
+const baseMockFamousDetailsQueryResponse = (id: number) => {
+  const request = {
+    request: {
+      query: FAMOUS_DETAILS_QUERY,
+      variables: {
+        language: ISO6391Language.en,
+        id,
+      },
+    },
+  };
+  const result = {
+    result: {
+      data: {
+        famous,
+      },
+    },
+  };
+
+  const responseWithNetworkError = {
+    ...request,
+    error: new Error('A Network error occurred'),
+  };
+
+  const responseWithGraphQLError = {
+    ...request,
+    errors: [new GraphQLError('A GraphQL error occurred')],
+  };
+
+  return {
+    responseWithGraphQLError,
+    responseWithNetworkError,
+    request,
+    result,
+  };
+};
+
+export const mockQueryFamousDetailsSuccess = (id: number) => {
+  const query = baseMockFamousDetailsQueryResponse(id);
+  return [
+    {
+      ...query.request,
+      ...query.result,
+    },
+  ];
+};
+
+export const mockQueryFamousDetailsError = (id: number) => {
+  const query = baseMockFamousDetailsQueryResponse(id);
+  const error = randomPositiveNumber(1) % 2 === 0 ? 'network' : 'graphql';
+  const errorResponse =
+    error === 'network'
+      ? query.responseWithNetworkError
+      : query.responseWithGraphQLError;
+  return [
+    {
+      ...query.request,
+      ...errorResponse,
+    },
+  ];
+};

__mocks__/index.ts

@@ -5,3 +5,4 @@ export * from './news';
 export * from './quiz-questions';
 export * from './trending-famous';
 export * from './search';
+export * from './famous-details';

src/components/stacks/common-screens/famous-details/FamousDetails.spec.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { MockedProvider, MockedResponse } from '@apollo/client/testing';
+
+import { TMDBImageQualitiesProvider } from '@/providers';
+import { RenderAPI, render, waitFor } from '@testing-library/react-native';
+import { Routes } from '@/navigation';
+
+import { FamousDetailsNavigationProps } from './routes/route-params-types';
+import { FamousDetails } from './FamousDetails';
+import {
+  mockQueryFamousDetailsSuccess,
+  mockQueryFamousDetailsError,
+  MockedNavigator,
+} from '../../../../../__mocks__';
+import { Translations } from '@/i18n/tags';
+
+const FAMOUS_ID = 123;
+
+const renderFamousDetails = (
+  mocks: readonly MockedResponse<Record<string, any>>[],
+) => {
+  const Component = (props: FamousDetailsNavigationProps) => (
+    <MockedProvider
+      mocks={mocks}
+      defaultOptions={{
+        watchQuery: { fetchPolicy: 'no-cache' },
+        query: { fetchPolicy: 'no-cache' },
+      }}>
+      <TMDBImageQualitiesProvider>
+        <FamousDetails
+          route={{
+            name: Routes.Famous.DETAILS,
+            key: `${Routes.Famous.DETAILS}-key`,
+            params: {
+              profileImage: 'PROFILE_IMAGE',
+              name: 'NAME',
+              id: FAMOUS_ID,
+            },
+          }}
+          navigation={props.navigation}
+        />
+      </TMDBImageQualitiesProvider>
+    </MockedProvider>
+  );
+  return <MockedNavigator component={Component} />;
+};
+
+describe('Common-screens/FamousDetails', () => {
+  const elements = {
+    loading: (api: RenderAPI) =>
+      api.queryByTestId('loading-header-placeholder'),
+    sectionsTitles: (api: RenderAPI) => api.queryAllByTestId('section-title'),
+    header: (api: RenderAPI) => api.queryByTestId('header-info'),
+    biography: (api: RenderAPI) => api.queryByTestId('biography'),
+    imagesList: (api: RenderAPI) => api.queryByTestId('images-list'),
+    castMovies: (api: RenderAPI) =>
+      api.queryByTestId('media-horizontal-list-MOVIE'),
+    castTVShows: (api: RenderAPI) =>
+      api.queryByTestId('media-horizontal-list-TV_SHOW'),
+    advice: (component: RenderAPI) => component.queryByTestId('advice-wrapper'),
+    adviceIcon: (component: RenderAPI) =>
+      component.queryByTestId('icon-alert-box'),
+    adviceTitle: (component: RenderAPI) =>
+      component.queryByTestId('advice-title'),
+    adviceDescription: (component: RenderAPI) =>
+      component.queryByTestId('advice-description'),
+    adviceSuggestion: (component: RenderAPI) =>
+      component.queryByTestId('advice-suggestion'),
+  };
+
+  describe('Rendering', () => {
+    it('should show the "loading-state" by default', async () => {
+      const mock = mockQueryFamousDetailsSuccess(FAMOUS_ID);
+      const component = render(renderFamousDetails(mock));
+      expect(elements.loading(component)).not.toBeNull();
+      await waitFor(() => {
+        expect(elements.loading(component)).toBeNull();
+      });
+    });
+
+    it('should render the "sections" correctly', async () => {
+      const mock = mockQueryFamousDetailsSuccess(FAMOUS_ID);
+      const component = render(renderFamousDetails(mock));
+      await waitFor(() => {
+        expect(elements.loading(component)).toBeNull();
+      });
+      expect(elements.sectionsTitles(component).length).toEqual(3);
+      expect(elements.sectionsTitles(component)[0]!.children[0]).toEqual(
+        Translations.FamousDetails.BIOGRAPHY,
+      );
+      expect(elements.sectionsTitles(component)[1]!.children[0]).toEqual(
+        Translations.FamousDetails.CAST_MOVIES,
+      );
+      expect(elements.sectionsTitles(component)[2]!.children[0]).toEqual(
+        Translations.FamousDetails.CAST_TV_SHOWS,
+      );
+    });
+
+    describe('When query successfuly', () => {
+      it('should render correctly', async () => {
+        const mock = mockQueryFamousDetailsSuccess(FAMOUS_ID);
+        const component = render(renderFamousDetails(mock));
+        await waitFor(() => {
+          expect(elements.loading(component)).toBeNull();
+        });
+        expect(elements.header(component)).not.toBeNull();
+        expect(elements.biography(component)).not.toBeNull();
+        expect(elements.imagesList(component)).not.toBeNull();
+        expect(elements.castMovies(component)).not.toBeNull();
+        expect(elements.castTVShows(component)).not.toBeNull();
+      });
+    });
+
+    describe('When query with error', () => {
+      it('should render the "Advice"', async () => {
+        const mock = mockQueryFamousDetailsError(FAMOUS_ID);
+        const component = render(renderFamousDetails(mock));
+        await waitFor(() => {
+          expect(elements.loading(component)).toBeNull();
+        });
+        expect(elements.advice(component)).not.toBeNull();
+        expect(elements.adviceIcon(component)).not.toBeNull();
+        expect(elements.header(component)).toBeNull();
+        expect(elements.biography(component)).toBeNull();
+        expect(elements.imagesList(component)).toBeNull();
+        expect(elements.castMovies(component)).toBeNull();
+        expect(elements.castTVShows(component)).toBeNull();
+      });
+
+      it('should render the "Advice" content correctly', async () => {
+        const mock = mockQueryFamousDetailsError(FAMOUS_ID);
+        const component = render(renderFamousDetails(mock));
+        await waitFor(() => {
+          expect(elements.loading(component)).toBeNull();
+        });
+        expect(elements.adviceDescription(component)!.children[0]).toEqual(
+          Translations.FamousDetails.ERROR_ADVICE_DESCRIPTION,
+        );
+        expect(elements.adviceSuggestion(component)!.children[0]).toEqual(
+          Translations.FamousDetails.ERROR_ADVICE_SUGGESTION,
+        );
+        expect(elements.adviceTitle(component)!.children[0]).toEqual(
+          Translations.FamousDetails.ERROR_ADVICE_TITLE,
+        );
+      });
+    });
+  });
+});

src/components/stacks/famous/screens/trending-famous/TrendingFamous.spec.tsx

@@ -593,11 +593,13 @@ describe('Stacks/News/Screens/TrendingFamous', () => {
       fireEvent.press(
         elements.trendingFamousListItems(component)[indexItemSelected],
       );
+      const itemSelected = trendingFamousList()[indexItemSelected];
       expect(navigate).toBeCalledTimes(1);
-      expect(navigate).toBeCalledWith(
-        Routes.Famous.DETAILS,
-        trendingFamousList()[indexItemSelected],
-      );
+      expect(navigate).toBeCalledWith(Routes.Famous.DETAILS, {
+        id: itemSelected.id,
+        profileImage: itemSelected.profilePath,
+        name: itemSelected.name,
+      });
     });
   });
 });