Skip to content

Commit 5947862

Browse files
musayannmusayann
authored
Merge pull request #1179 from dacadeorg/test/feedback-component
Test/feedback component
2 parents 2ecead0 + fd743fe commit 5947862

File tree

12 files changed

+167
-16
lines changed

12 files changed

+167
-16
lines changed

‎__mocks__/fixtures/challenge.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,3 +170,11 @@ export const mockFeedback: Feedback = {
170170
ranking: 0,
171171
text: "I am providing a feedback",
172172
};
173+
174+
export const challengeSliceData = {
175+
current: challenge,
176+
list: [challenge],
177+
submission: submission,
178+
loading: false
179+
180+
}

‎__mocks__/fixtures/colors.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
export const colors = {
1+
import { Colors } from "@/types/community";
2+
3+
export const colors: Colors = {
24
textAccent: "--tm-text",
35
text: "--tm-text",
46
accent: "--tm-accent",

‎__mocks__/fixtures/course.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Course, Format, LearningModule, Material } from "@/types/course";
22
import { mockTrailer } from "./bounty";
3+
import { RatingCriteria } from "@/types/challenge";
34

45

56
export const Introduction = {
@@ -25,7 +26,7 @@ export const Rubric = {
2526
typeSlug: "slug",
2627
};
2728

28-
export const mockRatingCriteria = {
29+
export const mockRatingCriteria: RatingCriteria = {
2930
name: "rating criteria",
3031
order: 4,
3132
rubric: [Rubric],
@@ -131,6 +132,4 @@ export const mockFormat: Format = {
131132
githubLink: true,
132133
text: true,
133134
disclaimer: true,
134-
};
135-
136-
135+
};

‎__tests__/components/sections/feedbacks/Form.test.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import Form from "@/components/sections/feedbacks/Form"
2+
import "@testing-library/jest-dom"
3+
import { fireEvent, screen } from "@testing-library/react"
4+
import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
5+
import { mockUser } from "@__mocks__/fixtures/user";
6+
import { colors } from "@__mocks__/fixtures/colors";
7+
import { challenge, challengeSliceData } from "@__mocks__/fixtures/challenge";
8+
jest.mock("next/router", () => ({
9+
useRouter: () => ({
10+
push: jest.fn(),
11+
isFallback: false,
12+
}),
13+
}));
14+
const handleSave = jest.fn()
15+
16+
const user = {
17+
data: mockUser,
18+
userBalance: null,
19+
balance: null,
20+
walletAddresses: null,
21+
token: null,
22+
referrals: null,
23+
fetchingUserLoading: false,
24+
filteredUsers: null,
25+
}
26+
27+
const ui = {
28+
colors, locked: false,
29+
showReferralPopup: false,
30+
showJobOffersPopup: false,
31+
}
32+
const renderForm = () => {
33+
renderWithRedux(<Form onSave={handleSave} />, { ui, user })
34+
}
35+
describe('FeedbackForm', () => {
36+
it('should render the feedback form', () => {
37+
renderForm()
38+
const form = screen.getByTestId('feedback-form')
39+
expect(form).toBeInTheDocument()
40+
})
41+
42+
it("should render the user avatar ", () => {
43+
renderForm()
44+
const avatar = screen.getByTestId('avatar')
45+
expect(avatar).toBeInTheDocument()
46+
})
47+
48+
it('should preserve the text case and format', () => {
49+
renderForm()
50+
const inputText = screen.getByTestId('textarea').getElementsByTagName("textarea")[0]
51+
fireEvent.change(inputText, { target: { value: 'Test input' } })
52+
expect(inputText.value).toBe('Test input')
53+
})
54+
55+
it("should not show the github input link when the challenge does need one", () => {
56+
renderWithRedux(<Form onSave={handleSave} />, {
57+
ui, user, challenges: {
58+
...challengeSliceData,
59+
current: {
60+
...challenge,
61+
format: {
62+
githubLink: false,
63+
text: true,
64+
disclaimer: true,
65+
}
66+
},
67+
}
68+
})
69+
70+
const githubLinkInput = screen.queryByTestId("githubLinkInput");
71+
expect(githubLinkInput).not.toBeInTheDocument();
72+
})
73+
74+
})

‎__tests__/components/sections/feedbacks/index.test.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import Feedback from "@/components/sections/feedbacks"
2+
import "@testing-library/jest-dom"
3+
import { screen } from "@testing-library/react"
4+
import { renderWithRedux } from "../../../../__mocks__/renderWithRedux";
5+
import { challengeSliceData, submission } from "../../../../__mocks__/fixtures/challenge";
6+
import { mockUser } from "@__mocks__/fixtures/user";
7+
8+
9+
jest.mock("next/router", () => ({
10+
useRouter: () => ({
11+
push: jest.fn(),
12+
events: {
13+
on: jest.fn(),
14+
off: jest.fn(),
15+
emit: jest.fn(),
16+
},
17+
isFallback: false,
18+
pathname: "communities-slug__"
19+
}),
20+
}));
21+
22+
const authData = {
23+
data: mockUser,
24+
userBalance: null,
25+
balance: null,
26+
walletAddresses: null,
27+
isAuthLoading: true,
28+
}
29+
30+
const renderFeedbackSection = () => {
31+
renderWithRedux(<Feedback testId="feedback-section" />, {
32+
auth: authData
33+
})
34+
}
35+
describe('Feedback', () => {
36+
it('should render the feedback component', () => {
37+
renderFeedbackSection()
38+
const section = screen.getByTestId("feedback-section")
39+
expect(section).toBeInTheDocument();
40+
})
41+
42+
it('should initally render with a loader', async () => {
43+
renderFeedbackSection()
44+
screen.getByTestId("feedback-section")
45+
expect(screen.getByTestId("loader")).toBeInTheDocument();
46+
})
47+
48+
it('should render with at least one child', async () => {
49+
renderFeedbackSection()
50+
const section = screen.getByTestId("feedback-section")
51+
expect(section.childElementCount).toBeGreaterThan(0)
52+
})
53+
54+
it("should not render the feedback section when we don't have a user", () => {
55+
renderWithRedux(<Feedback testId="feedback-section" />, {
56+
auth: { ...authData, data: null },
57+
challenges: challengeSliceData,
58+
submissions: {
59+
current: submission,
60+
list: [submission],
61+
text: "string"
62+
}
63+
})
64+
const section = screen.queryByTestId("section")
65+
expect(section).not.toBeInTheDocument()
66+
})
67+
})

‎__tests__/components/sections/submissions/View.test.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,7 @@ describe("View component", () => {
3131
it("Should render the submission view card and evaluation", () => {
3232
renderWithRedux(<View />, mockStateWithSubmission);
3333
expect(screen.getByTestId("viewId")).toBeInTheDocument();
34-
// TODO: add this test once the pr for testing evaluations is merged
35-
// expect(screen.getByTestId("evaluationsId")).toBeInTheDocument();
34+
expect(screen.getByTestId("evaluationsId")).toBeInTheDocument();
3635
expect(screen.getByTestId("feedbackId")).toBeInTheDocument();
3736
});
3837
it("Should display a message when submission is not available", () => {

‎src/components/cards/Feedback.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export default function FeedbackCard({ value, preview = false, last = false, lin
6262
bordered={!last}
6363
badge={`${value.ranking ?? ""}`} // badge only accepts string
6464
boxLayout={preview}
65+
testId="feedback-card"
6566
>
6667
<TranslationBox
6768
text={value.text}

‎src/components/cards/User.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ interface UserProps {
5252
}
5353
* @returns {ReactElement}
5454
*/
55-
export default function UserCard({ boxLayout, link, bordered, expanded, user, badge = "", timestamp, children, className, teamMembers, onClick, testId="userId" }: UserProps): ReactElement {
55+
export default function UserCard({ boxLayout, link, bordered, expanded, user, badge = "", timestamp, children, className, teamMembers, onClick, testId = "userId" }: UserProps): ReactElement {
5656
const { locale, push } = useRouter();
5757
const colors = useSelector((state) => state.ui.colors);
5858

@@ -77,6 +77,7 @@ export default function UserCard({ boxLayout, link, bordered, expanded, user, ba
7777
"pl-5 sm:pl-7.5": !boxLayout,
7878
"cursor-pointer": link,
7979
});
80+
console.log("this is the user test id", testId)
8081
return (
8182
<div data-testid={testId} className={userCardClassName} onClick={handleClick}>
8283
<div className={`z-10 ${boxLayout ? "relative flex-none" : "absolute top-0 left-0"}`}>
@@ -104,9 +105,8 @@ export default function UserCard({ boxLayout, link, bordered, expanded, user, ba
104105
)}
105106
</div>
106107
<div
107-
className={`relative z-0 flex-1 ${expanded ? "pb-24" : ""} ${bordered ? "group-hover:border-gray-50 border-l border-solid border-gray-200" : ""} ${
108-
!boxLayout ? "pl-10.5 pb-12" : ""
109-
}`}
108+
className={`relative z-0 flex-1 ${expanded ? "pb-24" : ""} ${bordered ? "group-hover:border-gray-50 border-l border-solid border-gray-200" : ""} ${!boxLayout ? "pl-10.5 pb-12" : ""
109+
}`}
110110
>
111111
<div className="pb-4">
112112
<div className="flex gap-4 w-full overflow-hidden">

‎src/components/sections/communities/_partials/Section.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ interface SectionProps {
1616
className?: string;
1717
hideSubtitleOnMobile?: boolean;
1818
children?: ReactNode;
19+
testId?: string;
1920
}
2021

2122
/**
@@ -33,9 +34,9 @@ interface SectionProps {
3334
}
3435
* @returns {ReactElement}
3536
*/
36-
export default function Section({ title, titleBold = true, subtitle, id, hideSubtitleOnMobile = false, children, className = "" }: SectionProps): ReactElement {
37+
export default function Section({ title, titleBold = true, subtitle, id, hideSubtitleOnMobile = false, children, className, testId = "section" }: SectionProps): ReactElement {
3738
return (
38-
<div id={id} className={`text-xl md:text-.5xl px-0 py-6 ${className}`}>
39+
<div id={id} className={`text-xl md:text-.5xl px-0 py-6 ${className}`} data-testid={testId}>
3940
{title && <H3 bold={titleBold}>{title}</H3>}
4041
<p className={`text-base font-normal text-primary ${hideSubtitleOnMobile ? "hidden" : ""}`}>{subtitle}</p>
4142
<div>{children}</div>

‎src/components/sections/feedbacks/Form.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export default function Form({ onSave }: FormProps): ReactElement {
113113

114114
return (
115115
<div>
116-
<form onSubmit={handleSubmit(onSubmit)}>
116+
<form onSubmit={handleSubmit(onSubmit)} data-testid='feedback-form'>
117117
<div className="relative w-full">
118118
<div className="relative">
119119
<div className="absolute z-50 left-3 md:-left-7 top-3">

0 commit comments

Comments
 (0)