モック一覧 | Webアプリのモック |
---|---|
Node.js | npx | npm |
---|---|---|
>= 8.9 | >= 9.6 | >= 5.6 |
※モック一覧ページはIE11非対応なので、 直接Webアプリのモックページでご確認ください。
以下をインストール。
npm i am-mocktimes parcel-bundler -D
以下のファイル構造で用意します。
( npx am-mocktimes generate-template
でも作成可能です。)
# モック
mock/
pattern.yml # モックパターン設定用
config.js # Webアプリのモック設定用
# アプリケーション本体
src/
index.html
app.js
作成後、以下のコマンドでparcelサーバーが立ち上がり http://localhost:1234/pattern.html からアクセスできます。
npx am-mocktimes watch
# 出力パスは、デフォルトで `.am-mocktimes`に設定されていて、`.gitignore` に追加することを推奨します
※ --sub-modules を指定した場合は、ディレクトリ構造が変わるため http://localhost:1234/.am-mocktimes/pattern.html からアクセスできます
また、ビルドのみの実行も可能です。
npx am-mocktimes build
オプションの詳しい内容は npx am-mocktimes help
でご覧くださいm(__)m
モック一覧の表示・設定に利用します。
以下が設定例です。
No Plan: []
Plan A: [setPlan, plan/a.json]
switch:
Earth: [goLocation, earth]
Mars: [goLocation, mars]
Sun: [goLocation, sun]
Plan B:
func: [setPlan, plan/b.json]
plan Z:
funcs:
- [setPlan, plan/z.json, DragonBall]
- [dbz.open]
配列の先頭に関数名、2つ目以降は、引数として扱われるものになります。
これを指定することで、固有のURLが作られ、後述するactionを呼び出すトリガーになります。
関数名は ドット .
を繋げることで、object 階層を表すことが出来ます。
action propertyに直接この値を定義することで、 func
propertyを省略できます。
func
を複数定義できます。
funcと同様、省略可能です。
スイッチボタンによる、モック切り替えが可能です。 switch配下の設定も他と同様で、新しく何かを覚える必要がありません。
モック一覧の、横に表示するもの。改行ありです。yaml改行を使うと綺麗に書けます。
別URLに切り替えたいときは、このpropertyを設定します。 設定したobject配下に、適用されます。
reserved property以外は全てaction propertyとなり、pattern list表示用に利用されます。
モックページで呼び出される、アクションを定義します。
以下が設定例です。
import mock from 'am-mocktimes'
const action = {
setPlan (planFile, world = null) { // multiple arguments can be received
// setPlan
},
async goLocation (location) {
// await go location
},
dbz: {
start () {
// DragonBall open
},
close () {
// DragonBall close
}
}
}
mock(action)
後述の src/app.js
と import
のスコープを一緒にしているため、
各moduleの設定や、呼出が可能です。(watch
時に、 .am-mocktimes/mock.js
にて確認可能です)
この関数を呼び出すことで、モック状態を生成します。
func
で定義した関数名を、keyで持つobjectとなります。
objectは階層を持つことが出来ます。その場合の func
の指定は、 func: [modal.open]
のように、 .
でつなぎます。
こちらは、アプリケーション本体を配置します。 parcel/Getting Startedを参考に出来ます。
上記ファイルから利用される、アプリケーション本体のjsとなります。
以下のコマンドで、パターンファイルのみのビルドも可能です。
npx am-mocktimes watch --only-pattern
その場合、mock用のhtmlとjsを用意し、別途サーバーを用意します。
<!-- mock/index.html -->
<app></app>
<script src="index.js">
js側では以下のように、設定ファイルとアプリファイルの両方読み込むことで、指定されたパターンが動くようになります。
// mock/index.js
import './config.js' // config mock/config.js と同様の内容
import '../src/app.js' // アプリケーション本体のjs
そして、上記htmlを返すサーバーURLをymlに設定することで、アクセス出来るようになります。
// mock/pattern.yml
url: 外部で起動したURLを設定(例: http://localhost:3000/mock.html)
各モックページのスクリーンショットを保存します。 chromlessを内部で使っているため、chromeが入っている環境が必要です。
npx am-mocktimes watch # サーバーを起動しておく
npx am-mocktimes screenshot
※optionで、サーバーURLや出力フォルダを指定できます。
以下のオプションを使うことで、parcelの起動を止め、出力されたファイルに対し、お好きなビルドを行うことが出来ます。
npx am-mocktimes watch --no-use-parcel
# `.am-mocktimes/` (出力パス) に、
# `pattern.html / pattern.js` (モック一覧ページ) と
# `mock.html / mock.js` (Webアプリのモックページ) が生成されます。