Created
September 21, 2020 10:41
-
-
Save dearshrewdwit/630cf3735e0ce9a1a30493ccfea950c1 to your computer and use it in GitHub Desktop.
A simple approach building a component that request data from an API
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // -------------------------------------------------------------------------------- | |
| // Headlines.test.js | |
| // -------------------------------------------------------------------------------- | |
| import React from 'react' | |
| import { render, screen, waitForElement } from '@testing-library/react' | |
| import Headlines from './Headlines' | |
| import mockResponse from './__mocks__/guardian-response.json' | |
| // mock fetch and return the mock response json | |
| jest.spyOn(global, "fetch").mockImplementation(() => { | |
| return Promise.resolve({ | |
| json: () => Promise.resolve(mockResponse) | |
| }) | |
| }) | |
| test("shows headlines", async () => { | |
| render(<Headlines />) | |
| const element = await waitForElement(() => screen.getByText("I AM A TEST RESPONSE")) | |
| expect(element).toBeInTheDocument() | |
| }) | |
| // -------------------------------------------------------------------------------- | |
| // Headlines.js | |
| // -------------------------------------------------------------------------------- | |
| import React, { Component } from 'react' | |
| class Headlines extends Component { | |
| constructor(props) { | |
| super(props) | |
| this.state = { items: [] } | |
| } | |
| componentDidMount() { | |
| fetch("http://news-summary-api.herokuapp.com/guardian?apiRequestUrl=http://content.guardianapis.com/search?q=coronavirus") | |
| .then(response => response.json()) | |
| .then(data => { | |
| this.setState({items: data["response"]["results"]}) | |
| }) | |
| } | |
| render() { | |
| return ( | |
| <div className="headlines"> | |
| {this.state.items.map((item, index) => <p key={index}><a href={item["webUrl"]}>{item["webTitle"]}</a></p>)} | |
| </div> | |
| ) | |
| } | |
| } | |
| export default Headlines | |
| // -------------------------------------------------------------------------------- | |
| // __mocks__/guardian-response.json | |
| // -------------------------------------------------------------------------------- | |
| { | |
| "response": { | |
| "status": "ok", | |
| "userTier": "developer", | |
| "total": 21928, | |
| "startIndex": 1, | |
| "pageSize": 10, | |
| "currentPage": 1, | |
| "pages": 2193, | |
| "orderBy": "relevance", | |
| "results": [ | |
| { | |
| "id": "world/2020/sep/20/protests-madrid-coronavirus-lockdown-measures-spain", | |
| "type": "article", | |
| "sectionId": "world", | |
| "sectionName": "World news", | |
| "webPublicationDate": "2020-09-20T14:09:13Z", | |
| "webTitle": "I AM A TEST RESPONSE", | |
| "webUrl": "https://www.theguardian.com/world/2020/sep/20/protests-madrid-coronavirus-lockdown-measures-spain", | |
| "apiUrl": "https://content.guardianapis.com/world/2020/sep/20/protests-madrid-coronavirus-lockdown-measures-spain", | |
| "isHosted": false, | |
| "pillarId": "pillar/news", | |
| "pillarName": "News" | |
| }, | |
| { | |
| "id": "uk-news/2020/aug/18/coronavirus-government-eases-leicester-lockdown-again", | |
| "type": "article", | |
| "sectionId": "uk-news", | |
| "sectionName": "UK news", | |
| "webPublicationDate": "2020-08-18T13:43:52Z", | |
| "webTitle": "Coronavirus: government eases Leicester lockdown", | |
| "webUrl": "https://www.theguardian.com/uk-news/2020/aug/18/coronavirus-government-eases-leicester-lockdown-again", | |
| "apiUrl": "https://content.guardianapis.com/uk-news/2020/aug/18/coronavirus-government-eases-leicester-lockdown-again", | |
| "isHosted": false, | |
| "pillarId": "pillar/news", | |
| "pillarName": "News" | |
| }, | |
| { | |
| "id": "world/2020/sep/09/coronavirus-testing-the-pm-fact-checked", | |
| "type": "article", | |
| "sectionId": "world", | |
| "sectionName": "World news", | |
| "webPublicationDate": "2020-09-09T17:58:58Z", | |
| "webTitle": "Coronavirus testing: the PM fact-checked", | |
| "webUrl": "https://www.theguardian.com/world/2020/sep/09/coronavirus-testing-the-pm-fact-checked", | |
| "apiUrl": "https://content.guardianapis.com/world/2020/sep/09/coronavirus-testing-the-pm-fact-checked", | |
| "isHosted": false, | |
| "pillarId": "pillar/news", | |
| "pillarName": "News" | |
| }, | |
| { | |
| "id": "world/2020/jul/03/coronavirus-the-week-explained", | |
| "type": "article", | |
| "sectionId": "world", | |
| "sectionName": "World news", | |
| "webPublicationDate": "2020-07-03T11:03:46Z", | |
| "webTitle": "Coronavirus: the week explained", | |
| "webUrl": "https://www.theguardian.com/world/2020/jul/03/coronavirus-the-week-explained", | |
| "apiUrl": "https://content.guardianapis.com/world/2020/jul/03/coronavirus-the-week-explained", | |
| "isHosted": false, | |
| "pillarId": "pillar/news", | |
| "pillarName": "News" | |
| }, | |
| { | |
| "id": "music/2020/jun/10/saving-classical-music-from-coronavirus", | |
| "type": "article", | |
| "sectionId": "music", | |
| "sectionName": "Music", | |
| "webPublicationDate": "2020-06-10T17:38:03Z", | |
| "webTitle": "Saving classical music from coronavirus | Letters", | |
| "webUrl": "https://www.theguardian.com/music/2020/jun/10/saving-classical-music-from-coronavirus", | |
| "apiUrl": "https://content.guardianapis.com/music/2020/jun/10/saving-classical-music-from-coronavirus", | |
| "isHosted": false, | |
| "pillarId": "pillar/arts", | |
| "pillarName": "Arts" | |
| }, | |
| { | |
| "id": "society/2020/aug/06/how-has-coronavirus-impacted-your-mental-health", | |
| "type": "article", | |
| "sectionId": "society", | |
| "sectionName": "Society", | |
| "webPublicationDate": "2020-08-06T16:54:17Z", | |
| "webTitle": "How has coronavirus impacted your mental health?", | |
| "webUrl": "https://www.theguardian.com/society/2020/aug/06/how-has-coronavirus-impacted-your-mental-health", | |
| "apiUrl": "https://content.guardianapis.com/society/2020/aug/06/how-has-coronavirus-impacted-your-mental-health", | |
| "isHosted": false, | |
| "pillarId": "pillar/news", | |
| "pillarName": "News" | |
| }, | |
| { | |
| "id": "world/2020/jun/05/coronavirus-latest-at-a-glance-5-june-2020", | |
| "type": "article", | |
| "sectionId": "world", | |
| "sectionName": "World news", | |
| "webPublicationDate": "2020-06-05T17:21:02Z", | |
| "webTitle": "Coronavirus latest: at a glance", | |
| "webUrl": "https://www.theguardian.com/world/2020/jun/05/coronavirus-latest-at-a-glance-5-june-2020", | |
| "apiUrl": "https://content.guardianapis.com/world/2020/jun/05/coronavirus-latest-at-a-glance-5-june-2020", | |
| "isHosted": false, | |
| "pillarId": "pillar/news", | |
| "pillarName": "News" | |
| }, | |
| { | |
| "id": "world/2020/sep/01/pitiful-payments-for-coronavirus-self-isolators", | |
| "type": "article", | |
| "sectionId": "world", | |
| "sectionName": "World news", | |
| "webPublicationDate": "2020-09-01T16:28:32Z", | |
| "webTitle": "Pitiful payments for coronavirus self-isolators | Letter", | |
| "webUrl": "https://www.theguardian.com/world/2020/sep/01/pitiful-payments-for-coronavirus-self-isolators", | |
| "apiUrl": "https://content.guardianapis.com/world/2020/sep/01/pitiful-payments-for-coronavirus-self-isolators", | |
| "isHosted": false, | |
| "pillarId": "pillar/news", | |
| "pillarName": "News" | |
| }, | |
| { | |
| "id": "australia-news/2020/aug/28/coronavirus-australia-latest-the-week-at-a-glance", | |
| "type": "article", | |
| "sectionId": "australia-news", | |
| "sectionName": "Australia news", | |
| "webPublicationDate": "2020-08-28T09:15:10Z", | |
| "webTitle": "Coronavirus Australia latest: the week at a glance", | |
| "webUrl": "https://www.theguardian.com/australia-news/2020/aug/28/coronavirus-australia-latest-the-week-at-a-glance", | |
| "apiUrl": "https://content.guardianapis.com/australia-news/2020/aug/28/coronavirus-australia-latest-the-week-at-a-glance", | |
| "isHosted": false, | |
| "pillarId": "pillar/news", | |
| "pillarName": "News" | |
| }, | |
| { | |
| "id": "tv-and-radio/2020/jun/29/catchphrase-restarts-filming-after-coronavirus-lockdown-itv", | |
| "type": "article", | |
| "sectionId": "tv-and-radio", | |
| "sectionName": "Television & radio", | |
| "webPublicationDate": "2020-06-29T06:00:00Z", | |
| "webTitle": "Catchphrase restarts filming after coronavirus lockdown", | |
| "webUrl": "https://www.theguardian.com/tv-and-radio/2020/jun/29/catchphrase-restarts-filming-after-coronavirus-lockdown-itv", | |
| "apiUrl": "https://content.guardianapis.com/tv-and-radio/2020/jun/29/catchphrase-restarts-filming-after-coronavirus-lockdown-itv", | |
| "isHosted": false, | |
| "pillarId": "pillar/arts", | |
| "pillarName": "Arts" | |
| } | |
| ] | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment