The document discusses testing and development tools and workflows for JavaScript applications. It covers testing frameworks like Jasmine and Mocha, test runners like Karma, dependency managers like npm and webpack, and task runners like Gulp. It also discusses testing techniques like unit testing, integration testing, and behavior-driven development. Code examples demonstrate using these tools to test JavaScript code and build bundles for deployment.

1. От экспериментов с инфраструктурой
до внедрения в продакшен
Дмитрий Махнёв

2. Работаю в ok.ru
Делаю m.ok.ru
О себе

4. Автоматизация
Концентрация на новых задачах
Снижение порога входа
Улучшение стабильности

7. .sidebar {
...
}
.sidebar.__active {
...
}
.sidebar_item {
...
}
.sidebar_item.__selected {
...
}
∞
∞

8. ∞
∞
/*
sidebar __active
sidebar_item (__selected)
*/

9. CSSG
.sidebar {
...
}
.sidebar.__active {
...
}
.sidebar_item {
...
}
.sidebar_item.__selected {
...
}
/*
sidebar __active
sidebar_item (__selected)
*/

11. HTML Parse
CSSG Tree
CSSG Render

13. HTML Parse
CSSG Tree
CSSG Render
CSS Parse …
Write in File

15. HTML Parse
<div class="sidebar __active">
<div class="sidebar_item">Item 1</div>
<div class="sidebar_item __selected">Item 2</div>
<div class="sidebar_item">Item 3</div>
<div class="sidebar_item">Item 4</div>
<div class="sidebar_item">Item 5</div>
</div>

16. Testing

20. describe('math test', function () {
it('sum works correct', function () {
expect(sum(1, 1)).toBe(2);
});
it('difference works correct', function () {
expect(difference(1, 1)).toBe(0);
});
});

21.
describe('tests types', function () {
it('sync', function () {
expect(true).toBeTruthy();
});
it('async', function (done) {
setTimeout(function () {
expect(true).toBeTruthy();
done();
}, 100);
});
});

22. Link coming soon…

23. Unit Testing

24. Test Driven Development (TDD)

25. Black Box Testing
✓ Testing

26. describe('password security level', function () {
it('50%', function () {
expect(passwordSecurityLevel('qwerty')).toBe(50);
});
});
Testing Private Methods

27. Black
Box
Input Output

28. describe('one div with attributes', function () {
var simpleDOMResult = parse(
'<div class="block" data-foo="bar"></div>'
);
var div = simpleDOMResult.childNodes[0];
defaultDivTests(div);
});
Testing Private Methods

29. /**
*
* @param {ContextOfParse} contextOfParse
* @param {String} char
*/
processings[TEXT] = function (contextOfParse, char) {
addCharForBuffer(contextOfParse, char);
switch (char) {
case '<':
contextOfParse.state = TAG_START;
break;
default:
contextOfParse.textBuffer += char;
}
};

30. /*@defaultTesting.exports*/
processingsExport.processingText = processings[TEXT];
/*@/defaultTesting.exports*/

32. /**
*
* @param {String} xml
* @return {Object} simpleDOM
*/
module.exports = function (xml) {
var contextOfParse = new ContextOfParse(),
i = 0,
iMax = xml.length,
result;
for (; i < iMax; i += 1) {
processings[contextOfParse.state](contextOfParse, xml.charAt(i));
}
processingResultState(contextOfParse);
result = contextOfParse.result;
contextOfParse.destructor();
return result;
};

33. Tests Runners
✓ Testing
✓ Black Box Testing

38. Karma — Test Runner for JavaScript
Link coming soon…

39. Runner Workflow
var config = readConfig();
config.browsers.each(function(browser){
var result = startBrowser(browser, config.code);
console.output(processingResult(result));
});

42. Dependency manager
✓ Testing
✓ Black Box Testing
✓ Tests Runners

45. require('module');

46. Package Managers
Front-endBack-end & Console

49. require('../../../../src/default-lib');

51. Link coming soon…

52. var cycle = require('default-lib').cycle;

54. var webpack = require('webpack');
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
}
};
webpack.config.js

55. var defaultLib = {};
defaultLib.getGlobal = require('./utils/getGlobal');
defaultLib.typesDetection = require('./utils/typesDetection');
defaultLib.getObjectKeys = require('./utils/getObjectKeys');
defaultLib.getObjectLength = require('./utils/getObjectLength');
defaultLib.cycleKeys = require('./utils/cycle/cycleKeys');
defaultLib.cycle = require('./utils/cycle/cycle');
defaultLib.reversiveCycle = require('./utils/cycle/reversiveCycle');
defaultLib.getObjectSafely = require('./utils/getObjectSafely');
defaultLib.onload = require('./utils/onload');
module.exports = defaultLib;
Entry Point

56. /* 0 */
/***/ function(module, exports, __webpack_require__) {
document.write(__webpack_require__(1));
document.body.addEventListener('click', function () {
});
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
module.exports = 'It works from content.js';
/***/ }
Part of webpack Bundle

58. webpack: {
resolve: {
root: [
path.join(__dirname, 'bower_components'),
path.join(__dirname, 'src')
]
},
plugins: [
new webpack.ResolverPlugin(
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(
'bower.json',
['main']
)
)
]
}
webpack for karma.config.js

59. files: [
'tests/specs/simple-dom.js',
'tests/specs/modules/nodes.js',
'tests/specs/modules/parse/defaultTesting.exports.simpleDOM.parse/'
+ 'defaultTesting.exports.simpleDOM.parse.js',
'tests/specs/modules/parse/defaultTesting.exports.simpleDOM.parse/'
+ 'contextOfParse.js',
'tests/specs/modules/parse/defaultTesting.exports.simpleDOM.parse/'
+ 'microhelpers/**/*.js',
'tests/specs/modules/parse/defaultTesting.exports.simpleDOM.parse/'
+ 'builders/**/*.js',
'tests/specs/modules/parse/defaultTesting.exports.simpleDOM.parse/'
+ 'processings/**/*.js',
'tests/specs/modules/parse/parse.js',
'tests/specs/modules/selectors/parseSelector.js'
]

60. var path = require('path');
var webpack = require('webpack');
var bowerConfig = require('./bower');
module.exports = {
entry: path.resolve(bowerConfig.main),
output: {
path: path.resolve(bowerConfig.dist),
filename: bowerConfig.umdName + '.js',
libraryTarget: 'umd',
library: bowerConfig.umdName
},
plugins: [
new webpack.ResolverPlugin(
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(
'bower.json',
['main']
)
),
new webpack.optimize.UglifyJsPlugin()
]
};
webpack.config.js

61. /*@defaultTesting.exports*/
processingsExport.processingText = processings[TEXT];
/*@/defaultTesting.exports*/

62. /**
*
* @param {ContextOfParse} contextOfParse
* @param {String} char
*/
processings[TEXT] = function (contextOfParse, char) {
addCharForBuffer(contextOfParse, char);
switch (char) {
case '<':
contextOfParse.state = TAG_START;
break;
default:
contextOfParse.textBuffer += char;
}
};
/*@defaultTesting.exports*/
processingsExport.processingText = processings[TEXT];
/*@/defaultTesting.exports*/

63. /* 0 */
/***/ function(module, exports, __webpack_require__) {
document.write(__webpack_require__(1));
document.body.addEventListener('click', function () {
});
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
module.exports = 'It works from content.js';
/***/ }
Part of webpack Bundle

65. webpack Workflow
var config = readConfig();
var files = [config.entry];
var bundleParts = [];
while (files.length !== 0) {
var file = loadFile(files.shift());
var ast = parseToASR(
file,
function (linkOnFile) {
files.push(linkOnFile)
}
);
bundleParts.push(ast);
}
createBundle(bundleParts);

66. module: {
loaders: [
//loader removes code for testing
{
test: /^.*$/,
loader: 'regexp',
rules: [
{
'for': /regExpRule/g,
'do': ''
}
]
}
]
}
webpack.config.js loader

67. /*@defaultTesting.{{mode}}*/
/*@/defaultTesting.{{mode}}*/

68. Tasks Runner
✓ Testing
✓ Black Box Testing
✓ Tests Runners
✓ Dependency manager

69. Tasks Runners
Synchronously
I/Oⁿ
Streams

70. JS
Run Tests
Build bundle

71. JS
Run Tests
Build bundle Generate Doc
Commit Publish Publish × 2

72. gulp-run-sequence
var runSequence = require('gulp-run-sequence');
gulp.task('default', function () {
runSequence(
'build:test',
['build:dist', 'build:commit', 'build:docs'],
'build:publish'
);
});

73. Environment
✓ Testing
✓ Black Box Testing
✓ Tests Runners
✓ Dependency manager
✓ Tasks Runner

74. npm i

76. it('key input add 2 symbols ', function (done) {
define('',
[
'/res/js/modules/dom/domTraverse.js',
'/res/js/modules/inputWithCounter.js'
],
function (traverse, inputWithCounter) {
var initedInput = initInputWithCounterFor(
inputWithCounter,
tmpl2CountersAndWrapper
);
var counterTextNode = findCounter(initedInput, 0, traverse.getTextNode);
var counter2TextNode = findCounter(initedInput, 1, traverse.getTextNode);
var instance = initedInput.instance;
var input = instance.input;
var startValueLength = instance.valueLength;
var valueLength;
effroi.mouse.focus(input);
effroi.keyboard.hit('1', '1');
valueLength = instance.valueLength;
expect(valueLength - startValueLength).toBe(2);
expect(valueLength).toBe(+counterTextNode.nodeValue);
expect(valueLength).toBe(+counter2TextNode.nodeValue);
done();
}
);
});
inputWithCounter Test From m.ok.ru

77. var keyboard = require('effroi').keyboard;
keyboard.focus(element);
keyboard.hit('a');
keyboard.hit('b','c','d');
keyboard.combine(keyboard.CTRL, 'v');

78. describe('angularjs homepage todo list', function () {
it('should add a todo', function () {
browser.get('http://www.angularjs.org');
element(by.model('todoText')).sendKeys('write a protractor test');
element(by.css('[value="add"]')).click();
var todoList = element.all(by.repeater('todo in todos'));
expect(todoList.count()).toEqual(3);
expect(todoList.get(2).getText()).toEqual('write a protractor test');
});
});

79. wallaby.js

83. Ссылки
http://bit.ly/fdc_dm