Study Task 2

Workflow

This task lets you apply what you learned in this module’s lessons.

You can complete this task either as part of a team or individually.

Getting Started

  1. Fork the task repository
  2. Clone your fork locally
  3. Install dependencies with npm install
  4. The repo uses Tailwind. Run npm run dev if you want to update any styles.

Task Requirements

1. Add ESLint

Prettier is already configured in the repo but ESLint should be installed and configured.

2. Write Unit Tests

Install and configure Vitest and write unit tests for the functions in js/utils/favourites.js.

  • Is mocking required?
  • Where should the tests be placed and what should the file(s) be called?
  • What tests do we need to write to ensure the functions work as expected?

3. Write end-to-end Tests

Install and configure Playwright.

  • How can we make sure that Vitest does not try to run the Playwright tests?

  1. About page

    • Go to the About page and ensure that the text “Welcome to News Portal” is on the page.

  2. Single article page

    • Go to the single article page.
    • Does the page display the correct message when there is no id in the querystring?
    • Does the page display the correct message when the id in the querystring does not exist?

  3. Favourites

    • On the home page, add an article as a favourite
    • Go to the favourites page and ensure the correct article is displayed

  4. Contact form

    • Submit the contact form
    • Is a message displayed when the form is successfully submitted?
    • Is an appropriate message displayed when submission fails?

  5. Improving the favourites code

    • The click event for adding an article to favourites is in the createArticleCard function.
    • Is this the best place for the code? Could we refactor it to make it more testable?
    • On the favourites page removing a favourite will not remove it from the rendered favourites.
    • How can we improve the code to remove it from the page when the favourite buton is clicked?
    • Write an e2e test to test this improved code.

  6. Improving the login code

    • The code to login is handled in js/auth/login.js.
    • How can we improve this code to more closely follow the structure used for the contact form.
    • Do we need more helper functions here? If so create and write unit tests for it/them.

4. Create Pull Requests

It’s far easier to review small, focused PRs. Try the following process:

  • Create a Github Project.
  • Create an issue for each task.
  • Create a branch for each issue using Github’s UI.
  • Attempt the task and create a PR into your main branch. Request reviews either via Github or on Teams.
  • Implement any feedback received and merge the PR.
  • Review others’ PRs

5. Add a README

Add a README with required details and instructions.