IstanbulJS - レポート改善案

- 1月 05, 2019

IstanbulJS - レポート改善案:

概要

IstanbulJSが生成するHTMLレポートでは未網羅のコードがハイライトされて表されるが、ハイライトの範囲が奇妙に感じられた。様々なコードに対してHTMLレポートを生成し、それぞれのハイライト範囲についての考察を以下にまとめる。

環境

macOS 10.14.2
Node v11.1.0
React 16.7.0
create-react-app 2.1.2

簡便さのため、Reactプロジェクトで検証を行った。

再現用リポジトリ

https://github.com/TakuyaHara/share/tree/master/20190104_IstanbulJS_Coverage_Issue

検証用コード

HTMLレポートにてハイライトの対象となる ステートメント ブランチ 関数 に対して、4種類の記法を用いたコードで検証を行った。

Normal - インデントや改行を適宜用いて記述する。
Split - Normalでハイライトされた箇所を複数行に分割して記述する。
Nested - ステートメント ブランチ 関数 をネストして記述する。
Abuse - ステートメント ブランチ 関数 を1行にまとめ、同じ行に2回記述する。

考察

各レポートの内容を以下のアイコンを用いて考察する。

�� - 奇妙に感じられる点を示す。
�� - 改善案を示す。
�� - 検証できなかったことを示す。

Statement

Normal

Normal

�� ステートメントが1文字多くハイライトされている。

�� ステートメントを正確にハイライトさせる。

Split

Split

�� ステートメントの1行目しかハイライトされていない。

�� 複数行にまたがってステートメントの全体をハイライトさせる。

Nested

Nested

�� Normalでハイライトされている箇所をネストできないため、検証不可。

Abuse

Abuse

�� Normalで言及した内容と同様。

Branch

Normal

Conditional Operator

�� ステートメントが1文字多くハイライトされている。

�� ステートメントを正確にハイライトさせる。

If

�� else if 節の1行目しかハイライトされていない。

�� else if 節の全体( if キーワード以降)を複数行にまたがってハイライトさせる。

ShortCircuitEvaluation

�� ステートメントが1文字多くハイライトされている。

�� ステートメントを正確にハイライトさせる。

Switch

�� case 節、 default 節ともに行末までハイライトされている。

�� : 以降のスペースやコメントはプログラムとして意味を持たないので、ハイライトを : で終わらせる。

Split

Conditional Operator

�� Normalでハイライトされている箇所を分割できないため、検証不可。

If

�� Normalで言及した内容と同様。

ShortCircuitEvaluation

�� Normalでハイライトされている箇所を分割できないため、検証不可。

Switch

�� Normalで言及した内容と同様。

Nested

Conditional Operator

�� Normalで言及した内容と同様。

If

�� else 節がハイライトされていない。

�� if 文の全体をハイライトさせる。

ShortCircuitEvaluation

�� Normalでハイライトされている箇所を分割できないため、検証不可。

Switch

�� default 節がない場合、case 節がハイライト(黄)される。

�� default 節がある場合、case 節と default 節がハイライト(黄)されない。

�� 複数行にまたがって switch 文の全体をハイライト(赤)する。

Abuse

Conditional Operator

�� Normalで言及した内容と同様。

If

�� else if 節が } より先までハイライトされており、アイコン[E]がハイライトの上に乗っている。

�� else if 節のハイライトを } で終わらせる。

ShortCircuitEvaluation

�� Normalで言及した内容と同様。

Switch

�� case 節と default 節のハイライト(黄)がステートメントのハイライト(赤)までカバーしている。

�� case 節と default 節のハイライトを : で終わらせる。

�� 二つのステートメントが一つにまとめてハイライト(赤)されている。

�� 各ステートメントを独立してハイライトさせる。

Function

関数の定義部について述べる。

Normal

ArrowFunction

括弧がある場合

�� ( から2文字しかハイライトされていない。

�� ( から ) までハイライトさせる。

括弧がない場合

�� 引数名の先頭の2文字しかハイライトされていない。

�� 引数名の全体をハイライトさせる。

ClassMethod

�� クラスメソッド名の先頭の2文字しかハイライトされていない。

�� クラスメソッド名から) までハイライトさせる。

FunctionDeclaration

�� 関数名から(までしかハイライトされていない。

�� function キーワードから ) までハイライトさせる。

FunctionExpression

無名関数の場合

�� function キーワードの先頭の2文字しかハイライトされていない。

�� function キーワードから ) までハイライトさせる。

名前付き関数の場合

�� 関数名から(までしかハイライトされていない。

�� function キーワードから ) までハイライトさせる。

Split

ArrowFunction

括弧がある場合

�� ( から始まる1行目しかハイライトされていない。

�� ( から ) まで複数行にまたがって全てハイライトさせる。

括弧がない場合

�� Normalでハイライトされている箇所を分割できないため、検証不可。

ClassMethod

�� Normalでハイライトされている箇所を分割できないため、検証不可。

FunctionDeclaration

�� 関数名から始まる1行目しかハイライトされていない。

�� function キーワードから ) まで複数行にまたがって全てハイライトさせる。

FunctionExpression

無名関数の場合

�� Normalでハイライトされている箇所を分割できないため、検証不可。

名前付き関数の場合

�� 関数名から始まる1行目しかハイライトされていない。

�� function キーワードから ) まで複数行にまたがって全てハイライトさせる。

Nested

ArrowFunction

�� ステートメントの1行目しかハイライトされていない。

�� 複数行にまたがってステートメントの全体をハイライトさせる。

ClassMethod

�� クラスメソッドをネストできないため、検証不可。

FunctionDeclaration

�� ステートメントの1行目しかハイライトされていない。

�� 複数行にまたがってステートメントの全体をハイライトさせる。

FunctionExpression

�� ステートメントの1行目しかハイライトされていない。

�� 複数行にまたがってステートメントの全体をハイライトさせる。

Abuse

ArrowFunction

�� Normalで言及した内容と同様。

ClassMethod

�� Normalで言及した内容と同様。

FunctionDeclaration

�� Normalで言及した内容と同様。

FunctionExpression

�� Normalで言及した内容と同様。

まとめ

本記事では、IstanbulJSが生成するHTMLレポートにおけるハイライトの問題を検証した。続く別記事にて、ハイライト範囲の代替案と、それを実現するコードを示す。

コメント