LoginSignup
3
1

More than 5 years have passed since last update.

【SAPUI5】チュートリアルを見ながらTest Driven Developmentを体験する (1) 概要

Last updated at Posted at 2019-04-10

この記事の目的

テストの自動化について、SDKのチュートリアルの説明がわかりやすかったので、チュートリアルを実装しながら、テスト自動化の考え方と方法を紹介します。

今後の予定

QUnitについては前回紹介したので、このシリーズではOPA5に焦点を当てていきたいと思います。チュートリアルは16ステップありますが、以下5つの記事に集約します。
1. 概要
2. Price Formatterのテスト(QUnit)
3. テーブルの表示のテスト(OPA5)
4. ナビゲーションのテスト(OPA5)
5. 検索機能のテスト(OPA5)

テストの方針

参考:Step 1: Overview and Testing Strategy

  • アプリケーションを開発するときは、開発サイクルの最初からテストのことを検討しておくこと。なぜなら・・・
    • ロジックが整理されてわかりやすくなるから
    • テストのコードを見れば仕様がわかるから
  • できるだけ多くのテストステップを自動化すること。なぜなら・・・
    • マニュアルでテストする手間を減らせるから
    • アプリケーションのどこかを変更したときに、自動テストを再実行するだけで品質が担保されていることが確認できるから

SAPUI5に備わっている2種類のテスト

以下はアジャイル開発におけるテストのピラミッドです(上記リンク先より引用)。SAPUI5には下の2層に対応する自動化ツールとしてQUnitとOPA5が備わっています。
image.png

  • QUnit:ロジックに対するテスト(単体テスト)
  • OPA5:ユーザの操作に関するテスト

チュートリアルの進め方

チュートリアルはTest Driven Development (TDD)で進みます。
Test Driven Developmentとは、先にテストを書き、続いてテストに通るようにコードを書くという開発の進め方です。この方法のすごいところは、コードを実装し終わったときにはテストが終わっているということです。

image.png

事前準備

ベースになるアプリを以下からダウンロードし、WebIDEに登録します。
https://sapui5.hana.ondemand.com/#/sample/sap.m.tutorial.testing.01/preview

ソースコードの表示に切り替える
image.png
ボタンを押してダウンロード
image.png
WebIDEでダウンロードしたプロジェクトをインポート
image.png

test.htmlファイルを実行します。
image.png
ここが各テスト実行用のエントリーページになっています。
image.png
mockServer.htmlを実行すると以下のようになります。
image.png

関連記事

チュートリアルを見ながらTest Driven Developmentを体験する (2) QUnit

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1