am-mocktimes

モック生成・パターン管理ツールです。

Sample Page

• サンプルページ
• ライツアウトのサンプルページ

Recommended environment

| Node.js | npx | npm | | --- | --- | --- | | >= 10.15.3 | >= 6.4.1 | >= 6.4.1 |

start with Vite

npm i am-mocktimes vite @sveltejs/vite-plugin-svelte @rollup/plugin-yaml -D

npx am-mocktimes template # generate template

add vite.mock.config.js

import { defineConfig } from "vite";
import svelte from "@sveltejs/vite-plugin-svelte";
import yaml from "@rollup/plugin-yaml";
import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte(), yaml()],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
        patterns: resolve(__dirname, "mock/testbed/index.html"),
        mock: resolve(__dirname, "mock/testbed/mock.html"),
      },
    },
  },
  server: {
    open: "/mock/testbed/index.html",
  },
});

Start

npx vite --config=vite.mock.config.js

How to use

テンプレートファイル生成後、以下のファイルが出来上がります。

# モック
mock/
  mock-config.js # モック画面 - 設定ファイル
  patterns.yml # パターン一覧画面 - 設定ファイル

  testbed/
    index.html # パターン一覧画面
    index.js # パターン一覧画面js
    mock.html # モック画面
    mock.js # モック画面js

# アプリケーション本体
index.html
src/
  main.js

これらのファイルを設定・編集することでパターンが作れます。

config mock/patterns.yml

モック一覧の表示・設定に利用します。

以下が設定例です。

settings:
  url: mock.html
No Plan: []
Plan A:
  func: [setPlan, A]
  switch:
    Earth: [goLocation, Earth]
    Mars: [goLocation, Mars]
    Sun: [goLocation, Sun]
Plan B: [setPlan, B]
plan Z:
  funcs:
    - [setPlan, Z, DragonBall]
    - [dbz.open]

reseved property

settings.url: String

別URLに切り替えたいときは、このpropertyを設定します。 設定したobject配下に適用されます。

settings.target: String

デフォルトは browser になります。この設定により、パターン一覧画面からモックを表示する際に iframe が使われるようになります。 electron に指定すると、モック表示に webview が使われ Node.js を実行出来るようになります。

func: Array

配列の先頭に関数名、2つ目以降は、引数として扱われるものになります。 これを指定することで、固有のURLが作られ、後述するactionを呼び出すトリガーになります。 関数名は ドット . を繋げることで、object 階層を表すことが出来ます。 action propertyに直接この値を定義することで、 func propertyを省略できます。

※ ここの値に # は利用できません。

funcs: Array[func, func, ...]

func を複数定義できます。funcと同様、省略可能です。

switch: Object

スイッチボタンによる、モック切り替えが可能です。 switch配下の設定も、他と同様に　reserved propert を使えます。

description: String

モック一覧の横に説明書きとして表示されます。改行可能。

noLink: Boolean

リンク機能をオフにします。子ページだけがアクションを持つときに利用します。

action property

reserved property 以外は全て action property となり、pattern list 表示用に利用されます。

config mock/mock-config.js

モックページで呼び出される、アクションを定義します。

以下が設定例です。

import mock from 'am-mocktimes'

const action = {
  setPlan (name, world = null) { // multiple arguments can be received
    // setPlan
  },
  async goLocation (location) {
    // await go location
  },
  dbz: {
    start () {
      // DragonBall open
    },
    close () {
      // DragonBall close
    }
  }
}

mock(action)

mock(action: MockAction)

この関数を呼び出すことで、モック状態を生成します。

func で定義した関数名を、keyで持つobjectとなります。 objectは階層を持つことが出来ます。その場合の func の指定は、 func: [dbz.start] のように、 . でつなぎます。

addons

• screenshot - 各モックページのスクリーンショットを保存します。

Development

start

npm start

publish

npm run build
npm version <patch|minor|major|prerelease>
npm publish