環境
$ php artisan --version
Laravel Framework 6.20.30
$
$ composer show | grep spatie/laravel-permission
spatie/laravel-permission 4.2.0 Permission handling for Laravel 6.0 and up
$
タグ: Laravel 6
はじめに
Laravel のバリデーションクラスであるフォームリクエストをユニットテストするためのノウハウ – oki2a24 のリファクタリングを行いました。
PHPUnit のデータプロバイダを利用して、重複をできるだけ取り除いた内容となります。
本投稿での Laravel 等のバージョンです。
$ php artisan --version
Laravel Framework 6.20.30
$
$ composer show | grep phpunit/phpunit
phpunit/phpunit 9.5.7 The PHP Unit Testing framework.
$
まとめ
- データプロバイダ – 2. PHPUnit 用のテストの書き方 — PHPUnit latest Manual
- データプロバイダのデートとしてファクトリを使用して DB データを生成する場合は、データプロバイダを利用するのは難しい。データプロバイダメソッド内のファクトリメソッドで DB レコードとそのモデルデータを用意しても、それを利用するテストメソッドの前に DB レコードは削除されてしまうため。具体的には、テストはデータプロバイダメソッドの実行後に、
refreshDatabase()を実行し、次にデータプロバイダを利用するテストメソッドを実行するため。 - データプロバイダを利用するテストメソッドを、別のテストメソッドから呼び出すことは可能だった。テスト失敗した場合も、期待通り別のテストメソッドで失敗したと出力されていた。
はじめる前に
環境構築と指定は、 Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録 – oki2a24 の続きとなります。純粋な時系列としては Laravel 6 の Vue.js 3 で、デイトピッカー flatpickr のラッパーシングルファイルコンポーネント (SFC) を作った – oki2a24 の続きとなります。
やりたいことや前提
- Laravel 6 。ファイルを扱うシンプルな CRUD API の例を作った (今後 Dropzon.js を試すために) – oki2a24 の続き。 Lareavel 6 で Vue.js 3 を利用する環境となる。
- Dropzone.js には、アップロードしたいファイルを受け取ってサーバへリクエストしてもらい、結果をレスポンスとして返して欲しい。
サーバ側の API エンドポイントは以下 (詳細は Laravel 6 。ファイルを扱うシンプルな CRUD API の例を作った (今後 Dropzon.js を試すために) – oki2a24 を参照) 。
GET api/filesファイル情報の配列を取得する。GET api/files/{file}指定したファイル情報を取得する。POST api/filesファイルを登録する。PATCH api/files/{file}指定したファイルを更新する。DELETE api/files/{file}指定したファイルを削除する。
- 逆にいうとそれ以外のこと、アップロード済のファイルのリスト表示や、ファイルの削除操作、は、 Dropzone.js 以外で制御したい。
- サーバにアップロード済のファイルを一覧表示する。
- アップロード済ファイルを削除する。
簡単な仕様
GET api/filesファイル情報の配列を取得する。GET api/files/{file}指定したファイル情報を取得する。POST api/filesファイルを登録する。PATCH api/files/{file}指定したファイルを更新する。DELETE api/files/{file}指定したファイルを削除する。
ファイル登録時などのレスポンスは、最初、 URL だけでいいや、 DB で管理したく無いし、と思っていました。 しかし、 How to show files already stored on server – FAQ · Wiki · Matias Meno / Dropzone · GitLab を読むと name, size, url が Dropzone.js では必要なようです。 なので、面倒ではありますが DB でこれらを管理しようと思います。。。 こうなると、例えば POST 時のレスポンスは次のようになるかと思います。
{
"name": "file.jpg",
"size": 12345,
"url": "http://localhost/storage/files/rXVtdVkqRvR7G0PYZUtupJNPmM9mPhdqrvkHI4Ly.jpg"
}
まとめ
- 本投稿は Laravel 6 、 Vue.js 3 が入っただけの状態から、最初の SPA ページを用意するためにやること – oki2a24 の続きとなります。
npm install --save-dev vue-router@4でインストール- Vue Router を動かすだけの簡単なサンプルを、 Getting Started | Vue Router をほぼそのまま使って作り、動作確認
仕組み
laravel/routes/web.phpがリクエストを受け付ける。このとき、どんな URL でも 1 つの Blade ビューを返すように設定する。- 返された Blade ビューに記述しておいた
<div id="app"></div>や<script src="{{ mix('/js/app.js') }}"></script>などにより、 Vue.js を使えるようになる。
本投稿は、 Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録 – oki2a24 の続きに当たります。
方針のまとめ
.eslintrc.jsの extends について- Vue.js に関するルールは
plugin:vue/vue3-recommendedに任せる。 - 他のルールは
eslint:recommendedに任せる。 - Prettier との競合を避けるために
prettierを使う。
- Vue.js に関するルールは
- ESLint と Prettiier は別々に実行する。
導入作業のまとめ
- 依存パッケージの追加 →
npm install --save-dev eslint eslint-config-prettier eslint-plugin-vue prettier .eslintrc.jsmodule.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", $
まとめ
- URLを使用したデータベース設定 データベース：利用開始 6.0 Laravel
- DB_CONNECTION は指定した方が無難。指定しなくとも SQLite へ接続できたが、 DB_CONNECTION はデフォルト (特に設定ファイルを編集していない場合は mysql となる) となる。
- SQLite の場合のデータベース URL のスキーマ:
driver:///database?options。具体的な例:sqlite:////absolute/path/to/database.sqlite?foreign_key_constraints=true