🙂

beforeEachでテストする前の共通動作をまとめる【TestCafe】

2020/11/22に公開

JavaScript

概要

このファイルのテストは最初の動作が全部一緒だからまとめたい！
って思った時に使用したのがbeforeEachオプション。

beforeEachについて詳しい説明はこちら

最初の動作全部一緒ってどゆこと？？

beforeEachを使う前

fixture `My fixture`
    
test("マイページを見るができる,  async (t) => {
// 管理者でログインしてマイページへ移動する処理
  await t.useRole(admin).click("#mypage");
  #中略
});
test("マイページでプロフィールを編集できる,  async (t) => {
// 管理者でログインしてマイページへ移動する処理
  await t.useRole(admin).click("#mypage");
  #以下省略(プロフィールを編集する処理)
});
test("マイページからツイート出来る,  async (t) => {
// 管理者でログインしてマイページへ移動する処理
  await t.useRole(admin).click("#mypage");
   #以下省略(ツイートする処理)
});

例えば上記のコードでは3つのテストを実装しているのですが、
テストする時の条件として(テスト内容は適当)

管理者ユーザーでログインすること
マイページに移動すること
つまり、

// 管理者でログインしてマイページへ移動する処理
  await t.useRole(admin).click("#mypage");

コードではこの部分が、共通の動作となっています。

これ何度も書くのだるくね？って時に使ったのがbeforeEachです。

beforeEachを使用すると以下のようになります。

beforeEachを使用後

fixture `My fixture`.beforeEach(async (t) => {
  // 管理者でログインしてマイページへ移動する処理
  await t.useRole(admin).click("#mypage");
});
    
test("マイページを見るができる,  async (t) => {
  #中略
});
test("マイページでプロフィールを編集できる,  async (t) => {
   #以下省略(プロフィールを編集する処理)
});
test("マイページからツイート出来る,  async (t) => {
   #以下省略(ツイートする処理)
});

こうすることで,このファイルで書いたテストは事前に、

使用前と使用後の動作は同じですが
コード量が減って見た目がだいぶスッキリしますし、
処理をまとめることで、ロールを変更したいとなった時も１箇所の修正で済むので手間もかかりません。

このテストだけbeforeEachを辞めたい。

という場面もあると思います。(僕はありました。)

例：今は**管理者でログインしてマイページへ移動する処理**を共通処理しているが、このテストだけは、**一般ユーザーでログインしてマイページへ移動する処理**に変えたい。

という場合。

こちらはtest.beforeオプションを使う。

test.before使用後

fixture `My fixture`.beforeEach(async (t) => {
  // 管理者でログインしてマイページへ移動する処理
  await t.useRole(admin).click("#mypage");
});

test
    .before( async t => {
        await t
            .useRole(general)
            .click('#mypage');
    })
    ("一般ユーザーがマイページからツイート出来る,  async (t) => {
   #以下省略(ツイートする処理)
});

こんな感じにすると、beforeEachの処理ではなく、beforeオプションの処理が優先されて、
このテストだけは管理者ではなく、
一般ユーザーでログインしてその後のテストを行ってくれます。

まとめ

TestCafeの日本語のドキュメントが少ない。。。
公式ドキュメントがしっかりしているからなんとか進められてます。笑

概要

このテストだけbeforeEachを辞めたい。

まとめ

Discussion