Тестирование:

гайд  от "чайников"

"...все, что мы хотели знать, но боялись спросить - теперь готовы рассказать вам..."

Что можно тестировать во фронтенде?

• функциональность
• надежность
• практичность
• эффективность
• сопровождаемость
• переносимость

Что же можно тестировать на клиентской стороне:

• UI
• JS
• Производительность

Как можно тестировать

OK, Google?

Уровни тестирования:

• Модульное 

• Интеграционное 
• Системное

Объекты тестирования

• Функциональное
• Регрессионное
• Конфигурационное
• Производительности

Jasmine

Jasmine

Jasmine

function helloWorld() {
  return "Hello world!";
}

describe("Hello world", function() {
  it("says hello", function() {
    expect(helloWorld())
      .toEqual("Hello world!");
  });
});

Jasmine

• describe - определение набора тестов

• it - определение теста внутри набора тестов

• expect - ожидания

Good Result

SpecRunner.html

Good Result

Jasmine matchers

И ещё...

Jasmine async

 describe('Асинхронно', function() {
     var a, async;
     a = 0;
     async = function() {
         return setTimeout((function() {
          return a = 5;
         }), 1000);
     });
     return it('асинхронное выполнение кода', function() {
         runs(function() {
            return async();
         });
         return waitsFor((function() {
            return a === 5;
         }), 'значение должно быть изменено', 3000);
     });
 });

Jasmine features

http://jasmine.github.io/

Jasmine плагины

• Jasmine jQuery
• Underscore Matchers for Jasmine
• AngularJS Matchers

Gremlins

Gremlins

Имитация действий пользователя 

• заполнение форм
• клики
• нажатие на кнопки
• скроллинг
   

Gremlins

var horde = gremlins.createHorde()
horde.unleash();

gremlins.createHorde()
  .gremlin(gremlins.species.formFiller())
  .gremlin(gremlins.species.clicker()
    .clickTypes(['click']))
  .gremlin(gremlins.species.scroller())
  .gremlin(function() {
    window.$ = function() {};
  })
  .unleash();

Gremlins

логи в консоли

gremlin formFiller input 5 in <input type=​"number" 
    name=​"age">​
gremlin formFiller input 
    pzdoyzshh0k9@o8cpskdb73nmi.r7r 
    in <input type=​"email" name=​"email">​
gremlin clicker    click at 1219 301
gremlin scroller   scroll to 100 25
...

Gremlins

mogwais

Phantomas

grunt-phantomas

npm install grunt-phantomas

phantomas: {
   gruntSite : {
      options : {
        indexPath : './phantomas/',
        options   : {},
        url       : 'www.google.com',
        buildUi   : true
      }
   }
}

$ grunt

options : {
  assertions : {
    assetsWithQueryString : 3,     
    bodyHTMLSize          : 10500, 
    jsErrors              : 0
  },
  indexPath  : './phantomas/',
  url        : 'www.google.com/'
}

Параметры

• options
• indexPath
• assertions
• additionalStylesheet
• output
• group
• url

Options

• viewport : [width]x[height]
• verbose
• user-agent : 'Custom user agent'
• disable-js
• analyze-css
• screenshot : [file name]
• wait-for-selector : [CSS selector]

CasperJS

$ npm install casperjs

var casper = require('casper').create();

casper.start('http://casperjs.org/', 
    function() {
    this.echo(this.getTitle());
});

casper.run();

$ casperjs sample.js

CasperJS, a navigation scripting and
 testing utility for PhantomJS 
 and SlimerJS

var links = [];
var casper = require('casper').create();

function getLinks() {
    var links = document
        .querySelectorAll('h3.r a');
    return Array.prototype.map.call(links, 
        function(e) {
            return e.getAttribute('href');
     });
}

casper.start('http://google.com/', function() {
    this.fill('form[action="/search"]', 
        { q: 'casperjs' }, true);
});

casper.then(function() {
    links = links.concat(this
     .evaluate(getLinks));
});

casper.run(function() {
    this.echo(links.length + ' links found:');
    this.echo(' - ' + links.join('\n - '))
      .exit();
});

$ casperjs googlelinks.js
19 links found:
 - https://github.com/n1k0/casperjs
 - https://github.com/n1k0/casperjs/issues/2
 - https://github.com/n1k0/casperjs/tree/master/samples
 - https://github.com/n1k0/casperjs/commits/master/
 - http://www.facebook.com/people/Casper-Js/100000337260665
 - http://www.facebook.com/public/Casper-Js
 - http://hashtags.org/tag/CasperJS/
 - http://www.zerotohundred.com/newforums/members/casper-js.html
 - http://www.yellowpages.com/casper-wy/j-s-enterprises
 - http://local.trib.com/casper+wy/j+s+chinese+restaurant.zq.html
 - http://www.phantomjs.org/
........

• exitOnError
• onAlert
• onError
• onLoadError
• onPageInitialized
• onResourceRequested
• onTimeout
• safeLogs
• silentErrors
• stepTimeout
• timeout
• verbose
• viewportSize
• retryTimeout
• waitTimeout
• back()
• click()

• clickLabel()
• clear()
• debugHTML()
• debugPage()
• die()
• download()
• each()
• eachThen()
• echo()
• exit()
• exists()
• fetchText()
• forward()
• log()
• fill()
• fillSelectors()
• fillLabels()

• getCurrentUrl()
• getFormValues()
• getGlobal()
• getHTML()
• getPageContent()
• getTitle()
• mouseEvent()
• open()
• reload()
• repeat()
• resourceExists()
• run()
• scrollTo()
• setHttpAuth()
• start()
• status()
• then()

BackstopJS

npm install backstopjs
cd node_modules/backstopjs

npm install -g casperjs
npm install phantomjs
npm install -g gulp

$ gulp genConfig

  "viewports": [
    {
      "name": "phone",
      "width": 320,
      "height": 480
    },
    {
      "name": "tablet_v",
      "width": 568,
      "height": 1024
    },
    {
      "name": "tablet_h",
      "width": 1024,
      "height": 768
    }
  ],

  "scenarios": [
    {
      "label": "Test",
      "url": "../../index.html",
      "hideSelectors": [],
      "removeSelectors": [
        "#carbonads-container"
      ],
      "selectors": [
        ".jumbotron",      
        "footer"
      ]
    }
  ],

  "paths": {
    "bitmaps_reference": "../../backstop_ref",
    "bitmaps_test": "../../backstop_test",
    "compare_data": "../../compare.json"
  },
  "engine": "phantomjs",
  "report": ["CLI", "browser"]

$ gulp reference

$ gulp test

./backstop_data/casper_scripts

"onReadyScript": "filename.js"

module.exports = function(casper, scenario) {
  casper.echo( 'Clicking button' );
  casper.click( '.toggle' );
}

Как начать?

Зачем я это делаю?

• Решение задачи

• Свои интересы

• От простого с сложному

Все равно не получается начать?

1. Создать форму "Обратная связь"
2. Добавить валидацию для полей формы
3. Создать тест для проверки валидации с различными данными
4. Создать тест для проверки визуальной работы валидации формы
5. Создать тест который покажет повторяющиеся и неиспользуемые селекторы

1. Добавить на страницу таблицу в которую будут сохраняться данные из формы
2. Создать тест, который проверит, что страница не "едет" при больших размерах текстов
3. Создать тест, который проверит что бы записей в таблице было не больше 20
4. Создать тест который покажет среднее количество запросов страницы, замеряя параметры каждые 5 секунд в течении одной минуты
5. Проверить возникновение JS ошибок

1. Приготовить чай с печеньками
2. Протестировать
3. Наслаждаться жизнью :)