Vue3でユニットテストツールのJestを入れたけど諦めた

ライブラリをインストール

1
2
3
4
5
6
7
8
9
# testライブラリ
npm install --save-dev jest
# for vue
npm install --save-dev babel-jest
npm install --save-dev babel-preset-env
npm install --save-dev babel-core@bridge
# for vue3
npm install --save-dev @vue/test-utils@next
npm install --save-dev vue-jest@next

test準備

プロジェクトルートディレクトリにjest.config.jsを作成する

※作成しない場合、以下のエラーになった。
Consider using the "jsdom" test environment.

1
2
3
module.exports = {
testEnvironment: "jsdom"
};

package.jsonに以下を追加する
npm testでテスト実行できるようにするため

1
2
3
"scripts": {
"test": "jest",
},

testコード作成

プロジェクトルートディレクトリに__tests__/unit/index.jsを作成する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { mount } from "@vue/test-utils";

// The component to test
const MessageComponent = {
template: "<p>{{ msg }}</p>",
props: ["msg"]
};

test("displays message", () => {
const wrapper = mount(MessageComponent, {
props: {
msg: "Hello world"
}
});

// Assert the rendered text of the component
expect(wrapper.text()).toContain("Hello world");
});

ここまで完了すれば、npm testでテスト実行できる。

と、ここまでは良いのだが、Vue.jsのコードに接続するコードを書くと以下のエラーになった
解決できず、諦めた。。

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>

【docker-compose】PostgreSQLを導入してみた

はじめに

docker-composeにPostgreSQLを導入したので、コードをメモしておきます。

POSTGRES_USERにuserを指定すると権限エラーになるところで結構ハマりました。。

./docker/postgresql/initdbフォルダにsqlファイルを入れれば自動的に実行されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#docker-composeのバージョンを指定
version: '3.8'

services:
db:
image: postgres:13.3
restart: always
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: password
TZ: Asia/Tokyo
ports:
- '5432:5432'
volumes:
- ./docker/postgresql/data:/var/lib/postgresql/data
- ./docker/postgresql/initdb:/docker-entrypoint-initdb.d

【OAuth2】クライアントアプリのサンプルコード【NodeJS】

はじめに

OAuth2のクライアントアプリを作成したので、手順をメモしておきます。

環境

フロント
 Vue.js:3.0.0
バックエンド
 Express:4.17.1

【JS】json内のデータの位置を並び替える方法

JavaScriptでjson内のデータの位置を並び替える方法です。

例えば

1
2
3
4
5
{
"1":"test1",
"2":"test2",
"3":"test3",
}

これを

1
2
3
4
5
{
"3":"test3",
"1":"test1",
"2":"test2",
}

にしたい時に使う方法です。

以下は”hoge”データを3番目に入れる例です。

1
2
3
let pairs = Object.entries(beforeJson);
pairs.splice(3, 0, ["hoge", beforeJson["hoge"]]);
afterJson = Object.fromEntries(pairs);

上にある通り、一度配列にしてから順番を入れ替え、その後にjsonに戻せばOKです。

以上です。

Bootstrapをカスタマイズする

Bootstrap をカスタマイズする方法です。

npm インストール

scss を読み込むライブラリです。

npm install node-sass@5.0.0
npm install sass-loader@10.1.1

ここでバージョン指定しない場合、以下のエラーになるので注意。

  • PostCSS received undefined instead of CSS string
  • this.getOptions is not a function

エラーが出たら一度アンインストールすること
npm uninstall sass-loader node-sass

scss を作成

node_modules と同じフォルダに scss フォルダを作成し、そこに index.scss を作成する

1
2
@import './mixin';
@import '../node_modules/bootstrap/scss/bootstrap';

同じ場所に mixin.scss を作成する

1
2
$primary: #0275d8;
$accent: #ff8b32;

import

main.js などで先ほど作成した index.scss を import する

1
2
3
4
5
6
7
8
9
10
import { createApp } from 'vue'
import App from './App.vue'

// この行を削除
// import 'bootstrap/dist/css/bootstrap.css'

// この行を追加
import './../scss/index.scss'

createApp(App).mount('#app')

【ajax】LaravelでDropzone.jsを使ってみた

View

【Android】アプリ開発メモ

レイアウトとアクティビティ

画面はレイアウトと呼ぶ
web でいう html と css の部分
xml ファイル
配置してあるパスは以下(例)
/app/src/main/res/layout/activity_main.xml
レイアウトの中のテキストやボタンなどの要素を View(ビュー)と呼ぶ
ビューの高さや文字サイズなどは属性と呼ぶ
ロジック部分はアクティビティと呼ぶ
web でいう JavaScript の部分
Java や Kotlin
配置してあるパスは以下(例)
/app/src/main/java/com/example/diceroller/MainActivity.kt

レイアウトとアクティビティは一対一となっている

文字列は基本的にレイアウトにハードコーディングせず、values/res/string.xmlファイルに記載する

【Android】Espressoに関するメモ

はじめに

【Android】【ビルドエラー】Could not find method setVariantDir()エラーの解決策

エラー

Androidのビルドで以下のエラーが出ました

com.android.build.gradle.internal.crash.ExternalApiUsageException: org.gradle.internal.metaobject.AbstractDynamicObject$CustomMessageMissingMethodException: Could not find method setVariantDir() for arguments [debug] on task ‘:app:processDebugGoogleServices’ of type com.google.gms.googleservices.GoogleServicesTask.

解決策

google-servicesの4.3.6のバージョンが原因らしく、4.3.5に修正するとうまく行きました。

対象ファイル
build.gradle

1
2
3
4
// 前
classpath 'com.google.gms:google-services:4.3.6'
// 後
classpath 'com.google.gms:google-services:4.3.5'

参考

https://stackoverflow.com/questions/67496084/why-am-i-getting-abstractdynamicobjectcustommessagemissingmethodexception-error

Android Studioでアイコン画像を追加する

※これはアプリ内に設置するアイコン画像の話です!
アプリ自体のアイコンの話ではないので注意!

画像を追加する

Android Studio > リソース・マネージャー(左のタブにあります)>「+」アイコン>ベクターアセット>クリップアート
から追加したいアイコン画像を選ぶ

自分の環境だと
色:FFFFF
透明度:100%
にするといい感じになった

例えばnotifications アイコンを選択した場合、
res/drawable/ic_baseline_notifications_24.xmlファイルが作成される

画像を利用する

1
2
3
4
<hoge.view.AppCompatImageView
android:id="@+id/hoge"
android:layout_marginTop="2dp"
android:src="@drawable/ic_baseline_notifications_24" />

公式のアイコン、結構数が多くてありがたいですね。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×