From 8b089084df6d658dc92abe7f59ca7da7ee660542 Mon Sep 17 00:00:00 2001 From: Stenio Wagner Date: Fri, 10 Nov 2023 16:03:12 -0300 Subject: [PATCH] test: creating the FamousDetails --- __mocks__/famous-details.ts | 96 ++++++++++++ __mocks__/index.ts | 1 + .../famous-details/FamousDetails.spec.tsx | 148 ++++++++++++++++++ .../trending-famous/TrendingFamous.spec.tsx | 10 +- 4 files changed, 251 insertions(+), 4 deletions(-) create mode 100644 __mocks__/famous-details.ts create mode 100644 src/components/stacks/common-screens/famous-details/FamousDetails.spec.tsx diff --git a/__mocks__/famous-details.ts b/__mocks__/famous-details.ts new file mode 100644 index 00000000..e67364d5 --- /dev/null +++ b/__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, + }, + ]; +}; diff --git a/__mocks__/index.ts b/__mocks__/index.ts index 58735378..24fe62f5 100644 --- a/__mocks__/index.ts +++ b/__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'; diff --git a/src/components/stacks/common-screens/famous-details/FamousDetails.spec.tsx b/src/components/stacks/common-screens/famous-details/FamousDetails.spec.tsx new file mode 100644 index 00000000..57107481 --- /dev/null +++ b/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>[], +) => { + const Component = (props: FamousDetailsNavigationProps) => ( + + + + + + ); + return ; +}; + +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, + ); + }); + }); + }); +}); diff --git a/src/components/stacks/famous/screens/trending-famous/TrendingFamous.spec.tsx b/src/components/stacks/famous/screens/trending-famous/TrendingFamous.spec.tsx index 98ee2b6d..a4c6569e 100644 --- a/src/components/stacks/famous/screens/trending-famous/TrendingFamous.spec.tsx +++ b/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, + }); }); }); });