From 7301f0865879d310c918d91dcf47bbc2b8e88bf5 Mon Sep 17 00:00:00 2001 From: Roy Date: Thu, 17 Aug 2023 09:41:09 +0200 Subject: [PATCH] Minor changes --- src/modules/feed/FeedPage.spec.tsx | 9 ++- src/modules/feed/FeedPage.tsx | 2 +- src/modules/feed/components/RightRail.tsx | 11 ++- .../Transaction/LikeButton.spec.tsx | 80 +++++++++++++------ .../components/Transaction/LikeButton.tsx | 10 ++- .../kudometer/KudometerSection.spec.tsx | 2 +- 6 files changed, 77 insertions(+), 37 deletions(-) diff --git a/src/modules/feed/FeedPage.spec.tsx b/src/modules/feed/FeedPage.spec.tsx index 50b9fdcf..e70a648a 100644 --- a/src/modules/feed/FeedPage.spec.tsx +++ b/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('', () => { }); it('should show a right rail', async () => { - expect(findByTestId(wrapper, 'right-rail').length).toBe(1); + render( + withMockedProviders() + ); + + 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); }); }); diff --git a/src/modules/feed/FeedPage.tsx b/src/modules/feed/FeedPage.tsx index 962f2186..7a1c08e1 100644 --- a/src/modules/feed/FeedPage.tsx +++ b/src/modules/feed/FeedPage.tsx @@ -73,7 +73,7 @@ export class FeedPage extends Component { - + diff --git a/src/modules/feed/components/RightRail.tsx b/src/modules/feed/components/RightRail.tsx index e199d44a..e5c69511 100644 --- a/src/modules/feed/components/RightRail.tsx +++ b/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 = () => ( - - - Kabisa logo - +
+ + + Kabisa logo + +
+ ); export default RightRail; diff --git a/src/modules/feed/components/Transaction/LikeButton.spec.tsx b/src/modules/feed/components/Transaction/LikeButton.spec.tsx index c0b978b6..d007c99d 100644 --- a/src/modules/feed/components/Transaction/LikeButton.spec.tsx +++ b/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(, mocks)); -}; - describe('', () => { beforeEach(() => { - mockLocalstorage('1'); - setup(false, likedPost); + mutationCalled = false; + mockLocalstorage("1"); }); it('renders the correct message', () => { + wrapper = mount(withMockedProviders(, 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(, 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(, 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(, mocks, cache) + ); - await wait(0); - await wrapper.update(); + const button = screen.getByTestId("like-button"); + userEvent.click(button); + await waitFor(() => { expect(mutationCalled).toBe(true); }); }); diff --git a/src/modules/feed/components/Transaction/LikeButton.tsx b/src/modules/feed/components/Transaction/LikeButton.tsx index 0c40d7ff..5dc1d26c 100644 --- a/src/modules/feed/components/Transaction/LikeButton.tsx +++ b/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 { { 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 { ); } } + export default enhanceWithClickOutside(LikeButton); diff --git a/src/modules/manage-team/sections/kudometer/KudometerSection.spec.tsx b/src/modules/manage-team/sections/kudometer/KudometerSection.spec.tsx index aa00d64d..daa27dc4 100644 --- a/src/modules/manage-team/sections/kudometer/KudometerSection.spec.tsx +++ b/src/modules/manage-team/sections/kudometer/KudometerSection.spec.tsx @@ -166,7 +166,7 @@ describe('', () => { await wait(0); await wrapper.update(); - expect(wrapper.containsMatchingElement(

Error! Network error: Something went wrong

)).toBe(true); + expect(wrapper.containsMatchingElement(

Error! Something went wrong

)).toBe(true); }); });