イベント付きなＵＩデザインパターンを並べる方法(am-coffee-time利用)

この記事は古いです

最新は以下レポジトリでご確認できます
https://github.com/ampcpmgp/am-coffee-time

過去ログ

am-coffee-timeを0.6.2に上げたので、また共有してみます！

前回同様、ざっくりした動きをgifアニメーションにて。実際のページはこちらより

前回の記事ではnpmを使わない書き方をしていたので、逆に煩雑になってしまいました。
今回はnpm前提でかきます。

TL;DR

am-coffee-timeとは、アサーションつきなＵＩデザイン一覧作成モジュールです。

このモジュールは、パターンを表示するページと、実際に動作するページの二つの世界を持ちます。

各ページの説明

親ページ（ツリーやアサーション結果を表示）

gifに「全パターン」と書かれている、ツリー上表記になっているページは、UIデザイン一覧を表示するページです。ここでは、以下のプログラミングを書くことで動作します。

list.html

<test-list></test-list>
<script src="./list.js" charset="utf-8"></script>

list.js

import generate from 'am-coffee-time/browser/generate'
const patterns = {
  '全パターン': {
    '動作フロー確認用': {
      '結果=成功': './index.html',
      '結果=失敗': './index.html'
    },
    'ID入力=melon': {
      'PW入力=google': './index.html',
      'PW入力=apple': './index.html'
    },
    'スイッチ[日本語(lang=ja) | 英語(lang=en) | 中国語(lang=ch)]': '多言語化(./index.html)'
  }
}
generate(patterns)

上記にて、表示が出来上がります。次に、上記のキーの部分（カッコがあるときはそのカッコ内）のデータが、値に指定されたＵＲＬを開くときに渡り、イベントを分岐させることが出来ます。

子フレーム(UIを持つページ)

gifでログイン画面が表示されているページになり、以下のactionオブジェクトで指定する各関数で値を受け取りイベントを発火できます。

import Test from 'am-coffee-time/browser/Test'
import AutoEvent from 'am-autoevent/browser/AutoEvent-no-gen'
const autoEvent = new AutoEvent()
const $ = (selector) => document.querySelector(selector)
const actions = {
  lang: (type) => {
    autoEvent.wait(200).addEvent(() => {
      $('before-login > span:first-child').innerHTML = `<div>言語は ${type} です</div>` + $('before-login > span:first-child').innerHTML
    })
  },
  動作フロー確認用: () => console.log('動作フロー確認です'),
  結果: (値) => {
    if (値.match('成功')) console.assert(true)
    else if (値.match('失敗')) console.assert(false, '失敗です')
  },
  ID入力: (value) => {
    autoEvent
      .wait(400).setValue('[name="id"]', value)
  },
  PW入力: (value) => {
    autoEvent
      .wait(400).setValue('[name="pw"]', value)
      .wait(400).click('[name="check"]')
      .wait(400).addEvent(() => console.assert($('after-login'), 'after-login not found'))
  }
}
autoEvent.register()
Test.start(actions)
autoEvent.start(1, () => console.info('finished'))

console.assertで叩かれた値を見て、成功/失敗を見ています。
最後にconsole.info("finished")を打つことで、テストの終了を表します。

非同期処理を書くのが面倒だったのでautoEventを使いましたが、自身でpromiseなど使って書くのでも大丈夫です。

終わりに

最近仕事で、デザインパターン一覧を生成するツールとして使わせてもらっています。
次の役割としてはUIの振る舞い確認として、どういったアサーションをかけていけば良いか、やはり画像差分を出し目で見て確認することが必須なのか、色々議論しています。

ユニットテストでは判定できない部分を重点的に見ていくのかなと思っています！