FullStackOpen: Test Node.js app with Jest

教程:FullStackOpen2022/Part 4 软件开发的一个重要环节,就是自动化测试。 本文中以 bloglist 应用为例。对应练习 4.3-4.14。 1. 配置测试环境 通常的做法是为开发和测试定义不同的模式。而 Node 中是用 NODE_ENV 环境变量定义应用的执行模式。 在脚本中指定应用模式的方式不能在 Windows 上工作,这可以通过安装 cross-env 作为一个开发依赖包来修复。另外,如果应用是部署在 Heroku上,cross-env 作为开发依赖项可能在 web 服务器上报错,可以将 cross-env 保存为生产依赖修复这个错误。 npm install --save-dev cross-env npm i cross-env -P 通过在 package.json 中定义 npm 脚本使用跨平台兼容性的 cross-env 库来配置环境: "scripts": { "start": "cross-env NODE_ENV=production node index.js", "dev": "cross-env NODE_ENV=development nodemon index.js", "test": "cross-env NODE_ENV=test jest --verbose --runInBand" }, 对定义应用配置的模块 config.js 进行一些修改: require('dotenv').config() const PORT = process.env.PORT; const MONGODB_URI = process....

2022-04-18 · 5 min

#13 Custom Modal - Advent of JS

1. Overview Challenge & starter files: Advent of JS Full codes: nilstarbb/advent-of-js/13-custom-modal Live Demo: 13 - Custom Modal || Advent of JavaScript Preview: 2. Details Users should be able to: Click on a point on the image, that triggers the modal Click on the x within the modal to close the modal 3. Coding This is a simple one. style.css: .hidden { display: none; } script.js: const showBtn = document....

2022-04-13 · 1 min

FullStackOpen: Node project structure

教程:FullStackOpen2022/Part 4 优化应用结构 对于较小的应用,结构并不重要。可一旦应用开始增大,就必须建立某种结构,并将应用的不同职责分离到单独的模块中,使开发应用更加容易。 优化后的目录结构: ├── index.js ├── app.js ├── build │ └── ... ├── controllers │ └── blogs.js ├── models │ └── blog.js ├── package-lock.json ├── package.json ├── utils │ ├── config.js │ ├── logger.js │ └── middleware.js index.js:用于启动应用。 app.js:实际的应用。 controllers/blogs.js:路由处理程序。 models/blog.js:为 blogs 定义 Mongoose schema。 utils/logger.js:用于控制台的打印输出,告诉应用的运行状态。 utils/config.js:环境变量的处理,应用的其他部分可以通过导入配置模块来访问环境变量。 utils/middleware.js:自定义中间件模块。 以 bloglist 应用为例,将该应用重构。 初始 index.js: const http = require('http') const express = require('express') const app = express() const cors = require('cors') const mongoose = require('mongoose') const blogSchema = new mongoose....

2022-04-13 · 3 min

#12 Rock, Paper, Scissors (React.js) - Advent of JS

1. Overview Challenge & starter files: Advent of JS Full codes: nilstarbb/advent-of-js/12-rock-paper-scissors Live Demo: 12 - Rock, Paper, Scissors || Advent of JavaScript Preview: 2. Details Users should be able to: play the game and see the results 3. Coding Setup React template Please be aware: this approach is fine for learning and creating simple demos but is not suitable for production. index.html: <!DOCTYPE html> <html lang="en"> <head> ....

2022-04-12 · 3 min

#11 Accordion - Advent of JS

1. Overview Challenge & starter files: Advent of JS Full codes: nilstarbb/advent-of-js/11-accordions Live Demo: 11 - Accordions || Advent of JavaScript Preview: 2. Details Users should be able to: Click on a collapsed question to expand it and view the answer. Click on a collapsed answer to collapse it and hide the answer. 3. Coding Coding logic: Toggle the expand class in li element when clicking the question....

2022-04-11 · 1 min