Skip to content

Commit ed71787

Browse files
author
Hannah Dunsmore
committed
ran lint-fix
1 parent 23aa655 commit ed71787

File tree

3 files changed

+142
-121
lines changed

3 files changed

+142
-121
lines changed

‎src/App.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
import React from "react";
22
import "./App.scss";
3-
import {useState} from 'react';
4-
import MissionManifest, { rovers } from "./Components/MissionManifest/MissionManifest";
5-
6-
3+
import { useState } from "react";
4+
import MissionManifest, {
5+
rovers,
6+
} from "./Components/MissionManifest/MissionManifest";
77

88
function App() {
99
const [rover, setRover] = useState<rovers>(rovers.SPIRIT);
1010

11-
return (
12-
<MissionManifest roverType={rover} />
13-
)
11+
return <MissionManifest roverType={rover} />;
1412
}
1513

1614
export default App;

‎src/Components/MissionManifest/MissionManifest.spec.tsx‎

Lines changed: 72 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -3,80 +3,99 @@ import { getByText, render, screen, waitFor } from "@testing-library/react";
33
import App from "../../App";
44
import MissionManifest, { rovers } from "./MissionManifest";
55

6-
76
const mockManifestResponse = {
8-
photo_manifest: {
7+
photo_manifest: {
98
name: "Opportunity",
109
landing_date: "2004-01-25",
1110
launch_date: "2003-07-07",
1211
status: "complete",
1312
max_sol: 5111,
1413
max_date: "2018-06-11",
15-
total_photos: 198439
16-
}
17-
}
14+
total_photos: 198439,
15+
},
16+
};
1817

19-
beforeEach(() => {
20-
global.fetch = jest.fn().mockResolvedValue({
21-
json: jest.fn().mockResolvedValue(mockManifestResponse),
22-
});
18+
beforeEach(() => {
19+
global.fetch = jest.fn().mockResolvedValue({
20+
json: jest.fn().mockResolvedValue(mockManifestResponse),
2321
});
22+
});
2423

2524
// Ensures component renders a loading state before data arrives
2625
test("renders loading message on initial render", () => {
27-
render(<MissionManifest roverType={rovers.SPIRIT}/>);
28-
expect(screen.getByText('Loading...')).toBeInTheDocument();
29-
})
26+
render(<MissionManifest roverType={rovers.SPIRIT} />);
27+
expect(screen.getByText("Loading...")).toBeInTheDocument();
28+
});
3029

3130
test("opportunity rover renders correct p elements", async () => {
32-
render(<MissionManifest roverType={rovers.OPP}/>);
33-
const expectedTexts = ["Rover Name: ", mockManifestResponse.photo_manifest.name, "Landing Date: ", mockManifestResponse.photo_manifest.landing_date, "Launch Date: ", mockManifestResponse.photo_manifest.launch_date, "Status: ", mockManifestResponse.photo_manifest.status, "Max Sol: ", mockManifestResponse.photo_manifest.max_sol.toString(), "Max Date: ", mockManifestResponse.photo_manifest.max_date, "Total photos: ", mockManifestResponse.photo_manifest.total_photos.toString()];
34-
35-
const missionManifestContainer = await screen.findByTestId('mission-manifest-container');
36-
const pElements = missionManifestContainer.querySelectorAll('p');
31+
render(<MissionManifest roverType={rovers.OPP} />);
32+
const expectedTexts = [
33+
"Rover Name: ",
34+
mockManifestResponse.photo_manifest.name,
35+
"Landing Date: ",
36+
mockManifestResponse.photo_manifest.landing_date,
37+
"Launch Date: ",
38+
mockManifestResponse.photo_manifest.launch_date,
39+
"Status: ",
40+
mockManifestResponse.photo_manifest.status,
41+
"Max Sol: ",
42+
mockManifestResponse.photo_manifest.max_sol.toString(),
43+
"Max Date: ",
44+
mockManifestResponse.photo_manifest.max_date,
45+
"Total photos: ",
46+
mockManifestResponse.photo_manifest.total_photos.toString(),
47+
];
3748

38-
expect(pElements.length).toBe(14);
39-
pElements.forEach((p, index) => {
40-
expect(p.textContent).toBe(expectedTexts[index]);
41-
console.log(p.textContent);
42-
})
43-
})
49+
const missionManifestContainer = await screen.findByTestId(
50+
"mission-manifest-container",
51+
);
52+
const pElements = missionManifestContainer.querySelectorAll("p");
53+
54+
expect(pElements.length).toBe(14);
55+
pElements.forEach((p, index) => {
56+
expect(p.textContent).toBe(expectedTexts[index]);
57+
console.log(p.textContent);
58+
});
59+
});
4460

4561
test("opportunity rover renders correct Heading", async () => {
46-
render(<MissionManifest roverType={rovers.OPP}/>);
47-
48-
const missionManifestContainer = await screen.findByTestId('mission-manifest-container');
49-
const heading = screen.getByText('MISSION MANIFEST');
62+
render(<MissionManifest roverType={rovers.OPP} />);
5063

51-
expect(heading).toBeInTheDocument();
52-
})
64+
const missionManifestContainer = await screen.findByTestId(
65+
"mission-manifest-container",
66+
);
67+
const heading = screen.getByText("MISSION MANIFEST");
68+
69+
expect(heading).toBeInTheDocument();
70+
});
5371

5472
test("invalid rover renders correct p elements", async () => {
73+
const mockInvalidFetchResponse = {
74+
photo_manifest: {
75+
name: undefined,
76+
landing_date: undefined,
77+
launch_date: undefined,
78+
status: undefined,
79+
max_sol: undefined,
80+
max_date: undefined,
81+
total_photos: undefined,
82+
},
83+
};
84+
global.fetch = jest.fn().mockResolvedValue({
85+
json: jest.fn().mockResolvedValue(mockInvalidFetchResponse),
86+
});
5587

56-
const mockInvalidFetchResponse = {
57-
photo_manifest: {
58-
name: undefined,
59-
landing_date: undefined,
60-
launch_date: undefined,
61-
status: undefined,
62-
max_sol: undefined,
63-
max_date: undefined,
64-
total_photos: undefined
65-
}
66-
}
67-
global.fetch = jest.fn().mockResolvedValue({
68-
json: jest.fn().mockResolvedValue(mockInvalidFetchResponse),
69-
});
88+
render(<MissionManifest roverType={rovers.OPP} />);
7089

71-
render(<MissionManifest roverType={rovers.OPP}/>);
72-
73-
const missionManifestContainer = await screen.findByTestId('mission-manifest-container');
74-
const pElements = missionManifestContainer.querySelectorAll('p');
75-
let NaCounter = 0;
90+
const missionManifestContainer = await screen.findByTestId(
91+
"mission-manifest-container",
92+
);
93+
const pElements = missionManifestContainer.querySelectorAll("p");
94+
let NaCounter = 0;
7695

77-
pElements.forEach((p) => {
78-
if(p.textContent === "N/A") NaCounter++
79-
})
96+
pElements.forEach((p) => {
97+
if (p.textContent === "N/A") NaCounter++;
98+
});
8099

81-
expect(NaCounter).toBe(7);
82-
})
100+
expect(NaCounter).toBe(7);
101+
});

‎src/Components/MissionManifest/MissionManifest.tsx‎

Lines changed: 65 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,80 @@
1-
import {useState} from 'react';
2-
import {useEffect} from 'react';
3-
import { config } from 'dotenv';
4-
import { json } from 'stream/consumers';
1+
import { useState } from "react";
2+
import { useEffect } from "react";
3+
import { config } from "dotenv";
4+
import { json } from "stream/consumers";
55
import "./MissionManifest.scss";
66

77
export enum rovers {
8-
CURIOSITY = 'curiosity',
9-
OPP = 'opportunity',
10-
SPIRIT = 'spirit'
11-
};
8+
CURIOSITY = "curiosity",
9+
OPP = "opportunity",
10+
SPIRIT = "spirit",
11+
}
1212

1313
export interface MissionManifestProps {
14-
roverType: rovers;
15-
}
16-
17-
type manifestData = {
18-
name: string;
19-
landingDate: string;
20-
launchDate: string;
21-
status: string;
22-
maxSol: number;
23-
maxDate: string;
24-
totalPhotos: number
14+
roverType: rovers;
2515
}
2616

27-
17+
type manifestData = {
18+
name: string;
19+
landingDate: string;
20+
launchDate: string;
21+
status: string;
22+
maxSol: number;
23+
maxDate: string;
24+
totalPhotos: number;
25+
};
2826

2927
function MissionManifest(props: MissionManifestProps) {
30-
const apiKey = process.env.REACT_APP_API_KEY;
31-
const [manifestData, setManifestData] = useState<manifestData | null>(null);
32-
33-
useEffect(() => {
34-
fetch(`https://api.nasa.gov/mars-photos/api/v1/manifests/${props.roverType}?api_key=${apiKey}`).then(response => response.json()).then((response) => {
35-
let data = response.photo_manifest;
36-
setManifestData({
37-
name: data.name,
38-
landingDate: data.landing_date,
39-
launchDate: data.launch_date,
40-
status: data.status,
41-
maxSol: data.max_sol,
42-
maxDate: data.max_date,
43-
totalPhotos: data.total_photos
44-
})
45-
});
46-
}, [props.roverType]);
28+
const apiKey = process.env.REACT_APP_API_KEY;
29+
const [manifestData, setManifestData] = useState<manifestData | null>(null);
4730

31+
useEffect(() => {
32+
fetch(
33+
`https://api.nasa.gov/mars-photos/api/v1/manifests/${props.roverType}?api_key=${apiKey}`,
34+
)
35+
.then((response) => response.json())
36+
.then((response) => {
37+
const data = response.photo_manifest;
38+
setManifestData({
39+
name: data.name,
40+
landingDate: data.landing_date,
41+
launchDate: data.launch_date,
42+
status: data.status,
43+
maxSol: data.max_sol,
44+
maxDate: data.max_date,
45+
totalPhotos: data.total_photos,
46+
});
47+
});
48+
}, [props.roverType]);
4849

49-
if (!manifestData) {
50-
return <p>Loading...</p>
51-
} else {
50+
if (!manifestData) {
51+
return <p>Loading...</p>;
52+
} else {
5253
return (
53-
<div id='mission-manifest-container' data-testid="mission-manifest-container">
54-
<h2>MISSION MANIFEST</h2>
55-
<div id='rover-mission-info-container'>
56-
<p className='manifest-fieldname'>Rover Name: </p>
57-
<p>{manifestData.name ?? "N/A"}</p>
58-
<p className='manifest-fieldname'>Landing Date: </p>
59-
<p>{manifestData.landingDate ?? "N/A"}</p>
60-
<p className='manifest-fieldname'>Launch Date: </p>
61-
<p>{manifestData.launchDate ?? "N/A"}</p>
62-
<p className='manifest-fieldname'>Status: </p>
63-
<p>{manifestData.status ?? "N/A"}</p>
64-
<p className='manifest-fieldname'>Max Sol: </p>
65-
<p>{manifestData.maxSol ?? "N/A"}</p>
66-
<p className='manifest-fieldname'>Max Date: </p>
67-
<p>{manifestData.maxDate ?? "N/A"}</p>
68-
<p className='manifest-fieldname'>Total photos: </p>
69-
<p>{manifestData.totalPhotos ?? "N/A"}</p>
70-
</div>
54+
<div
55+
id="mission-manifest-container"
56+
data-testid="mission-manifest-container"
57+
>
58+
<h2>MISSION MANIFEST</h2>
59+
<div id="rover-mission-info-container">
60+
<p className="manifest-fieldname">Rover Name: </p>
61+
<p>{manifestData.name ?? "N/A"}</p>
62+
<p className="manifest-fieldname">Landing Date: </p>
63+
<p>{manifestData.landingDate ?? "N/A"}</p>
64+
<p className="manifest-fieldname">Launch Date: </p>
65+
<p>{manifestData.launchDate ?? "N/A"}</p>
66+
<p className="manifest-fieldname">Status: </p>
67+
<p>{manifestData.status ?? "N/A"}</p>
68+
<p className="manifest-fieldname">Max Sol: </p>
69+
<p>{manifestData.maxSol ?? "N/A"}</p>
70+
<p className="manifest-fieldname">Max Date: </p>
71+
<p>{manifestData.maxDate ?? "N/A"}</p>
72+
<p className="manifest-fieldname">Total photos: </p>
73+
<p>{manifestData.totalPhotos ?? "N/A"}</p>
7174
</div>
72-
)
73-
}
75+
</div>
76+
);
77+
}
7478
}
7579

76-
export default MissionManifest;
80+
export default MissionManifest;

0 commit comments

Comments
 (0)