カテゴリー
コンピューター

Laravel 6 ユニットテストをする際 Docker Compose の環境変数を上書きできずにはまったが phpunit.xml ドキュメントを読んで解決した

まとめ

<php> 要素 (PHP INI 項目や定数、グローバル変数の設定) では、既存の環境変数は上書きされない。上書きしたいならば、 force 属性を使う。

ドキュメントはこちら。といいますか、 phpunit.xml で検索して最初のページでした。

ハマっていた内容

Docker Compose で立ち上げたコンテナ内に Laravel 6 を構築しています。 コンテナ内で PHPUnit を実行したとき、接続データベースがテスト用のインメモリ SQLite ではなく、開発や運用時に使う通常のデータベースとなっていました。

Laravel からデータベースへの接続方法は、 データベース URL を使っています ので、これを上書きすればよいわけです。 しかし、なかなかうまくいきません。

調べて 【Laravel】.env.testingの使用方法と注意点 – Qiita の通りに .env.testing を作ってみたり、 phpunit.xml<php><server><env> に変えてみたりしました。 でもやっぱりダメでした。

改めて調査をしようと、ユニットテストコードに次を埋め込んで 環境変数を取得 してみました。

    public function setUp(): void
    {
        //dd(env('APP_ENV'));
        //dd(env('DATABASE_URL'));
        //dd(env('DB_CONNECTION'));
        //dd(env('DB_DATABASE'));
        parent::setUp();
        $this->seed();
    }

すると、 APP_ENVtesting で問題なく、 DB_CONNECTIONDB_DATABASE も狙い通りでしたが、 DATABASE_URL が Docker Compose 環境変数の値のままで、ダメです。 DATABASE_URL をなんとかしたいのですよね。。。

そこで、PHPUnit 公式ドキュメントの 3. XML 設定ファイル — PHPUnit latest Manual を見てみますと、、、、、こんな記述があるではありませんか!

デフォルトでは、既存の環境変数は上書きしません。 設定済みの環境変数を上書きしたい場合ば force 属性を使いましょう。

<php>
  <env name="foo" value="bar" force="true"/>

謎はすべて解けました。

  <php>
    <env name="DATABASE_URL" value="sqlite:///:memory:?foreign_key_constraints=true"/>

  <php>
    <env name="DATABASE_URL" value="sqlite:///:memory:?foreign_key_constraints=true" force="true"/>

と変更し、 PHPUnit を実行してみますと、ようやく DATABASE_URL は上記の値であるインメモリの SQLite を見るようになってくれました!!!

おわりに

別のことをするために、今まで散々やってきたユニットテストの箇所でつまづいた、今回はそんな状況でした。

脇道でつまづくと、本道でつまづくよりも、より焦ってしまいます。こんなところで足止めされている場合じゃないんだ、と。

なんとか今回、落ち着いて対処できた方と思います。よかったです。

ちなみに、データベース URL については以前次のページに調べたことをまとめています。

以上です。

カテゴリー
コンピューター

Vue.js 用の Dropzone ライブラリを軽く試したメモ

まとめ

2021年5月4日現在、 Dropzone.js を Vue.js から簡単に使えるようにするためのライブラリの状況は、

環境

カテゴリー
コンピューター

Laravel 6 、 Vue.js 3 のプロジェクトに Vue.js のルートとなるシングルファイルコンポーネント (SFC) を指定するメモ

まとめ

カテゴリー
コンピューター

Laravel 6 、 Vue.js 3 のプロジェクトに Vue Router を追加するメモ

まとめ

カテゴリー
コンピューター

Laravel 6 、 Vue.js 3 が入っただけの状態から、最初の SPA ページを用意するためにやること

仕組み

  • laravel/routes/web.php がリクエストを受け付ける。このとき、どんな URL でも 1 つの Blade ビューを返すように設定する。
  • 返された Blade ビューに記述しておいた <div id="app"></div><script src="{{ mix('/js/app.js') }}"></script> などにより、 Vue.js を使えるようになる。
カテゴリー
コンピューター

VS Code Remote Container で Veture 拡張機能を使おうとすると現れるエラー2つに対処しました

カテゴリー
コンピューター

Larvel 6 に入れた Vue.js 3 の環境で、 ESLint と Prettier を使う方法

本投稿は、 Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録 – oki2a24 の続きに当たります。

方針のまとめ

  • .eslintrc.js の extends について
    • Vue.js に関するルールは plugin:vue/vue3-recommended に任せる。
    • 他のルールは eslint:recommended に任せる。
    • Prettier との競合を避けるために prettier を使う。
  • ESLint と Prettiier は別々に実行する。

導入作業のまとめ

  • 依存パッケージの追加 → npm install --save-dev eslint eslint-config-prettier eslint-plugin-vue prettier
  • .eslintrc.js
    module.exports = {
        root: true,
        env: {
          node: true,
        },
        extends: [
          "plugin:vue/vue3-recommended",
          "eslint:recommended",
          "prettier",
        ],
        rules: {},
    };
    
  • .prettierrc
    {
      "tabWidth": 2,
    }
    
  • package.json への追加内容
    $ git diff laravel/package.json
    diff --git a/laravel/package.json b/laravel/package.json
    index ce4fa08..0cc621e 100644
    --- a/laravel/package.json
    +++ b/laravel/package.json
    @@ -7,7 +7,9 @@
             "watch-poll": "npm run watch -- --watch-poll",
             "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js   --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
             "prod": "npm run production",
    -        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress   --config=node_modules/laravel-mix/setup/webpack.config.js"
    +        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress   --config=node_modules/laravel-mix/setup/webpack.config.js",
    +        "lint": "eslint --ext .js,.vue --fix --ignore-path .gitignore resources/",
    +        "format": "prettier --write --ignore-path .gitignore resources/**/*.{js,vue}"
         },
         "devDependencies": {
             "@vue/compiler-sfc": "^3.0.11",
    $
    
カテゴリー
コンピューター

Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録

まとめ

  • Vue.js 3 を npm --save-dev vue@next でインストールした。
  • laravel-mix のバージョンを最新にする必要があり、それは npm audit fix --force で自然とそうなった。
  • vue-loader もバージョンを合わせる必要があり、そのバージョンは 16 で、インストール時の指定は、 npm install --save-dev npm-loader@next だった。
  • resources/js/app.js で Vue.js 3 の方法で初期化すれば良い。
  • Blade テンプレートファイルで Vue.js 3 を読み込むには、 <div id="app"></div><script src="js/app.js"></script> を書けば良い。
カテゴリー
コンピューター

Vue.js 3 に組み込んだ Bootstrap 5 をカスタマイズできるようにする方法

カスタマイズ導入方法まとめ

  • Vue.js 3 に Bootstrap 5 を組込む手順メモ – oki2a24 の続きであることが前提。
  • yarn add sass-loader@^10 sass で依存パッケージをインストールします。ここで @^10 とバージョンを指定しているのは、最新版をインストールするとビルド時にエラーが発生したため。公式ドキュメントにも注釈がある。→ Working with CSS | Vue CLI
  • src/scss/custom.scss を作成し、 @import "node_modules/bootstrap/scss/bootstrap"; を記述する。カスタマイズ内容は、この行よりも上に書くこと。
  • src/main.jsimport "@/scss/custom.scss"; を記述し custom.scss を読み込む。今まで読み込んできた素の Bootstrap である import "bootstrap/dist/css/bootstrap.min.css"; 行は不要となるので削除する。
カテゴリー
コンピューター

Vue.js 3 に Bootstrap 5 を組込む手順メモ

まとめ

  • yarn add bootstrap@next @popperjs/core
  • src/main.js に次を追加する。
    import "bootstrap";
    import "bootstrap/dist/css/bootstrap.min.css";