Testing RequireJS Modules in Symfony2
At the present stage, testing occupies a very important position in the programming of any products. Javascript web programming is no exception. In this article we will touch upon such an occasion as testing the RequireJS modules in conjunction with Symfony2 .
This article is a logical continuation of the previous one; therefore, I recommend reading the beginning with the first article in this series, “Optimization of RequireJS Modules in Symfony2” , in order to more clearly understand what is happening here.
So, to be able to test those modules that we create in JavaScript with RequireJS, we will use such a common library for testing JavaScript as Qunit . To do this, as they say on the offsite, you need to create a small html page on which the tests will be displayed. Since we are dealing with Symfony2, we will need to make a simple controller, assign a route to it and pick up a view. Depending on the specific case, this can be done in a separate bundle, or in one of the existing ones. In order not to clutter an article with an extra code, let's assume that there is a WebBundle in which we will do this.
')
The controller will look very simple:
Create an elementary view to display the test results, as recommended in the documentation:
Let's write the route to our controller:
Thus a page for displaying test results is created. It's time to start writing files for the test itself.
How test.js mentioned in our view might look like
In order for this to start it is necessary to modify the HearsayRequireJSBundle configuration specified in the previous article, it will take the form (changes highlighted):
And, accordingly, install the QUnit library, which we refer to in QUnit.location :
At the climax we write our first tests:
Let's write a model that would meet our tests:
Now, if we go to http://example.com/_tests (“example.com” should be replaced with your developer host), we can see something like this:
For a better understanding of the structure and basic preparation of our project, I advise you to read the previous article.
As a result of the uncomplicated work done, we were able to test the RequireJS modules of our javascript application in the context of the Symfony2 framework, both in the “dev” and in the “prod” environment. I want to note that this is only one of the options for possible approaches to testing the JS project, which does not claim to be optimal for various situations at all.
Ps . Our school is about to launch a five-month course of study from the author of the article “I want to become Junior PHP Developer!” And “Symfony 2. Agile development . ” To enroll write to info@digitov.com
PPS To receive our new articles before others or simply not to miss new publications - subscribe to us on Facebook , VK and Twitter .
The authors:
Sergey Kharlanchuk, Senior PHP Developer, SECL GROUP / Internet Sales Technologies
Nikita Semenov, President, SECL GROUP / Internet Sales Technologies
This article is a logical continuation of the previous one; therefore, I recommend reading the beginning with the first article in this series, “Optimization of RequireJS Modules in Symfony2” , in order to more clearly understand what is happening here.
So, to be able to test those modules that we create in JavaScript with RequireJS, we will use such a common library for testing JavaScript as Qunit . To do this, as they say on the offsite, you need to create a small html page on which the tests will be displayed. Since we are dealing with Symfony2, we will need to make a simple controller, assign a route to it and pick up a view. Depending on the specific case, this can be done in a separate bundle, or in one of the existing ones. In order not to clutter an article with an extra code, let's assume that there is a WebBundle in which we will do this.
')
The controller will look very simple:
#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'); } } ?> Create an elementary view to display the test results, as recommended in the documentation:
#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> Let's write the route to our controller:
#src/Acme/WebBundle/Resources/config/routing.yml _tests: pattern: '/_tests' defaults: { _controller: AcmeWebBundle:Test:test } Thus a page for displaying test results is created. It's time to start writing files for the test itself.
How test.js mentioned in our view might look like
#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(); } ); }()); In order for this to start it is necessary to modify the HearsayRequireJSBundle configuration specified in the previous article, it will take the form (changes highlighted):
# 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" And, accordingly, install the QUnit library, which we refer to in QUnit.location :
npm install qunit At the climax we write our first tests:
#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} } ); Let's write a model that would meet our tests:
#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" } }); }); Now, if we go to http://example.com/_tests (“example.com” should be replaced with your developer host), we can see something like this:
For a better understanding of the structure and basic preparation of our project, I advise you to read the previous article.
As a result of the uncomplicated work done, we were able to test the RequireJS modules of our javascript application in the context of the Symfony2 framework, both in the “dev” and in the “prod” environment. I want to note that this is only one of the options for possible approaches to testing the JS project, which does not claim to be optimal for various situations at all.
Ps . Our school is about to launch a five-month course of study from the author of the article “I want to become Junior PHP Developer!” And “Symfony 2. Agile development . ” To enroll write to info@digitov.com
PPS To receive our new articles before others or simply not to miss new publications - subscribe to us on Facebook , VK and Twitter .
The authors:
Sergey Kharlanchuk, Senior PHP Developer, SECL GROUP / Internet Sales Technologies
Nikita Semenov, President, SECL GROUP / Internet Sales Technologies
Source: https://habr.com/ru/post/259901/
All Articles