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

Commit8b9c28c

Browse files
committed
setup: useEffect to load messages
1 parent132ce3d commit8b9c28c

File tree

9 files changed

+153
-4
lines changed

9 files changed

+153
-4
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@fortawesome/free-solid-svg-icons":"^5.12.0",
3030
"@fortawesome/react-fontawesome":"^0.1.8",
3131
"bootstrap":"^4.4.1",
32+
"faker":"^4.1.0",
3233
"react":"^16.12.0",
3334
"react-bootstrap":"^1.0.0-beta.16",
3435
"react-dom":"^16.12.0",

‎src/components/Feed/index.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
importReactfrom"react";
2+
import{Icon}from"../Icon";
3+
import{Message}from"../Message";
4+
import"./styles.css";
5+
6+
importfetchDatafrom"../../services/api";
7+
8+
exportconstFeed=()=>{
9+
constloading=true;
10+
consterror=null;
11+
constdata=null;
12+
13+
// TODO: useEffect to load state from fetchData
14+
fetchData("messages")
15+
.then(messages=>{
16+
data=messages;
17+
loading=false;
18+
})
19+
.catch(error=>{
20+
error=error;
21+
});
22+
23+
if(loading){
24+
return(
25+
<divclassName="Feed">
26+
<divclassName="Feed_Loading"title="loading">
27+
<Iconicon="loading"spinsize="lg"data-testid="loading"/>
28+
</div>
29+
</div>
30+
);
31+
}
32+
33+
if(error){
34+
return<divtitle="error">{error.message}</div>;
35+
}
36+
37+
return(
38+
<divclassName="Feed"title="feed">
39+
{data.map(post=>(
40+
<Messagekey={post.id_str}{...post}/>
41+
))}
42+
</div>
43+
);
44+
};

‎src/components/Feed/styles.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.Feed {
2+
background-color:"red";
3+
}
4+
5+
.Feed_Loading {
6+
display: flex;
7+
justify-content: center;
8+
padding-top:30px;
9+
}
File renamed without changes.

‎src/services/api.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import*asfakerfrom'faker'
2+
3+
constapi=asyncurl=>{
4+
// sign up for a developer twitter account to get real tweets
5+
// examples at https://api.twitter.com/1.1/search/tweets.json
6+
7+
// fake api delay
8+
awaitnewPromise((resolve,reject)=>{
9+
setTimeout(resolve,1500)
10+
})
11+
12+
// fake api
13+
switch(url){
14+
case'messages':
15+
// generate fake data
16+
constfakeMessages=[1,2,3,4,5,6].map(()=>({
17+
id_str:faker.random.uuid(),
18+
created_at:faker.date.recent().toISOString(),
19+
text:faker.lorem.paragraph(),
20+
retweet_count:faker.random.number(50),
21+
retweeted:false,
22+
favorite_count:faker.random.number(50),
23+
favorited:false,
24+
user:{
25+
id_str:faker.random.uuid(),
26+
name:faker.internet.userName(),
27+
screen_name:faker.internet.userName(),
28+
profile_image_url_https:faker.image.avatar(),
29+
},
30+
}))
31+
32+
returnfakeMessages
33+
default:
34+
thrownewError('Unknown API endpoint')
35+
}
36+
}
37+
38+
exportdefaultapi

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
importReactfrom"react";
22
import{MessageasUseStateMessage}from"../components/Message/useState";
3-
import{MessageasUseReducerMessage}from"../components/Message/useReducer";
3+
import{MessageasUseReducerMessage}from"../components/Message";
44
import{USER}from"../config";
55

66
exportdefault{

‎src/stories/3-Feed.stories.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
importReactfrom"react";
2+
import{Feed}from"../components/Feed";
3+
4+
exportdefault{
5+
title:"Feed"
6+
};
7+
8+
exportconstfeed=()=>{
9+
return<Feed/>;
10+
};

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
importReactfrom"react";
2+
import{render}from"@testing-library/react";
3+
import{waitForElementToBeRemoved}from"@testing-library/dom";
4+
import{Feed}from"../../components/Feed";
5+
6+
constmockData=[
7+
{
8+
id_str:"1",
9+
created_at:newDate().toISOString(),
10+
text:"Some text",
11+
retweet_count:10,
12+
retweeted:false,
13+
favorite_count:15,
14+
favorited:false,
15+
user:{
16+
id_str:"u1",
17+
name:"Some User",
18+
screen_name:"someUser",
19+
profile_image_url_https:""
20+
}
21+
}
22+
];
23+
24+
jest.mock("../../services/api.js",()=>jest.fn(async()=>mockData));
25+
26+
// UI
27+
28+
describe("Feed",()=>{
29+
// generated useEffect async warnings
30+
test("should initially display loading",()=>{
31+
constutils=render(<Feed/>);
32+
constloading=utils.getByTitle("loading");
33+
expect(loading).toBeDefined();
34+
constfeed=utils.queryByTitle("feed");// query doesn't throw
35+
expect(feed).toBe(null);
36+
});
37+
38+
test("should display feed when loaded",async()=>{
39+
constutils=render(<Feed/>);
40+
41+
awaitwaitForElementToBeRemoved(()=>{
42+
returnutils.getByTestId("loading");
43+
});
44+
constfeed=utils.getByTitle("feed");
45+
expect(feed).toBeDefined();
46+
});
47+
});

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
importReactfrom"react";
22
import{render,fireEvent}from"@testing-library/react";
3-
import{Message,messageReducer}from"../../components/Message/useReducer";
3+
import{Message,messageReducer}from"../../components/Message";
44
import{USER}from"../../config";
55

66
constmockProps={
@@ -13,7 +13,7 @@ const mockProps = {
1313
favorite_count:22
1414
};
1515

16-
describe("Message",()=>{
16+
describe.skip("Message",()=>{
1717
test("should display the initial favorite count",()=>{
1818
constutils=render(<Message{...mockProps}/>);
1919
constcount=utils.getByTitle("favorite_count");
@@ -68,7 +68,7 @@ const initialState = {
6868
favorite_count:22
6969
};
7070

71-
describe("messageReducer",()=>{
71+
describe.skip("messageReducer",()=>{
7272
test("should display the initial values",()=>{
7373
constreturnsState=messageReducer(initialState,{type:"UNKNOWN"});
7474
expect(returnsState).toEqual(initialState);

0 commit comments

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