Skip to content

Latest commit

 

History

History
78 lines (47 loc) · 5.07 KB

499.md

File metadata and controls

78 lines (47 loc) · 5.07 KB

Level 499 - Week 3 - Final Stretch Goals

1) Uploaded Date

When a user uploads a video store the date and time that they posted it at in the database.

Update your API to support this field and display this value on your Video React component.

2) Gracefully handle slow and flaky connections

There could be a lot of different ways there are connectivity issues between the frontend and the backend and is usually a good thing to prepare the client to handle errors in a graceful way.

You can test slow and flaky connections in your browser by opening up the Inspector, going to the Network tab and changing the "Throttling" setting. Changing it to for example "GPRS" will make sure that all API calls are very-very slow, so you can check how your website behaves if the connection is very slow. You can also try stopping your backend completely so calls to it would fail. Handling errors like this usually makes the website more user friendly.

Some examples of what to check:

  • If there is a slow connection what happens if I press the "Vote up" button multiple times in a short succession. Will my vote be counted? If yes, how many times?
  • If there is a slow connection what happened when I delete the video? Does it disappear immediately or only after the frontend got confirmation that the video was deleted?
  • If the backend is stopped and you try to create a new recommendation, will it appear on the frontend or not? Will the user be notified that the recommendation could not be saved?

Some examples on how to mitigate issues:

  • Use spinners or skeletons to let the user know that the website / feature is still loading.
  • After pressing a button disable the button so users can not click on it anymore until the backend confirms that the action was taken.
  • Have some kind of message or alert box on the page that shows the user a message in case there was something wrong.

3) End-to-end tests

While unit and integration tests usually only check part of the stack (like the frontend tests only check the frontend but don't connect to the backend), end to end tests are specifically designed to check the interaction of the entirety of the stack - frontend, backend and database.

Selenium

One of the most well known end-to-end test frameworks is Selenium that allows you to run a browser instance and automate what happens inside it. For example you can write Selenium code that opens up your application, then clicks the "Remove video" button on the page, checking that the vide is indeed removed from the website.

Setup

Just with the other tests we have helped you get started by setting up a test runner for your feature tests, and adding a couple tests to features/features.test.js. These tests would go through the website and check that you can do the required features.

Note: for this to work you need to make sure you have done the level 399 setup for the database. If you haven't done so please refer to that section to set up your test database.

To run your end to end tests there are two steps you need to do:

  1. First start up your application in test mode:
NODE_ENV=test npm run dev

This will start your frontend and backend and make sure the latter is connected to your test database - we don't want the feature tests to modify our normal database.

  1. In a separate terminal start the feature tests:
npm run test:features

This should start up a Google Chrome browser and automatically load up your website. After that it will click around really fast trying to delete videos and rank existing videos up and down.

Note: just like with the other tests this might fail dependent on how you have implemented your frontend, backend and database parts. Please check the test code and update it to make sure it runs successfully. Some changes that you need to do will be similar to level 199 - like if you don't have a "Remove video" button but have something else you need to change the code to find that button. Similarly the current test assumes that the HTML tag that contains the video's title and the HTML tag that contains the entire video component have two levels between them, example:

<div class="video">
	<h1>
		<a href="...">The title of the Video</a>
	</h1>
	<iframe (...)></iframe>
</div>

Here to get from the title to the video container you need to go two levels down. First to <h1>, then to <div class="video">. If your website is structured differently you will need to update this in the tests.

Enable PR tests

Tests are useful to run every time you create a PR to make sure you don't accidentally add or change code that breaks existing functionality. You can go to .github/workflows/run-features.yml and remove the comment from the line that says pull_request:. This will run the npm run test:features call every time you create a new PR blocking merging in case tests fail.

Add new test cases

You might want to add tests to cover some additional scenarios. For example if you have opted into doing the ordering feature you might want to add a test that checks that sorting by ascending and descending really updates the page to sort accordingly.