# Lab08 – Quiz
## Due Date
Copyright By PowCoder代写 加微信 powcoder
Week 9 Monday 5:00 pm AEST
## Background
### Rationale
Now that we’ve learned how to use `jest –coverage` …
– **Question**: is it possible to measure the code of our express server this way?
– **Answer**: No, no, no (we don’t talk about Bruno ~).
Unfortunately, our test with jest, which utilises [sync-request](https://www.npmjs.com/package/sync-request), is only making HTTP requests to a server at a certain URL address. Visually, this looks like
+—————-+ +—————-+
| | >>>> HTTP Requests >>>> | |
| Jest tests | | Express server |
| | <<<< HTTP Response <<<< | |
+----------------+ +----------------+
This means that Jest does not know about the implementation of our server (only what comes in and out) and thus cannot measure coverage directly.
So... how can we measure the code coverage of our server? You guessed it, it's by directly measuring coverage when running the server itself - we can do this with a nifty tool called [nyc](https://www.npmjs.com/package/nyc)!
In addition to measuring our server code coverage, we will also be throwing HTTPErrors and utilising COMP1531's custom middleware for error handling in this lab. Many questions, and many more answers to come!
### Getting Started
- Please ensure that you have completed lab08_objection prior.
- Copy the SSH clone link from Gitlab and clone this repository on either VLAB or your local machine.
- In your terminal, change your directory (using the `cd` command) into the newly cloned lab.
### Package Installation
1. Open [package.json](package.json) and look at existing packages in `"dependencies"` and `"devDependencies"`. Install them with:
$ npm install
1. Install [http-errors](https://www.npmjs.com/package/http-errors) and COMP1531's custom [middleware-http-errors](https://www.npmjs.com/package/middleware-http-errors):
$ npm install http-errors middleware-http-errors
1. Install [nyc](https://www.npmjs.com/package/nyc) and the type definitions as development dependencies:
$ npm install --save-dev nyc @types/http-errors
1. Open your [package.json](package.json) and add the following scripts:
"scripts": {
"ts-node": "ts-node",
"ts-node-coverage": "nyc --reporter=text --reporter=lcov ts-node",
"test": "jest src",
"tsc": "tsc --noEmit",
"lint": "eslint src/**.ts"
// Any other scripts you want here
1. Notice in the `ts-node-coverage` script we have added `nyc --reporter=text --reporter=lcov` before running `ts-node`:
- `nyc` - to measure our server code coverage.
- `--reporter=text` - display coverage results to the terminal when the server closes.
- `--reporter=lcov` - also generates a `coverage/lcov-report/index.html` file for us to open in our browser.
- Further instructions on server coverage can be found in the [Testing](#testing) section.
1. To check that you have completed the steps correctly, compare your [package.json](package.json) with our sample package.json in the [Additional Information](#additional-information) section.
1. (Optional) Update [.gitlab-ci.yml](.gitlab-ci.yml) with testing and linting.
1. (Optional) Bonus Tips: you may find the following scripts which incorporate [nodemon](https://www.npmjs.com/package//nodemon) helpful:
"start": "nodemon src/server.ts",
"coverage-start": "nyc --reporter=text --reporter=lcov nodemon src/server.ts",
### Interface: Routes
/
This is an example route that we will implement for you.
Display a message when the root url of the server is accessed directly.
Query Parameters
{}
Return Object
{message}
/echo/echo
This is an example route that we will implement for you.
Echoes the given message back to the caller.
Query Parameters
{message}
Return Object
{message}
Throw HTTPError (code 400) when the message passed in is exactly echo.
/quiz/create
Create a quiz and return its corresponding id.
Body Parameters
{quizTitle, quizSynopsis}
Return Object
{quizId}
Throw HTTPError (code 400) when
"""" /quiz/details
Get the full details about a quiz
Query Parameters
{quizId}
Return Object
{quiz}
Throw HTTPError (code 400) when
/quiz/edit
Edit a quiz
Body Parameters
{quizId, quizTitle, quizSynopsis}
Return Object
{}
Throw HTTPError (code 400) when
"""" /quiz/remove
Remove a quiz
Query Parameters
{quizId}
Return Object
{}
Throw HTTPError (code 400) when
/quizzes/list
Get brief details about all quizzes, in the order that they were created.
For example, if we create q1, q2 and q3, the returned order is
[q1, q2, q3].
Query Parameters
{}
Return Object
{quizzes}
Throw HTTPError (code 400) when
/question/add
Add a question to a quiz
Body Parameters
{quizId, questionString, questionType, answers}
Return Object
{questionId}
Throw HTTPError (code 400) when
""answerString is an empty string, "" /question/edit
Edits a question
Body Parameters
{questionId, questionString, questionType, answers}
Return Object
{}
Throw HTTPError (code 400) when
"" /question/remove
Remove a question
Query Parameters
{questionId}
Return Object
{}
Throw HTTPError (code 400) when
/clear
Clear all data.
Query Parameters
{}
Return Object
{}
#### Notes:
1. The `answers` for each question, when returned, should be in the same order they were given.
1. IDs should always be unique. When a quiz or question is deleted, their IDs should not be re-used.
1. For arrays of objects, they should be returned in the order the objects were created, similar to the example given in `/quizzes/list`.
### Interface: Data Types
| Variable Name | Type |
| — | — |
| contains prefix **is** | `boolean` |
| contains suffix **Id** | `number` |
| contains suffix **String** | `string` |
| is exactly **message** | `string` |
| is exactly **quizTitle** | `string` |
| is exactly **quizSynopsis** | `string` |
| is exactly **questionType** | `string` – reminder: valid types are ‘single’ and ‘multiple’ |
| is exactly **answers** | `Array` of objects, where each `object` contains keys `{isCorrect, answerString}` |
| is exactly **questions** | `Array` of objects, where each `object` contains keys `{questionId, questionString, questionType, answers}` |
| is exactly **quiz** | Object containing keys `{quizId, quizTitle, quizSynopsis, questions}` |
| is exactly **quizzes** | `Array` of objects, where each `object` contains the keys `{quizId, quizTitle}` |
### Testing
To test your code and *view the coverage results*:
Step 1: $ npm run ts-node-coverage src/server.ts
Step 2: $ npm test
Step 3: Ctrl+C to close the server. Brief coverage details should be displayed.
Step 4: Open coverage/lcov-report/index.html in a browser (e.g. Firefox/Google Chrome)
– Step 4 only needs to be done once, you can refresh the `index.html` page after repeating steps 1-3 to get updated results.
### Implementation
In this lab, we recommend keeping your routes in [src/server.ts](src/server.ts) as wrappers around other functions.
Also, a reminder that for GET requests, data is transferred through the query string, whereas for PUT/POST/DELETE, this is done through the JSON body.
### Frontend
A prototype frontend for the forum application is hosted at:
– https://comp1531frontend.gitlab.io/quiz/home
To use the frontend, simply paste your backend URL (e.g. http://127.0.0.1:49152) into the input box.
While additional error checking has been built into the frontend, it is not uncommon to encounter a blank/white screen. This is usually attributed to having an incorrect return type in one of the routes from your backend, most commonly from `GET` requests such as `quiz/details` or `quizzes/list`.
### Share your experience!
Share your thoughts [HERE](https://cgi.cse.unsw.edu.au/~cs1531/redirect_activity/?activity=lab08_quiz) on any of the following:
1. How did you find this activity? What were the challenges?
1. What is something you learned from this activity?
1. Given the chance, which improvement would you make to the frontend or backend of this quiz application?
1. Without spoiling the lab, do you have any tips or resources that may help other students?
## Submission
– Use `git` to `add`, `commit`, and `push` your changes on your master branch.
– Check that your code has been uploaded to your Gitlab repository on this website (you may need to refresh the page).
**If you have pushed your latest changes to master on Gitlab no further action is required! At the due date and time, we automatically collect your work from what’s on your master branch on Gitlab.**
## Additional Information
### Sample package.json
1. The main keys to pay attention to are `”scripts”`, `”dependencies”` and `”devDependencies”`.
1. It is fine if the versions of your packages are newer.
“name”: “lab08_quiz”,
“version”: “1.0.0”,
“description”: “[TOC]”,
“main”: “src/server.ts”,
“scripts”: {
“ts-node”: “ts-node”,
“ts-node-coverage”: “nyc –reporter=text –reporter=lcov ts-node”,
“test”: “jest src”,
“tsc”: “tsc –noEmit”,
“lint”: “eslint src/**.ts”
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“^2.8.12”,
“^4.17.13”,
“^27.5.1”,
“^5.23.0”,
“^5.23.0”,
“eslint”: “^8.15.0”,
“eslint-plugin-jest”: “^26.2.1”,
“jest”: “^28.1.0”,
“nodemon”: “^2.0.16”,
“nyc”: “^15.1.0”,
“sync-request”: “^6.1.0”,
“ts-jest”: “^28.0.2”,
“ts-node”: “^10.7.0”,
“typescript”: “^4.6.4”
“dependencies”: {
“cors”: “^2.8.5”,
“express”: “^4.18.1”,
“http-errors”: “^2.0.0”,
“middleware-http-errors”: “^0.1.0”,
“morgan”: “^1.10.0”
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com