【Day 19】E2Eテスト - gauge ts

## はじめに

![スライド20.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/a9bd06e4-c2d3-2bd9-b2f9-b643c9eb0e88.png)

---

**2023年アドベントカレンダー19日目**です。

https://qiita.com/advent-calendar/2023/life-sync-app

本日は「ユーザーはトップページでブログタイトルの一覧を見ることができる」を進めていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/6eb0ef2a-c7f4-7a75-add7-a866d28b214d.png)

APIのE2Eテスト環境を`Gauge`と`TypeScript`で構築していきます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/e4ec391c-9816-dcf3-16e6-36163fb38e54.png)

## Gauge

### Gaugeとは

Gaugeとは、オープンソースのテスト自動化フレームワークです。
大きな特徴として、テストケースをMarkdown形式で書くことができます。これにより、テスト仕様を非技術者にとっても読みやすくなります。

### Install

こちらのページから自分に合ったものをInstallしていきましょう

https://docs.gauge.org/getting_started/installing-gauge.html?os=linux&language=javascript&ide=vscode

versionが出ていればInstall完了です。

```bash
$ gauge version
Gauge version: 1.5.6
Commit Hash: 9b96118

Plugins
-------
html-report (4.2.0)
java (0.10.3)
screenshot (0.1.0)
```

次にお使いのIDEに拡張機能も入れていきます

- VSCode
  - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/b7792d30-dba6-630f-23b4-76b916797e89.png)
- IntelliJ
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/cfe1ff23-1543-b1fe-9e5f-165c0b4fdfca.png)

いれなくてもCLIからの操作であれば問題ありません。

### CreateProject

Gaugeではテンプレートが用意されているのでそれを利用します

```bash
$ gauge init -t
dotnet
java
java_gradle
java_maven
java_maven_selenium
js
js_simple
kotlin_maven
python
python_selenium
ruby
ruby_selenium
ts
```

今回は`TypeScript`で開発していくので`ts`を選択します

#### gauge init

```bash
$ gauge init ts
```

2023/12/16現在、この方法でインストールすると404エラーになってしまうようです。

```bash
Initializing template from https://github.com/getgauge/template-ts/releases/latest/download/ts.zip
Error ----------------------------------

[Gauge]
Failed to initialize project. Error downloading file: https://github.com/getgauge/template-ts/releases/latest/download/ts.zip.
404 Not Found. Please use a valid Gauge template URI or check network connection

Get Support ----------------------------
        Docs:          https://docs.gauge.org
        Bugs:          https://github.com/getgauge/gauge/issues
        Chat:          https://github.com/getgauge/gauge/discussions

Your Environment Information -----------
        linux, 1.5.6, 9b96118
        html-report (4.2.0), java (0.10.3), screenshot (0.1.0)
```

#### zipからの作成

1. [こちら](https://github.com/getgauge/template-ts/releases)のリリースページを開き、`Latest`をzip形式でダウンロードしてきます
1. ダウンロードしたzipファイルを指定してinitします

```bash
gauge init ./template-ts-0.0.9.zip
```

これで↓のようなものが作成されました

```
$ tree -L 1
.
├── LICENSE
├── README.md
├── env
├── manifest.json
├── node_modules
├── package-lock.json
├── package.json
├── specs
├── tests
└── tsconfig.json
```

テスト仕様をのぞいてみましょう

```spec:specs/example.spec
# Getting Started with Gauge

This is an example markdown specification file.
Every heading in this file is a scenario.
Every bulleted point is a step.

To execute this specification, use
	gauge run specs

This is a context step that runs before every scenario
* Open todo application

## Display number of items
* Add task "first task"
* Must display "1 item left"
* Add task "second task"
* Must display "2 items left"

## Must list only active tasks
* Add tasks 

   |description|
   |-----------|
   |first task |
   |second task|
   |third task |
   |fourth task|
   |fifth task |

* Complete tasks 

   |description|
   |-----------|
   |second task|
   |fifth task |
* View "Active" tasks
* Must have 

   |description|
   |-----------|
   |first task |
   |third task |
   |fourth task|
* Must not have 

   |description|
   |-----------|
   |second task|
   |fifth task |

A tear down step for every scenario
___
* Clear all tasks
```

Markdownで書かれていましたね
複数のデータを扱うときはテーブル構造で書くようです。


試しにサンプルのテストを実行してみましょう

```
$ gauge run specs
# Getting Started with Gauge
  ## Display number of items     ✔ ✔ ✔ ✔ ✔ ✔
  ## Must list only active tasks         ✔ ✔ ✔ ✔ ✔ ✔ ✔

Successfully generated html-report to => /home/maaaashi/source/LifeSync/hoge/reports/html-report/index.html

Specifications: 1 executed      1 passed        0 failed        0 skipped
Scenarios:      2 executed      2 passed        0 failed        0 skipped

Total time taken: 17.16s
```

テストが実行できました👍

明日からはこの環境を使って、Rustで構築したAPIのE2Eテスト ⇒ Unitテスト ⇒ 実装と進めていきます