Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit38ee2a3

Browse files
committed
setup: useState message
1 parente7f5a39 commit38ee2a3

File tree

3 files changed

+84
-15
lines changed

3 files changed

+84
-15
lines changed

‎src/components/Message/index.jsrenamed to‎src/components/Message/useState.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ export const Message = props => {
1616
text
1717
}=props;
1818

19+
/* TODO: toggle retweet & favorite status & count on click */
20+
1921
return(
2022
<Card
2123
className="Message"
@@ -37,7 +39,7 @@ export const Message = props => {
3739
<IconButton
3840
role="retweet"
3941
onClick={()=>{
40-
/* toggle retweet */
42+
/* toggle retweetlocally*/
4143
}}
4244
>
4345
<Icon
@@ -51,7 +53,7 @@ export const Message = props => {
5153
<IconButton
5254
role="favorite"
5355
onClick={()=>{
54-
/* toggle favorite */
56+
/* toggle favoritelocally*/
5557
}}
5658
>
5759
<Icon

‎src/stories/2-Message.stories.js

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
importReactfrom"react";
2-
import{Message}from"../components/Message";
2+
import{Message}from"../components/Message/useState";
33
import{USER}from"../config";
44

55
exportdefault{
@@ -8,17 +8,22 @@ export default {
88

99
constnow=newDate();
1010

11-
exportconstmessage=()=>{
12-
constpost={
13-
id:"1",
14-
created_at:now.setMinutes(now.getMinutes()-20),
15-
text:
16-
"A bunch of text here filling out the body of the tweet, might be really really long. Maybe even spans a few lines because its so long.",
17-
user:USER,
18-
retweeted:false,
19-
retweet_count:52,
20-
favorited:false,
21-
favorite_count:101
22-
};
11+
constpost={
12+
id:"1",
13+
created_at:now.setMinutes(now.getMinutes()-20),
14+
text:
15+
"A bunch of text here filling out the body of the tweet, might be really really long. Maybe even spans a few lines because its so long.",
16+
user:USER,
17+
retweeted:false,
18+
retweet_count:52,
19+
favorited:false,
20+
favorite_count:101
21+
};
22+
23+
exportconstuseStateMessage=()=>{
2324
return<Message{...post}/>;
2425
};
26+
27+
useStateMessage.story={
28+
name:"useState example"
29+
};

‎src/tests/components/Message.test.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
importReactfrom"react";
2+
import{render,fireEvent}from"@testing-library/react";
3+
import{Message}from"../../components/Message/useState";
4+
import{USER}from"../../config";
5+
6+
constmockProps={
7+
user:USER,
8+
text:"Some text",
9+
created_at:newDate().toISOString(),
10+
retweeted:false,
11+
retweet_count:12,
12+
favorited:false,
13+
favorite_count:22
14+
};
15+
16+
describe("Message",()=>{
17+
test("should display the initial favorite count",()=>{
18+
constutils=render(<Message{...mockProps}/>);
19+
constcount=utils.getByTitle("favorite_count");
20+
expect(count.textContent).toBe("22");
21+
});
22+
23+
test("should increment the favorite count on click",()=>{
24+
constutils=render(<Message{...mockProps}/>);
25+
constbutton=utils.getByRole("favorite");
26+
fireEvent.click(button);
27+
constcount=utils.getByTitle("favorite_count");
28+
expect(count.textContent).toBe("23");
29+
});
30+
31+
test("favoriting should return to initial count on second click",()=>{
32+
constutils=render(<Message{...mockProps}/>);
33+
constbutton=utils.getByRole("favorite");
34+
fireEvent.click(button);
35+
fireEvent.click(button);
36+
constcount=utils.getByTitle("favorite_count");
37+
expect(count.textContent).toBe("22");
38+
});
39+
40+
test("should display the initial retweet count",()=>{
41+
constutils=render(<Message{...mockProps}/>);
42+
constcount=utils.getByTitle("retweet_count");
43+
expect(count.textContent).toBe("12");
44+
});
45+
46+
test("should increment the retweet count on click",()=>{
47+
constutils=render(<Message{...mockProps}/>);
48+
constbutton=utils.getByRole("retweet");
49+
fireEvent.click(button);
50+
constcount=utils.getByTitle("retweet_count");
51+
expect(count.textContent).toBe("13");
52+
});
53+
54+
test("retweeting should return to initial count on second click",()=>{
55+
constutils=render(<Message{...mockProps}/>);
56+
constbutton=utils.getByRole("retweet");
57+
fireEvent.click(button);
58+
fireEvent.click(button);
59+
constcount=utils.getByTitle("retweet_count");
60+
expect(count.textContent).toBe("12");
61+
});
62+
});

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp