概要

記事一覧はこちらです。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その３１ )( テスト対象のブラウザに Headless Chrome と HtmlUnit を追加する＋Chrome, Firefox, HtmlUnit で連続テストする gradle タスクを作成する ) の続きです。

今回の手順で確認できるのは以下の内容です。
- 今回作成しているプロジェクトは git clone してコマンドをいくつか実行するだけで利用可能になるようにしたつもりでいたのですが、試してみたところ admin-lte package から jQuery がなくなっており、エラーが出て動作させることができませんでした。動作できるように修正します。

参照したサイト・書籍

手順

git clone から動作させようとしてエラーが出るところまでやってみる

git clone する

C:\project-test フォルダを作成して、この下に git clone します。

コマンドプロンプトを起動して C:\project-test フォルダに移動した後、git clone -b feature/1-issue https://github.com/ksby/ksbysample-boot-miscellaneous.git コマンドを実行します。

f:id:ksby:20171101002751p:plain

C:\project-test の下に ksbysample-boot-miscellaneous フォルダが作成され、その下に boot-npm-geb-sample プロジェクトが出来ます。

f:id:ksby:20171101003016p:plain

IntelliJ IDEA で boot-npm-geb-sample プロジェクトを開く

IntelliJ IDEA の「Welcome to IntelliJ IDEA」ダイアログを表示した後、「Open」ボタンをクリックします。

f:id:ksby:20171101003534p:plain

「Open File or Project」ダイアログが表示されますので、C:\project-test\ksbysample-boot-miscellaneous\boot-npm-geb-sample フォルダを選択して「OK」ボタンをクリックします。

f:id:ksby:20171101003756p:plain

「Import Project from Gradle」ダイアログが表示されますので、「Create directories for empty content roots automatically」をチェックした後「OK」ボタンをクリックします。

f:id:ksby:20171101004047p:plain

IntelliJ IDEA のメイン画面が開きますので、画面右下の処理中を示すプログレスバーが消えるまで待ちます。

処理が終了すると画面右側の Gradle projects が下の画像のようになります。

f:id:ksby:20171101004723p:plain

npm install コマンドを実行する

コマンドプロンプトで C:\project-test\ksbysample-boot-miscellaneous\boot-npm-geb-sample へ移動した後、npm install コマンドを実行します。

f:id:ksby:20171101005601p:plain

次に npm run springboot コマンドを実行します。。。が、Module not found: Error: Can't resolve 'admin-lte/plugins/jQuery/jquery-2.2.3.min.js' in ... というエラーメッセージが出力されました。なぜか jquery のファイルがないようです。。。

f:id:ksby:20171101005809p:plain f:id:ksby:20171101010017p:plain f:id:ksby:20171101010200p:plain f:id:ksby:20171101010442p:plain f:id:ksby:20171101010635p:plain f:id:ksby:20171101010735p:plain

clean タスク → Rebuild Project → build タスクを実行する

IntelliJ IDEA から clean タスク → Rebuild Project → build タスクを実行してみると、こちらは BUILD SUCCESSFUL のメッセージが出力されて正常に終了しました。

f:id:ksby:20171101011530p:plain

エラーの原因を修正する

以前は node_modules/admin-lte/plugins/jQuery/jquery-2.2.3.min.js というファイルが存在したのですが、node_modules/admin-lte/plugins の下を見ると jQuery フォルダ自体がなくなっていました。。。　admin-lte は jQuery を同梱しなくなったんですね。

f:id:ksby:20171101014925p:plain

ということであれば普通に npm で jQuery をインストールして、そちらを使うように変更します。

まずは npm install --save jquery コマンドを実行して jQuery をインストールします。

f:id:ksby:20171101014758p:plain

次に webpack.config.js を以下のように変更します。

var webpack = require('webpack');

module.exports = {
    entry: {
        "js/app": ["./src/main/assets/js/app.js"],
        "js/inquiry/input01": ["./src/main/assets/js/inquiry/input01.js"],
        "js/inquiry/input02": ["./src/main/assets/js/inquiry/input02.js"],
        "js/inquiry/input03": ["./src/main/assets/js/inquiry/input03.js"],
        "js/inquiry/confirm": ["./src/main/assets/js/inquiry/confirm.js"]
    },
    output: {
        path: __dirname + "/src/main/resources/static",
        publicPath: "/",
        filename: "[name].js"
    },
    resolve: {
        modules: [
            "node_modules",
            "src/main/assets/js"
        ],
        alias: {
            jquery: "jquery"
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
};

"admin-lte/plugins/jQuery/jquery-2.2.3.min.js" → "jquery" に変更します（全部で３ヶ所）。

これで変更は完了です。再び npm run springboot コマンドを実行してみると、今度はエラーメッセージは出ませんでした（下の方に白い文字で出ているメッセージは Tomcat が起動していないことによるものです）。

f:id:ksby:20171101015521p:plain

Tomcat を起動して。。。と思ったら spring.profiles.active を指定していないことによるエラーが出ました。

f:id:ksby:20171101015932p:plain

IntelliJ IDEA のメインメニューから「Run」-「Edit Configurations...」を選択し、「Run/Debug Configurations」ダイアログが表示されたら、画面左側の一覧から「Spring Boot」-「Application」を選択して、画面右側の「VM options」に -Dspring.profiles.active=develop -Dfile.encoding=UTF-8 を入力後「OK」ボタンをクリックします。

f:id:ksby:20171101020810p:plain

再度 Tomcat を起動したら、今度は問題なく起動しました。

f:id:ksby:20171101021041p:plain

ブラウザで http://localhost:9080/inquiry/input/01/ にアクセスすると入力画面１も表示されます。

f:id:ksby:20171101021221p:plain

何も入力せずに「次へ」ボタンを押すと入力エラーのある入力項目にエラーメッセージが表示されますので、Javascript も正常に動作しているようです。

f:id:ksby:20171101021447p:plain

ちょっとつまずきましたが、以前と比較すると試せるようになるまで全然簡単になりました。Edit Configuration の設定も何か簡単に出来る方法があるといいのですが。。。と思い Web で検索すると以下の記事を見つけました。これまで使用したことがありませんでしたが、share チェックボックスをチェックすればよいようです。そのうち試してみたいと思います。

How do I share IntelliJ Run/Debug configurations between projects? https://stackoverflow.com/questions/24642147/how-do-i-share-intellij-run-debug-configurations-between-projects