gutenbergをローカルで起動したり、JavaScriptのテストをやってみる

最近Reactを触ることが多く、gutenbergでどういうテストを書いているか気になったのでちょっと触ってみました。

ソースの取得

まずはソースをGitHubから取得します。

$ git clone git@github.com:WordPress/gutenberg.git
$ cd gutenberg

ローカル環境のセットアップ

gutenbergには、Dockerベースの検証環境が同梱されています。
Dockerが入っている環境であれば、以下のコマンドを実行するだけで起動できます。

$ ./bin/setup-local-env.sh
<中略>
0a00bd0e9ca6: Pull complete 
Digest: sha256:6733d323ad850a4f354fb615271c8ab38861d268e8fb9f16b7fb7fa68afda061
Status: Downloaded newer image for wordpress:cli
sendmail: can't connect to remote host (127.0.0.1): Connection refused
Warning: Unable to create directory wp-content/uploads/2017/11. Is its parent directory writable by the server?
Success: WordPress installed successfully.
Plugin 'gutenberg' activated.
Success: Activated 1 of 1 plugins.

これでローカルでのWP環境がセットアップされました。

他のプロジェクトで使用していなければ、https://localhost:8888/でアクセスできます。

IDはadmin、passwordはpasswordでログインできます。

JSのテストを準備する

ここも２コマンドでテストできます。

$ npm install
$ npm test
<中略>

 PASS  editor/utils/mobile/test/mobile.js
  disableIsSidebarOpenOnMobile()
    ✓ should disable isSidebarOpen on mobile and keep other properties as before (5ms)
    ✓ should keep isSidebarOpen on non-mobile and keep other properties as before (2ms)

 PASS  blocks/api/raw-handling/test/is-inline-content.js
  stripWrappers
    ✓ should be inline content (12ms)
    ✓ should not be inline content (15ms)

Test Suites: 1 skipped, 89 passed, 89 of 90 total
Tests:       38 skipped, 885 passed, 923 total
Snapshots:   0 total
Time:        34.604s
Ran all test suites.

Node.js v6.10.0 (npm v4.5.0)で実行するとエラーがでましたが、LTSなバージョンに切り替えるとちゃんと動きます。

テストカバレッジを確認する

npm run test-unit:coverageを実行すると、テストのカバレッジを確認できます。

Test Suites: 1 skipped, 91 passed, 91 of 92 total
Tests:       38 skipped, 899 passed, 937 total
Snapshots:   7 passed, 7 total
Time:        52.317s
Ran all test suites.
-----------------------------------------------|----------|----------|----------|----------|----------------|
File                                           |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
-----------------------------------------------|----------|----------|----------|----------|----------------|
All files                                      |    32.19 |    31.72 |    32.24 |    35.35 |                |
 blocks                                        |      100 |      100 |      100 |      100 |                |
  index.js                                     |      100 |      100 |      100 |      100 |                |
 blocks/alignment-toolbar                      |    16.67 |        0 |        0 |    16.67 |                |
  index.js                                     |    16.67 |        0 |        0 |    16.67 | 26,29,30,32,35 |
 blocks/api                                    |    95.29 |    92.11 |    96.61 |    95.94 |                |
  categories.js                                |      100 |      100 |      100 |      100 |                |
  factory.js                                   |    83.33 |    74.19 |    81.82 |    86.49 |... 107,117,125 |