Tufan Tunç
Front end developer. Currently focused on js performance tips and automating front end workflow.
Front-End Developer
<shameless-self-promotion>
</shameless-self-promotion>
twitter.com/tufant
github.com/tufantunc
instagram.com/tuftunc
wtf?
Any application that can be written in JavaScript,
will eventually be written in JavaScript.
- Jeff Atwood / Co-founder of Stackoverflow.com
[] == ![]
// -> true
console.log('b' + 'a' + + 'a' + 'a');
// -> baNaNa
3 - 1
3 + 1
'3' - 1
'3' + 1
// -> 2
// -> 4
// -> 2
// -> 31
wtf?
Code Name:
Project Smurf
... tests are "executable documentation"
Unit Test
Kodu küçük parçalar olarak ele alır ve çalışabilirliğini test eder.
- Anonim
Integration Tests
Kodun sistemle birlikte ele alındığında doğru çalıştığından emin olur.
UI Test (Functional Test)
Bir browser'ı kontrol ederek websitesinde test işlemi uygular.
Unit test araçları kullanılır.
Unit Test
document.createElement("div");
describe("A suite is just a function", function() {
var a;
it("and so is a spec", function() {
a = true;
expect(a).toBe(true);
});
});
UI Test (Functional Test)
// Karma configuration
// Generated on Tue Jun 19 2018 12:16:30 GMT+0300 (Turkey Standard Time)
process.env.CHROME_BIN = require('puppeteer').executablePath();
const path = require('path');
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'./Static/dist/scripts/hurriyet/hurriyet.vendor.min.js',
'./Static/test/tests.webpack.js',
],
// list of files / patterns to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'./Static/test/tests.webpack.js': [ 'webpack', 'sourcemap' ],
},
//webpack configuration with coverage loader
webpack: {
mode: 'development',
devtool: 'inline-source-map',
module: {
rules: [
{
enforce: 'post',
test: /Static\\src\\scripts\\\w+\\.*\.js$/,
loader: 'istanbul-instrumenter-loader',
exclude: [
// 'node_modules'
],
query: {
esModules: true
}
}
]
}
},
// Webpack std out off
webpackServer: { noInfo: true },
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'coverage-istanbul'],
// code coverage configuration
coverageIstanbulReporter: {
reports: [ 'html', 'text-summary', 'json', 'json-summary', 'text' ],
fixWebpackSourcePaths: true,
dir: path.join(__dirname, 'coverage')
},
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: [
//'Chrome',
'MyChromeHeadless'
],
customLaunchers: { //"--window-size=1920,1048"
MyChromeHeadless: {
base: 'ChromeHeadless',
flags: ["--window-size=1920,1048"],
}
},
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
Integration Test
jsdom is a pure-JavaScript implementation of many web standards, notably the WHATWG DOM and HTML Standards, for use with Node.js.
Jest
import TurkishLetter from '../../src/scripts/common/turkish-letter';
describe("TurkishLetter class'ı", function(){
let turkishLetter;
beforeEach(function(){
turkishLetter = new TurkishLetter();
});
it("Türkçe büyük harfleri küçük harf yapabilmeli", function(){
expect(turkishLetter.toLower("İIŞĞÜÖÇ")).toBe("iışğüöç");
});
it("Türkçe küçük harfleri büyük harf yapabilmeli", function(){
expect(turkishLetter.toUpper("iışğüöç")).toBe("İIŞĞÜÖÇ");
});
});
Jest Configuration
jest-setup.js
By Tufan Tunç
Front end developer. Currently focused on js performance tips and automating front end workflow.