From 1533df80dd10d641c05b5c87bbf9536a05903e28 Mon Sep 17 00:00:00 2001 From: Jaya Date: Mon, 10 Jun 2024 16:06:33 +0200 Subject: [PATCH 1/5] Writing tests for CommentsSection component --- .../components/CommentsSection.test.js | 117 ++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 src/__tests__/components/CommentsSection.test.js diff --git a/src/__tests__/components/CommentsSection.test.js b/src/__tests__/components/CommentsSection.test.js new file mode 100644 index 000000000..82e8ede8c --- /dev/null +++ b/src/__tests__/components/CommentsSection.test.js @@ -0,0 +1,117 @@ +import React from "react"; +import {render,fireEvent } from "@testing-library/react-native"; +import { CommentsSection } from "../../components/ChartCard/ChatComments/CommentsSection"; +import userLevelStore from "../../store/userLevel"; +import { Role } from "../../utility/enums"; + +jest.mock("../../components/ChartCard/ChatCardEditMenu", () => () => { + return ; + }); + + +jest.mock("@react-native-firebase/firestore", () => { + return jest.fn(); + }); + jest.mock('@react-native-firebase/storage', () => { + return { + ref: jest.fn(() => ({ + getDownloadURL: jest.fn(), + putFile: jest.fn(), + })), + }; + }); + jest.mock("../../context/SuperAdminContext", () => ({ + useSuperAdminFunction: () => ({ + setGetAllUsers: jest.fn(), + userLevel: jest.fn(), + }), + })); + + + jest.mock("@react-native-firebase/crashlytics", () => () => ({ + crashlytics: jest.fn(), + })); + +const mockAddComment = jest.fn(); +const mockDeleteComment = jest.fn(); +const superAdmin = () => { + userLevelStore.setUserLevel(Role.superadmin); + }; + +const loggedInUser = { + id: "user1", + activitiesAndAccumulatedTime: [], + connectedActivities: [], + firstName: "Erik", + lastName: "Andersson", + statusActive: true + }; + + +const comments = [ + { comment: 'First comment', userID: '1', userFirstName: 'John', userLastName: 'Doe' }, + { comment: 'Second comment', userID: '2', userFirstName: 'Jane', userLastName: 'Smith' }, + { comment: 'Third comment', userID: '2', userFirstName: 'Erik', userLastName: 'Andersson' } + ]; + + +describe("Testing CommentsSection Component", () => { + it('renders comments correctly', () => { + const { getByText } = render( + + ); + + expect(getByText('John Doe')).toBeTruthy(); + expect(getByText('First comment')).toBeTruthy(); + expect(getByText('Jane Smith')).toBeTruthy(); + expect(getByText('Second comment')).toBeTruthy(); + }); + + it('should add a comment', () => { + const { getByPlaceholderText, getByTestId} = render( + + ); + + const input = getByPlaceholderText('Skriv en kommentar'); + const submitButton = getByTestId('arrow-upward'); + + fireEvent.changeText(input, 'New Comment'); + fireEvent.press(submitButton); + expect(mockAddComment).toHaveBeenCalledWith({ + comment: 'New Comment', + userID: loggedInUser.id, + userFirstName:loggedInUser.firstName, + userLastName: loggedInUser.lastName + }); + }); + it('allows logged in user to delete their own comment', async () => { + const { getByTestId,getByText,debug} = render( + + ); + + expect(getByText('Erik Andersson')).toBeTruthy(); + expect(getByText('Third comment')).toBeTruthy(); + // debug() + // const editMenu= getByTestId("chat-card-edit-menu") + + }); + +}); From a5649377bc60ad35f45a2f7487995b055057d19b Mon Sep 17 00:00:00 2001 From: Jaya Date: Tue, 11 Jun 2024 16:30:53 +0200 Subject: [PATCH 2/5] Writing tests and fixing error --- .../components/CommentsSection.test.js | 38 +++++++++++++------ .../Chat/ChatCardScreen/ChatCardScreen.tsx | 5 ++- .../ChatCardScreen/ChatCardWithActivity.tsx | 1 + 3 files changed, 30 insertions(+), 14 deletions(-) diff --git a/src/__tests__/components/CommentsSection.test.js b/src/__tests__/components/CommentsSection.test.js index 82e8ede8c..77a062250 100644 --- a/src/__tests__/components/CommentsSection.test.js +++ b/src/__tests__/components/CommentsSection.test.js @@ -31,6 +31,14 @@ jest.mock("@react-native-firebase/firestore", () => { jest.mock("@react-native-firebase/crashlytics", () => () => ({ crashlytics: jest.fn(), })); + jest.mock("../../components/ChartCard/ChatCardEditMenu", () => { + return ({ textWhatItemToDelete, onDeletePress }) => ( + + ); + }); const mockAddComment = jest.fn(); const mockDeleteComment = jest.fn(); @@ -47,11 +55,20 @@ const loggedInUser = { statusActive: true }; +constdifferentUser = { + id: "user3", + activitiesAndAccumulatedTime: [], + connectedActivities: [], + firstName: "Jane", + lastName: "Smith", + statusActive: true +}; + const comments = [ - { comment: 'First comment', userID: '1', userFirstName: 'John', userLastName: 'Doe' }, - { comment: 'Second comment', userID: '2', userFirstName: 'Jane', userLastName: 'Smith' }, - { comment: 'Third comment', userID: '2', userFirstName: 'Erik', userLastName: 'Andersson' } + { comment: 'First comment', userID: '2', userFirstName: 'John', userLastName: 'Doe' }, + { comment: 'Second comment', userID: '3', userFirstName: 'Jane', userLastName: 'Smith' }, + { comment: 'Third comment', userID: '1', userFirstName: 'Erik', userLastName: 'Andersson' } ]; @@ -96,22 +113,19 @@ describe("Testing CommentsSection Component", () => { userLastName: loggedInUser.lastName }); }); - it('allows logged in user to delete their own comment', async () => { - const { getByTestId,getByText,debug} = render( + + it('does not allow logged in user to see delete menu for others\' comments', () => { + const { queryByText } = render( ); - - expect(getByText('Erik Andersson')).toBeTruthy(); - expect(getByText('Third comment')).toBeTruthy(); - // debug() - // const editMenu= getByTestId("chat-card-edit-menu") + expect(get('...')).toBeFalsy(); }); - + }); diff --git a/src/screens/Chat/ChatCardScreen/ChatCardScreen.tsx b/src/screens/Chat/ChatCardScreen/ChatCardScreen.tsx index a253b0bcf..0a1c7e3ff 100644 --- a/src/screens/Chat/ChatCardScreen/ChatCardScreen.tsx +++ b/src/screens/Chat/ChatCardScreen/ChatCardScreen.tsx @@ -68,7 +68,7 @@ export const ChatCardScreen = ({route,navigation}:Props) => { {post.userFirstName} {post.userLastName} - ändrats + {post.changed && ändrats} )} @@ -125,6 +125,7 @@ const styles = StyleSheet.create({ marginBottom:20 }, changedText:{ - ...typography.b2 + ...typography.b2, + color: colors.secondary } }); diff --git a/src/screens/Chat/ChatCardScreen/ChatCardWithActivity.tsx b/src/screens/Chat/ChatCardScreen/ChatCardWithActivity.tsx index 7af9a8cd5..1310fc364 100644 --- a/src/screens/Chat/ChatCardScreen/ChatCardWithActivity.tsx +++ b/src/screens/Chat/ChatCardScreen/ChatCardWithActivity.tsx @@ -37,6 +37,7 @@ const styles = StyleSheet.create({ changedText:{ ...typography.b2, textAlign:'right', + color: colors.secondary } }); \ No newline at end of file From 37a98f4c270d7c780bb07c587ab518bb13904bd9 Mon Sep 17 00:00:00 2001 From: Jaya Date: Wed, 12 Jun 2024 16:53:49 +0200 Subject: [PATCH 3/5] Writing tests and fixing erors --- .../components/CommentsSection.test.js | 126 +++++++++++++----- src/components/ChartCard/EmojiList.tsx | 5 +- src/screens/Chat/useUserPostsActions.tsx | 7 +- 3 files changed, 96 insertions(+), 42 deletions(-) diff --git a/src/__tests__/components/CommentsSection.test.js b/src/__tests__/components/CommentsSection.test.js index 77a062250..7414beb69 100644 --- a/src/__tests__/components/CommentsSection.test.js +++ b/src/__tests__/components/CommentsSection.test.js @@ -1,17 +1,14 @@ import React from "react"; -import {render,fireEvent } from "@testing-library/react-native"; +import {render,fireEvent,waitFor } from "@testing-library/react-native"; import { CommentsSection } from "../../components/ChartCard/ChatComments/CommentsSection"; import userLevelStore from "../../store/userLevel"; import { Role } from "../../utility/enums"; -jest.mock("../../components/ChartCard/ChatCardEditMenu", () => () => { - return ; - }); - jest.mock("@react-native-firebase/firestore", () => { return jest.fn(); }); + jest.mock('@react-native-firebase/storage', () => { return { ref: jest.fn(() => ({ @@ -20,6 +17,11 @@ jest.mock("@react-native-firebase/firestore", () => { })), }; }); + + jest.mock("@react-native-firebase/crashlytics", () => () => ({ + crashlytics: jest.fn(), + })); + jest.mock("../../context/SuperAdminContext", () => ({ useSuperAdminFunction: () => ({ setGetAllUsers: jest.fn(), @@ -27,25 +29,17 @@ jest.mock("@react-native-firebase/firestore", () => { }), })); - - jest.mock("@react-native-firebase/crashlytics", () => () => ({ - crashlytics: jest.fn(), - })); - jest.mock("../../components/ChartCard/ChatCardEditMenu", () => { - return ({ textWhatItemToDelete, onDeletePress }) => ( - - ); - }); - const mockAddComment = jest.fn(); const mockDeleteComment = jest.fn(); + const superAdmin = () => { userLevelStore.setUserLevel(Role.superadmin); }; + const user = () => { + userLevelStore.setUserLevel(Role.user); + }; + const loggedInUser = { id: "user1", activitiesAndAccumulatedTime: [], @@ -54,25 +48,24 @@ const loggedInUser = { lastName: "Andersson", statusActive: true }; - -constdifferentUser = { - id: "user3", - activitiesAndAccumulatedTime: [], - connectedActivities: [], - firstName: "Jane", - lastName: "Smith", - statusActive: true + const anotherUser = { + id: "user4", + activitiesAndAccumulatedTime: [], + connectedActivities: [], + firstName: "Alex", + lastName: "Johnson", + statusActive: true }; - - + const comments = [ - { comment: 'First comment', userID: '2', userFirstName: 'John', userLastName: 'Doe' }, - { comment: 'Second comment', userID: '3', userFirstName: 'Jane', userLastName: 'Smith' }, - { comment: 'Third comment', userID: '1', userFirstName: 'Erik', userLastName: 'Andersson' } + { comment: 'First comment', userID: 'user2', userFirstName: 'John', userLastName: 'Doe' }, + { comment: 'Second comment', userID: 'user3', userFirstName: 'Jane', userLastName: 'Smith' }, + { comment: 'Third comment', userID: 'user1', userFirstName: 'Erik', userLastName: 'Andersson' } ]; describe("Testing CommentsSection Component", () => { + user() it('renders comments correctly', () => { const { getByText } = render( { expect(getByText('First comment')).toBeTruthy(); expect(getByText('Jane Smith')).toBeTruthy(); expect(getByText('Second comment')).toBeTruthy(); + expect(getByText('Erik Andersson')).toBeTruthy(); + expect(getByText('Third comment')).toBeTruthy(); }); it('should add a comment', () => { @@ -114,18 +109,75 @@ describe("Testing CommentsSection Component", () => { }); }); - it('does not allow logged in user to see delete menu for others\' comments', () => { - const { queryByText } = render( + it('shows delete option only for logged in user comment', () => { + user() + const { getByTestId,getByText} = render( + + ); + const editMenu = getByTestId('chat-card-edit-menu'); + expect(editMenu).toBeTruthy(); + }); + + it('Superadmin can delete any comment', () => { + superAdmin(); + const { getAllByTestId} = render( + + ); + const editMenu = getAllByTestId('chat-card-edit-menu'); + expect(editMenu).toHaveLength(3); + }); + it('Delete option not visible for others comments', () => { + user(); + const { queryByTestId } = render( ); + + const editMenu = queryByTestId('chat-card-edit-menu'); + expect(editMenu).toBeFalsy(); + }); + it('Delete a comment', async () => { + user(); + const { getByTestId, getByText,debug } = render( + + ); + + const deleteMenu = getByTestId('chat-card-edit-menu'); + fireEvent.press(deleteMenu); + const deleteButton = getByText("Ta bort"); + fireEvent.press(deleteButton); + expect(mockDeleteComment).toBeTruthy(); + await waitFor(() => { + expect(mockDeleteComment).toHaveBeenCalledWith({ + comment: 'Third comment', + userID: loggedInUser.id, + userFirstName: loggedInUser.firstName, + userLastName: loggedInUser.lastName, + }, 'post1'); + }); + }); - expect(get('...')).toBeFalsy(); - }); - }); diff --git a/src/components/ChartCard/EmojiList.tsx b/src/components/ChartCard/EmojiList.tsx index 3efd50a2a..3600f1c14 100644 --- a/src/components/ChartCard/EmojiList.tsx +++ b/src/components/ChartCard/EmojiList.tsx @@ -82,8 +82,9 @@ const styles = StyleSheet.create({ }, modalContainer: { flex: 1, - justifyContent: "center", - alignItems: "center", + justifyContent: 'center', + alignItems: 'center', + marginTop: "60%", }, modalContent: { backgroundColor:colors.background, diff --git a/src/screens/Chat/useUserPostsActions.tsx b/src/screens/Chat/useUserPostsActions.tsx index 270a1dc1b..7f9c34812 100644 --- a/src/screens/Chat/useUserPostsActions.tsx +++ b/src/screens/Chat/useUserPostsActions.tsx @@ -14,9 +14,10 @@ import { AlertQuestion } from "../../components/Alerts/AlertQuestion "; import { updatePostInFirestore } from "../../firebase-functions/updateTS/update"; const alertMessage = - "Vill du publicera det här inlägget i chatten? Alla DGGG-användare kommer att se detta inlägg.\n\ - Den här inlägg raderas automatiskt efter ett år."; - const alertUpdateMessage= "Vill du spara ändringarna." + "Vill du publicera det här inlägget i chatten? Alla DGGG-användare kommer att se detta inlägg. nlägget raderas automatiskt efter ett år."; + + +const alertUpdateMessage= "Vill du spara ändringarna." export const useUserPostsActions = () => { const [loading, setLoading] = useState(false); From 8d69bce93c97de82ecfee7a7a0c722f8c249a2ee Mon Sep 17 00:00:00 2001 From: Jaya Date: Thu, 13 Jun 2024 14:27:28 +0200 Subject: [PATCH 4/5] Writing tsests --- .../components/CommentsSection.test.js | 46 +++++++++++++------ 1 file changed, 33 insertions(+), 13 deletions(-) diff --git a/src/__tests__/components/CommentsSection.test.js b/src/__tests__/components/CommentsSection.test.js index 7414beb69..d8ce26a2f 100644 --- a/src/__tests__/components/CommentsSection.test.js +++ b/src/__tests__/components/CommentsSection.test.js @@ -3,7 +3,7 @@ import {render,fireEvent,waitFor } from "@testing-library/react-native"; import { CommentsSection } from "../../components/ChartCard/ChatComments/CommentsSection"; import userLevelStore from "../../store/userLevel"; import { Role } from "../../utility/enums"; - +import { AlertQuestion } from "../../components/Alerts/AlertQuestion "; jest.mock("@react-native-firebase/firestore", () => { return jest.fn(); @@ -28,6 +28,7 @@ jest.mock("@react-native-firebase/firestore", () => { userLevel: jest.fn(), }), })); + const mockAddComment = jest.fn(); const mockDeleteComment = jest.fn(); @@ -64,6 +65,10 @@ const comments = [ ]; + + + + describe("Testing CommentsSection Component", () => { user() it('renders comments correctly', () => { @@ -124,7 +129,7 @@ describe("Testing CommentsSection Component", () => { expect(editMenu).toBeTruthy(); }); - it('Superadmin can delete any comment', () => { + it('Superadmin should see delete option for all comments', () => { superAdmin(); const { getAllByTestId} = render( { const editMenu = queryByTestId('chat-card-edit-menu'); expect(editMenu).toBeFalsy(); }); - it('Delete a comment', async () => { + it('Should delete comment when user who wrote it pressing delete', async () => { user(); const { getByTestId, getByText,debug } = render( { const deleteMenu = getByTestId('chat-card-edit-menu'); fireEvent.press(deleteMenu); - const deleteButton = getByText("Ta bort"); + + + const deleteButton = getByTestId("dropdown-overlay-ta bort"); fireEvent.press(deleteButton); - expect(mockDeleteComment).toBeTruthy(); - await waitFor(() => { - expect(mockDeleteComment).toHaveBeenCalledWith({ - comment: 'Third comment', - userID: loggedInUser.id, - userFirstName: loggedInUser.firstName, - userLastName: loggedInUser.lastName, - }, 'post1'); - }); + + // TODO: mock alert to test delet function + + // await waitFor(() => { + // expect(mockAlert).toHaveBeenCalledWith( + // '', + // 'Vill du ta bort den här kommentar?', + // // expect.any(Array) + // ); + + + + // expect(mockDeleteComment).toBeTruthy(); + + + // expect(mockDeleteComment).toHaveBeenCalledWith({ + // comment: 'Third comment', + // userID: loggedInUser.id, + // userFirstName: loggedInUser.firstName, + // userLastName: loggedInUser.lastName, + // }, 'post1'); + // }); }); }); From 5ed7c4998f049510e28a59bf285608a3ca433b2f Mon Sep 17 00:00:00 2001 From: Jaya Date: Thu, 13 Jun 2024 14:36:44 +0200 Subject: [PATCH 5/5] Clean code --- .../components/CommentsSection.test.js | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/src/__tests__/components/CommentsSection.test.js b/src/__tests__/components/CommentsSection.test.js index d8ce26a2f..c1cab688c 100644 --- a/src/__tests__/components/CommentsSection.test.js +++ b/src/__tests__/components/CommentsSection.test.js @@ -3,7 +3,7 @@ import {render,fireEvent,waitFor } from "@testing-library/react-native"; import { CommentsSection } from "../../components/ChartCard/ChatComments/CommentsSection"; import userLevelStore from "../../store/userLevel"; import { Role } from "../../utility/enums"; -import { AlertQuestion } from "../../components/Alerts/AlertQuestion "; + jest.mock("@react-native-firebase/firestore", () => { return jest.fn(); @@ -29,7 +29,6 @@ jest.mock("@react-native-firebase/firestore", () => { }), })); - const mockAddComment = jest.fn(); const mockDeleteComment = jest.fn(); @@ -62,12 +61,7 @@ const comments = [ { comment: 'First comment', userID: 'user2', userFirstName: 'John', userLastName: 'Doe' }, { comment: 'Second comment', userID: 'user3', userFirstName: 'Jane', userLastName: 'Smith' }, { comment: 'Third comment', userID: 'user1', userFirstName: 'Erik', userLastName: 'Andersson' } - ]; - - - - - + ]; describe("Testing CommentsSection Component", () => { user() @@ -172,8 +166,6 @@ describe("Testing CommentsSection Component", () => { const deleteMenu = getByTestId('chat-card-edit-menu'); fireEvent.press(deleteMenu); - - const deleteButton = getByTestId("dropdown-overlay-ta bort"); fireEvent.press(deleteButton); @@ -185,12 +177,8 @@ describe("Testing CommentsSection Component", () => { // 'Vill du ta bort den här kommentar?', // // expect.any(Array) // ); - - - + // expect(mockDeleteComment).toBeTruthy(); - - // expect(mockDeleteComment).toHaveBeenCalledWith({ // comment: 'Third comment', // userID: loggedInUser.id,