🎅🏼 🤾🏾 ⚛️ Symfony2でのRequireJSモジュールのテスト 🖖🏿 💪🏿 ⚰️

現在の段階では、テストは製品のプログラミングにおいて非常に重要な位置を占めています。 JavaScriptでのWebプログラミングも例外ではありません。この記事では、 Symfony2と組み合わせてRequireJSモジュールをテストするような1時間のケースに触れます。

この記事は前の記事の論理的な続きであるため、ここで何が起こっているかをよりよく理解するために、このシリーズの最初の記事「Symfony2でのRequireJSモジュールの最適化」を読むことをお勧めします。

そのため、RequireJSを使用してjavascriptで作成したモジュールをテストできるようにするため、javascriptをテストするためのこのような共通ライブラリをQunitとして使用します。これを行うには、彼らがオフサイトで書いているように、進行中のテストが表示される小さなhtmlページを作成する必要があります。 Symfony2を扱っているため、単純なコントローラーを作成し、そのルートを登録してビューを取得する必要があります。特定のケースに応じて、これは別のバンドルで、または既存のバンドルで実行できます。不要なコードで記事を積み重ねないために、これを行うWebBundleがあると仮定します。

コントローラーは非常にシンプルに見えます。

#src/Acme/WebBundle/Controller/TestController.php <?php namespace Acme\WebBundle\Controller; use Symfony\Bundle\FrameworkBundle\Controller\Controller; class TestController extends Controller { public function testAction() { return $this->render('AcmeWebBundle:Test:layout.html.twig'); } } ?>

ドキュメントで推奨されているように、テスト結果を表示する基本ビューを作成しましょう。

 #src/Acme/WebBundle/Resources/views/Test/layout.html.twig <!DOCTYPE html> <html> <head> <title>{% block sylius_title %}QUnit tests{% endblock %}</title> <meta charset="UTF-8"> <!--     QUnit --> <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.15.0.css"/> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <!--    RequireJS  test.js --> {% javascripts '@AcmeWebBundle/Resources/assets/js/test.js' filter='requirejs' %} {{ require_js_initialize({ 'main' : asset_url }) }} {% endjavascripts %} </body> </html>

コントローラーへのルートを登録します。

 #src/Acme/WebBundle/Resources/config/routing.yml _tests: pattern: '/_tests' defaults: { _controller: AcmeWebBundle:Test:test }

したがって、テスト結果を表示するページが作成されます。テスト自体のファイルの書き込みを開始します。

ビューで言及されたtest.jsは次のようになります

 #src/Acme/WebBundle/Resources/assets/js/test.js (function () { "use strict"; //     Qunit,    ,  // «Called start() while already started (QUnit.config.semaphore was 0 already)» QUnit.config.autoload = false; QUnit.config.autostart = false; //require the unit tests. require( ["QUnit", "tests/user/user", "tests/user/user2"], function (QUnit, user) { //   user.run(); user2.run(); //  QUnit. QUnit.load(); QUnit.start(); } ); }());

これを開始するには、前の記事で指定されたHearsayRequireJSBundleの構成を確定する必要があります。形式は次のとおりです（変更が強調表示されています）。

 # app/config/config.yml hearsay_require_js: require_js_src: //cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js initialize_template: HearsayRequireJSBundle::initialize.html.twig #     ,   ,   «»    «web». base_url: js #       base_dir: %kernel.root_dir%/../src/Acme/DemoBundle/Resources/assets/js # Required #       requirejs.config() #      «external: true» paths: main: location: @AcmeDemoBundle/Resources/assets/js/main jquery: location: //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min external: true underscore: location: //cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min external: true backbone: location: //cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min external: true text: location: @AcmeDemoBundle/Resources/assets/js/vendor/text bootstrap: location: //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min external: true test: location: @AcmeWebBundle/Resources/assets/js/test QUnit: location: %kernel.root_dir%/../node_modules/qunitjs/qunit/qunit # shim  shim: bootstrap: deps: [jquery] QUnit: deps: [jquery] exports: "QUnit" test: deps: [QUnit] exports: "test"

それに応じて、 QUnit.locationで参照するQUnitライブラリをインストールします。

 npm install qunit

クライマックスで、最初のテストを作成します。

 #src/Acme/WebBundle/Resources/assets/js/tests/user/user.js define( ["QUnit", "bundles/user/models/user"], function (QUnit, User) { "use strict"; var run = function () { QUnit.module("  Backbone  "); QUnit.test("    ", function () { //    QUnit.expect(3); var user = new User(); //      QUnit.equal(user.get("name"), "User name", "   'User name'"); QUnit.equal(user.get("email"), "example@example.com", "s Email  'example@example.com'"); QUnit.equal(user.get("telephone"), "111-11-11", "s   '111-11-11'"); }); return {run: run} } ); #src/Acme/WebBundle/Resources/assets/js/tests/user/user2.js define( ["QUnit", "bundles/user/models/user"], function (QUnit, User) { "use strict"; var run = function () { QUnit.module("2  Backbone  "); QUnit.test("         ", function () { QUnit.expect(3); //   User     var user = new User({ name: "Vasily Pupkin", email: "vasily@pupkin.com", telephone: "333-22-11" }); //     QUnit.equal(user.get("name"), "Vasily Pupkin", "Name Correct!"); QUnit.equal(user.get("email"), "vasily@pupkin.com", "Email Correct!"); QUnit.equal(user.get("telephone"), "333-22-11", "Telephone Correct!"); }); }; return {run: run} } );

テストを満たすモデルを作成します。

 #src/Acme/WebBundle/Resources/assets/js/bundles/user/models/user.js define(["backbone"], function (Backbone) { "use strict"; return Backbone.Model.extend({ defaults: { name: "User name", email: "example@example.com", telephone: "111-11-11" } }); });

ここで、アドレスhttp://example.com/_tests（「example.com 」は開発ホストに置き換える価値があります）にアクセスすると、次のようなものが表示されます。

プロジェクトの構造と基本的な準備をよりよく理解するには、前の記事を読むことをお勧めします。

いくつかの簡単な作業の結果、Symfony2フレームワークのコンテキストで、「乙女」環境と「製品」環境の両方で、javascriptアプリケーションのRequireJSモジュールをテストする機会を得ました。これは、JSプロジェクトをテストするための可能なアプローチのオプションの1つにすぎず、さまざまな状況に最適なふりをするものではないことに注意してください。

PS 「ジュニアPHP開発者になりたい！」および「Symfony 2. Flexible Development」の記事の著者から、5か月間のトレーニングコースが当校で始まります。サインアップするには、 info @ digitov.comに書き込みます

PPS新しい記事を他の記事よりも早く受信するため、または単に新しい出版物を見逃さないために-Facebook 、 VK 、およびTwitterで購読してください。

著者：
SECL GROUP / Internet Sales Technologies 、シニアPHP開発者、Sergey Harlanchuk
Nikita Semenov、 SECL GROUP社長/ インターネットセールステクノロジーズ

Symfony2でのRequireJSモジュールのテスト

More articles: