Lab08 - Quiz

[TOC]

Due Date

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, 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!

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 and look at existing packages in "dependencies" and "devDependencies". Install them with:

   $ npm install

2. Install http-errors and COMP1531's custom middleware-http-errors:

   $ npm install http-errors middleware-http-errors

3. Install nyc and the type definitions @types/http-errors as development dependencies:

   $ npm install --save-dev nyc @types/http-errors

4. Open your 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
   }

5. 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 section.

6. To check that you have completed the steps correctly, compare your package.json with our sample package.json in the Additional Information section.

7. (Optional) Update .gitlab-ci.yml with testing and linting.

8. (Optional) Bonus Tips: you may find the following scripts which incorporate nodemon helpful:

   "start": "nodemon src/server.ts",
   "coverage-start": "nyc --reporter=text --reporter=lcov nodemon src/server.ts",

Interface: Routes

Name & Description	HTTP Method	Data Types	Errors
/ This is an example route that we will implement for you. Display a message when the root url of the server is accessed directly.	GET	Query Parameters {} Return Object {message}	N/A
/echo/echo This is an example route that we will implement for you. Echoes the given message back to the caller.	GET	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.	POST	Body Parameters {quizTitle, quizSynopsis} Return Object {quizId}	Throw HTTPError (code 400) when quizTitle is an empty string, "" quizSynopsis is an empty string ""
/quiz/details Get the full details about a quiz	GET	Query Parameters {quizId} Return Object {quiz}	Throw HTTPError (code 400) when quizId does not refer to a valid quiz
/quiz/edit Edit a quiz	PUT	Body Parameters {quizId, quizTitle, quizSynopsis} Return Object {}	Throw HTTPError (code 400) when quizId does not refer to a valid quiz quizTitle is an empty string, "" quizSynopsis is an empty string ""
/quiz/remove Remove a quiz	DELETE	Query Parameters {quizId} Return Object {}	Throw HTTPError (code 400) when quizId does not refer to a valid quiz
/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].	GET	Query Parameters {} Return Object {quizzes}	Throw HTTPError (code 400) when quizId does not refer to a valid quiz
/question/add Add a question to a quiz	POST	Body Parameters {quizId, questionString, questionType, answers} Return Object {questionId}	Throw HTTPError (code 400) when quizId does not refer to a valid quiz questionString is an empty string "" questionType is not either "single" or "multiple" the questionType is "single" and there is not exactly 1 correct answer there are no correct answers any of the answerString is an empty string, ""
/question/edit Edits a question	POST	Body Parameters {questionId, questionString, questionType, answers} Return Object {}	Throw HTTPError (code 400) when questionId does not refer to a valid question questionString is an empty string "" questionType is not either "single" or "multiple" the questionType is "single" and there is not exactly 1 correct answer there are no correct answers
/question/remove Remove a question	DELETE	Query Parameters {questionId} Return Object {}	Throw HTTPError (code 400) when questionId does not refer to a valid question
/clear Clear all data.	DELETE	Query Parameters {} Return Object {}	N/A

Notes:

1. The answers for each question, when returned, should be in the same order they were given.
2. IDs should always be unique. When a quiz or question is deleted, their IDs should not be re-used.
3. 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}

Task

Testing

To test your code and view the coverage results:

Terminal 1 - Server	Terminal 2 - Test
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)

TIP

• 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 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 on any of the following:

1. How did you find this activity? What were the challenges?
2. What is something you learned from this activity?
3. Given the chance, which improvement would you make to the frontend or backend of this quiz application?
4. 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

Click to view our sample package.json

Note:

1. The main keys to pay attention to are "scripts", "dependencies" and "devDependencies".
2. 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": {
    "@types/cors": "^2.8.12",
    "@types/express": "^4.17.13",
    "@types/http-errors": "^1.8.2",
    "@types/jest": "^27.5.1",
    "@types/morgan": "^1.9.3",
    "@typescript-eslint/eslint-plugin": "^5.23.0",
    "@typescript-eslint/parser": "^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"
  }
}

# comp1531 lab08 quiz # 加微信 powcoder

代做各类CS相关课程和程序语言

Programming Help Add Wechat powcoder

Email: powcoder@163.com

成功案例

java代写 c/c++代写 python代写 drracket代写 MIPS汇编代写 matlab代写 R语言代写 javascript代写

prolog代写 haskell代写 processing代写 ruby代写 scheme代写 ocaml代写 lisp代写

• 数据结构算法 data structure algorithm 代写
• 计算机网络 套接字编程 computer network socket programming 代写
• 数据库 DB Database SQL 代写
• 机器学习 machine learning 代写
• 编译器原理 Compiler 代写
• 操作系统OS(Operating System) 代写
• 计算机图形学 Computer Graphics opengl webgl 代写
• 人工智能 AI Artificial Intelligence 代写
• 大数据 Hadoop Map Reduce Spark HBase 代写
• 系统编程 System programming 代写
• 网页应用 Web Application 代写
• 自然语言处理 NLP natural language processing 代写
• 计算机体系结构 Computer Architecture 代写
• 计算机安全密码学computer security cryptography 代写
• 计算机理论 Computation Theory 代写
• 计算机视觉(Compute Vision) 代写