テスト on いつかの熊右衛門

jest で ResizeObserver、Element.getBoundingClientRect をモックにするには

Sat, 31 Jul 2021 19:59:57 +0900

前回作成したコンポーネントのテストコードを書いてみた所、ResizeObserver と Element.getBoundingClientRect をモックにする必要がありました。
どの様にしたかを記述します。

モック化したテストコード

まず、実際にモックにしたテストコードは以下の通りです。

import React from 'react';
import { act } from 'react-dom/test-utils';
import { render, screen } from '@testing-library/react';
import { Text } from '../Text';

let instanceResize: ResizeObserver | null = null;
let callbackResize: ResizeObserverCallback | null = null;
global.ResizeObserver = class mockResizeObjerver {
 constructor(callback: ResizeObserverCallback) {
 instanceResize = this;
 callbackResize = callback;
 }
 disconnect(){ }
 observe(target: Element, options?: ResizeObserverOptions){ }
 unobserve(target: Element){ }
}

describe('Textのテスト', () => {
 test('省略表示されること', () => {
 jest.spyOn(Element.prototype, 'getBoundingClientRect')
 // rectOuter
 .mockImplementationOnce(jest.fn(() => ({x:0, y:10, width: 50, height: 50}) as DOMRect))
 // rectInner
 .mockImplementationOnce(jest.fn(() => ({x:0, y:10, width: 100, height: 50}) as DOMRect));

 const result = render(<Text>abcdefghijklmnopqrstuvwxyz</Text>);
 act(() => {
 callbackResize!([], instanceResize!);
 });
 // console.log('省略表示されること', screen.debug());
 const outer = result.container.querySelectorAll('span[title]');
 expect(outer.length).toBe(1);
 });
 test('省略表示されないこと', () => {
 const result = render(<Text>abcdefghijklmnopqrstuvwxyz</Text>);
 act(() => {
 callbackResize!([], instanceResize!);
 });
 // console.log('省略表示されないこと', screen.debug());
 const outer = result.container.querySelectorAll('span[title]');
 expect(outer.length).toBe(0);
 });
});

ResizeObserver をモックしないとどうなるか

以下の通り、「ResizeObserver は未定義」でコケます。

 ● Textのテスト › 省略表示されること

 ReferenceError: ResizeObserver is not defined

 13 | // リサイズ監視
 14 | useEffect(() =>　{
 > 15 | const resizeObserver = new ResizeObserver(() =>　{
 | ^
 16 | const rectOuter = refOuter.current?.getBoundingClientRect();
 17 | const rectInner = refInner.current?.getBoundingClientRect();
 18 | // 外枠 < 内枠 なら省略表記

ということで、以下の様にモックにします。

let instanceResize: ResizeObserver | null = null;
let callbackResize: ResizeObserverCallback | null = null;
global.ResizeObserver = class mockResizeObjerver {
 constructor(callback: ResizeObserverCallback) {
 instanceResize = this;
 callbackResize = callback;
 }
 disconnect(){ }
 observe(target: Element, options?: ResizeObserverOptions){ }
 unobserve(target: Element){ }
}

コンストラクタに渡すコールバック関数が呼ばれないとリサイズの処理がされないので、callbackResize を外出ししてテストコード中に呼んでいます。
コールバックに渡す引数に ResizeObserver のインスタンスが必要なので、こちらも instanceResize に外出ししています。

Element.getBoundingClientRect をモックしないとどうなるか

「省略表示されること」のテストでコケます。

 ● Textのテスト › 省略表示されること

 expect(received).toBe(expected) // Object.is equality

 Expected: 1
 Received: 0

 20 | const result = render(<Text>abcdefghijklmnopqrstuvwxyz</Text>);
 21 | const outer = result.container.querySelectorAll('span[title]');
 > 22 | expect(outer.length).toBe(1);
 | ^
 23 | });
 24 | test('省略表示されないこと', () => {
 25 | const result = render(<Text>abcdefghijklmnopqrstuvwxyz</Text>);

描画内容を確認する為、screen.debug() を console.log してみると、

 <body>
 <div>
 <span
 class="text"
 >
 <span>
 abcdefghijklmnopqrstuvwxyz
 </span>
 </span>
 </div>
 </body>

の通り、title 属性がありません。確認してみると、getBoundingClientRect が返してくる値が、

{ bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 }

と、全部ゼロ。試しに幅を指定した要素の子要素にText コンポーネントを入れても変わりませんでした。ということで、

 jest.spyOn(Element.prototype, 'getBoundingClientRect')
 // rectOuter
 .mockImplementationOnce(jest.fn(() => ({x:0, y:10, width: 50, height: 50}) as DOMRect))
 // rectInner
 .mockImplementationOnce(jest.fn(() => ({x:0, y:10, width: 100, height: 50}) as DOMRect));

のように、呼び出された１回目は幅50、２回目は幅100、を返すモックにして省略表示が必要となる状況にしました。

テストしている内容

省略表示した場合は、

 <body>
 <div>
 <span
 class="text"
 >
 <span
 title="abcdefghijklmnopqrstuvwxyz"
 >
 abcdefghijklmnopqrstuvwxyz
 </span>
 </span>
 </div>
 </body>

省略表示しない場合は、

 <body>
 <div>
 <span
 class="text"
 >
 <span>
 abcdefghijklmnopqrstuvwxyz
 </span>
 </span>
 </div>
 </body>

という描画結果なので、title 属性がある span の有無をテストしています。

jest で Blob をモックにしてテストするには

Sat, 05 Jun 2021 19:22:24 +0900

jest で Blob をモックにしてテストしたかったのですが、Node.js に Blob は定義されていませんでした。
未定義なので定義することで対応してみました。

作成したコード

まずはテスト対象のコードです。前回のコードを typescript で別ファイルにしました。

export default function downloadText(fileName: string, text: string) {
 const blob = new Blob([text], { type: 'text/plain' });
 const aTag = document.createElement('a');
 aTag.href = URL.createObjectURL(blob);
 aTag.target = '_blank';
 aTag.download = fileName;
 aTag.click();
 URL.revokeObjectURL(aTag.href);
 }

そして、テストコードは以下です。
ここでは意図した値で Blob を作成したか？を確認し、Aタグについては割愛しています。

import downloadText from './downloadText';

class BlobMock {
 constructor(
 content: Array<ArrayBuffer | ArrayBufferView | Blob | String> | undefined,
 options: BlobPropertyBag | undefined,
 ) {
 this.content = content;
 this.options = options;
 }
 public content: Array<ArrayBuffer | ArrayBufferView | Blob | String> | undefined;
 public options: BlobPropertyBag | undefined;
}

test('downloadText', () => {
 (global as any).Blob = BlobMock;
 const backup1 = window.URL.createObjectURL;
 const backup2 = window.URL.revokeObjectURL;
 window.URL.createObjectURL = jest.fn();
 window.URL.revokeObjectURL = jest.fn();

 downloadText('sample.txt', '一富士二鷹三茄子');
 expect(window.URL.createObjectURL).toBeCalledWith({
 content: ['一富士二鷹三茄子'],
 options: { type: 'text/plain' },
 });

 window.URL.createObjectURL = backup1;
 window.URL.revokeObjectURL = backup2;
});

悩んだポイント１：どう Blob を定義するか

未定義だからといって、

 global.Blob = BlobMock;

にすると、“A file-like object of immutable, raw data. Blobs represent data that isn’t necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user’s system.” と言われてしまうので、

 (global as any).Blob = BlobMock;

の通り、global を一旦 any にして Blob を設定しています。

悩んだポイント２：URL.createObjectURL をモックにできない

モックにできないというか、

 jest.spyOn(window.URL, 'createObjectURL').mockImplementation(jest.fn());

だと、

Cannot spy the createObjectURL property because it is not a function; undefined given instead

となってしまうので、関数を定義することで乗り越えました。

PictMasterでプログラムのテストパターンをペアワイズ法で作る

Sat, 22 May 2021 20:25:00 +0900

前回は直交表を作成しましたが、今回はペアワイズ法で作ってみたいと思います。

ペアワイズテストとは

ペアワイズテストは、ほとんどのバグが最大で2つの要因の相互作用によって引き起こされるという観察に基づいた、効果的なテストケース生成技術です。ペアワイズテストでは、2つの要因のすべての組み合わせをカバーしているため、網羅的なテストよりもはるかに小さくなりますが、欠陥を発見するには非常に効果的です。

https://jaccz.github.io/pairwise/　から意訳

ということで、こちらでもテストパターンを削減できます。

ペアワイズ法でテストパターンを作成

前回の状態があるという前提で進みます。

１．PictMaster.xlsm を開き、「環境設定」ボタンをクリックする
２．「生成方法」で「ペアワイズ法」を選択し、「OK」をクリックする

４．「実行」をクリックする
　　※「パラメータ」と「値の並び」は前回と同じものを使いました。
５．結果として56パターンが生成される

テストできないパターンを除外する

ペアワイズ法を選択した場合、「パラメータ」と「値」で除外する組み合わせを設定できます。
例えば、
・圧縮を On にできるのは、
　ファイルシステムに NTFS を選択し、
　クラスタサイズに4096以上を選択したとき
といった条件や、FAT や FAT32 なら設定できるサイズに上限がある、が考えられます。

ここでは圧縮の条件を入れて、設定できないパターンを除外してみます。

１．「環境設定」ボタンをクリックし、「制約表を使用」をチェックして「OK」をクリックする

２．制約を入力するセルが表示される
　　パラメータは自動的に設定される

３．制約を入力する
　　制約１： FileSystem が FAT か FAT32 なら Compression は Off のみ
　　制約２： ClusterSize が 512 か 1024 か 2048 なら Compression は Off のみ
　　※条件のセルは背景色を設定（例えば黄色に）する

４．「実行」をクリックする
５．結果として56パターンが生成される
　　※ パターン数は変わりませんでしたが、制約に入れた組み合わせはありません。
　　　「Compression」を「On」で絞ると、対象のパターンが無いことが分かります。

制約なし

制約あり

テストできないパターンを制約にするのはOKですが、テスト結果が成功になるパターンで制約をした場合は、テスト結果が失敗するパターンのテストは考えましょう。
今回はファイルシステムとして作成できないパターンを除外しましたが、もし指定されたときはエラーメッセージが表示されるか、ファイルシステムに影響が無いか、の確認が必要かどうかでしょうか。
制約の詳しい説明は、PictMaster に付属する「PictMasterユーザーズマニュアル.pdf」ファイルに記載があります。
PictMaster で入力するのが難しい制約でも、直接 pict コマンドへなら簡単に済む場合がありそうなので、確認することをお勧めします。

直交表とペアワイズテストのどちらを使うか

個人的には、

直交表は、なんらかの実験をするときに有効なパラメータと組み合わせを求めたい
ペアワイズテストは、ソフトウエアテストを効率的に行いたい

という感触だったので、ソフトウエアのテストならペアワイズテストを使います。

ソフトウェア品質を高める開発者テストアジャイル時代の実践的・効率的なテストのやり方 (Amazon)

プログラムのテストパターンに使う直交表をPictMasterで作る

Sat, 15 May 2021 20:20:00 +0900

テストパターンを直交表で作成する機会があり、PictMaster が便利でしたのでご紹介します。
実際に作成した直交表は書けませんので、例で作成してみたいと思います。

プログラムのテストパターンとは

プログラムが想定通りに動作するかテストするとき、「どういう条件」で「何を」したとき「どうなるべきか」を考えますが、それを書き出していくとテストパターンになると思えば良いと思います。

例えば、PCのディスクを初期化するプログラムをテストしたいとき、
・「何を」→ 初期化を実行
・「どうなるべきか」→ 指定の設定で初期化される／初期化できない
になりますが、「どういう条件」は対応した設定に従って複数の組み合わせでテストが必要になります。

Type: Single, Span, Stripe, Mirror, RAID-5
Size: 10, 100, 500, 1000, 5000, 10000, 40000
Format method: Quick, Slow
File system: FAT, FAT32, NTFS
Cluster size: 512, 1024, 2048, 4096, 8192, 16384, 32768, 65536
Compression: On, Off

https://github.com/microsoft/pict

上記の設定に対応した場合なら、5 x 7 x 2 x 3 x 8 x 2 = 3,360 通りのパターンがあることになります。

直交表で効率的にテストパターンを削減

3,360通りのテストをするには、どれぐらい時間が掛かるんだろう？というぐらい非現実的ですが、直交表を作成した場合は64通りに下がりました。
それでも多いと感じますが、まだ現実的な量ではないでしょうか。

環境

ということで、下記の環境で作成しました。

・Windows 10 Pro（64 ビット）
・Microsoft Excel for Microsoft 365 （32 ビット）
・PictMaster Japanese version 7.0.4J
・pict Version 3.7.2

インストール

１．ダウンロードした PictMaster の zip ファイルを解凍し、C:\Program Files (x86)\PICT に配置
２．ダウンロードした pict.exe を C:\Program Files (x86)\PICT に配置

３．C:\Program Files (x86)\PICT 内の全ファイルのプロパティでセキュリティを許可

直交表を作成

１．PictMaster.xlsm を開く
　　マクロが無効にされていることがツールバー下に「セキュリティの警告」で表示されたときは「コンテンツの有効化」をクリックしてマクロを有効にする

２．「環境設定」ボタンをクリックする
３．「生成方法」で「直交表」を選択し、「OK」をクリックする

４．シートに「パラメータ」と「値の並び」を入力する
　例として、pict.exe の README.md に記載されたものを入れてみます

５．「実行」をクリックする
　※ 「TripleDESによる復号化に失敗しました」というメッセージが表示された場合は、「Windows 機能の有効化または無効化」で「.NET Framework 3.5」を有効化する。

　一旦 Excel を終了し、再度 PictMaster.xlsm を開く

６．直交表で64パターンが生成される

直交表に想定結果を追記

そのパターンで実行した結果の想定（成功/失敗）は自身で記入すれば完成です。

ソフトウェア品質を高める開発者テストアジャイル時代の実践的・効率的なテストのやり方 (Amazon)