【CI/CD】UI5プロジェクトのパイプラインを構築するまで ~distフォルダでテスト~


はじめに

この記事は、UI5のCI/CDパイプラインを構築してみるシリーズの4回目です。

<過去の記事>
【CI/CD】UI5プロジェクトのパイプラインを構築するまで ~環境構築編~
【CI/CD】UI5プロジェクトのパイプラインを構築するまで ~パイプライン編~
【CI/CD】UI5プロジェクトのパイプラインを構築するまで ~改善編~

前回まではTest -> Buildの順に実行していましたが、Buildした結果に対してTestを行うようにします。

distフォルダを対象にテストを行う

Buildの結果はdistフォルダに格納されます。ここにminifyされたjsファイルなどが入っています。

Karmaテスト用の設定ファイル

Karmaテスト用のファイルは2つあり、CI環境ではkarma-ci.conf.jsを使います。

karma-ci.conf.jsに以下を追加します。

        ui5: {
            type: "application",
            paths: {
                webapp: "dist"
            }           
        }

何も指定しないとkarma-ui5はwebappフォルダを見に行きますが、webappフォルダ以外を指定したい場合はpathsに設定します。pathsを指定する場合はtypeも同時に指定する必要があります。
https://github.com/SAP/karma-ui5#paths

この状態でnpm testを実行すると、テストは正常に終了しますがカバレージに余計なファイルが含まれています。

Build後は-dbgとつくファイルやComponent.jsは使用しないので、coverageに含める対象を以下のように修正します。

        //before
        preprocessors: {
            "{webapp,webapp/!(test)}/*.js": ["coverage"]
        },

        //after
        preprocessors: {
            "{dist,dist/!(test)}/!(*dbg*|Component).js": ["coverage"]
        },

この結果、Linesのカバレージは100%になりましたがその他のカバレージは100%を下回っています。この理由についてはまだ調べられていません。

Jenkinsで実行

Jenkinsで実行した結果も同様になります。(masterブランチでないのでdeployはスキップされている)

coverageレポートを確認

coverageレポートはWorkspacesフォルダを掘っていくと見ることができます。