1,300件規模のテストが通っていたのに、保存に失敗しても保存済みと表示していた画面

本記事の概要

私は個人会社のサービスの検証者向けに、ブラウザだけで動く確認用のツールを作りました。このツールは、入力の自動保存が失敗しても、保存できたと表示していました。このツールを検証者へ渡す直前の最終確認で、私はこの欠陥を見つけて修正しました。あわせて、組み立てたHTMLの中で動くJavaScriptを実際に走らせる回帰テストを新設しました。期待動作9件を、テストで固定しています。

欠陥は、ツールの最初のバージョンから入っていました。修正までのおよそ5週間、リポジトリ全体の1,300件規模のテストは、修正の直前の記録でもすべて成功していました。テストの対象が、HTMLを組み立てる関数だけだったためです。組み立てられたHTMLの中で動くJavaScriptには、この欠陥を検出できるテストが1件も無かったのです。本文では、まず修正の前後のコードを示します。次に、欠陥が起きる仕組みと、失われるデータの量を説明します。この作りの呼び名を、欠陥の型を集めた公開の分類であるCWEで調べた結果も書きます。そのあと、テストの対象に入っていた範囲と、入っていなかった範囲を比べます。生成されたHTMLをjsdomで動かすテストの作りと、固定した挙動9件を説明します。最後に、修正の後にAIのレビューで見つかった残りの欠陥と、実際のブラウザでの通しの確認を書きます。

記事から得られること

読者として想定しているのは、ブラウザだけで動くツールを作って人に渡している方です。扱うのは次の3つです。

• 保存の成否と表示を結びつける: 書き込みが成功したときだけ保存できたと表示し、失敗したときは警告へ切り替える形を示します。あわせて、画面を開いた直後にテストデータを書き込んで、保存の可否を先に確かめる形を示します
• 自分のテストが対象にしている範囲を確かめる: テストの対象がHTMLを組み立てる関数だけになっていないかを判定する見方と、生成されたHTMLをjsdomで動かして確かめるテストの作り方を説明します
• 呼び名を一次情報で探した結果を知る: 失敗を成功として報告する欠陥そのものを指す定着した呼び名があるかをCWEで調べた結果と、関連する項目の位置づけを紹介します

この記事の内容は、今回のツールに限らず、ブラウザのlocalStorageへ入力を書きためて後から回収するツールであれば、そのまま当てはまります。

この記事は、個人会社で開発しているサービスの運用の一次記録に基づく考察です。