# 任务 2：MarsRover 实战演练

## 实战准备

接下来，我们可以开始执行各个子任务了。开始执行之前要回忆一下我们任务分解的两个核心：

1. 任务各自独立
2. 输入输出进行穷举

## 准备代码

```bash
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](https://2897586075-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LquCgGNObzQ8HY5Og1P%2F-M26POn8RzGpt7JmXdbN%2F-M26PPRGRKHIUhexjpVE%2Fmarsrover-sample.jpg?generation=1583893556156602\&alt=media)

通过下方的输入框，可以输入火星车命令，我们需要解析火星车命令， 提供参数给 MarsGround 组件控制我们的火星车位置。

火星车的主要逻辑是对命令进行解析，我们为大家制作了以 GUI，但是还是需要你来为火星车解析指令。其中`marsRover`负责对输入指令进行解析，然后通过`execute`方法将指令解析为火星车能够识别的格式：

### 输入指令

```bash
5 5
1 2 N
LMLMLMLMM
```

### 火星车能识别的指令

```javascript
const input = {
  X: 5,
  Y: 5,
  x: 0,
  y: 0,
  direction: 'N',
}
```

正确解析火星车指令后，输出界面中火星车的位置和朝向会做出对应改变。

我们可以看到 App.js 这个文件，其中`marsRover`是我们要完成的指令解析器：

```javascript
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`方法返回火星车的位置和朝向。 我们在代码库构建了一个初始模版:

```javascript
class MarsRover {
  execute(commandText) {
    return ''
  }
}

export default MarsRover
```

## **我希望你关注这几个问题：**

* 做完整道题用了多长时间？
* 代码质量怎么样？
* TDD 的方式顺畅吗？
* 实际做的步骤，和一开始拆分的任务是否相同？

##  参考答案

切换 git 分支，可以从 result 分支查看老师提供的标准答案。