Decision table(ぽいやつ) から Given , When and Then 形式のシナリオに変換するツールを作ってみた

[![Node.js CI](https://github.com/freddiefujiwara/dtgwt/actions/workflows/node.js.yml/badge.svg)](https://github.com/freddiefujiwara/dtgwt/actions/workflows/node.js.yml)
# まずはとにかく使ってみてください!

+ 手順1. [sample_dt.xlsx](https://github.com/freddiefujiwara/dtgwt/blob/main/sample_dt.xlsx?raw=true)のダウンロード
+ 手順2. お好きなように修正してください。
+ 手順3. [Table to Markdown](https://tabletomarkdown.com/convert-spreadsheet-to-markdown/)を開いてください
+ 手順4 手順2の成果物を "Paste Table Here!"にコピーする。(最初の行を忘れないでください)
+ 手順5. "Convert M↓"をクリック
+ 手順6. "Copy"をクリックします。
+ 手順8. [Dtgwt](https://freddiefujiwara.com/dtgwt/#inputscript)のページに移動
+ 手順9. 手順6を"textarea"にコピーします。
+ 手順10. "Scenario output "をクリックします。
+ 手順11. 好きなように "Output Scenarios "をコピーします

![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817/a434ecca-8843-6e63-069a-99260d772b06.gif)

# 背景
## アプリ
さて、フォームが一つでボタンが2つのシンプルなアプリがあったとします。
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817/dafff458-cd1f-4dab-9802-152242474407.gif)


- 初期値として数字の"0"が入力されていて
- "+"ボタンを押すとインクリメントされ
- "-"ボタンを押すとデクリメントされます
- 数字の最小値は"0"で
- 数字の最大値は"255"です
- 数字以外の文字が入力されたら"Invalit value"と表示されます

## ディジョンテーブル
あなたはこのアプリをテストするために下記のようなデシジョンテーブル(っぽい)ものを書きました
|          |                              |     |     |     |     |     |     |     |     |               |               |
|--------- | ---------------------------- | --- | --- | --- | --- | --- | --- | --- | --- | ------------- | ------------- |
|Condition |                              |     |     |     |     |     |     |     |     |               |               |
|          | Initial input is "0"         | Y   | Y   |     |     |     |     |     |     | Y             | Y             |
|          | Initial input is "1"         |     |     | Y   | Y   |     |     |     |     |               |               |
|          | Initial input is "254"       |     |     |     |     | Y   | Y   |     |     |               |               |
|          | Initial input is "255"       |     |     |     |     |     |     | Y   | Y   |               |               |
|Action    |                              |     |     |     |     |     |     |     |     |               |               |
|          | Click "+"                    | Y   |     | Y   |     | Y   |     | Y   |     |               |               |
|          | Click "-"                    |     | Y   |     | Y   |     | Y   |     | Y   |               |               |
|          | Modify Initial input to "AB" |     |     |     |     |     |     |     |     | Y             |               |
|          | Modify Initial input to "1%" |     |     |     |     |     |     |     |     |               | Y             |
|Result    |                              |     |     |     |     |     |     |     |     |               |               |
|          | Input                        | 1   | 0   | 2   | 1   | 255 | 253 | 255 | 254 | 0             | 0             |
|          | Error Message                | N/A | N/A | N/A | N/A | N/A | N/A | N/A | N/A | Invalid Input | Invalid Input |

# 問題
しかし、テスト管理ツールは下記のようなフォーマットでシナリオベースに書き直さないといけませんでした。
つまり下記のような形式に変換するひつようがあります
|Scenario No|Test conditions|Step description|Step expected result|
|---|---|---|---|
|1|Given Initial input is "0"|When Click "+"|Then Input:1 and Error Message:N/A|
|2|Given Initial input is "0"|When Click "-"|Then Input:0 and Error Message:N/A|
|3|Given Initial input is "1"|When Click "+"|Then Input:2 and Error Message:N/A|
|4|Given Initial input is "1"|When Click "-"|Then Input:1 and Error Message:N/A|
|5|Given Initial input is "254"|When Click "+"|Then Input:255 and Error Message:N/A|
|6|Given Initial input is "254"|When Click "-"|Then Input:253 and Error Message:N/A|
|7|Given Initial input is "255"|When Click "+"|Then Input:255 and Error Message:N/A|
|8|Given Initial input is "255"|When Click "-"|Then Input:254 and Error Message:N/A|',
|9|Given Initial input is "0"|When Modify Initial input to "AB"|Then Input:0 and Error Message:Invalid Input|
|10|Given Initial input is "0"|When Modify Initial input to "1%"|Then Input:0 and Error Message:Invalid Input|

あなたはおもむろにxlsxに新しいタブをつくり
一つ一つ目で見ながら変換していきます
![ezgif.com-gif-maker (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817/0c908a26-a7ca-1417-8551-0c5639cef28b.gif)


非常にめんどくさいですよね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817/e26a0298-2717-8d27-d360-6381b3ab0b7f.png)


# 解決策
上記のような問題を解決するべく簡単なWebアプリを作ってみました。

![ezgif.com-gif-maker (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817/83740374-2f20-a984-f193-40164c090c3d.gif)


~~入力もmarkdownというのが実に使い勝手悪いですが（笑）~~
~~そのうち、xlsx->markdownに変換するツールでも作ってそこは解消しようと思います~~
(2022 Feb 13 解消しました)

[ソースコード](https://github.com/freddiefujiwara/dtgwt)はこちらで
実際のアプリは
[こちら](https://freddiefujiwara.com/dtgwt/#inputscript)
です

2時間くらいでカッとなってつくったので色々アレだと思いますが
なにかお気づきの方は Pull Request お待ちしております