[Laravel8.16.0] ユーザ登録のテストコードを書く

$ cp .env.example .env.testing
$ php artisan key:generate –env=testing
// test用のDB接続
$ vi .env.testing

$ rm ./tests/Feature/ExampleTest.php
$ rm ./tests/Unit/ExampleTest.php

app/Actions/Fortify/CreateNewUser.php

return User::create([
            'name' => $input['name'],
            'company' => $input['company'],
            'role_id' => 1,
            'email' => $input['email'],
            'password' => Hash::make($input['password']),
        ]);

CreateNewUser.phpと同じようなことを書いていく
$ php artisan make:test UserRegisterTest

tests/Feature/UserRegisterTest.php

public function testUserRegister()
    {
        $email = 'hogehoge@gmail.com';
        $this->post(route('register'), [
            'name' => 'testuser',
            'company' => 'test company',
            'email' => $email,
            'password' => 'password',
            'password_confirmation' => 'password'
        ])
            ->assertStatus(302);
 
        $this->assertDatabaseHas('users', ['email' => $email]);
    }

$ vendor/bin/phpunit –testdox
PHPUnit 9.4.3 by Sebastian Bergmann and contributors.

User Register (Tests\Feature\UserRegister)
✔ User register

Time: 00:00.354, Memory: 26.00 MB

OK (1 test, 2 assertions)

なるほど、わかったようなわかってないようなw

[JavaScript] ES2020のconst, let, var

strict

'use strict'; // 厳密なエラーチェック

定数 // 再代入不可

		const price = 10;
		console.log(price * 3);

変数 // letを使う varは古い書き方

		let price = 10;
		price = 30;
		console.log(price * 3);

無名関数

const sum = function(a, b, c){
			return a + b + c;
		}
		const total = sum(1, 2, 3) + sum(4, 5, 6);
		console.log(total);

arrow function

const sum = (a, b, c) => a + b + c;

テストコードの方針を考える

### テストコードの目的
– テストなしにリリースするのが不安な時
– 保守性の向上
– 障害時に不具合をテストコードで再現する

### テストコードの対象
– セキュリティ上重要な箇所(権限管理、決済、メール)
– 重要度の高いユースケース
– 複雑なロジックやトリッキーなコード
– 止むを得ずパッチを当てたところ
– 自動化した方が早いところ(手作業でのアカウント作成などを省略する)
– 例外処理(意図的にバグを発生させる時)
※シンプルなロジックや重要度の低いコードのテストは優先度が下げるか省略も検討する

### テストコードの留意点
– 閾値の境界、条件分岐の網羅
– before afterを検証する
– テストコードはシンプルにする
– privateメソッドはテストしない

なるほど、枠組みは大体理解しました。

[front coding guideline]一応作っておく

一個作っておいて、追加/加筆することで、ノウハウを蓄積していく。

## 目次
– 方針
– マークアップ(HTML)
– スタイルシート
– 画像スライス
– SP対応
– フォーム
– その他
– 表示速度の改善
– その他

### 作っていく中で気になった点
ID・Class名
L 原則としてBEM+FLOCSSのルールに従って命名

CSS プロパティの順序

box-sizing
margin、padding
width、min-width、max-width
height、min-height、max-height
background、background-color、background-image、background-repoeat、background-position、background-size
border、border-width、border-style、border-color、border-radius
outline、outline-width、outline-style、outline-color
table-layout、border-collapse、border-spacing、empty-cells、caption-side
box-shadow
list-style、list-style-type、list-style-image、list-style-position
overflow
opacity、visibility
display、box-flex
float、clear
position、top、right、bottom、left、z-index
color
font-size、font-weight、font-style、line-height、letter-spacing
text-align、text-decoration、text-shadow
vertical-align
content
zoom
その他

フォント周りの単位指定
L font-size:remで指定

PNG-32(24)
L 透過色がある画像に使用

画像ファイルの圧縮
L compressor.ioを使う

ちょっとずつクオリティを上げていきたいですね。JSの最新版の書き方もやっておかないといけないな。
よし、次行こう。Next:テストコードの書き方

[suggestrap]フォームのサジェスト機能を実装したい

$ npm install suggestrap

まず二次元の連想配列のJsonデータを作成します。
json.php
L getメソッドで”ja”を受け取ったら配列を返します

$array = array(
	array("id"=>1, "age"=>32, "name"=>"Jack"),
	array("id"=>2, "age"=>41, "name"=>"Jackie"),
	array("id"=>3, "age"=>41, "name"=>"James"),
	array("id"=>4, "age"=>20, "name"=>"Jake"),
	array("id"=>5, "age"=>28, "name"=>"Jane"),
);

$json = json_encode($array);

$query = $_GET['query'];
if(strpos($query,'ja') !== false){
	print $json;
}

index.html
L inputの入力値をqueryとしてgetメソッドで渡します。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input id="target" type="text">
	<script src="/node_modules/suggestrap/lib/suggestrap.js"></script>
	<script>
		var req = {
			target: "target",
			url: "http://192.168.33.10:8000/json.php?query=%QUERY",
			key: "name"
		};
		var option = {
			minlength: 2,
			wildcard: "%QUERY",
			delay: 400,
			count: 5,
			id: "suggestrap"
		};
		var suggestrap = new Suggestrap(req, option);
	</script>
</body>
</html>

あああ、なるほど、検索のサジェストは、入力したqueryをajaxで渡して、それをDBからひっぱてきて表示してるのね。
仕組みがわかった。完全に理解した。なるほどねー。
もっと凄い技術使ってるのかと思ったら、普通の仕組みだ。

さて、フォントやるかー。

[progressStep.js] プログレスバーを綺麗に表示したい

progressStep.jsというのがあるので、これを使って実装したい

Github: progressStep.js

$ npm install progressbar.js

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.hoge {
			width: 400px;
  			text-align: center;
  			margin: auto;
		}
		#progressBar {
			
		}
	</style>
</head>
<body>
	<div class="hoge">
		<div id="progressBar"></div>
	</div>
	<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
	<script src="https://cdn.tutorialjinni.com/progressStep/1.0.3/progressStep.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"> </script>
	<script>
		var $progressDiv = $("#progressBar");  
		var $progressBar = $progressDiv.progressStep({activeColor:"blue"});
		$progressBar.addStep("入力");  
		$progressBar.addStep("確認");  
		$progressBar.addStep("完了");  
		$progressBar.refreshLayout();  
		$progressBar.setCurrentStep(1);  
	</script>
</body>
</html>

お、ええやん、これはガチで使えそう^^

[pickr] color pickerを実装したい

RGBを入力するのは、RGBを調べるという手間が入るので、color pickerを実装したい。
pickrというライブラリがある様なので、それを使う。

$ npm install @simonwep/pickr

githubそのままですが、

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="/node_modules/@simonwep/pickr/dist/themes/classic.min.css" rel="stylesheet">
	<link href="/node_modules/@simonwep/pickr/dist/themes/monolith.min.css" rel="stylesheet">
	<link href="/node_modules/@simonwep/pickr/dist/themes/nano.min.css" rel="stylesheet">

	<script src="/node_modules/@simonwep/pickr/dist/pickr.min.js"></script>
	<script src="/node_modules/@simonwep/pickr/dist/pickr.es5.min.js"></script>
</head>
<body>
	<div class="color-picker"></div>
	<script>
		const pickr = Pickr.create({
		    el: '.color-picker',
		    theme: 'classic', 

		    swatches: [
		        'rgba(244, 67, 54, 1)',
		        'rgba(233, 30, 99, 0.95)',
		        'rgba(156, 39, 176, 0.9)',
		        'rgba(103, 58, 183, 0.85)',
		        'rgba(63, 81, 181, 0.8)',
		        'rgba(33, 150, 243, 0.75)',
		        'rgba(3, 169, 244, 0.7)',
		        'rgba(0, 188, 212, 0.7)',
		        'rgba(0, 150, 136, 0.75)',
		        'rgba(76, 175, 80, 0.8)',
		        'rgba(139, 195, 74, 0.85)',
		        'rgba(205, 220, 57, 0.9)',
		        'rgba(255, 235, 59, 0.95)',
		        'rgba(255, 193, 7, 1)'
		    ],

		    components: {

		        // Main components
		        preview: true,
		        opacity: true,
		        hue: true,

		        // Input / output Options
		        interaction: {
		            hex: true,
		            rgba: true,
		            hsla: true,
		            hsva: true,
		            cmyk: true,
		            input: true,
		            clear: true,
		            save: true
		        }
		    }
		});
	</script>
</body>
</html>

これは凄い。使いたいな。

[three-dots] spinnerを実装してみる

Github: https://github.com/nzbin/three-dots

$ npm install three-dots –save

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="/node_modules/three-dots/dist/three-dots.css" rel="stylesheet">
	<style>
		.spinner {
			margin: 50px;
		}
	</style>
</head>
<body>
	<div class="spinner">
		<div class="dot-elastic"></div>
	</div>
</body>
</html>

なるほど、CSSで表現できるのね。処理に時間がかかる時に使えそうですな。

[Design Guideline] Componentのvariationを増やしたい

とりあえずComponentにどんなものがあるか、ざっと一つ一つ見ていきます。

・Accordion
・Activity Timeline
・Alert
・App Launcher
・Avatar, Avatar Group
・Badges
・Brand Band
・Breadcrumbs
・(builder Header)
・Button Groups
・Button Icons
・Buttons
・Cards
・Carousel
・Chat
・Checkbox, Checkbox Button, Checkbox Button Group
・Checkbox Toggle
・Color Picker
・Combobox
・Counter
・Data Tables
・Datepickers, Datetime Picker
・Docked Composer
・Docked Form Footer
・Docked Utility Bar
・Drop Zone
・Dueling Picklist
・Dynamic Icons
・Dynamic Menu
・Expandable Section
・Expression
・Feeds
・File Selector, Files
・Form Element
・Global Header
・Global Navigation
・Icons
・Illustration
・Input
・List Builder
・Lookups
・Map
・Menu
・Modals
・Notifications
・Page Headers
・Panels
・Path
・Picklist
・Pills
・Popovers
・Progress bar
・Progress Indicator
・Progress Ring
・Prompt
・Publishers
・Radio Button Group, Radio Group
・Rich Text Editor
・Scoped Notifications
・Scoped Tabs
・Select
・Setup Assistant
・Slider
・Spinners
・Split View
・Summary Detail
・Tabs
・Textarea
・Tiles
・Timepicker
・Toast
・Tooltips
・Tree Grid
・Trees
・Trial Bar
・Vertical Navigation
・Vertical Tabs
・Visual Picker

ざっと見ていき、興味があったのは、loading spinner, toggle, search instance result, color picker, progressStep.jsあたり。触っておくか。
それと、デザインだからフォントもカバーしておかないと。
なんか自分でもよく分からないテンションになってきました。

[Design Guideline] 項目を考える

デザインガイドラインの項目を考えます。

・Overall
— Clarity, Efficiency, Consistency, Beauty

・Basic
— Component, Layout
— Header
— Bar, Styles, Colors, Back Button, Menu, Settings, Help Menu, Save, Status, In process Action, Alert, Utility, Search, Toggle
— Layout
— Columns, Style, Panels, Body, Horizontal tabs, Accordions, Navigation, Color Picker
— Modals
— Validation
— warning, alert, Confirmation modal, Error Icon, Error Alert

・Charts
— Bar chats, Dot Plot, Line Chart, Scatter Plot, Pie Chart, Tree map, Heat map, Matrix Chart, Metric, Flat Gauge, Polar Gauge, Rating Chart, Map, Funnel Chart, Color

・Data Entry
— text input, sizing, input help, date picker, lookup, Checkbox, radio, checkbox toggle, Label

・Displaying Data
— table, tree grid, title, interactive guide, Feed

・Empty State
— 404 message

・Iconography
— Design Principle, Accessibility, Informational Icons, Decorative Icons, Grid System, Key Line Shape, Object Icon

所感
– Localizationしたサービスを作りたい
– デフォルトでUser Feedbackを考えないと行けない
– Loading, toggle, SearchのInstance Resultなどは実装できる様になっておきたい。
– Error, Alertなどは最初にしっかり考えておかないといけないのね

なんだかんだで、ローカリゼーションしたサービスを作りたい。在日外国人向けとかからスタートしたいね。