Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import React from "react";
import { ModerationReviewBanner } from "./ModerationReviewBanner";
import { render, fireEvent } from "@testing-library/react";
const VERIFIED_ICON_SELECTOR = ".Icon-verified";
const CLOSE_ICON_SELECTOR = ".Icon-close";
const moderationReview = {
status: "verified",
moderator_id: 1,
created_at: Date.now(),
};
const moderator = { id: 1, display_name: "Foo" };
const currentUser = { id: 2, display_name: "Bar" };
describe("ModerationReviewBanner", () => {
it("should show text concerning the given review", () => {
const { getByText } = render(
<ModerationReviewBanner
moderationReview={moderationReview}
user={moderator}
currentUser={currentUser}
/>,
);
expect(getByText("Foo verified this")).toBeTruthy();
});
describe("when not provided an onRemove prop", () => {
let getByRole;
let container;
beforeEach(() => {
const wrapper = render(
<ModerationReviewBanner
moderationReview={moderationReview}
user={moderator}
currentUser={currentUser}
/>,
);
getByRole = wrapper.getByRole;
container = wrapper.container;
});
it("should render a status icon, not a button", () => {
expect(() => getByRole("button")).toThrow();
});
it("should render with the icon relevant to the review's status", () => {
expect(container.querySelector(VERIFIED_ICON_SELECTOR)).toBeTruthy();
});
});
describe("when provided an onRemove callback prop", () => {
let onRemove;
let container;
let getByRole;
beforeEach(() => {
onRemove = jest.fn();
const wrapper = render(
<ModerationReviewBanner
moderationReview={moderationReview}
user={moderator}
currentUser={currentUser}
onRemove={onRemove}
/>,
);
container = wrapper.container;
getByRole = wrapper.getByRole;
});
it("should render a button", () => {
expect(getByRole("button")).toBeTruthy();
});
it("should render the button with the icon relevant to the review's status", () => {
expect(container.querySelector(VERIFIED_ICON_SELECTOR)).toBeTruthy();
});
it("should render the button as a close icon when the user is hovering their mouse over the banner", () => {
const banner = container.firstChild;
fireEvent.mouseEnter(banner);
expect(container.querySelector(CLOSE_ICON_SELECTOR)).toBeTruthy();
fireEvent.mouseLeave(banner);
expect(container.querySelector(VERIFIED_ICON_SELECTOR)).toBeTruthy();
});
it("should render the button as a close icon when the user focuses the button", () => {
fireEvent.focus(getByRole("button"));
expect(container.querySelector(CLOSE_ICON_SELECTOR)).toBeTruthy();
fireEvent.blur(getByRole("button"));
expect(container.querySelector(VERIFIED_ICON_SELECTOR)).toBeTruthy();
});
it("should render the button as a close icon when focused, even when the mouse leaves the banner", () => {
const banner = container.firstChild;
fireEvent.mouseEnter(banner);
fireEvent.focus(getByRole("button"));
expect(container.querySelector(CLOSE_ICON_SELECTOR)).toBeTruthy();
fireEvent.mouseLeave(banner);
expect(container.querySelector(CLOSE_ICON_SELECTOR)).toBeTruthy();
});
});
});