소개

nuxt로 테스트하는 환경 구축 절차를 설명합니다.
nuxt와 제목에 있지만 별도로 nuxt일 필요는 없습니다.
e2e 테스트에는 testcafe 을 사용합니다.
이 빌드가 모범 사례인지는 모르지만 로컬에서 쉽게 테스트를 실행할 수 있으므로 편리하다고 생각합니다.

이미지 다이어그램

docker-compose 로 2 개의 컨테이너를 구축합니다.
첫 번째는 0.0.0.0:3000에서 nuxt를 시작하는 컨테이너입니다.
두 번째는 첫 번째 컨테이너에 대해 테스트를 실행하는 컨테이너입니다.

그럼 구축해 갑시다.

디렉토리 구성

.
├── app
│   ├── 略(pages とか store とか)
│   └── tests
├── docker-compose.yml
├── nuxt
│   └── Dockerfile
└── testcafe
    ├── Dockerfile
    └── wait.sh

설명의 편의상, ./app 에 nuxt 의 소스 코드가 들어 있다고 합니다../app/tests 안에 테스트 코드를 작성하기로 결정합니다.

docker-compose.yml

./docker-compose.yml

version: '3'

services:
  nuxt:
    build: ./nuxt
    volumes:
      - ./app:/usr/src/
    ports:
      - "3000:3000"
  testcafe:
    build: ./testcafe
    volumes:
      - ./app:/usr/src/

nuxt 컨테이너의 분은, 3000번을 공개해 둡시다.

nuxt 컨테이너 ( 0.0.0.0:3000에서 nuxt 공개)

이 컨테이너는 Dockerfile만을 작성합니다.

Dockerfile

./nuxt/Dockerfile

FROM node:10
MAINTAINER shindex

ENV HOST 0.0.0.0

CMD bash -c "cd /usr/src && npm run dev"

기본적으로 nuxt는 localhost:3000로 페이지를 게시합니다.
이렇게하면 testcafe 컨테이너에서 액세스 할 수 없습니다.
환경 변수로 HOST に 0.0.0.0를 설정하여,
nuxt는 0.0.0.0:3000 로 페이지를 공개하고 testcafe 컨테이너로부터의 액세스가 가능하게 됩니다.

testcafe 컨테이너

아까보다는 공정이 많습니다만, 큰 일은 없습니다.

Dockerfile

./testcafe/Dockerfile

FROM node:10
MAINTAINER shindex

# install google chrome
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \
    sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' && \
    apt-get update && \
    apt-get install -y google-chrome-stable && \
    # install testcafe
    npm install -g testcafe

COPY ./wait.sh /

CMD [ "sh", "/wait.sh" ]

testcafe를 실행하려면 어떤 브라우저가 필요합니다.
이번에는 Chrome을 설치합니다. testcafe 설치도 여기에서 수행합니다.

또한 나중에 설명하는 wait.sh를 복사하여 CMD에서 실행합니다.

컴파일 종료까지 대기

./testcafe/wait.sh

#!/bin/bash

while :
do
  statusCode=`curl -LI nuxt:3000 -o /dev/null -w '%{http_code}\n' -s`
  if [ $statusCode = "200" ] ; then
    compileStatus=`curl -s nuxt:3000 | grep -cE 'div id="nuxt_loading_screen"'`
    if [ $compileStatus = 0 ] ; then
      break;
    fi
  fi
  sleep 3;continue
done

cd /usr/src
testcafe chrome:headless tests/*.ts

궁극적으로 docker-compose up 명령 중 하나로,
컨테이너를 2개 기동해, npm run dev 하고 テスト実行 를 하고 싶습니다.
다만, 보통으로 하면 확실히 실패합니다.
왜냐하면 npm run dev 컴파일이 끝나기 전에 테스트가 실행되기 때문입니다.
컴파일이 끝날 때까지 기다려야 합니다.
따라서 여기에서는 무한 루프로 컴파일이 완료되었는지 3초마다 체크하고 있습니다.

nuxt를 컴파일하는 동안 여러분은 익숙합니다.



이 화면이 나오네요.
이것을 컴파일 종료의 판단 재료로 합니다.
<div id="nuxt_loading_screen">
이 화면은 ↑의 id가 흔들리고 있습니다.
이것이 존재하는 동안 컴파일하는 동안. 없어지면 컴파일 종료입니다.
따라서 컴파일 종료 후 테스트를 실행할 수 있습니다.

테스트 파일 준비

이 기사는 환경 구축의 설명이 메인이므로 testcafe에 대한 자세한 설명은하지 않습니다.
이번에는 실험용으로 testcafe의 README.md에 있는 예을 조금 변경한 다음과 같은 테스트 파일을 준비합니다.

./app/tests/login.ts

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://nuxt:3000`;

test('My first test', async t => {
    await t
        .expect(Selector('#login-btn').exists).ok();
});

톱 페이지에 #login-btn 가 존재하는지를 테스트하기만 하면 됩니다.
(실제로 index.vue에이 ID로 버튼을 만들었습니다.)
포인트는 http://nuxt:3000 네요. nuxt는 docker-compose의 서비스 이름입니다.

테스트 실행

$ docker-compose build
  （略）
$ docker-compose up
Starting src_nuxt_1       ... done
Recreating src_testcafe_1 ... done
Attaching to src_nuxt_1, src_testcafe_1
nuxt_1      |
nuxt_1      | > app[at]1.0.0 dev /usr/src
nuxt_1      | > nuxt
nuxt_1      |
nuxt_1      | ℹ Listening on: http://172.21.0.2:3000/
nuxt_1      | ℹ Preparing project for development
nuxt_1      | ℹ Initial build may take a while
nuxt_1      | ✔ Builder initialized
nuxt_1      | ✔ Nuxt files generated
nuxt_1      | ℹ Compiling Client
nuxt_1      | ℹ Compiling Server
nuxt_1      | ✔ Server: Compiled successfully in 25.18s
nuxt_1      | ✔ Client: Compiled successfully in 27.57s
nuxt_1      | ℹ Waiting for file changes
nuxt_1      | ℹ Memory usage: 303 MB (RSS: 525 MB)
testcafe_1  |  Running tests in:
testcafe_1  |  - Chrome 79.0.3945.88 / Linux 0.0
testcafe_1  |
testcafe_1  |  Getting Started
testcafe_1  |  ✓ My first test
testcafe_1  |
testcafe_1  |
testcafe_1  |  1 passed (5s)

이런 식으로 실행할 수 있습니다.
테스트가 성공했음을 알 수 있습니다.