www.front-nika.ru Open in urlscan Pro
185.26.122.62  Public Scan

Form analysis
2 forms found in the DOM

POST

<form id="mc4wp-form-1" class="mc4wp-form mc4wp-form-13" method="post" data-id="13" data-name="Хотите быть в курсе новых статей?">
  <div class="mc4wp-form-fields">
    <p>
      <label>Email: </label>
      <input type="email" name="EMAIL" required="">
    </p>
    <input class="subscription-block__button" type="submit" value="Subscribe">
    <div style="display: none;"><input type="text" name="_mc4wp_honeypot" value="" tabindex="-1" autocomplete="off"></div><input type="hidden" name="_mc4wp_timestamp" value="1666190808"><input type="hidden" name="_mc4wp_form_id" value="13"><input
      type="hidden" name="_mc4wp_form_element_id" value="mc4wp-form-1">
  </div>
  <div class="mc4wp-response"></div>
</form>

POST http://www.front-nika.ru/wp-comments-post.php

<form action="http://www.front-nika.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate="">
  <p class="comment-form-comment">
    <textarea placeholder="Write your comment" id="comment" name="comment" cols="42" rows="8" required=""></textarea>
    <label for="comment"><i class="fa fa-pencil"></i></label>
  </p>
  <p class="comment-form-author">
    <input placeholder="Name" id="author" name="author" type="text" value="" size="30">
    <label for="author"><i class="fa fa-user"></i></label>
  </p><!--
-->
  <p class="comment-form-email">
    <input placeholder="Email address" id="email" name="email" type="email" value="" size="30">
    <label for="email"><i class="fa fa-envelope-o"></i></label>
  </p><!--
-->
  <p class="comment-form-url">
    <input placeholder="Website" id="url" name="url" type="url" value="" size="30">
    <label for="url"><i class="fa fa-link"></i></label>
  </p>
  <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment"> <input type="hidden" name="comment_post_ID" value="437" id="comment_post_ID">
    <input type="hidden" name="comment_parent" id="comment_parent" value="0">
  </p>
  <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="0983a34f48"></p>
  <p style="display: none;"></p> <input type="hidden" id="ak_js" name="ak_js" value="1666190809246">
</form>

Text Content

Front Nika
 * RU
 * EN


UNIT TESTING: JASMINE KARMA GULP

January 23, 2017
 * Angular 5 unit testing

You can find a lot of articles about unit tests: why we need this, how to write
etc. But I haven`t found fresh examples about my situation.
I wanted to run jasmine test via karma and build all necessary files with gulp.
So, I decided to publish my final solution.
Let’s look on our characters.


JASMINE

Jasmine – is a behavior-driven development framework for testing JavaScript
code. More about Jasmine. I wrote my test using jasmine.
But how to run it?


KARMA

Karma – tool for running  java-script tests in browsers.

In the karma.conf.js file we point different options: used frameworks, base
path, running-testing browser, files for testing etc.

My file looks quite minimalistic.

view source

print?

1module.exports = function (config) {

2    config.set({

3        basePath: '..',

4        frameworks: ['jasmine' ],

5        reporters: ['progress'],

6        browsers: ['PhantomJS'],

7        logLevel: config.LOG_INFO,

8 

9        plugins: [

10            'karma-coffee-preprocessor',

11            'karma-phantomjs-launcher',

12            'karma-jasmine'

13        ],

14 

15        preprocessors: {

16             'app/scripts/*.coffee': ['coffee'],

17             'app/scripts/widgets/*.coffee': ['coffee'],

18             'app/scripts/widgets/**/*.coffee': ['coffee']

19         }

20 

21    })

22};

basePath – path for getting files.  In this case – coffee files for

preprocessor.

frameworks – all necessary frameworks for test work. In this case it is only
jasmine, because I get other components (client) to connect bower-components
folder using a gulp.

reporters – set reporter, i.e. the view of code result. The default is  progress
– just output results in console.

browsers –  browser in which tests will be run. I installed only PhantomJS,
because there is no sense to run Chrome for performing my tests.

logLevel –   you can choose what will be output in the console. For example, in
config.LOG_INFO  mode only the most relevant information will be shown.  It is a
message about running.

The config.LOG_DEBUG mode will show more detailed information. It is useful for
searching errors.

plugins – there are all necessary plugins for running tests. They are server
plugins, so we can`t get them via bower in gulp file.

‘karma-coffee-preprocessor’ – it is for compiling coffee files into javascript
for running in the browser.
‘karma-phantomjs-launcher’ – it allows to run tests in  PhantomJS browser.
‘karma-jasmine’ – adapter for the Jasmine testing framework.

Finaly, in preprocessors we set all coffee files, which we want to test.

Also, they are indicated with  format [‘coffee’].


GULP

So why do we also need Gulp? It helps to conveniently plug all files from bower
manager.

Below firstly we require gulp, then wiredep for getting all components from
bower_components folder.
Next – require karma-server.

view source

print?

1'use strict';

2 

3var gulp = require('gulp');

4var wiredep = require('wiredep');

5var Server = require('karma').Server;

Let`s build all necessary files. At first bower components, then we will add
the rest.

There are files with functions, which are tested, files for code performing and,
lastly, file with the test.

view source

print?

1var bowerDeps = wiredep({

2    directory: 'app/bower_components',

3    exclude: [],

4    dependencies: true,

5    devDependencies: true

6});

7 

8var testFiles = bowerDeps.js.concat([

9    '.tmp/js/templates.js',

10    'app/scripts/*.coffee',

11    'app/scripts/widgets/*.coffee',

12    'app/scripts/widgets/**/*.coffee',

13    'test/uniFrame/tests.js'

14]);

Further, I define two gulp-tasks. They differ only in the name and value of
singleRun (true/ false).

The latest determines whether karma to finish work after test running or
continue to work watching changes in files.

In this way we will  see in console the result of our changes (was code broken
or not).

 

view source

print?

1gulp.task('test', function (done) {

2    new Server({

3        configFile: __dirname + '/karma.conf.js',

4        singleRun: true,

5        files: testFiles

6    }, function(err){

7        if(err === 0){

8            done();

9        }

10    }).start();

11});

12 

13 

14gulp.task('tdd', function (done) {

15    new Server({

16        configFile: __dirname + '/karma.conf.js',

17        singleRun: false,

18        files: testFiles

19    }, function(err){

20        if(err === 0){

21            done();

22        }

23    }).start();

24});

For running the test we write in console gulp test. For running and watching –
gulp tdd.

Also, I note that file karma.conf.js is in gulp folder (the files above are in
the same).

That is all. Is the result too hard?


CAN WE RUN TEST IN OTHER WAY?

I think you can run everything without Karma.

I ran all via ‘gulp-jasmine-browse’ component, but in this case tests performed
 incorrectly.

I had a problem with asynchronous of their performance. It was crucial for me.

On the other hand, you can run test just via karma, But it was difficult for me
to assemble all necessary files.

In general, the tests can be run in different ways.

It is just one and maybe suboptimal.

 

I’ll appreciate any comments, questions and sharing experiences 🙂


 * JavaScript
 * Useful

 * js
 * unit-testing



Would you like to recive new articles?

Email:




❦
 * Comment

 * 
 * 


CANCEL REPLY




angular js unit-testing


FRONT NIKA

 * 

 * Front Nika