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