Minor changes

src/modules/feed/FeedPage.spec.tsx

@@ -6,6 +6,7 @@ import {
   mockLocalstorage, withMockedProviders,
 } from '../../spec_helper';
 import { FeedPage } from './index';
+import { render, screen } from '@testing-library/react';
 
 let wrapper: ReactWrapper;
 
@@ -27,10 +28,14 @@ describe('<FeedPage />', () => {
   });
 
   it('should show a right rail', async () => {
-    expect(findByTestId(wrapper, 'right-rail').length).toBe(1);
+    render(
+      withMockedProviders(<FeedPage />)
+    );
+
+    expect(screen.getAllByTestId("right-tail").length).toBe(1);
   });
 
-  it('should show a repo list', async () => {
+  it.only('should show a repo list', async () => {
     expect(findByTestId(wrapper, 'repo-list').length).toBe(1);
   });
 });

src/modules/feed/FeedPage.tsx

@@ -73,7 +73,7 @@ export class FeedPage extends Component<FeedPageProps, FeedPageState> {
                 <KudoBoard />
               </GridColumn>
               <GridColumn className={`${s.grid_column} ${s.left_column}`}>
-                <RightRail data-testid="right-rail" />
+                <RightRail />
               </GridColumn>
             </Grid>
           </Media>

src/modules/feed/components/RightRail.tsx

@@ -7,10 +7,13 @@ import s from "./Rail.module.scss";
 const slackIconPath = `${process.env.PUBLIC_URL}/assets/kabisa_logo_white.png`;
 
 const RightRail = () => (
-  <Segment className={s.rail}>
-    <Statistics />
-    <img className={s.logo} alt="Kabisa logo" src={slackIconPath} />
-  </Segment>
+  <div data-testid="right-tail">
+    <Segment className={s.rail}>
+      <Statistics />
+      <img className={s.logo} alt="Kabisa logo" src={slackIconPath} />
+    </Segment>
+  </div>
+
 );
 
 export default RightRail;

src/modules/feed/components/Transaction/LikeButton.spec.tsx

@@ -1,34 +1,37 @@
 import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
-import { act } from 'react-dom/test-utils';
 import {
-  findByTestId, mockLocalstorage, wait, withMockedProviders,
+  findByTestId, mockLocalstorage, withMockedProviders,
 } from '../../../../spec_helper';
 import LikeButton, { MUTATION_TOGGLE_LIKE } from './LikeButton';
-import { FragmentPostResult, GET_GOAL_PERCENTAGE } from '../../queries';
+import { FragmentPostResult, GET_GOAL_PERCENTAGE, GET_POSTS } from '../../queries';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { InMemoryCache } from '@apollo/client';
 
 const likedPost: FragmentPostResult = {
-  amount: 5,
-  createdAt: '2020-03-01',
   id: '1',
-  message: 'For cleaning his desk',
+  amount: 5,
+  message: 'test message',
+  createdAt: '2020-03-10',
+  images: [],
   receivers: [
     {
-      id: '2',
-      name: 'Egon',
-      avatar: 'fakeurl',
+      id: '1',
+      name: 'Stefan',
+      avatar: 'fakeAvatar',
     },
   ],
   sender: {
     id: '1',
     name: 'Max',
-    avatar: 'fakeurl',
+    avatar: 'fakeAvatar',
   },
   votes: [
     {
       voter: {
-        id: '1',
-        name: 'Max',
+        id: '5',
+        name: 'Egon',
       },
     },
   ],
@@ -48,7 +51,6 @@ const mocks = [
           toggleLikePost: {
             post: {
               ...likedPost,
-              __typename: 'Post',
             },
           },
         },
@@ -85,36 +87,64 @@ const mocks = [
 
 let wrapper: ReactWrapper;
 
-const setup = (liked: boolean, post: FragmentPostResult) => {
-  wrapper = mount(withMockedProviders(<LikeButton liked={liked} post={post} />, mocks));
-};
-
 describe('<LikeButton />', () => {
   beforeEach(() => {
-    mockLocalstorage('1');
-    setup(false, likedPost);
+    mutationCalled = false;
+    mockLocalstorage("1");
   });
 
   it('renders the correct message', () => {
+    wrapper = mount(withMockedProviders(<LikeButton liked={false} post={likedPost} />, mocks));
+
     expect(findByTestId(wrapper, 'message').text()).toBe('+1₭ by Max');
   });
 
   it('renders the correct like icon if the post is not liked', () => {
+    wrapper = mount(withMockedProviders(<LikeButton liked={false} post={likedPost} />, mocks));
+
     expect(findByTestId(wrapper, 'like-icon').hostNodes().hasClass('thumbs up outline')).toBe(true);
   });
 
   it('renders the correct like icon if the post is liked', () => {
-    setup(true, likedPost);
+    wrapper = mount(withMockedProviders(<LikeButton liked={true} post={likedPost} />, mocks));
+
     expect(findByTestId(wrapper, 'like-icon').hostNodes().hasClass('blue thumbs up')).toBe(true);
   });
 
-  it('calls the mutation', async () => {
-    await act(async () => {
-      findByTestId(wrapper, 'like-button').hostNodes().simulate('click');
+  it.only('calls the mutation', async () => {
+    const cache = new InMemoryCache({ addTypename: false });
+
+    cache.writeQuery({
+      query: GET_POSTS,
+      variables: { team_id: 1 },
+      data: {
+        teamById: {
+          posts: {
+            edges: [
+              {
+                cursor: 'x',
+                node: {
+                  ...likedPost,
+                },
+              },
+            ],
+            pageInfo: {
+              endCursor: '2',
+              hasNextPage: false,
+            },
+          },
+        },
+      },
+    })
+
+    render(
+      withMockedProviders(<LikeButton liked={true} post={likedPost} />, mocks, cache)
+    );
 
-      await wait(0);
-      await wrapper.update();
+    const button = screen.getByTestId("like-button");
+    userEvent.click(button);
 
+    await waitFor(() => {
       expect(mutationCalled).toBe(true);
     });
   });

src/modules/feed/components/Transaction/LikeButton.tsx

@@ -14,9 +14,6 @@ import {
 import { Storage } from "../../../../support/storage";
 import s from "./LikeButton.module.scss";
 
-const userId = Storage.getItem(settings.USER_ID_TOKEN);
-const teamId = Storage.getItem(settings.TEAM_ID_TOKEN);
-
 export const MUTATION_TOGGLE_LIKE = gql`
   mutation ToggleLikePost($id: ID!) {
     toggleLikePost(postId: $id) {
@@ -37,12 +34,15 @@ export interface ToggleLikeResult {
 const updateState = (store: any, newData: FragmentPostResult) => {
   let beforeState;
 
+  const teamId = Storage.getItem(settings.TEAM_ID_TOKEN)
+
   try {
     beforeState = store.readQuery({
       query: GET_POSTS,
       variables: { team_id: teamId },
     });
   } catch (error) {
+
     // This is just to silence the error in the tests
     return;
   }
@@ -74,6 +74,7 @@ export const toggleLike = (
   transactionId: string,
   post: FragmentPostResult,
 ) => {
+  const userId = Storage.getItem(settings.USER_ID_TOKEN);
   mutate({
     variables: { id: transactionId },
     optimisticResponse: {
@@ -170,7 +171,7 @@ class LikeButton extends React.Component<LikeButtonProps, LikeButtonState> {
               {
                 query: GET_GOAL_PERCENTAGE,
                 variables: {
-                  team_id: localStorage.getItem(settings.TEAM_ID_TOKEN),
+                  team_id: Storage.getItem(settings.TEAM_ID_TOKEN),
                 },
               },
             ]}
@@ -204,4 +205,5 @@ class LikeButton extends React.Component<LikeButtonProps, LikeButtonState> {
     );
   }
 }
+
 export default enhanceWithClickOutside(LikeButton);

src/modules/manage-team/sections/kudometer/KudometerSection.spec.tsx

@@ -166,7 +166,7 @@ describe('<KudometerSection />', () => {
       await wait(0);
       await wrapper.update();
 
-      expect(wrapper.containsMatchingElement(<p>Error! Network error: Something went wrong</p>)).toBe(true);
+      expect(wrapper.containsMatchingElement(<p>Error! Something went wrong</p>)).toBe(true);
     });
   });