任务 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 分支查看老师提供的标准答案。