Spacestagram

Webpage that can pull images from NASA's Astronomy API, and allow the user to “like” and “unlike” their favourite images. Try it out here 👉 [https://dlabbate-spacestagram.netlify.app/]

Tech Stack

Frontend

Testing

Overview

This project pulls data from Astronomy Picture of the Day (APOD)

Responsive Masonry Layout

The fetched data is displayed in a responsive "masonry" layout.

Google Lighthouse Scores

Extras

Select a Date Range

Likes Saved to Local Storage

Lazy Loading Images

Heartbeat Animation (On Hover)

URL Link

Testing

I implemented unit tests using jest and react-testing-library. This was used to verify the functionality of various helper methods, as well as verify that components render properly. Some examples are outlined below:

const date = new Date(2021, 3, 17);

test("date is formatted in YYYY-MM-DD", () => {
  const formattedDate = formatDate(date);
  expect(formattedDate).toBe("2021-04-17");
});

test("astronomy post should be liked and unliked when clicking heart icon", () => {
  const astronomyPost = render(
    <AstronomyPost
      key={mockAstronomyPost.date}
      title={mockAstronomyPost.title}
      description={mockAstronomyPost.explanation}
      url={mockAstronomyPost.url}
      date={mockAstronomyPost.date}
      mediaType={mockAstronomyPost.media_type}
    />
  );

  fireEvent.click(astronomyPost.getByTestId("heart-icon"));
  expect(astronomyPost.getByTestId("heart-icon")).not.toHaveClass("heart");
  expect(astronomyPost.getByTestId("heart-icon")).toHaveClass("heart--active");

  fireEvent.click(astronomyPost.getByTestId("heart-icon"));
  expect(astronomyPost.getByTestId("heart-icon")).toHaveClass("heart");
  expect(astronomyPost.getByTestId("heart-icon")).not.toHaveClass(
    "heart--active"
  );
});

Note that the testing in this project is not comprehensive, but a work in progress that I would like to continue improving! I used this as an opportunity to learn more about testing methodologies and frameworks.

References

• Icons made by Flaticon