This repository supports the Software Testing course for the MS Software Design and Engineering program at Quantic School of Business & Technology.
- What is Hangry Hippo?
- Requirements
- Local Installation
- Running the Back End
- Running Back End Unit Tests
- Running the Front End
- Running Front End Functional Tests
- Running User Acceptance Tests
- More Information about Testing
Hangry Hippo is a (fictitious) new fast-food company. They’re currently developing an online ordering system to debut during their grand opening, which means they need to implement sound testing protocols to make sure the system works perfectly from the start.
The Hangry Hippo app is divided into a back end and a front end. It is preferred, but not required, that you have a GitHub account and the Git command line interface (cli) installed.
The app's back end was originally created using django and the django REST framework. For more information, read here.
The back end requires Python 3.8. To make sure this is what your machine is working with, we recommend using this Python version manager.
The front end was originally created using Create React App, and it requires Node 18. To make sure this is what your machine is working with, we recommend using this Node version manager.
-
Clone the repo.
git clone git@github.com:quasifu/quantic-test-course.git
-
Navigate to the
backend
directory.Windows:
cd quantic-test-courses\backend\hangry_api
macOS/Linux:
cd quantic-test-course/backend/hangry_api
-
Set up a virtual environment.
python3 -m venv env
Note:
python3 -m venv env
sets up a separate environment where pip can install packages without affecting your global Python installation (ifpython3
fails, trypython
). -
Activate the environment.
Windows:
env\Scripts\activate
macOS/Linux:
. env/bin/activate
Note: The
activate
script activates that environment, after which your command prompt will change to reflect that you're in theenv
environment. You only need to create the environment once; then, for subsequent sessions, just activate the environment with theactivate
script. To exit the environment, use thedeactivate
command. You can learn more about thevenv
module here. -
Install the dependencies.
pip install -r requirements.txt
-
Run the server
manage.py runserver
Note: If the current working directory isn't included in your OS's PATH environment variable, you'll need to prepend it to the command like so:
Windows:
.\manage.py runserver
macOS/Linux:
./manage.py runserver
-
Verify the server is running by accessing the following API's.
-
Install the test dependencies.
pip install pytest django_mock_queries six coverage
-
Run the tests.
coverage run -m --source=./hangry_api pytest
Note: The server should not be running when you run tests.
-
As a result, you should see something like
================= test session starts =================== platform linux -- Python 3.8.13, pytest-7.1.2, pluggy-1.0.0 rootdir: ./quantic-test-course/backend/hangry_api collected 5 items tests/test_DeliveryCost.py ... [ 50%] tests/test_SubtotalCost.py .. [ 83%] tests/test_Tax.py ........... [100%] ================= 5 passed in 0.16s =====================
-
[Optional] Generate a coverage report:
coverage report
Example Report:
Name Stmts Miss Cover ---------------------------------------------------------------------------- hangry_api/api/__init__.py 0 0 100% hangry_api/api/admin.py 5 5 0% hangry_api/api/apps.py 4 4 0% hangry_api/api/controllers.py 23 2 91% hangry_api/api/migrations/0001_initial.py 5 5 0% hangry_api/api/migrations/0002_food_category_alter_food_p... 5 5 0% hangry_api/api/migrations/__init__.py 0 0 100% hangry_api/api/models.py 17 17 0% hangry_api/api/serializers.py 23 23 0% hangry_api/api/tests.py 1 1 0% hangry_api/api/urls.py 3 3 0% hangry_api/api/views.py 84 84 0% hangry_api/hangry_api/__init__.py 0 0 100% hangry_api/hangry_api/asgi.py 4 4 0% hangry_api/hangry_api/settings.py 19 19 0% hangry_api/hangry_api/urls.py 3 3 0% hangry_api/hangry_api/wsgi.py 4 4 0% hangry_api/manage.py 12 12 0% hangry_api/tests/__init__.py 0 0 100% hangry_api/tests/test_DeliveryCost.py 22 0 100% hangry_api/tests/test_SubtotalCost.py 15 0 100% hangry_api/tests/test_Tax.py 7 0 100% ---------------------------------------------------------------------------- TOTAL 254 191 25%
-
Navigate to the
frontend
directory.cd frontend
-
Install the dependencies.
npm install
-
Run the server.
npm run start
-
A new browser window will open Hangry Hippo at http://localhost:3000
-
[Optional] To use the local back-end APIs, make sure both servers (front-end and back-end) are running. Then, update ./frontend/src/utils/constants.js by replacing this line:
export const API_URL = 'http://hangry-api-dev.us-east-1.elasticbeanstalk.com';
with this line:
export const API_URL = 'http://localhost:8000';
-
Run the tests from the
frontend
directory.npm test
-
As a result, you should see something like
PASS src/pages/Home/Home.test.js PASS src/App.test.js Test Suites: 2 passed, 2 total Tests: 3 passed, 3 total Snapshots: 0 total Time: 2.715 s, estimated 3 s Ran all test suites.
-
Run Cypress from the
frontend
directory.node_modules/.bin/cypress run
-
Verify that the tests were run. You should see something like
============================================== (Run Starting) ┌─────────────────────────────────────────────┐ │ Cypress: 10.3.0 │ │ Browser: Electron 100 (headless) │ │ Node Version: v18.5.0 │ │ Specs: 1 found (spec.cy.js) │ │ Searched: cypress/e2e/**/*.cy.{js,jsx}│ └─────────────────────────────────────────────┘ ─────────────────────────────────────────────── Running: spec.cy.js (1 of 1) Hits Home Page ✓ passes (772ms) ✓ displays the Welcome message (76ms) Hits Order Page ✓ passes (426ms) ✓ shows Your Order title (109ms) 4 passing (4s) (Results) ┌────────────────────────────────────────────┐ │ Tests: 4 │ │ Passing: 4 │ │ Failing: 0 │ │ Pending: 0 │ │ Skipped: 0 │ │ Screenshots: 0 │ │ Video: true │ │ Duration: 3 seconds │ │ Spec Ran: spec.cy.js │ └────────────────────────────────────────────┘ (Video) - Started processing: Compressing to 32 CRF - Finished processing: /quantic-test-course/frontend/cypress/videos/spec.cy.js.mp4 (2 seconds) =============================================== (Run Finished) Spec Tests Passing Failing Pending Skipped ┌─────────────────────────────────────────────────────────┐ │ ✔spec.cy.js(00:03) 4 4 - - - │ └─────────────────────────────────────────────────────────┘ ✔All specs passed! 4 4 - - -
-
[Optional] To watch the automated acceptance test run, open the video located at
/frontend/cypress/videos/spec.cy.js.mp4
-
[Optional] To run the tests using the Cypress application, open cypress.
node_modules/.bin/cypress open
Unit testing is implemented in the backend
directory using pytest.
Functional testing is implemented in the frontend
directory for the Home
page using jest.
Acceptance tests are implemented in the frontend
directory for the Home
and Order
pages using cypress.
Security testing is implemented in the frontend
directory using ZAP. For more information on security testing, visit OWASP.
All of the tests are automated into the CI/CD pipeline using GitHub Actions. GitHub Actions are defined in this repository in the .github/workflows
folder. Feel free to view the automated runs under the Actions tab of this repository.
© 2022 Quantic School of Business and Technology