3

ページ タイトルをクリックすると、ページ コンテンツの表示が切り替わる単純なページがあるとします (現実的ですか? いいえ、DOM 要素を含む単純なテストです)。HTML と JS の実装については、頭の中で理解できると思いますので割愛します。

私はジャスミンを使用してこれをテストしようとしていますが、主にコンテキストの分離 (このテストが兄弟とどのように異なるか) とトリガー (テストされているアクションと結果のキャプチャ) に関するコードの重複の問題に遭遇しています。 )

describe("Home", function () {
    describe("Selecting the page title", function () {
        beforeEach(function () {
            loadFixtures('Home.fixture.htm');
        });

        describe("when page content is visible", function () {
            it("should hide page content", function () {
                $('#pageTitle').trigger('click');

                expect($('#pageContent')).toBeHidden();
            });
        });

        describe("when page content is hidden", function () {
            it("should show page content", function () {
                $('#pageContent').hide();
                $('#pageTitle').trigger('click');

                expect($('#pageContent')).toBeVisible();
            });
        });
    });
});

コードの重複を避けるために、トリガー(この場合は「クリック」の発生) をコンテキスト(共有 = フィクスチャの読み込み、特定 = ページ コンテンツの非表示) から分離するにはどうすればよいですか?

それが役立つ場合は、MSpec (.NET のコンテキスト/仕様フレームワーク) で行うことを次に示します。

[Subject("Home")]
class when_selecting_the_page_title_when_page_content_is_visible : HomeContext
{
    It should_hide_page_content = () =>
        // Assert that page content is hidden
}

[Subject("Home")]
class when_selecting_the_page_title_when_page_content_is_hidden : HomeContext
{
    Establish context = () =>
        // Hide page content

    It should_show_page_content = () =>
        // Assert that page content is visible
}

class HomeContext
{
    Establish context = () =>
        // Load the fixture

    Because of = () =>
        // Fire the event
}

免責事項: ここでは、C# と Javascript の違いや MSpec との違いを議論しようとしているわけではありません。コードの再利用の例を示しているだけです。また、例を単純にするために、MSpec の一部の機能を省略しています。

4

1 に答える 1

4

そのため、describeブロックはネストbeforeEach()でき、そのレベル以下にのみ適用される任意のレベルで呼び出すことができます。

テストでのコードの重複についてはあまり心配しません。間接参照が多いほど、読みやすさが低下します。テストの冗長性は、当然のことながら、通常は良いことです。コードのごく一部にのみ適用される特定のマクロ関数が多すぎると、変更方法を理解できる人がほとんどいない、巨大な脆弱なテストが発生します。

describe("Home", function () {
    describe("Selecting the page title", function () {
        beforeEach(function () {
            loadFixtures('Home.fixture.htm');
        });

        describe("when page content is visible", function () {
            beforeEach(function() {
                $('#pageTitle').trigger('click');
            });

            it("should hide page content", function () {
                expect($('#pageContent')).toBeHidden();
            });
        });

        describe("when page content is hidden", function () {
            beforeEach(function() {
                $('#pageContent').hide();
                $('#pageTitle').trigger('click');
            });

            it("should show page content", function () {
                expect($('#pageContent')).toBeVisible();
            });
        });
    });
});

または、必要に応じて、そのdescribeブロックにヘルパーマクロ関数を設定しますが、これは非常に高速になる可能性があります。それはあなたのテストにあまりにも多くの論理を入れ始めます。最終的には、テスト用のテストが必要になります。Yodawg..。

describe("Home", function () {
    describe("Selecting the page title", function () {
        beforeEach(function () {
            this.loadHomeFixture = function(options) {
                options = options || {};
                loadFixtures('Home.fixture.htm');
                if (options.hidden) {
                    $('#pageContent').hide();
                }
            };
        });

        describe("when page content is visible", function () {
            it("should hide page content", function () {
                this.loadHomeFixture({ hidden: false });
                expect($('#pageContent')).toBeHidden();
            });
        });

        describe("when page content is hidden", function () {
            it("should show page content", function () {
                this.loadHomeFixture({ hidden: true });
                expect($('#pageContent')).toBeVisible();
            });
        });
    });
});

また、最初に州ごとにテストを整理し、次に機能ごとに整理することもあります。初期状態をアクションからより明確に分離できるようにします。

アウトライン形式でこれを行う方法は次のとおりです。

  • 家
    • beforeEach: load home fixture
    • ページコンテンツが表示されているとき
      • beforeEach: make content visible
      • ページタイトルの選択
        • beforeEach: click page title
        • ページコンテンツを非表示にする必要があります
          • assert page content is hidden
      • ページコンテンツが表示されているときに何かを行う他のアクション
    • ページコンテンツが非表示の場合
      • beforeEach: make content hidden
      • ページタイトルの選択
        • beforeEach: click page title
        • ページコンテンツを表示する必要があります
          • assert page content is visible
      • ページコンテンツが非表示になっているときに何かを行う他のアクション

この構造により、初期状態に基づいてドリルインできるため、ページの可視性に依存する機能が他にもある場合は、新しいテストをドロップできる状態設定の場所がすでにあるため、それらを簡単にテストできます。

テストはマトリックス（状態×機能）のようなものですが、ほとんどのテストシステムはツリーを提供します。そのツリーから状態または機能のどちらで分岐するかは、ある程度あなた次第であり、どちらがより複雑であるかによって異なります。

于 2012-08-01T00:30:35.323 に答える