LoginSignup
1
0

More than 3 years have passed since last update.

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

Posted at

はじめに

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

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

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

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

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

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

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

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を実行すると、テストは正常に終了しますがカバレージに余計なファイルが含まれています。
image.png
Build後は-dbgとつくファイルやComponent.jsは使用しないので、coverageに含める対象を以下のように修正します。

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

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

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

Jenkinsで実行

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

image.png

coverageレポートを確認

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

1
0
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
1
0