新しい言語に挑戦してみる

5月に突入しました。
来月で2018年の半分が終る…いつもながら時の経過の早さに驚きます。

4月は新入社員と覚しき人達を見かけることが多く
初初しいなぁと微笑ましく見ていました。
そんなフレッシュさに触発され、新しいことを始めるにはいい季節!ということで
先月は新しい言語と経験言語の復習に挑戦しました。

ProgateでRuby,Pthon,Saas,Java,SQLを、
Goは公式サイトでチュートリアル(Basicsまで)をこなし、
AidemyでPython入門に取り組みました。

Progateは各言語で題材が似ているので
途中、食傷気味になりつつも表現の違いが比較しやすく、楽しく学べました。
Saasについて理解していなかったのでやってよかったです。

Golangはなんと言っても速い。
ポインタがあることにびっくりしました。

たまには入門もいいですね。
今後もちょこちょこ続けていこうと思います:)


このブログについてですが、masterブランチが更新されたら
firebaseにデプロイされるようGitlab CIと連携させました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#.gitlab-ci.yml

image: node:latest

cache:
paths:
- node_modules/

deploy_production:
stage: deploy
environment: Production
only:
- master
script:
- npm install -g firebase-tools hexo-cli
- npm install
- hexo generate
- firebase use --token $FIREBASE_DEPLOY_KEY production
- firebase deploy -m "Pipeline $CI_PIPELINE_ID, build $CI_BUILD_ID" --non-interactive --token $FIREBASE_DEPLOY_KEY

これで更新が楽になりました〜

【参考】
Automatically deploy to Firebase with Gitlab CI

Share

ブログ移行しました

はてなブログから移行しました。

レイアウトやコンテンツは調整中なのですが
今後はこちらを更新していこうと思います。

先日、VuePressを知りました。
ブログは今後対応予定とのことで楽しみ。

それからNuxt.jsの翻訳、guide部分完了しました!

なぜか102%になっているパートがあるけど、気持ちの現れとして気にしない(`・ω・´)

他にも翻訳する方が出てきて嬉しい限り。
引き続きがんばるぞい。

Share

avaでテスト&GitLab CIに触れてみる

今日は前回作成した体重可視化サイトでavaによるテスト作成と
作成したテストをGitLab CIで走らせたいと思います。

テスト作成

公式の説明に従い、設定やテストケースを作成します。

ava、jsdomのインストール

1
yarn add --dev ava jsdom

package.jsonにava、jsdomを追加

1
2
3
4
5
6
7
8
9
10
11
12
13
"scripts": {
"test": "ava",
},
"ava": {
"require": [
"babel-register"
]
},
"babel": {
"presets": [
"es2015"
]
}

テストケースの作成

testというフォルダを作成し、index.test.jsを作成します。
テストケースはほぼ公式そのままです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import test from 'ava'
import { Nuxt, Builder } from 'nuxt'
import { resolve } from 'path'

// We keep a reference to Nuxt so we can close
// the server at the end of the test
let nuxt = null

// Init Nuxt.js and start listening on localhost:4000
test.before('Init Nuxt.js', async t => {
const rootDir = resolve(__dirname, '..')
let config = {}
try { config = require(resolve(rootDir, 'nuxt.config.js')) } catch (e) {}
config.rootDir = rootDir // project folder
config.dev = false // production build
nuxt = new Nuxt(config)
await new Builder(nuxt).build()
nuxt.listen(4000, 'localhost')
})

// Example of testing only generated html
test('Route / exits and render HTML', async t => {
let context = {}
const { html } = await nuxt.renderRoute('/', context)
t.true(html.includes('<h1 class="title">Weight Loss Progress</h1>'))
})

// Example of testing via DOM checking
test('Route / exits and render HTML with CSS applied', async t => {
const window = await nuxt.renderAndGetWindow('http://localhost:4000/')
const element = window.document.querySelector('.title')
t.not(element, null)
t.is(element.textContent, 'Weight Loss Progress')
t.is(element.className, 'title')
})

// Close the Nuxt server
test.after('Closing server', t => {
nuxt.close()
})

動作確認

ローカルで動作確認を行います。

1
yarn run test

GitLab CIの設定

.gitlab-ci.yml(設定ファイル)の作成

行うのはテストのみなので、以下のようにしました。

1
2
3
4
5
6
7
8
9
10
11
image: node:latest

job:
before_script:
- yarn install
stage: test
script: yarn run test

cache:
paths:
- node_modules/

#GitLabのコンソール上では特に設定せずデフォルトのまま行いました。

GitLab CIで走らせる

コミットすると自動で走ります。


どきどき・・・


成功!


成功すると一覧にも✓マークが表示されます。

まとめ

思っていた以上に簡単にGitLab CIを走らせることが出来ました。

あとはテストケースの設計ですね。
コンポーネントのテストはどう行うのか?など
avaの使い方についてはもっと調べないと、と思います。

とりあえずは一歩踏み出せたので今日はこれまで:)

ソースコード

https://github.com/aytdm/weight-record

参考

その他

OSSのコミッターへの足掛かりとしてNuxt.jsの翻訳に携わり始めました。
英語力向上にも繋げたいと思いつつ、
まずはguideの翻訳率100%を目指したいところです。

Share