Countries

• Overview
• Viewing the deployed application
• Decisions made
• Documentation
  • Starting React Storybook
• Running the Application Locally
• Using Codespaces
• Running Tests
  • Running Unit/Integration tests
  • Running End-to-End tests

Overview

This app is meant as a resource for finding information about various countries, like currency, language spoken, and continent. It is based off the Countries API by @trevorblades.

The original project was based on this Next.js codespaces template which is a thin wrapper around the nextjs base project.

Viewing the deployed application

This application is deployed to Vercel automatically on merges to the main branch. It lives at this url

Decisions made

This project included a lot of large and small decisions on technical features, libraries, and organizational strategies. These decisions are logged in the DECISION-RECORD file.

Documentation

Much of this project is documented using React Storybook. This project has a publicly published storybook instance for viewing components and reading docs.

In most src/components directory, there are index.stories.tsx and docs.mdx files. These files include programmatic sandboxes and written documentation on the usage, accessibility concerns, and props for each of the built components.

Note: There is a docs and a canvas tab at the top of each page. The docs tab is there to display the docs.mdx files, and the canvas tab is the rendering of the examples defined in the index.stories.mdx file. You can use the left sidebar to navigate between components.

Starting React Storybook

You can also run storybook locally if you'd like. To run storybook, clone this repo and then run the following (requires yarn to be installed previously):

cd countries

# install dependencies
yarn

npm run storybook

Once up and running, go to localhost:6006 to see the app running.

Running the application locally

To run this application, clone this repo and then run the following (requires yarn to be installed previously):

cd countries

# install dependencies
yarn

# starts nextjs development server
npm run dev

Once up and running, go to localhost:3000 to see the app running.

Using Codespaces

This app is set up to be developed in Github Codespaces.

To edit this project, click the Code button at the top right of this page.

Click on the Codespaces tab and follow the instructions to spin up your own codespace.

Running Tests

There are three kinds of tests used in this project:

1. Unit tests on individual components to test specific functionality in an isolated environment.

• These are found in the src/components/* directories under the index.spec.tsx files.

2. Integration tests rendering a single page (feature) and using mocked data to ensure proper rendering of the page.

• These are found in the src/pages directory under the index.spec.tsx files.

3. End-to-end tests, which run the application and fetch real-world data. These tests act like a user and make assertions about the app's state based on click and navigation interaction like a user would.

• These tests are found under the cypress/e2e directory.
• An output file is saved to cypress/videos showing the last run of these tests.

Running Unit/Integration tests

To run unit & intergration tests, make sure dependencies are installed and run

yarn test:unit

Running End-to-End tests

To run e2e tests, make sure dependencies are installed and run:

yarn test:e2e:dev

You may need to stop any running instance of yarn dev that currently is running on your machine.