test: creating the News screen

__mocks__/MockedNavigator.tsx

@@ -0,0 +1,37 @@
+import React, { ComponentType } from 'react';
+import { View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { ThemeProvider } from 'styled-components/native';
+
+import { dark as theme } from '@styles/themes/dark';
+
+const Stack = createStackNavigator();
+
+type MockedNavigatorProps = {
+  component: ComponentType<any>;
+  extraScreens?: string[];
+  params?: any;
+};
+
+export const MockedNavigator = (props: MockedNavigatorProps) => (
+  <ThemeProvider theme={theme}>
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          initialParams={props.params || {}}
+          component={props.component}
+          name="MockedScreen"
+        />
+        {props.extraScreens?.map(extraScreen => (
+          <Stack.Screen
+            initialParams={props.params || {}}
+            name={extraScreen}
+            key={extraScreen}
+            component={View}
+          />
+        ))}
+      </Stack.Navigator>
+    </NavigationContainer>
+  </ThemeProvider>
+);

__mocks__/index.ts

@@ -1,2 +1,4 @@
 export { RenderHookWrapper, testQuery } from './apollo';
 export * from './utils';
+export { MockedNavigator } from './MockedNavigator';
+export * from './news';

__mocks__/news.ts

@@ -0,0 +1,158 @@
+import { OperationVariables } from '@apollo/client';
+import { GraphQLError } from 'graphql';
+
+import { QueryNews_news_items, NewsLanguage } from '@schema-types';
+import metrics from '@styles/metrics';
+
+import { GET_NEWS } from '../src/components/screens/news/components/use-news';
+import { LIST_ITEM_HEIGHT } from '../src/components/screens/news/components/News.styles';
+
+type Errors = 'network' | 'graphql';
+
+type BaseMockNewsQueryResponseParams = {
+  variables: OperationVariables;
+  items: QueryNews_news_items[];
+  hasMore: boolean;
+};
+
+export const NEWS_ITEMS_PER_PAGE = Math.floor(
+  metrics.height / LIST_ITEM_HEIGHT,
+);
+
+const ENTRY_QUERY_DEFAULT_VARIABLES = {
+  language: NewsLanguage.EN,
+  page: 1,
+};
+
+const makeResponseDataset = (language = NewsLanguage.EN, page = 1) =>
+  Array(NEWS_ITEMS_PER_PAGE)
+    .fill({})
+    .map((_, index) => ({
+      publishedAt: `page${page}-language-${language}-publishedAt-${index}`,
+      source: `page${page}-language-${language}-source-${index}`,
+      title: `page${page}-language-${language}-title-${index}`,
+      image: `page${page}-language-${language}-image-${index}`,
+      url: `page${page}-language-${language}-url-${index}`,
+      id: `page${page}-language-${language}-id-${index}`,
+      __typename: 'NewsArticle',
+    })) as QueryNews_news_items[];
+
+const baseMockNewsQueryResponse = (params: BaseMockNewsQueryResponseParams) => {
+  const request = {
+    request: {
+      query: GET_NEWS,
+      variables: params.variables,
+    },
+  };
+  const result = {
+    result: {
+      data: {
+        news: {
+          hasMore: params.hasMore,
+          items: params.items,
+        },
+      },
+    },
+  };
+  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 mockNewsEntryQuerySuccessResponse = (
+  language = NewsLanguage.EN,
+  hasMore = true,
+  withEmptyResponse = false,
+) => {
+  const entryQueryResult = baseMockNewsQueryResponse({
+    variables: ENTRY_QUERY_DEFAULT_VARIABLES,
+    items: withEmptyResponse ? [] : makeResponseDataset(language),
+    hasMore,
+  });
+  return [
+    {
+      ...entryQueryResult.request,
+      ...entryQueryResult.result,
+    },
+  ];
+};
+
+export const mockNewsEntryQueryErrorResponse = (error: Errors) => {
+  const entryQueryResult = baseMockNewsQueryResponse({
+    variables: ENTRY_QUERY_DEFAULT_VARIABLES,
+    hasMore: false,
+    items: [],
+  });
+  const errorResponse =
+    error === 'network'
+      ? entryQueryResult.responseWithNetworkError
+      : entryQueryResult.responseWithGraphQLError;
+  return [
+    {
+      ...entryQueryResult.request,
+      ...errorResponse,
+    },
+  ];
+};
+
+export const mockNewsPaginationQuerySuccessResponse = (hasMore = true) => {
+  const entryQueryResult = baseMockNewsQueryResponse({
+    variables: { language: NewsLanguage.EN, page: 1 },
+    items: makeResponseDataset(),
+    hasMore: true,
+  });
+  const paginationQueryResult = baseMockNewsQueryResponse({
+    variables: { language: NewsLanguage.EN, page: 2 },
+    items: makeResponseDataset(undefined, 2),
+    hasMore,
+  });
+  return [
+    {
+      ...entryQueryResult.request,
+      ...entryQueryResult.result,
+    },
+    {
+      ...paginationQueryResult.request,
+      ...paginationQueryResult.result,
+    },
+  ];
+};
+
+export const mockNewsPaginationQueryErrorResponse = (error: Errors) => {
+  const entryQueryResult = baseMockNewsQueryResponse({
+    variables: { language: NewsLanguage.EN, page: 1 },
+    items: makeResponseDataset(),
+    hasMore: true,
+  });
+  const paginationQueryResult = baseMockNewsQueryResponse({
+    variables: { language: NewsLanguage.EN, page: 2 },
+    items: makeResponseDataset(undefined, 2),
+    hasMore: false,
+  });
+  const errorResponse =
+    error === 'network'
+      ? paginationQueryResult.responseWithNetworkError
+      : paginationQueryResult.responseWithGraphQLError;
+  return [
+    {
+      ...entryQueryResult.request,
+      ...entryQueryResult.result,
+    },
+    {
+      ...errorResponse.request,
+      ...errorResponse,
+    },
+  ];
+};

__mocks__/utils.ts

@@ -1,4 +1,4 @@
-export const flatListScrollEventData = {
+export const scrollFlatListToEnd = {
   nativeEvent: {
     contentOffset: {
       x: 0,