任务 2:MarsRover 实战演练
接下来,我们可以开始执行各个子任务了。开始执行之前要回忆一下我们任务分解的两个核心:
- 1.任务各自独立
- 2.输入输出进行穷举
git clone https://github.com/LeiZeng/tdd-marsrover
yarn install #安装依赖
yarn test #运行测试
------
PASS src/dojo/marsRover.test.js
Test MarsRover
✓ should return `1 3 N` given default commands (1ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 0.991s, estimated 1s
Ran all test suites related to changed files.
Watch Usage: Press w to show more.
框架为大家准备了一个基础的 GUI 用于展示火星车的现状,以及文本控件便于调整火星车命令,通过命令
yarn start
或者npm start
即可启动以下界面:
MarsRover UI
通过下方的输入框,可以输入火星车命令,我们需要解析火星车命令, 提供参数给 MarsGround 组件控制我们的火星车位置 。
火星车的主要逻辑是对命令进行解析,我们为大家制作了以 GUI,但是还是需要你来为火星车解析指令。其中
marsRover
负责对输入指令进行解析,然后通过execute
方法将指令解析为火星车能够识别的格式:5 5
1 2 N
LMLMLMLMM
const input = {
X: 5,
Y: 5,
x: 0,
y: 0,
direction: 'N',
}
正确解析火星车指令后,输出界面中火星车的位置和朝向会做出对应改变。
我们可以看到 App.js 这个文件,其中
marsRover
是我们要完成的指令解析器:import React from 'react'
import MarsRover from './components/Marsrover'
import marsRover from './dojo/marsRover'
const command = `5 5
1 2 N
LMLMLMLMM`
const parser = (input) => {
marsRover.execute(input)
return marsRover
}
export default function App() {
return (
<>
<h1 data-testid="title">练功房前端脚手架</h1>
<MarsRover command={command} parser={parser} />
</>
)
}
我们任务目标是实现
dojo/marsRover.js
, 让它可以解析火星车命令,并通过 excute
方法返回火星车的位置和朝向。 我们在代码库构建了一个初始模版:class MarsRover {
execute(commandText) {
return ''
}
}
export default MarsRover
- 做完整道题用了多长时间?
- 代码质量怎么样?
- TDD 的方式顺畅吗?
- 实际做的步骤,和一开始拆分的任务 是否相同?
切换 git 分支,可以从 result 分支查看老师提供的标准答案。
最近更新 2yr ago