1
BASEURL='stable版モックのURL' CHANGEURL='開発中のローカルURL' ava ui/diffTest.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import Nightmare from 'nightmare';
import gm from 'gm';
import mkdirp from 'mkdirp';
import path from 'path';
import test from 'ava';
// host設定
const baseUrl = process.env.BASEURL;
const changeUrl = process.env.CHANGEURL;
// 対象ページ一覧取得
const pages = ['対象ページの配列'];
// ディレクトリ設定
const rootDir = path.resolve('.tmp/screenshot');
const baseDir = path.resolve(rootDir, './base');
const changeDir = path.resolve(rootDir, './change');
const diffDir = path.resolve(rootDir, './diff');
// ページ単体テスト本体
pages.forEach((page) => {
  // 負荷が高いため、並列ではなく、直列実行
  test.serial(`ui/diff#${changeUrl}/${page}`, (t) => {
    // ページディレクトリ 設定
    const basePath = path.parse(path.resolve(baseDir, `./${page}`));
    const changePath = path.parse(path.resolve(changeDir, `./${page}`));
    const diffPath = path.parse(path.resolve(diffDir, `./${page}`));
    const baseImg = `${path.format(basePath)}.png`;
    const changeImg = `${path.format(changePath)}.png`;
    const diffImg = `${path.format(diffPath)}.png`;
    [basePath, changePath, diffPath].forEach((val) => {
      mkdirp(val.dir);
    });
    // nightmare オプション設定
    const nmOptions = {
      switches: {
        'ignore-certificate-errors': true
      }
    };
    // graphicsmagick オプション設定
    const gmOptions = {
      file: diffImg,
      highlightStyle: 'xor',
      tolerance: 0
    };
    // screensize 取得
    const getScreenSize = () => {
      return new Promise((resolve) => {
        const body = document.querySelector('body');
        resolve({
          height: body.scrollHeight,
          width: body.scrollWidth
        });
      });
    };
    // base 画像出力
    const outputBaseImg = () => {
      return new Promise((resolve, reject) => {
        const nightmare = Nightmare(nmOptions);
        nightmare
          .on('page', (type, err) => {
            reject(new Error(err));
          })
          .goto(`${baseUrl}/${page}`)
          .wait(5000)
          .evaluate(getScreenSize)
          .then((dimensions) => {
            return nightmare
              .viewport(dimensions.width, dimensions.height)
              .screenshot(baseImg);
          })
          .then(() => {
            nightmare.end(() => {
              resolve();
            });
          })
          .catch(reject);
      });
    };
    // change 画像出力
    const outputChangeImg = () => {
      return new Promise((resolve, reject) => {
        const nightmare = Nightmare(nmOptions);
        nightmare
          .on('page', (type, err) => {
            reject(new Error(err));
          })
          .goto(`${changeUrl}/${page}`)
          .wait(5000)
          .evaluate(getScreenSize)
          .then((dimensions) => {
            return nightmare
              .viewport(dimensions.width, dimensions.height)
              .screenshot(changeImg);
          })
          .then(() => {
            nightmare.end(() => {
              resolve();
            });
          })
          .catch(reject);
      });
    };
    // diff 画像出力
    const outputDiffImg = () => {
      return new Promise((resolve, reject) => {
        gm.compare(baseImg, changeImg, gmOptions, (err) => {
          if (err) {
            reject(err);
          } else {
            resolve();
          }
        });
      });
    };
    // 実行
    return Promise.all([outputBaseImg(), outputChangeImg()])
      .then(outputDiffImg)
      .then(() => {
        t.pass();
      })
      .catch((err) => {
        t.ifError(err);
      });
  });
});