【Electron】SpectronでメニューのE2Eテストをする

Electronアプリをバージョンアップした時やリファクタリングした時に動かなくなってしまう恐れがあるので、SpectronでメニューのE2Eテストを書いてみました。

ElectronのテスティングフレームワークSpectronはメニューのテストをする機能はないので、spectron-menu-addon-v2パッケージを使って使ってみました。メニューテストを書ける非常にシンプルなパッケージです。 www.npmjs.com

spectron-menu-addon-v2は、spectron-menu-addonパッケージでは対応していないElectronとSpectronのアップデートに対応させてもののようです。 試しに書いてみたテストコードを共有したいと思います。以下のHelpメニューのLearn Moreを押すというのと、メニューのステータスをチェックするというシンプルなテストです。

f:id:moritamorie:20200901000235p:plain

spectron-menu-addon-v2をインストール

Electronアプリにspectron-menu-addon-v2をインストールします。

$ yarn add spectron-menu-add-v2

Jestでテストコードを書く

こんな感じのコードを書いてみました。

// electron-menu-addon-app/src/__tests__/AppTest.js

const Application = require("spectron").Application;
const electronPath = require("electron");
const path = require("path");

const electron = require('electron')
const spectronMenuAddon = require('spectron-menu-addon-v2')

const menuAddon = new spectronMenuAddon.SpectronMenuAddon()

let app;

beforeAll(() => {
  app = menuAddon.createApplication({ args: [path.join(__dirname, '..')], path: electron.toString() })

  return app.start();
}, 15000);

afterAll(function () {
  if (app && app.isRunning()) {
    return app.stop();
  }
});

test("メニューのLearn Moreをクリック", async function () {
  menuAddon.clickMenu('Help', 'Learn More')
});

test("メニューのLearn Moreの状態をチェック", async function () {
  const menuStatus = await menuAddon.getMenuItem('Help', 'Learn More')
  console.log(menuStatus)
  expect(menuStatus.checked).toEqual(false)
  expect(menuStatus.enabled).toEqual(true)
  expect(menuStatus.label).toEqual('Learn More')
  expect(menuStatus.visible).toEqual(true)
});

サンプルコード

作ったプロジェクトのリンクを貼っておきますので、よかったら参考にしてみてください。 github.com