Adding test for click on a repository and load the list of commits

__mocks__/queries.js

@@ -36,24 +36,6 @@ const repositories = {
               stargazers: {
                 totalCount: 0
               }
-            },
-            {
-              id: 'MDEwOlJlcG9zaXRvcnkyMDQxMTY3NDk=',
-              name: 'movies-app',
-              description:
-                '🍿🍿 A mobile app developed using React Native and Redux.',
-              isPrivate: false,
-              forkCount: 0,
-              updatedAt: '2019-08-24T16:37:06Z',
-              url: 'https://github.com/CristianeMayara/movies-app',
-              primaryLanguage: {
-                name: 'JavaScript',
-                color: '#f1e05a'
-              },
-              licenseInfo: null,
-              stargazers: {
-                totalCount: 0
-              }
             }
           ]
         }
@@ -65,7 +47,7 @@ const repositories = {
 const commits = {
   request: {
     query: LIST_COMMITS,
-    variables: { first: 20, repoName: 'marvel-app' }
+    variables: { first: 20, after: null, repoName: 'my-repositories' }
   },
   result: {
     data: {

src/containers/Commit/index.js

@@ -6,7 +6,9 @@ import { Container, Data, Author } from './styles';
 const Commit = ({ data: { node } }) => (
   <Container>
     <Data>
-      <a href={node.url}>{node.messageHeadline}</a>
+      <a data-testid="commit-title" href={node.url}>
+        {node.messageHeadline}
+      </a>
     </Data>
     {node.author && (
       <Author>

src/containers/Repository/index.js

@@ -10,9 +10,14 @@ import Circle from '../../components/Circle';
 import { Container, Data, Details } from './styles';
 
 const Repository = ({ data, history }) => (
-  <Container data-testid="repository-item">
+  <Container>
     <Data>
-      <h3 onClick={() => history.push(`/${data.name}/commits`)}>{data.name}</h3>
+      <h3
+        data-testid="repository-title"
+        onClick={() => history.push(`/${data.name}/commits`)}
+      >
+        {data.name}
+      </h3>
       <p>{data.description}</p>
     </Data>
     <Details>

src/screens/CommitList/CommitList.spec.js

@@ -1,30 +1,51 @@
 import React from 'react';
 import { MockedProvider } from '@apollo/react-testing';
-import { render } from '@testing-library/react';
+import {
+  render,
+  cleanup,
+  fireEvent,
+  waitForElement
+} from '@testing-library/react';
 import wait from 'waait';
-import CommitList from '.';
-import { commits } from '../../../__mocks__/queries';
+import App from '../../App';
+import { repositories, commits } from '../../../__mocks__/queries';
 
 describe('CommitList component', () => {
-  it('should render the component', async () => {
-    const component = createComponent();
+  afterEach(cleanup);
 
-    await wait(0);
+  describe('when click on a repository item', () => {
+    it('should redirect to repository`screen and load data', async () => {
+      const {
+        queryByTestId,
+        queryByText,
+        getByTestId,
+        getByText
+      } = createComponent();
 
-    expect(component).toBeDefined();
+      await waitForElement(() => queryByText('my-repositories'));
+
+      fireEvent.click(getByTestId('repository-title'));
+
+      expect(queryByTestId('repository-screen')).not.toBeInTheDocument();
+      expect(getByTestId('commit-screen')).toBeInTheDocument();
+
+      await wait(() =>
+        expect(queryByTestId('loading-icon')).not.toBeInTheDocument()
+      );
+
+      expect(getByTestId('commit-list-title')).toBeInTheDocument();
+      expect(getByText('Adding page url to the app')).toBeInTheDocument();
+      expect(getByText('Adding gif on readme file')).toBeInTheDocument();
+    });
   });
 });
 
 function createComponent(props = {}) {
-  const defaultProps = {
-    history: {},
-    match: {},
-    ...props
-  };
+  const defaultProps = { ...props };
 
   return render(
-    <MockedProvider mocks={[commits]} addTypename={false}>
-      <CommitList {...defaultProps} />
+    <MockedProvider mocks={[repositories, commits]} addTypename={false}>
+      <App {...defaultProps} />
     </MockedProvider>
   );
 }

src/screens/CommitList/index.js

@@ -27,7 +27,10 @@ const CommitList = ({ match, history }) => {
               if (loading) {
                 return (
                   <EmptyContainer>
-                    <i className="fa fa-spinner fa-pulse" />
+                    <i
+                      data-testid="loading-icon"
+                      className="fa fa-spinner fa-pulse"
+                    />
                   </EmptyContainer>
                 );
               }
@@ -51,7 +54,7 @@ const CommitList = ({ match, history }) => {
                   loadMore={pageNumber =>
                     fetchMore({
                       variables: {
-                        repoName: 'marvel-app',
+                        repoName: repository,
                         first: pageSize,
                         after: pageInfo.endCursor,
                         pageNumber
@@ -88,7 +91,7 @@ const CommitList = ({ match, history }) => {
                   }
                 >
                   <>
-                    <h1>Commits</h1>
+                    <h1 data-testid="commit-list-title">Commits</h1>
                     {commits.map(item => (
                       <Commit key={item.id} data={item} />
                     ))}

src/screens/RepositoryList/RepositoryList.spec.js

@@ -2,35 +2,32 @@ import React from 'react';
 import { MockedProvider } from '@apollo/react-testing';
 import { render, cleanup } from '@testing-library/react';
 import wait from 'waait';
-import RepositoryList from '.';
-import { repositories } from '../../../__mocks__/queries';
+import App from '../../App';
+import { repositories, commits } from '../../../__mocks__/queries';
 
 describe('RepositoryList component', () => {
   afterEach(cleanup);
 
-  it('should load a list of repositories', async () => {
-    const { queryByTestId, getByTestId, getByText } = createComponent();
+  describe('when create the component', () => {
+    it('should load a list of repositories', async () => {
+      const { queryByTestId, getByTestId, getByText } = createComponent();
 
-    await wait(() =>
-      expect(queryByTestId('loading-icon')).not.toBeInTheDocument()
-    );
+      await wait(() =>
+        expect(queryByTestId('loading-icon')).not.toBeInTheDocument()
+      );
 
-    expect(getByTestId('list-title')).toBeInTheDocument();
-    expect(getByTestId('repository-screen')).toBeInTheDocument();
-    expect(getByText('my-repositories')).toBeInTheDocument();
-    expect(getByText('movies-app')).toBeInTheDocument();
+      expect(getByTestId('list-title')).toBeInTheDocument();
+      expect(getByText('my-repositories')).toBeInTheDocument();
+    });
   });
 });
 
 function createComponent(props = {}) {
-  const defaultProps = {
-    history: {},
-    ...props
-  };
+  const defaultProps = { ...props };
 
   return render(
-    <MockedProvider mocks={[repositories]} addTypename={false}>
-      <RepositoryList {...defaultProps} />
+    <MockedProvider mocks={[repositories, commits]} addTypename={false}>
+      <App {...defaultProps} />
     </MockedProvider>
   );
 }