The document discusses testing and development environments and tools. It covers topics like unit testing frameworks, test runners, dependency management with package managers, bundling code with webpack, and using tasks runners like Gulp. It provides examples of using these tools like writing unit tests with Jasmine/Mocha, configuring webpack, and defining Gulp tasks.

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

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

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

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

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

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

12. HTML Parse
CSSG Tree
CSSG Render

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

16. 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>

17. Testing

21. 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);
});
});

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

23. Link coming soon…

24. Unit Testing

25. Test Driven Development (TDD)

26. Black Box Testing
✓ Testing

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

28. Black
Box
Input Output

29. 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

30. /**
*
* @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;
}
};

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

33. /**
*
* @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;
};

34. Tests Runners
✓ Testing
✓ Black Box Testing

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

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

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

46. require('module');

47. Package Managers
Front-endBack-end & Console

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

52. Link coming soon…

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

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

56. 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

57. /* 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

59. 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

60. 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'
]

61. 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

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

63. /**
*
* @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*/

64. /* 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

66. 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);

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

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

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

70. Tasks Runners
Synchronously
I/Oⁿ
Streams

71. JS
Run Tests
Build bundle

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

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

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

75. npm i

77. 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

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

79. 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');
});
});

80. wallaby.js

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