Instructions

Please read the following instructions carefully. If any part is unclear or you have questions, contact the designated teachers through Microsoft Teams direct message.

If you are struggling to understand the Course Assignment instructions, contacting your teachers for help is perfectly acceptable.

Please understand that the teachers cannot give students the answers or step-by-step instructions on how to implement course assignment requirements, as the Course Assignments, Projects and Exams are graded assessments. Teachers can, however, give clarification on Course Assignment instructions if needed.

The course assignment will be graded on a “pass/not pass” basis.

Note about commits

Only commits made in the GitHub PR will be considered for grading. Ensure all your work is committed before the course assignment deadline. After the deadline, you cannot commit any more code to your PR. Any attempts to commit after the deadline will be automatically rejected.

Please ensure you give the teacher access to your GitHub repository if it is not public (Github username: cnnrbrn).

Goal

The objective of this assignment is to apply the skills and knowledge gained during the workflow course to enhance the quality of a website. You will do this by configuring tools and defining tests that improve the efficiency of the development process.

Brief

  1. Fork the Project Repository: The repo is here. Start by creating a fork of the repo in your GitHub account.
  2. Create a New Branch: Name this branch workflow.
    1. Make sure to keep all changes in the workflow branch as this will be needed for the PR. So if you do use sub-branches, make sure they are merged into the workflow branch. Don’t merge into the main branch.
  3. Set Up Development Tools:
    1. Install and configure ESLint and Prettier
    2. ESLint must be configured to handle the globals used in the test files
    3. Set up commit hooks to ensure staged code is checked before being committed. Format HTML files and format and lint JavaScript files.
  4. Set Up Testing Tools:
    1. Install and configure Vitest for unit testing and test these cases:
      1. isActivePath function:
        1. Returns true when current path matches href exactly
        2. Returns true for root path (“/”) when path is “/” or “/index.html”
        3. Returns true when current path includes the href
        4. Returns false when paths don’t match
      2. getUserName function:
        1. Test that it returns the name from the user object in storage (first save a user object to storage)
        2. Test that it returns null when no user exists in storage
    2. Install and configure Playwright for e2e testing and test these two cases:
      1. login:
        1. User can successfully log in with valid credentials from environment variables. (If the login details from the lesson do not work, you can create a new user by running the project and using the register form)
        2. User sees an error message with invalid credentials
        3. Be sure to include .env in the gitignore and include an .env.example in the branch
      2. navigation:
        • Write a test that:
          1. Navigates to the home page
          2. Waits for the venue list to load
          3. Clicks the first venue
          4. Verifies that when the venue details page loads there are the words “Venue details” in the heading

  5. Update the README. The README in the repo is almost empty. Update it to include the instructions for the repo, for example, npm install, npm run test, and any other scripts you add to the project. It should also include the names of the required environment variables (though not the actual values).

  6. Submit Your Work:
    1. Open a Pull Request (PR) from your workflow branch into your own repo’s main branch.
    2. Do not merge the PR.
    3. Request a review from peers, incorporate feedback, and make any necessary changes. This is optional and not required to pass the CA.
    4. Submit your PR link on Moodle
  • You must deliver an open Pull Request (PR) link from the workflow branch into your fork’s main branch.
  • There is no requirement to host the forked project.

Resources

The repo: https://github.com/NoroffFEU/workflow-repo-ca

Checklist

  • Eslint is installed and configured to handle test globals
  • Prettier is installed and configured
  • Pre-commit hooks have been set up to handle linting and formatting
  • Vitest has been installed and configured
  • The relevant unit tests have been written and pass
  • Playwright has been installed and configured
  • The relevant e2e tests have been written and pass
  • The README has been updated with the relevant scripts and environment variable examples
  • .env is in .gitignore
  • There is a .env.example file in the branch
Tags: